Các thẻ Meta trong HTML

HTML cho phép bạn chỉ định các siêu dữ liệu-thông tin quan trọng được thêm vào về một tài liệu trong các cách khác nhau. Các phần tử META có thể được sử dụng bao gồm các cặp tên/giá trị miêu tả đặc tính quyền sở hữu trong HTML, như tên tác giả, hạn sử dụng, danh sách các từ khóa….

Thẻ <meta> được sử dụng để cung cấp các thông tin thêm như vậy. Thẻ này là một phần tử trống và không có thẻ đóng nhưng nó lại mang thông tin trong thuộc tính của nó.

Với các trang Web mang tính thương mại thì thẻ meta là một trong các nhân tố quan trọng cho SEO. Việc tối ưu hóa thẻ meta càng tốt sẽ giúp cho trang Web của bạn càng nhanh lên top khi được tìm kiếm bởi Google. Bạn cũng có thể tham khảo thêm Loạt bài hướng dẫn về SEO ngay tại VietJack.

Bạn có thể sử dụng một hay nhiều thẻ meta trong tài liệu của bạn trên cơ sở những thông tin gì bạn muốn giữ trong tài liệu, nhưng một cách tổng quát thì thẻ meta không ảnh hưởng đến sự xuất hiện vật lý của tài liệu. Do đó, bạn có thể sử dụng hoặc không sử dụng các thẻ meta.

Thêm các thẻ Meta vào tài liệu

Bạn có thể thêm các siêu dữ liệu vào trong các trang Web bằng cách đặt các thẻ <meta> trong đầu trang của tài liệu mà được thể hiện bởi thẻ <head> và </head>. Một thẻ meta có thể có các thuộc tính sau:

Thuộc tính	Miêu tả
name	Đặt tên cho đặc tính. Ví dụ như từ khóa, sự mô tả, tên tác giả,… bất cứ thứ gì.
content	Xác định giá trị của đặc tính
scheme	Xác định một giản đồ để giải thích giá trị của đặc tính (như là công khai trong thuộc tính content).
http-equiv	Được sử dụng cho các Header thông báo phản hồi HTTP. Ví dụ: thiết lập các Cookie...

Quảng cáo

Xác định các từ khóa - Sử dụng thẻ meta keywords trong HTML

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 và sau đó những từ khóa này được sử dụng trong các công cụ tìm kiếm (ví dụ: Google) trong khi lập chỉ mục trang Web của bạn cho mục đích tìm kiếm.

Ví dụ

Ví dụ dưới đây thêm HTML, các thẻ Meta, Siêu dữ liệu (Metadata) như những từ khóa quan trọng về tài liệu.

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Hoc HTML tai VietJack!

Miêu tả tài liệu - Sử dụng thẻ meta description trong HTML

Bạn có thể sử dụng thẻ <meta> để đưa ra một miêu tả ngắn gọn về 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>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Quảng cáo

Ngày sửa cuối cùng của tài liệu - Sử dụng thẻ meta revised trong HTML

Bạn có thể sử dụng thẻ <meta> để cung cấp thông tin về thời điểm cuối cùng mà tài liệu của bạn được cập nhật. Thông tin này có thể được sử dụng bởi các trình duyệt khác nhau trong khi refresh trang của bạn.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta name="revised" content="VietJack Team, 06/16/2016" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Refresh tài liệu - Sử dụng http-equiv="refresh"

Một thẻ <meta> có thể được sử dụng để xác định khoảng thời gian mà sau đó trang Web của bạn sẽ refresh một cách tự động (như khi bạn nhấn F5).

Ví dụ

Ví dụ như nếu bạn muốn cho trang của bạn cứ 5s được refresh một lần, bạn sử dụng cú pháp sau:

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta name="revised" content="VietJack Team, 06/16/2016" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Chuyển hướng trang - Xác định url

Bạn có thể sử dụng thẻ <meta> để chuyển hướng trang Web của bạn cho 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 trang sau một khoảng thời gian nhất định.

Ví dụ

Ví dụ dưới là chuyển hướng trang hiện tại sang trang khác sau khoảng thời gian 5s. Nếu bạn muốn chuyển hướng ngay lập tức, bạn không xác định thuộc tính content của nó.

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta name="revised" content="VietJack Team, 06/16/2016" />
<meta http-equiv="refresh" content="5; url=https://vietjack.com" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Thiết lập các Cookie - Sử dụng http-equiv="cookie"

Cookie là dữ liệu, được lưu giữ trong các file văn bản nhỏ trên máy tính và nó được trao đổi giữa các trình duyệt Web và Sever để theo dõi các khu vực của thông tin dựa trên ứng dụng của bạn.

Bạn có thể sử dụng thẻ <meta> để bảo quản các cookie trên Client và sau đó 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ụ

Ví dụ sau về thiết lập các Cookie.

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta name="revised" content="VietJack Team, 06/16/2016" />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-16 23:59:59 GMT;" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Nếu bạn không tính đến ngày hết hạn, Cookie sẽ được coi là một session (phiên) và sẽ bị xóa khi người dùng thoát trình duyệt.

Thiết lập tên tác giả - Sử dụng name="author"

Bạn có thể thiết lập tên tác giả của một trang Web bằng cách sử dụng thẻ meta. Ví dụ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta name="author" content="VietJack Team" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Xác định Bộ ký tự

Bạn có thể sử dụng thẻ <meta> để xác định Bộ ký tự sử dụng trong trang Web.

Ví dụ

Theo mặc định, trình duyệt và Server sử dụng mã hóa ISO-8859-1 (Latin1) để xử lý các trang Web. Ví dụ dưới là sự thiết lập mã hóa UTF-8.

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta ame="author" content="VietJack Team" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Để đáp ứng các trang tĩnh với các ký tự Trung Quốc truyền thống, trang Web phải chứa một thẻ <meta> để thiết lập mã hóa Big5:

<!DOCTYPE html>
<html>
<head>
<title>Vi du the meta trong HTML</title>
<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />
<meta name="description" content="The meta trong HTML." />
<meta ame="author" content="VietJack Team" />
<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: