Thẻ meta trong HTML

Mộ đoạn code về thẻ <meta> trong tài liệu HTML:

<head>
<meta charset="UTF-8">
<meta name="description" content="Hướng dẫn làm web">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Nguyễn Đức Anh">
</head>

Định nghĩa và cách dùng

Metadata (siêu dữ liệu) là dạng dữ liệu miêu tả về dữ liệu.

Thẻ <meta> cung cấp siêu dữ liệu về tài liệu HTML. Siêu dữ liệu không hiển thị thông tin trên trang cho người dùng thông thường thấy, nhưng với máy và các bọ tìm kiếm chúng được khai thác đầy đủ.

Thẻ meta thường được sử dụng để mô tả trang, từ khoá, tác giả của tài liệu, lần cập nhật cuối cùng và các siêu dữ liệu khác.

Thẻ meta có thể được dùng bởi các trình duyệt (để biết cách hiển thị nội dung hoặc tải lại trang), máy tìm kiếm (sử dụng từ khoá – keywords) hoặc bởi các dịch vụ web khác.


Trình duyệt hỗ trợ

Hiện cả 5 trình duyệt lớn đều hỗ trợ thẻ meta.


Các mẹo và một số lưu ý

Thẻ <meta> luôn luôn nằm bên trong thẻ <head>.

Siêu dữ liệu luôn luôn biểu hiện dưới dạng cặp tên / giá trị.

Các thuộc tính nội dung phải được định nghĩa nếu tên hoặc thuộc tính http-equiv được định nghĩa. Nếu cả hai không được định nghĩa, thuộc tính nội dung có thể không được xác định.


Sự khác biệt giữa HTML 4.01 và HTML5

Thuộc tính scheme không được hỗ trợ trong HTML5.

HTML5 có một thuộc tính mới là ký tự (charset), giúp cho việc định nghĩa bảng mã dễ dàng hơn trước đây:

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

  • HTML5:
<meta charset="UTF-8">

Sự khác biệt giữa HTML và XHTML

Trong HTML, thẻ <meta> không có thẻ đóng.

Trong XHTML, thẻ <meta> bắt buộc phải được đóng đúng cách.


Các ví dụ

Ví dụ 1 – Định nghĩa các từ khoá cho máy tìm kiếm:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Ví dụ 2 – Định nghĩa mô tả cho trang web của bạn:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Ví dụ 3 – Định nghĩa tác giả của trang:

<meta name="author" content="Nguyễn Đức Anh">

Ví dụ 4 – Tải lại trang sau 30 giây:

<meta http-equiv="refresh" content="30">

Các thuộc tính

Thuộc tínhGiá trịMô tả
charsetcharacter_setXác định loại mã hoá ký tự cho tài liệu HTML
contenttextCung cấp giá trị liên kết với http-equiv hoặc thuộc tính tên
http-equivcontent-type
default-style
refresh
Cung cấp HTTP header cho thông tin/giá trị của thuộc tính nội dung
nameapplication-name
author
description
generator
keywords
Xác định tên cho siêu dữ liệu
schemeformat/URIKhông được hỗ trợ trong HTML5

 

Chỉ định scheme để giải thích các giá trị của các thuộc tính nội dung

4 thoughts on “Thẻ meta trong HTML”

  1. Anh ơi cho em hỏi.
    Em có thêm mô tả vào thẻ mô tả của yoast seo.
    Nhưng trên google lại không hiển thị mô tả em đã viết đấy. Mà nó lại hiển thị đoạn văn bản đầu tiên của website.
    Giờ em muốn sửa lỗi này thì phải làm thế nào ạ?

    Reply
    • Cái này có thể có nhiều nguyên nhân. Đầu tiên là có thể đây là bài viết em sửa lại và Google chưa kịp cập nhật bài đó. Thứ hai là đôi khi Google cảm thấy phần mô tả mình viết không tốt bằng nội dung tự nó lấy. Em thử kiểm tra các bài khác trên website xem có bị thế không?

      Reply
  2. Bạn có tài liệu về HTML,CSS,JavaScript,jQuery, Cơ sở dữ liệu để mình có thêm kiến thức để làm web tốt hơn và hiểu sâu về nói. xin chân thành cảm ơn bản

    Reply
    • Để hiểu sâu bạn cần biết một chút tiếng Anh (nó cũng thường không quá nhiều), sau đó bạn có thể tham khảo các nguồn trên mạng. Những chủ đề này rất nhiều và phổ biến, chất lượng nếu mình tra bằng tiếng Anh.

      Reply

Leave a Comment