Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Cách sử dụng phần tử HTML <meta>

Học cách dùng phần tử <meta> HTML.

Phần tử <meta> dùng để định nghĩa nhiều loại metadata về tài liệu HTML. Metadata chỉ là thông tin. Cụ thể hơn, metadata là dữ liệu mô tả và cung cấp thông tin về dữ liệu khác.

Phần tử <meta> có vài thuộc tính và giá trị.

Thuộc tính name là một trong quan trọng nhất.

name nhận vài giá trị. Ví dụ description, dùng cùng content để mô tả trang:

<head> <meta name="description" content="Học về phần tử HTML meta" /> </head>

<meta> chỉ nằm trong <head>.

Metadata không hiển thị trên trang web nhưng được phân tích (đọc) và xử lý bởi máy: máy chủ, trình duyệt, công cụ tìm kiếm.

Điều này làm <meta> trở thành một trong những phần tử HTML quan trọng nhất cho SEO vì cung cấp cho Google dữ liệu thêm (bên cạnh nội dung) cho biết trang web về gì và độ liên quan so với từ khóa tìm kiếm.

Meta description thỉnh thoảng được công cụ tìm kiếm dùng để tạo mô tả trang trong SERP (Trang kết quả tìm kiếm) nếu thấy tốt hơn nội dung on-page.

Thẻ viewport

Thẻ meta viewport giúp trang web không thân thiện mobile trông tốt hơn trên màn hình nhỏ. Cấu hình viewport sau tối ưu cho mobile, nên dùng mặc định trừ khi có lý do không:

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width bảo trình duyệt đặt độ rộng trang dựa trên độ rộng thiết bị người dùng.
  • initial-scale kiểm soát mức zoom khi tải trang đầu. initial-scale-1 nghĩa là zoom 100%. Nếu đặt initial-scale-2, trang zoom 200% lần đầu tải.

viewport là thẻ <meta> nâng cao, nên nghiên cứu kỹ trước khi tùy chỉnh mặc định.

Mozilla có tài liệu vững về viewport tag.

Thẻ meta robots

Thẻ meta robots (cũng gọi "robot meta directives") báo công cụ tìm kiếm có nên index trang không, dùng giá trị index hoặc noindex.

Mặc định là index, nếu không muốn index, chỉ định content là noindex

<meta name="robots" content="noindex" />

robots cũng báo công cụ tìm kiếm có follow link không, dùng follow hoặc nofollow.

<meta name="robots" content="nofollow" />

Có thể kết hợp noindex và nofollow trong một phần tử:

<meta name="robots" content="noindex, nofollow" />

Cẩn thận với cấu hình <meta> robots.

Nếu thực sự đặt noindex, nofollow như code trên, bạn sẽ ngăn công cụ tìm kiếm index nội dung và link toàn cục (cả trang web). Hiếm khi muốn vậy, vì hại SEO.

Trường hợp phổ biến cho noindex: trang web đang phát triển, chưa sẵn sàng công khai. WordPress có tùy chọn tắt index tạm thời (nofollow) cho mục đích đó.

Với link, thay vì nofollow toàn cục (tất cả link), trường hợp thực tế hơn là dùng nofollow trên link ra (external) cụ thể, ví dụ link trả tiền, không lý do follow. Làm trực tiếp trên anchor:

<a href="#" rel="nofollow">Nhấp xem sponsor</a>

Mặc định, siêu liên kết là follow.