Tìm hiểu cách sử dụng HTML <meta> phần tử.
<meta> được sử dụng để xác định một số loại siêu dữ liệu về tài liệu HTML. Siêu dữ liệu chỉ có nghĩa là thông tin. Hay cụ thể hơn siêu dữ liệu là dữ liệu mô tả và cung cấp thông tin về các dữ liệu khác.
<meta> phần tử có một số thuộc tính và giá trị.
name thuộc tính là một trong những thuộc tính quan trọng nhất.
name nhận một số giá trị. Ví dụ:description , được sử dụng cùng với content thuộc tính để mô tả một trang:
<head>
<meta name="description" content="Learn about the HTML meta element" />
</head>
<meta> các phần tử chỉ tồn tại bên trong <head> phần tử.
Siêu dữ liệu không hiển thị trên trang web của bạn nhưng được phân tích cú pháp (đọc) và được xử lý bởi các máy, chẳng hạn như máy chủ, trình duyệt và công cụ tìm kiếm.
Điều này làm cho <meta> phần tử là một trong những phần tử HTML quan trọng nhất đối với SEO vì nó cung cấp cho các công cụ tìm kiếm như Google dữ liệu bổ sung (bên cạnh nội dung trang web của bạn) cho họ biết trang web của bạn có nội dung gì và mức độ liên quan của nó so với những gì mọi người tìm kiếm.
Thẻ meta description là đôi khi được các công cụ tìm kiếm sử dụng để tạo mô tả trang cho trang web của bạn trong SERPs (Trang kết quả của công cụ tìm kiếm) nếu thấy nó tốt hơn nội dung trên trang của bạn.
thẻ viewport
viewport thẻ meta giúp làm cho các trang web không thân thiện với thiết bị di động trông đẹp hơn trên màn hình nhỏ hơn. Cấu hình thẻ chế độ xem sau được tối ưu hóa cho điện thoại di động và sẽ được sử dụng theo mặc định trừ khi bạn có lý do chính đáng để không:
<meta name="viewport" content="width=device-width, initial-scale=1" />-
width=device-widthyêu cầu trình duyệt đặt chiều rộng trang dựa trên chiều rộng thiết bị của người dùng. -
initial-scalekiểm soát mức thu phóng khi tải trang đầu tiên.initial-scale-1nghĩa là mức thu phóng của nó là 100%. Nếu bạn đặt nó thànhinitial-scale-2, trang sẽ thu phóng 200% khi tải trang đầu tiên.
viewport là một trong những <meta> nâng cao hơn các thẻ phần tử mà bạn nên nghiên cứu kỹ trước khi bắt đầu tùy chỉnh các giá trị mặc định.
Mozilla có các tài liệu vững chắc về thẻ khung nhìn.
thẻ meta rô bốt
robots thẻ meta (còn được gọi là “chỉ thị meta rô bốt”) cho các công cụ tìm kiếm biết liệu họ có nên lập chỉ mục trang của bạn hay không, bằng cách sử dụng giá trị thuộc tính index hoặc noindex .
Theo mặc định, nó được đặt thành index , vì vậy nếu bạn không muốn trang web của mình được lập chỉ mục, bạn chỉ định nó làm content giá trị noindex
<meta name="robots" content="noindex" />
robots cũng có thể được sử dụng để cho các công cụ tìm kiếm biết liệu chúng có nên theo bất kỳ liên kết nào trên trang web của bạn hay không, bằng cách sử dụng follow hoặc nofollow giá trị.
<meta name="robots" content="nofollow" />
Bạn cũng có thể kết hợp noindex và nofollow trong một phần tử duy nhất:
<meta name="robots" content="noindex, nofollow" />
Đọc kỹ cẩn thận với <meta> của bạn robots cấu hình.
Nếu bạn thực sự đặt nó thành noindex, nofollow giống như đoạn mã ở trên, bạn sẽ không khuyến khích các công cụ tìm kiếm lập chỉ mục cả nội dung và liên kết của bạn, trên toàn cầu (trên toàn bộ trang web của bạn). Bạn hiếm khi muốn làm điều này, vì nó sẽ ảnh hưởng đến SEO của bạn.
Một trường hợp sử dụng phổ biến cho noindex là nếu trang web của bạn vẫn đang được phát triển và chưa sẵn sàng cho công chúng. WordPress có một tùy chọn để tạm thời vô hiệu hóa lập chỉ mục trang (nofollow ) cho mục đích đó.
Và đối với các liên kết, thay vì áp dụng nofollow toàn cầu (cho tất cả các liên kết), một trường hợp sử dụng thực tế hơn là sử dụng nofollow trên các liên kết ra ngoài (bên ngoài) nhất định, ví dụ:đối với các liên kết trả phí, không có lý do gì để được theo dõi bởi các công cụ tìm kiếm. Bạn sẽ làm điều đó trực tiếp trên phần tử neo:
<a href="#" rel="nofollow">Click to see our sponsor</a>
Theo mặc định, các siêu liên kết được đặt thành follow .