Thẻ meta trong HTML
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 eLib theo dõi bài viết dưới đây để được giải đáp chi tiết.
Mục lục nội dung
1. Định nghĩa và sử dụng
Siêu dữ liệu (metadata) là dạng dữ liệu (thông tin) miêu tả về dữ liệu.
Thẻ HTML <meta> hay thẻ meta trong HTML được sử dụng để cung cấp metadata về tài liệu HTML. Metadata sẽ không được hiển thị trên trình duyệt, nhưng nó sẽ được bộ máy tìm kiếm phân tích để lấy thông tin cơ bản về trang web của bạn.
Thẻ HTML meta được sử dụng để định nghĩa các thông tin cơ bản như mô tả trang web, từ khóa, tác giả, chỉnh sửa cuối cùng và các metadata khác.
Metadata có thể được sử dụng bởi các trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bộ máy tìm kiếm (từ khóa), và các dịch vụ web khác.
HTML5 giới thiệu một phương pháp để cho các nhà thiết kế web kiểm soát khung nhìn (khu vực hiển thị của một người dùng trên trang web), thông qua thẻ <meta>
Thẻ meta được định nghĩa trong thẻ <head>
2. Các 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.
<meta name="keywords" content="HTML là gì? Thẻ HTML meta">
Ví dụ 2: định nghĩa một mô tả cho trang web.
<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.
<meta name="author" content="John Doe">
Ví dụ 4: tự động tải lại trang web sau 30s.
<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ị.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Lưu ý:
Các thẻ <meta> luôn được đặt bên trong phần tử <head>.
Metadata luôn được khai báo theo cặp name/value.
Thuộc tính content PHẢI được định nghĩa nếu thuộc tính name hoặc http-equiv được định nghĩa. Nếu không thuộc tính nào vừa nêu được định nghĩa thì thuộc tính content KHÔNG THỂ được định nghĩa.
3. Các thuộc tính của thẻ meta trong HTML
= thuộc tính mới trong HTML 5.
| 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 |
4. Sự khác nhau giữa HTML 4.01 và HTML 5
Thuộc tính scheme không được hỗ trợ trong HTML 5.
HTML 5 có một thuộc tính mới charset, giúp dễ dàng định nghĩa charset cho tài liệu HTML.
HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">
5. Sự khác nhau giữa HTML và XHTML
Trong HTML thẻ <meta> không có thẻ đóng.
Trong XHTML thẻ <meta> phải đóng thẻ.
6. Trình duyệt hỗ trợ
| Chrome | Firefox | IE | Opera | Safari | Android |
|---|---|---|---|---|---|
| Có | Có | Có | Có | Có | Có |
Trên đây là bài viết của eLib.VN về Thẻ meta trong HTML. Còn có rất nhiều thẻ meta khác nữa, bạn đọc cần nghiên cứu và tìm hiểu thêm. Chúc các bạn thành công!
Tham khảo thêm
- doc Thẻ Marquee trong HTML
- doc Thẻ Textarea trong HTML
- doc Doctype HTML
- doc Thẻ title trong HTML
- doc Thẻ Div trong HTML
- doc Thẻ pre trong HTML
- doc Thẻ code trong HTML
- doc Thẻ Label trong HTML
- doc Thẻ Input trong HTML
- doc Thẻ Button trong HTML
- doc Thẻ HR trong HTML
- doc Thẻ BR trong HTML
- doc Thẻ Script trong HTML
- doc Thẻ NoScript trong HTML
- doc Thẻ b trong HTML
- doc Thẻ Quotes trong HTML
