Các tag <meta> trong <head> cung cấp metadata về trang — mã hóa ký tự, hành vi viewport, mô tả SEO, và bản xem trước khi chia sẻ trên mạng xã hội. Chúng không được render nhưng được đọc bởi trình duyệt, công cụ tìm kiếm và các nền tảng mạng xã hội.
charset đảm bảo văn bản (đặc biệt là non-ASCII) được giải mã đúng. Đặt nó trước.viewport là thứ làm cho một site responsive trên mobile — nếu không có nó, điện thoại render ở chiều rộng giả 980px và thu nhỏ lại, làm hỏng CSS responsive của bạn.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- tránh bị phạt nội dung trùng lặp -->
<title> và description là những gì xuất hiện trong kết quả Google, nên chúng tác động đến tỷ lệ click. canonical cho công cụ tìm kiếm biết URL chính thức.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Những thẻ này điều khiển card xuất hiện khi link của bạn được chia sẻ trên Facebook, LinkedIn, Slack, X, v.v. — nếu không có chúng bạn nhận được một bản xem trước xấu xí hoặc trống rỗng.
charset và viewport là bắt buộc để render đúng và responsive trên mobile; title/description/canonical tác động đến SEO; các thẻ Open Graph điều khiển cách link của bạn trông như thế nào khi được chia sẻ.
Cùng nhau, chúng là lớp metadata làm cho một trang render đúng, xếp hạng tốt và chia sẻ đẹp.