Khuyến nghị khóa học:
Thuộc tính name của thẻ <meta> HTML
name Mô tả và cách sử dụng
name Thuộc tính quy định tên metadata. Thuộc tính quy định là Thuộc tính content
được sử dụng để chỉ tên của giá trị. name và content Thuộc tính, có thể sử dụng đối tượng tên/giá trị để định nghĩa metadata cho tài liệu. Trong đóname Thuộc tính biểu thị loại metadata, trong khi content Thuộc tính được sử dụng để cung cấp giá trị.
Bảng dưới đây liệt kê một số loại metadata được định nghĩa sẵn.
Lưu ý:Nếu đã thiết lập Thuộc tính http-equivnếu thiết lập name Thuộc tính.
Lưu ý:HTML5 đã giới thiệu một phương pháp để các nhà thiết kế trang web có thể kiểm soát viewport (khu vực người dùng có thể nhìn thấy của trang web) thông qua thẻ <meta> (xin xem mẫu "Cài đặt viewport" bên dưới).
Mẫu
Sử dụng thuộc tính name để định nghĩa mô tả, từ khóa và tác giả của tài liệu HTML. Cũng cần định nghĩa viewport để kiểm soát kích thước trang và tỷ lệ thu phóng cho các thiết bị khác nhau:
<head> <meta name="description" content="Miễn phí Web hướng dẫn"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Cú pháp
<meta name="value">
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| application-name | Định nghĩa tên của ứng dụng Web mà trang đại diện. |
| author |
Định nghĩa tên của tác giả tài liệu. Ví dụ: <meta name="author" content="YK Investment"> |
| description |
Định nghĩa mô tả của trang. Công cụ tìm kiếm có thể chọn mô tả này để hiển thị kết quả tìm kiếm. Ví dụ: <meta name="description" content="Miễn phí Web hướng dẫn"> |
| generator |
Định nghĩa một trong những gói phần mềm được sử dụng để tạo tài liệu (không được sử dụng cho trang viết tay). Ví dụ: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Định nghĩa danh sách từ khóa liên quan đến trang, được phân cách bằng dấu phẩy. Thông báo cho công cụ tìm kiếm về nội dung của trang. Lưu ý:Luôn luôn quy định từ khóa (công cụ tìm kiếm cần phân loại trang). Ví dụ: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Kiểm soát viewport (khu vực nhìn thấy của người dùng trên trang web). |
Giải thích
Ngoài sáu loại metadata được định nghĩa sẵn trong bảng, bạn còn có thể sử dụng metadata mở rộng. Truy cập trang này để lấy danh sách mở rộng thường xuyên được cập nhật:
http://wiki.whatwg.org/wiki/MetaExtensions
Một số mở rộng được sử dụng nhiều hơn, trong khi một số khác chỉ có mục đích hẹp, gần như không ai sử dụng. Metadata robots rõ ràng thuộc nhóm trước. Tác giả tài liệu HTML có thể sử dụng nó để cho phép công cụ tìm kiếm biết cách đối xử với tài liệu. Ví dụ:
<meta name="robots" content="noindex">
Loại metadata này có ba giá trị mà hầu hết các trình duyệt đều nhận biết:
- noindex - biểu thị không nên chỉ mục trang này
- noarchive - biểu thị không nên lưu trữ hoặc cache trang này
- nofollow - biểu thị không nên tiếp tục tìm kiếm theo các liên kết trên trang này
Số lượng metadata có sẵn không nhiều, nhà phát triển nên đọc danh sách trực tuyến để xem có những gì có thể sử dụng trong dự án của mình.
Lưu ý
Để cho phép công cụ tìm kiếm biết cách phân loại và xếp hạng nội dung, phương tiện chính nhất trong quá khứ là sử dụng metadata keywords. Hiện nay, mức độ quan tâm của các công cụ tìm kiếm đối với metadata keywords đã giảm đáng kể, điều này là vì nó có thể bị lạm dụng để tạo ra hình ảnh giả về nội dung và tính liên quan. Để nội dung được đánh giá cao hơn trong mắt công cụ tìm kiếm, cách tốt nhất là sử dụng các gợi ý mà họ cung cấp. Hầu hết các công cụ tìm kiếm đều cung cấp các hướng dẫn để tối ưu hóa trang web hoặc toàn bộ trang web.
Google: Hướng dẫn SEO (SEO) cho người mới bắt đầu
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Hướng dẫn SEO của công cụ tìm kiếm Baidu
Cài đặt viewport
Khu vực nhìn thấy của người dùng là khu vực mà trang web hiển thị trên thiết bị. Nó khác nhau giữa các thiết bị —— nó sẽ nhỏ hơn trên điện thoại so với màn hình máy tính.
Bạn nên bao gồm các thẻ <meta> sau trong tất cả các trang web của mình:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nó cung cấp cho trình duyệt thông tin về cách điều chỉnh kích thước và tỷ lệ thu nhỏ của trang.
width=device-width Một phần thiết lập độ rộng của trang, để theo dõi độ rộng màn hình của thiết bị (thuộc về thiết bị).
initial-scale=1.0 Một phần thiết lập cấp độ thu nhỏ ban đầu của trình duyệt khi tải trang.
Đây là một ví dụ về trang web không có thẻ meta khung nhìn, và cùng một trang web với thẻ meta khung nhìn:
Lưu ý:Nếu bạn duyệt trang này trên điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết dưới đây để xem sự khác biệt.
Bạn có thể trongGiáo trình thiết kế trang web tương tác - Khung nhìnHọc thêm về khung nhìn.
Hỗ trợ trình duyệt
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |
