Trong bài viết này Hãy cùng webaffiliatevn.com tìm hiểu Thẻ Meta trong HTML nhé
HTML cho phép bạn chỉ định siêu dữ liệu – thông tin quan trọng bổ sung về tài liệu theo nhiều cách khác nhau. Các yếu tố META có thể được sử dụng để bao gồm các cặp tên / giá trị mô tả các thuộc tính của tài liệu HTML, chẳng hạn như tác giả, ngày hết hạn, danh sách các từ khóa, tác giả tài liệu, v.v.
Thẻ <meta> được sử dụng để cung cấp thông tin bổ sung như vậy. Thẻ này là một phần tử trống và do đó không có thẻ đóng nhưng nó mang thông tin trong các thuộc tính của nó.
Bạn có thể bao gồm một hoặc nhiều thẻ meta trong tài liệu của mình dựa trên thông tin bạn muốn giữ trong tài liệu của mình nhưng nói chung, thẻ meta không ảnh hưởng đến sự xuất hiện vật lý của tài liệu, vì vậy, từ quan điểm xuất hiện, không có vấn đề gì nếu bạn đưa vào họ hay không.
1. Thêm thẻ Meta trong html vào tài liệu của bạn
Bạn có thể thêm siêu dữ liệu vào các trang web của mình bằng cách đặt các thẻ <meta> bên trong tiêu đề của tài liệu được thể hiện bằng các thẻ <head> và </ head> . Thẻ meta có thể có các thuộc tính sau ngoài các thuộc tính cốt lõi:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | name
Tên cho tài sản. Có thể là bất cứ điều gì. Ví dụ bao gồm, từ khóa, mô tả, tác giả, sửa đổi, trình tạo, vv |
| 2 | content
Chỉ định giá trị của tài sản. |
| 3 | scheme
Chỉ định sơ đồ để giải thích giá trị của thuộc tính (như được khai báo trong thuộc tính nội dung). |
| 4 | http-equiv
Được sử dụng cho tiêu đề thư phản hồi http. Ví dụ: http-equiv có thể được sử dụng để làm mới trang hoặc để đặt cookie. Các giá trị bao gồm loại nội dung, hết hạn, làm mới và đặt cookie. |
2. Chỉ định từ khóa
Bạn có thể sử dụng thẻ <meta> để chỉ định các từ khóa quan trọng liên quan đến tài liệu và sau đó các từ khóa này được sử dụng bởi các công cụ tìm kiếm trong khi lập chỉ mục trang web của bạn cho mục đích tìm kiếm.
Ví dụ:
Sau đây là một ví dụ, nơi chúng tôi đang thêm HTML, Thẻ meta, Siêu dữ liệu làm từ khóa quan trọng về tài liệu.
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Xin chào!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XWdWzQr” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/XWdWzQr’>XWdWzQr</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
3. Mô tả tài liệu
Bạn có thể sử dụng thẻ <meta> để mô tả ngắn về tài liệu. Điều này một lần nữa có thể được sử dụng bởi các công cụ tìm kiếm khác nhau trong khi lập chỉ mục trang web của bạn cho mục đích tìm kiếm.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Xin chào các bạn!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LYNYOoZ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/LYNYOoZ’>LYNYOoZ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
4. Ngày sửa đổi tài liệu
Bạn có thể sử dụng thẻ <meta> để cung cấp thông tin về lần cuối cùng tài liệu được cập nhật. Thông tin này có thể được sử dụng bởi các trình duyệt web khác nhau trong khi làm mới trang web của bạn.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Webaffiliate, 5/8/2020" />
</head>
<body>
<p>Xin chào các bạn!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”QWNWOXJ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/QWNWOXJ’>QWNWOXJ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
5. Làm mới tài liệu
Thẻ <meta> có thể được sử dụng để chỉ định thời lượng mà sau đó trang web của bạn sẽ tự động làm mới.
Ví dụ:
Nếu bạn muốn trang của mình tiếp tục làm mới sau mỗi 10 giây thì hãy sử dụng cú pháp sau.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Webaffiliate, 5/8/2020" />
<meta http-equiv = "refresh" content = "10" />
</head>
<body>
<p>Xin chào các bạn!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”NWNWXKL” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/NWNWXKL’>NWNWXKL</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
6. Chuyển hướng trang
Bạn có thể sử dụng thẻ <meta> để chuyển hướng trang của bạn đến bất kỳ trang web nào khác. Bạn cũng có thể chỉ định thời lượng nếu bạn muốn chuyển hướng trang sau một số giây nhất định.
Ví dụ:
Sau đây là một ví dụ về việc chuyển hướng trang hiện tại sang trang khác sau 5 giây. Nếu bạn muốn chuyển hướng trang ngay lập tức thì không chỉ định thuộc tính nội dung .
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Webaffiliate, 5/8/2020" />
<meta http-equiv = "refresh" content = "5; url = https://webaffiliatevn.com/" />
</head>
<body>
<p>Xin chào các bạn!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”QWNWawz” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/QWNWawz’>QWNWawz</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
7. Cài đặt cookie
Cookies là dữ liệu, được lưu trữ trong các tệp văn bản nhỏ trên máy tính của bạn và nó được trao đổi giữa trình duyệt web và máy chủ web để theo dõi các thông tin khác nhau dựa trên nhu cầu ứng dụng web của bạn.
Bạn có thể sử dụng thẻ <meta> để lưu trữ cookie ở phía máy khách và sau đó thông tin này có thể được Máy chủ Web sử dụng để theo dõi khách truy cập trang web.
Ví dụ:
Sau đây là một ví dụ về việc chuyển hướng trang hiện tại sang trang khác sau 5 giây. Nếu bạn muốn chuyển hướng trang ngay lập tức thì không chỉ định thuộc tính nội dung .
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-20 23:59:59 GMT;" />
</head>
<body>
<p>Xin chào!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”yLOLpYd” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/yLOLpYd’>yLOLpYd</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Nếu bạn không bao gồm ngày và thời gian hết hạn, cookie được coi là cookie phiên và sẽ bị xóa khi người dùng thoát khỏi trình duyệt.
Lưu ý – Bạn có thể kiểm tra hướng dẫn PHP và Cookies để biết chi tiết đầy đủ về Cookies.
8. Đặt tên tác giả
Bạn có thể đặt tên tác giả trong một trang web bằng cách sử dụng thẻ meta. Xem một ví dụ dưới đây :
Ví du:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "DavidKhai" />
</head>
<body>
<p>Xin chào!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”Rwawxaj” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/Rwawxaj’>Rwawxaj</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
9. Chỉ định bộ ký tự
Bạn có thể sử dụng thẻ <meta> để chỉ định bộ ký tự được sử dụng trong trang web.
Ví dụ:
Theo mặc định, các máy chủ Web và trình duyệt Web sử dụng mã hóa ISO-8859-1 để xử lý các trang Web. Sau đây là một ví dụ để đặt mã hóa UTF-8 :
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "DavidKhai" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Xin chào!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”wvGvpWY” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/wvGvpWY’>wvGvpWY</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Để phân phát trang tĩnh với các ký tự Trung Quốc truyền thống, trang web phải chứa thẻ <meta> để đặt mã hóa Big5
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ Meta</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "DavidKhai" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Xin chào!</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZRyjx” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZRyjx’>GRZRyjx</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
>>> Xem thêm:
