[HTML cơ bản] Các thẻ meta thông tin cho website

Meta là các thẻ mô tả siêu dữ liệu được nhúng trong HTML, các thẻ meta chứa thông tin giúp cho các công cụ bên ngoài nắm bắt được thông tin cơ bản của bài đăng. Trong bài viết này mình sẽ nói chi tiết về định nghĩa và cách sử dụng các thẻ meta trong HTML.

Thẻ meta là gì?

Thẻ meta được sử dụng để cung cấp siêu dữ liệu về tài liệu HTML, các thẻ meta thường được đặt ở trong thẻ head và chúng không bao giờ được hiển thị trên trang. Thẻ meta thường được sử dụng để mô tả, từ khóa, tác giả, thời gian,… Thẻ meta được hỗ trợ bởi hầu hết các trình duyệt. Cú pháp của thẻ meta như sau:

<meta name="tên_thẻ" content="Nội_dung_thẻ">

Một số thẻ đặc biệt sẽ không theo cấu trúc trên ví dụ như thẻ meta khai báo charset trên HTML4:

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

Hay trên HTML 5

<meta charset = "UTF-8">

Ngoài ra một số thẻ meta khác cũng không có thuộc tính name ví dụ như các thẻ meta og:

<meta property="og:site_name" content="TUẤN ĐC">

Thẻ meta og (Open Graph protocol) sử dụng thuộc tính property để thay thế thuộc tính name.

<meta itemprop="name" content="TUẤN ĐC">

Các thẻ meta của schema cũng không sử dụng thuộc tính name mà sử dụng itemprop để thay thế.

Tùy thuộc vào loại meta và mục đích bạn sử dụng để chọn loại meta phù hợp. Tuy nhiên việc sử dụng thẻ meta nào thì phụ thuộc vào việc bạn nhắm đến công cụ nào bạn muốn thu thập dữ liệu. Chẳng hạn như Google bạn phải sử dụng những thẻ phổ biến như description và một số thẻ schema, với facebook thì bạn nên sử dụng các thẻ meta og,… Tuy nhiên một số thẻ phổ biến sau có thể được nhiều bộ máy thu thập dữ liệu quan tâm.

Các thẻ meta phổ biến trong HTML

Thẻ meta keywords

Có thể thẻ này không còn cần thiết trong SEO nhưng nó đã từng là thẻ mà bất cứ website nào cũng không thể bỏ qua trước đây. Mặc dù google cho rằng họ không còn quan tâm đến thẻ keywords nhưng nhiều công cụ tìm kiếm khác vẫn đang sử dụng thẻ này để thu thập thông tin nhanh từ website của bạn, vì thế có thể bạn không nên bỏ qua. Cấu trúc của thẻ như sau:

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

Thẻ meta description

Thẻ mô tả vẫn chưa hề hết quan trọng kể cả trong SEO, thẻ này chứa một đoạn mô tả về nội dung tổng thể của trang web. Tùy theo công cụ tìm kiếm mà số ký tự được giới hạn. Cầu trúc của thẻ như sau:

<meta name="description" content="Đây là mô tả về trang web">

Thẻ meta author

Thẻ meta này khai báo cho biết tác giả của bài viết, nó được một số công cụ tìm kiếm quan tâm và thu thập, một số khác không quan tâm thẻ này, tuy nhiên theo kinh nghiệm của mình thì thẻ này không quá quan trọng.

<meta name="author" content="Tuan DC">

Thẻ meta refresh

Một thẻ được sử dụng cũng rất phổ biến đó là thẻ refresh, thẻ này sẽ làm giúp làm mới trang trong một khoảng thời gian tính bằng giây. Bên dưới là cú pháp thẻ này sử dụng để làm mới trang trong 30 giây.

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

Thẻ meta viewport

Hầu hết các website hiện nay không thể thiếu thẻ này. Đây là thẻ phổ biến trên các website responsive, giúp thiết đặt chế độ xem trang. Với khai báo chiều rộng bằng với chiều rộng của thiết bị. Cú pháp như sau:

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

Như vậy là mình đã đi xong bài về thẻ meta, nếu ban có thắc mắc gì có thể comment bên dưới, mình sẽ hồi đáp. Trong bài viết sau mình sẽ chia sẻ về cách thiết kế một tệp HTML chuẩn