Thẻ <meta> trong HTML

1) Thẻ <meta> trong HTML

- Thẻ <meta> dùng để cung cấp thêm "thông tin về trang web" cho trình duyệt và các công cụ tìm kiếm (những thông tin này không hiển thị lên màn hình, tuy nhiên trình duyệt và các công cụ tìm kiếm có thể đọc và hiểu được)

- Thẻ <meta> phải được đặt bên trong phần tử <head>

2) Các thuộc của thẻ <meta>

- Thẻ <meta> có bốn thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về bốn thuộc tính đó:

charset	Xác định kiểu mã hóa ký tự của trang web
name	Xác định "tên của một loại thông tin" mà bạn muốn cung cấp thêm cho trang web.
http-equiv	Xác định việc tải lại trang
content	Xác định nội dung của loại thông tin mà bạn muốn cung cấp cho trình duyệt và các công cụ tìm kiếm

2.1) Thuộc tính charset

- Thuộc tính charset dùng để xác định kiểu mã hóa ký tự của trang web.

(Tiếng Việt của chúng ta sử dụng kiểu mã hóa ký tự là UTF-8)

- Ví dụ:

<meta charset="UTF-8">

2.2) Thuộc tính name

- Thuộc tính name dùng để xác định "tên của một loại thông tin" mà bạn muốn cung cấp thêm cho trang web.

- Lưu ý: Thuộc tính name chỉ dùng để xác định tên của loại thông tin mà bạn muốn cung cấp thêm cho trang web, còn nội dung của thông tin đó thì phải sử dụng thuộc tính content.

- Dưới đây là một số giá trị thường được dùng bởi thuộc tính name:

Giá trị Ý nghĩa

author

Giá trị	Ý nghĩa
author	- Xác định tên tác giả (chủ sở hữu) của trang web. - Ví dụ: `<meta name="author" content="Web cơ bản">` - Thẻ trên cung cấp cho trình duyệt và các công cụ tìm kiếm biết tác giả (chủ sở hữu) của trang web chính là "Web cơ bản" - Khi tìm kiếm trên google, tên tác giả sẽ hiển thị kế bên kết quả tìm kiếm.
keywords	- Xác định danh sách những từ khóa mà bạn muốn khi người dùng gõ vào các cỗ máy tìm kiếm như google, bing, .... thì sẽ hiển thị kết quả là trang web của bạn. - Ví dụ: Bạn muốn khi người dùng gõ trên google một trong những từ khóa bên dưới sẽ hiển thị kết quả là trang web của bạn. xem phim hd phim hay phim hành động `<meta name="keywords" content="xem phim hd,phim hay,phim hành động">` - Lưu ý: Giữa các từ khóa phải được ngăn cách bởi dấu phẩy.
description	- Mô tả ngắn gọn nội dung chính của trang web (khoảng 150 ký tự là hợp lý) - Ví dụ: `<meta name="description" content="Website xem phim hành động hay chất lượng full HD hoàn toàn miễn phí">` - Lưu ý: Nội dung của thuộc tính description tốt nhất nên chứa các từ trong danh sách từ khóa (keywords), điều đó sẽ hỗ trợ tốt cho thuộc tính keywords cũng như việc hiển thị trang web của bạn trên các cỗ máy tìm kiếm.

- Xác định tên tác giả (chủ sở hữu) của trang web.

- Ví dụ:

<meta name="author" content="Web cơ bản">

- Thẻ trên cung cấp cho trình duyệt và các công cụ tìm kiếm biết tác giả (chủ sở hữu) của trang web chính là "Web cơ bản"

- Khi tìm kiếm trên google, tên tác giả sẽ hiển thị kế bên kết quả tìm kiếm.

thuộc tính name author trong thẻ meta html

keywords

- Xác định danh sách những từ khóa mà bạn muốn khi người dùng gõ vào các cỗ máy tìm kiếm như google, bing, .... thì sẽ hiển thị kết quả là trang web của bạn.

- Ví dụ: Bạn muốn khi người dùng gõ trên google một trong những từ khóa bên dưới sẽ hiển thị kết quả là trang web của bạn.

xem phim hd
phim hay
phim hành động

<meta name="keywords" content="xem phim hd,phim hay,phim hành động">

- Lưu ý: Giữa các từ khóa phải được ngăn cách bởi dấu phẩy.

description

- Mô tả ngắn gọn nội dung chính của trang web (khoảng 150 ký tự là hợp lý)

- Ví dụ:

<meta name="description" content="Website xem phim hành động hay chất lượng full HD hoàn toàn miễn phí">

- Lưu ý: Nội dung của thuộc tính description tốt nhất nên chứa các từ trong danh sách từ khóa (keywords), điều đó sẽ hỗ trợ tốt cho thuộc tính keywords cũng như việc hiển thị trang web của bạn trên các cỗ máy tìm kiếm.

2.3) Thuộc tính http-equiv

- Thuộc tính http-equiv thường được dùng để:

Xác định kiểu nội dung và kiểu mã hóa ký tự của trang web.
Xác định việc tải lại trang.

- Lưu ý: Tương tự như thuộc tính name, thuộc tính http-equiv phải sử dụng kèm với thuộc tính content.

- Dưới đây là các giá trị được dùng bởi thuộc tính http-equiv:

Giá trị Ý nghĩa

content-type

Giá trị	Ý nghĩa
content-type	- Xác định kiểu nội dung và kiểu mã hóa ký tự của trang web. - Ví dụ: `<meta http-equiv="content-type" content="text/html; charset=UTF-8">` - Tuy nhiên, ta có thể thay thế bằng <meta charset="UTF-8"> cho ngắn gọn hơn.
refresh	- Xác định việc trang sẽ tự động được tải lại. - Ví dụ: Sau 2 giây trang sẽ tự động được tải lại. `<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="2"> </head> <body> <h1>Bức tranh bên dưới có tên là The Scream</h1> <img src="../image/the-scream.jpg"> </body> </html>` Xem ví dụ

- Xác định kiểu nội dung và kiểu mã hóa ký tự của trang web.

- Ví dụ:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

- Tuy nhiên, ta có thể thay thế bằng <meta charset="UTF-8"> cho ngắn gọn hơn.

refresh

- Xác định việc trang sẽ tự động được tải lại.

- Ví dụ: Sau 2 giây trang sẽ tự động được tải lại.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="2">
</head>
<body>
    <h1>Bức tranh bên dưới có tên là The Scream</h1>
    <img src="../image/the-scream.jpg">
</body>
</html>

Xem ví dụ

2.4) Thuộc tính content

- Sau khi xem qua thuộc tính name và thuộc tính http-equiv thì chắc các bạn đã quá hiểu rõ về thuộc tính content.

- Thuộc tính content dùng để xác định nội dung của loại thông tin mà bạn muốn cung cấp cho trình duyệt và các công cụ tìm kiếm.