HTML – Thẻ meta

125
HTML – Thẻ meta

Các thẻ <meta> cung cấp các metadata (siêu dữ liệu) cho tài liệu HTML. Metadata không được hiển thị trên trang, nhưng là một thành phần quan trọng trong file HTML, nó chứa các thông tin về file HTML đó như tên tác giả, các từ khoá, các thông tin mô tả site đó,… Nó có thể có 1 số thông tin điều khiển trình duyệt, chỉ định cho công cụ tìm kiếm,…

Thẻ này là một thẻ rỗng và nó không có thẻ đóng nhưng nó mang thông tin trong thuộc tính của nó.

Bạn có thể khai báo 1 hoặc nhiều thẻ mate trong tài liệu của bạn dựa trên những thông tin nào bạn muốn giữ trong tài liệu, 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ừ góc nhìn từ điểm xuất hiện, nó không có vấn đề gì nếu bạn khai báo chúng hay không.

Thêm thẻ meta vào tài liệu

Bạn có thể thêm metadata vào trang web của bạn bằng cách đặt thẻ meta bên trong phần <head>…</head>. Một thẻ meta có thể có nhiều thuộc tính đi kèm, như:

  • name: Tên cho thuộc tính, như include, keywords, description, author, revised, generator…
  • content: Xác định giá trị cúa thuộc tính
  • scheme: Xác định một lược đồ để giải thích giá trị của thuộc tính (như khai báo trong content). Scheme không hỗ trợ trong HTML5
  • http-equiv: Cung cấp một tiêu đề HTTP cho các thông tin / giá trị của thuộc tính content.Ví dụ http-equiv có thể được sử dụng để refresh trang web hoặc tạo một cookie. Giá trị của nó bao gồm content-type, expires, refresh, và set cookie

keywords – Từ khoá

Bạn có thể sử dụng thẻ <meta> để chỉ rõ các từ khóa quan trọng liên quan đến tài liệu. Những từ khóa này được sử dụng trong 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.

Trong ví dụ này, ta thêm HTML, CSS, XML, XHTML, JavaScript như là các từ khóa quan trong cho tài liệu này:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

Kết quả:
Hello HTML!

description – Mô tả tài liệu

Bạn có thể sử dụng thẻ <meta> để đưa một đoạn ngắn gọn mô tả cho tài liệu. Điều này giúp cho 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ụ:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

revised – Ngày sửa đổi tài liệu

Bạn có thể sử dụng thẻ <meta> để đưa ra thông tin về thời điểm 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 nhiều trình duyệt web khi làm tươi (refresh) trang web của bạn.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta name="revised" content="thietkeweb24g, 9/3/2001" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

refresh – Làm mới tài liệu

Thẻ <meta> có thể được sử dụng để chỉ định một khoảng thời gian sau bao lâu web của bạn sẽ tự động refresh.

Nếu bạn muốn trang web của mình tự động refresh sau 5 giây , hãy sử dụng cú pháp sau :

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta name="revised" content="Thietkeweb24g, 9/3/2001" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

url – Chuyển hướng trang

Ban có thể sử dụng thẻ <meta> để chuyển hướng trang web của mình sang bất kì trang web nào khác. Bạn cũng có thể chỉ định một khoảng thời gian nếu bạn muốn chuyển hướng sau 1 khoảng thời gian chính xác nào đó.

Trong ví dụ duói đây, sau 5 giây thì trang web của bạn sẽ chuyển hướng qua một trang khác. Nếu muốn tự động chuyển hướng thì đừng chỉ định thuộc tính content.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta name="revised" content="Thietkeweb24g, 9/3/2021" />
<meta http-equiv="refresh" content="5; url=http://thietkeweb24g.com" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

cookie – Cài đặt Cookies

Cookies là dữ liệu, lưu trong một file text nhỏ trên máy tính của bạn và nó được thay đổi giữa trình duyệt web và web server để theo dõi thông tin khác nhau dựa trên nhu cầu ứng dụng trang web.

Bạn có thể sử dụng thẻ <meta> để lưu trữ cookies phía client. Thông tin này có thể được sử dụng bởi các Server để theo dõi khách truy cập.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta name="revised" content="Thietkeweb24g, 9/3/2021" />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 9/4/2021 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

Nếu bạn không có khai báo ngày giờ hết hạn, thì cookie được xem là một session cookie và nó sẽ bị xóa khi người dùng thoát khỏi trình duyệt.

author – Tên tác giả

Bạn có thể sử dụng thẻ meta để chỉ định tên tác giả.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta ame="author" content="Tuan Nguyen" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

charset – Bộ ký tự

Bạn có thể sử dụng thẻ <meta> để chỉ định tập kí tự được sử dụng trong trang web.

Mặc định, máy chủ web và trình duyệt web sử dụng mã hóa ISO-8859-1 (Latin1) để chạy Web pages. Ví dụ sau đặt thành bảng mã UTF-8 encoding:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="Free Web tutorials on HTML and CSS" />
<meta ame="author" content="Tuan Nguyen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>