Thẻ Meta Trong HTML – Tất Tần Tật Những Điều Cần Phải Biết
Thẻ meta là một trong những nhân tố quan trọng cho SEO đối với các website mang tính thương mại. Do đó, việc tối ưu hóa thẻ càng tốt sẽ càng giúp cho trang web nhanh chóng lên top trên Google. Vậy, thẻ meta trong html là gì? Cách tối ưu thẻ ra sao? Cùng theo dõi bài viết dưới đây của chúng tôi để được giải đáp chi tiết.
Định nghĩa thẻ meta trong html
Thẻ HTML <meta> còn được gọi là thẻ meta trong HTML là thẻ được sử dụng với vai trò cung cấp metadata về tài liệu HTML. Metadata không hiển thị trên trình duyệt nhưng được bộ máy tìm kiếm phân tích từ đó thu thập thông tin về twebsite của bạn.
Bên cạnh đó, thẻ còn được dùng để định nghĩa các thông tin cơ bản như: mô tả từ khóa, trang, tác giả, chỉnh sửa,…. Metadata được sử dụng bởi bộ máy tìm kiếm, các trình duyệt hoặc dịch vụ website khác.
Cách sử dụng thẻ meta trong html
Dưới đây là cách sử dụng thẻ meta trong html:
Thêm các thẻ meta vào tài liệu
Để thêm dữ liệu vào website, bạn có thể đặt các thẻ <meta> vào đầu trang và được thể hiện thông qua thẻ <head> và </head>. Thông thường, thẻ meta sẽ có các thuộc tính dưới đây:
| Thuộc tính | Miêu tả |
| name | Đặt tên cho đặc tính. Chẳng hạn: sự mô tả, từ khóa, tên tác giả,… |
| 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 |
| 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… |
Xác định từ khóa -Sử dụng thẻ meta keywords trong HTML
Sử dụng thẻ <meta> để xác định các từ khóa quan trọng trong bài viết. Các từ khóa này sẽ được sử dụng trong các công cụ tì kiếm như google,….và lập chỉ mục trang web trong mục tìm kiếm.
Miêu tả tài liệu – Sử dụng thẻ meta description trong HTML
Thẻ <meta> có thể được dùng để đưa ra mô tả ngắn về tài liệu. Điều này giúp công cụ tìm kiếm trong quá trình lập chỉ mục cho website đơn giản hơn và đáp ứng nhu cầu của người tìm kiếm.
Ngày sửa cuối cùng của tài liệu – Sử dụng thẻ meta revised trong HTML
Thẻ <meta> còn có vai trò cung cấp thông tin về thời điểm cuối mà tài liệu được cập nhật trên web. Điều này có thể được sử dụng bởi nhiều trình duyệt khác nhau khi refresh trang web.
Refresh tài liệu – Sử dụng http-equiv=”refresh”
Thông thường, thẻ <meta> sẽ được dùng với mục đích xác định thời gian mà sau đó trang Web sẽ refresh một cách tự động, tương tự như khi nhấn phím F5.
Chuyển hướng trang – Xác định url
Khi có nhu cầu chuyển hướng trang web cho trang bất kỳ, bạn có thể dùng thẻ <meta>. Ngoài ra, nó có thẻ chuyển hướng trang sau thời gian nhất định.
Thiết lập các Cookie – Sử dụng http-equiv=”cookie”
Cookie được hiểu là dữ liệu được lưu trong các file văn bản nhỏ trên máy tính. Nó được trao đổi giữa các sever và trình duyệt web nhằm mục đích theo dõi khu vực thông tin.
Để lưu giữ các cookie trên client bạn có thể sử dụng thẻ <meta>. Các thông tin này sau đó được sử dụng bởi các Server nhằm theo dõi lượt khách hàng truy cập.
Thiết lập tên tác giả – Sử dụng name=”author”
Sử dụng thẻ meta bạn có thể tạo lập tên tác giả của một website. Chẳng hạ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=”author” content=”VietJack Team” />
</head>
<body>
<p>Hoc HTML tai VietJack!</p>
</body>
</html>
Xác định Bộ ký tự
Ngoài ra, thẻ meta còn giúp bạn có thể xác định chính xác bộ ký tự trong trang web.
Một số ví dụ về thẻ meta trong HTML
Dưới đây là một số ví dụ về thẻ meta trong HTML:
Ví dụ 1: định nghĩa các từ khóa cho bộ máy tìm kiếm.
1<meta name=”keywords” content=”HTML là gì? Thẻ HTML meta”>
Ví dụ 2: định nghĩa một mô tả cho trang web.
1 <meta name=”description” content=”Học HTML và CSS miễn phí”>
Ví dụ 3: định nghĩa tác giả của trang web.
1<meta name=”author” content=”John Doe”>
Ví dụ 4: tự động tải lại trang web sau 30s.
1 <meta http-equiv=”refresh” content=”30″>
Ví dụ 5: Thiết định khung nhìn để trang web dễ nhìn trên tất cả các thiết bị.
1<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Thẻ meta trong HTML có các thuộc tính nào?
Dưới đây là một số thuộc tính của thẻ meta trong HTML:
| Thuộc tính | Giá trị | Mô tả |
| charset | character_set | Chỉ định mã hoá ký tự cho tài liệu HTML |
| content | text | Cung cấp giá trị được gắn liền với thuộc tính http-equiv hoặc name |
| http-equiv | content-type default-style refresh |
Cung cấp tiêu đề HTTP cho thông tin / giá trị của thuộc tính content |
| name | application-name author description generator keywords viewport |
Chỉ định một tên cho metadata |
| scheme | format/URI | Không được hỗ trợ trong HTML5. Chỉ định một lược đồ được sử dụng để giải thích giá trị của thuộc tính content |
So sánh HTML 4.01 và HTML 5
Trong HTML 4.01 thuộc tính scheme sẽ được hỗ trợ. Ngược lại, thuộc tính này không được hỗ trợ trong HTML 5. Ngoài ra, HTML 5 có thêm thuộc tính mới là charset. Thuộc tính này giúp định nghĩa cho tài liệu HTML.
HTML và XHTML có sự khác biệt nào?
Giữa HTML và XHTML có sự khác biệt cụ thể như: HTML thẻ <meta> không có thẻ đóng còn XHTML thẻ <meta> bắt buộc phải đóng thẻ.
Các trình duyệt hỗ trợ thẻ meta
Một số trình duyệt hỗ trợ trong thẻ meta cụ thể như sau:
| Thẻ | Chrome | IE | Firefox | Opera | Safari |
| <meta> | Yes | Yes | Yes | Yes | Yes |
Trên đây là những thông tin cơ bản về thẻ meta trong html. Hi vọng bài viết của chúng tôi đã cung cấp cho bạn những thông tin hữu ích nhất để phục vụ quá trình làm Seo cho website.
Nhận báo giá