Thẻ HTML <meta>

Định nghĩa và cách sử dụng thẻ <meta>

Thẻ <meta> xác định siêu dữ liệu (Metadata) về tài liệu HTML. Metadata là thông tin về dữ liệu. Ví dụ sau mô tả siêu dữ liệu trong tài liệu HTML:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Các thẻ <meta> luôn nằm bên trong phần tử <head> và thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.

Siêu dữ liệu sẽ không được hiển thị trên trang, nhưng máy có thể phân tích cú pháp. Siêu dữ liệu được sử dụng bởi trình duyệt (cách hiển thị nội dung hoặc load lại trang), công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.

Có một phương pháp cho phép các nhà thiết kế web kiểm soát chế độ xem (khu vực hiển thị của người dùng trên trang web), thông qua thẻ <meta>.

Hỗ trợ trình duyệt

Phần tử <meta>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <meta>	Có	Có	Có	Có	Có

Thuộc tính

Thuộc tính	Giá trị	Mô tả
charset	character_set	Chỉ định mã hóa ký tự cho tài liệu HTML
content	text	Chỉ định giá trị được liên kết với thuộc tính http-equiv hoặc tên
http-equiv	content-security-policy content-type default-style refresh	Cung cấp tiêu đề HTTP cho thông tin/giá trị của thuộc tính nội dung
name	application-name author description generator keywords viewport	Chỉ định tên cho siêu dữ liệu

Hầu hết các thẻ meta sử dụng kết hợp các thuộc tính sau để chứa dữ liệu của chúng.

name và content: Thuộc tính name giống như một nhãn, trong khi thuộc tính nội dung lưu trữ dữ liệu liên quan đến nhãn đó. Điều này cung cấp một hệ thống linh hoạt, có thể mở rộng để lưu trữ bất kỳ siêu dữ liệu nào bạn yêu cầu.
property: Thuộc tính này đôi khi được sử dụng thay thế cho name và phục vụ cùng một mục đích.
http-equiv: Viết tắt của "HTTP equivalent", thuộc tính này xác định header HTTP cho giá trị được chỉ định trong thuộc tính content.
scheme: Thuộc tính này, được sử dụng cùng với name, xác định kiểu dữ liệu trong thuộc tính nội dung.

Bạn sẽ thấy các thẻ meta sau thường được hỗ trợ bởi nhiều dịch vụ web và trình duyệt khác nhau.

Thẻ meta description

Snippet có tối đa 155 ký tự này tóm tắt nội dung của một trang. Công cụ tìm kiếm thường hiển thị nó dưới header trang và URL. Điều cần thiết là cung cấp mô tả ngắn gọn và chính xác để khuyến khích người dùng nhấp vào liên kết và truy cập trang của bạn.

<meta name="description" content="Mô tả ngắn gọn về trang của bạn">

Thẻ meta Open Graph

Facebook và các nền tảng mạng xã hội khác sử dụng rất nhiều các thẻ này. Chúng sử dụng thông tin trong những thẻ này để cải thiện việc trình bày các liên kết đến trang của bạn khi người dùng chia sẻ nó. Thẻ meta Open Graph bao gồm các thuộc tính như og:title, og:description và og:image:

<meta property="og:title" content="Tiêu đề trang của bạn">
<meta property="og:description" content="Mô tả ngắn gọn về trang của bạn">
<meta property="og:image" content="URL của hình ảnh liên quan">

Thẻ meta SEO

Các thẻ này cung cấp thông tin cho công cụ tìm kiếm và có thể giúp cải thiện thứ hạng trang của bạn. Chúng cũng được đưa vào danh sách các phương pháp hay nhất về SEO cần thiết. Chúng bao gồm các thuộc tính như robots, author, v.v... Mặc dù tầm quan trọng của các thẻ này đã giảm dần theo thời gian nhưng việc đưa chúng vào tài liệu HTML của bạn vẫn rất cần thiết.

<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">

Thẻ meta viewport

Thẻ meta viewport là một yếu tố thiết yếu trong thiết kế web đáp ứng. Nó yêu cầu trình duyệt điều chỉnh bố cục trang web theo chiều rộng của thiết bị, đảm bảo nội dung hiển thị chính xác và có thể đọc được trên thiết bị di động.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thẻ meta HTTP-Equiv

Các thẻ meta này rất cần thiết để kiểm soát những khía cạnh cụ thể về cách trình duyệt và máy chủ xử lý các trang web. Chúng bao gồm các thuộc tính như refresh và X-UA-Compatible. Mặc dù tác động trực tiếp của chúng đến SEO có thể khác nhau nhưng chúng đóng một vai trò quan trọng trong việc ảnh hưởng đến hành vi và khả năng tương thích của trang.

<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bạn sẽ không sử dụng tất cả chúng cùng một lúc trong dự án của mình, nhưng điều quan trọng là phải hiểu rõ về các thẻ meta khác nhau có sẵn. Ngoài ra, việc sử dụng thẻ meta mang lại lợi ích trong việc cải thiện việc tổ chức tài liệu HTML.

Thẻ meta tùy chỉnh

Các thẻ meta rất linh hoạt vì:

Bạn có thể tự do sử dụng tên bạn chọn để lưu trữ bất kỳ dữ liệu nào bạn muốn.
Các trình duyệt sẽ không hiển thị nội dung của chúng, mặc dù nội dung đó luôn có thể xem được trong nguồn trang.

Dưới đây là ví dụ về thẻ meta tùy chỉnh:

<meta name="target-audience" content="developers">

Trong ví dụ này, thẻ tùy chỉnh chỉ định đối tượng mục tiêu của nội dung, cho biết rằng nó nhắm mục tiêu đến các nhà phát triển.

Thẻ meta tùy chỉnh cung cấp cách mở rộng bộ thẻ tiêu chuẩn được công nhận rộng rãi. Tuy nhiên, điều quan trọng là phải ghi lại cẩn thận các thẻ tùy chỉnh bạn sử dụng và hiểu rõ về cách bạn sẽ sử dụng chúng. Các dịch vụ khác sẽ không sử dụng hoặc nhận dạng chúng theo mặc định, vì vậy, đôi khi bạn có thể sẽ viết code của riêng mình để xử lý chúng.

Thuộc tính Global

Thẻ <meta> cũng hỗ trợ thuộc tính Global trong HTML.

Một số ví dụ

Xác định từ khóa cho công cụ tìm kiếm:

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

Xác định mô tả về trang web của bạn:

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

Xác định tác giả của một trang:

<meta name="author" content="John Doe">

Refresh tài liệu cứ sau 30 giây:

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

Đặt chế độ xem để làm cho trang web của bạn hiển thị tốt trên tất cả các thiết bị:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Đặt chế độ xem

Viewport (viewport) là khu vực hiển thị của người dùng trên trang web. Nó thay đổi theo thiết bị - nhỏ hơn trên điện thoại di động và lớn hơn trên màn hình máy tính.

Bạn nên đưa phần tử <meta> sau vào tất cả các trang web của mình:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Điều này cung cấp hướng dẫn cho trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.

Phần width=device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).

Phần initial-scale=1.0 đặt mức zoom ban đầu khi trang được trình duyệt load lần đầu tiên.

Dưới đây là ví dụ về một trang web không có và có thẻ meta:

Một trang web không có và có thẻ meta

Thứ Hai, 25/12/2023 14:27

5 ★ 3 👨 1.318

Bài trước

Tham chiếu mã quốc gia

Bài sau

Khai báo <!DOCTYPE>

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!