Cách dùng Công cụ tạo Meta Tag
- Nhập tiêu đề trang, meta description và URL canonical. Bộ đếm sẽ cảnh báo trước khi Google cắt bớt nội dung.
- Điền ảnh Open Graph, tên site và locale, rồi chọn loại X card. Các bản xem trước Google, Facebook và X sẽ cập nhật ngay khi bạn gõ.
- Đặt chỉ thị robots, màu theme và đường dẫn icon nếu bạn cần.
- Sao chép kết quả Toàn bộ <head> nếu bạn làm site viết tay, hoặc chuyển sang Mã tùy chỉnh Webflow để chỉ lấy những thẻ mà Webflow không tự tạo từ phần cài đặt.
Thẻ meta là gì?
Thẻ meta là các phần tử HTML nằm trong <head> của trang, dùng để mô tả trang cho trình duyệt, công cụ tìm kiếm và mạng xã hội. Chúng không hiển thị trên nội dung trang, nhưng quyết định cách trang xuất hiện trong kết quả Google, cách liên kết được hiển thị khi chia sẻ trên Slack, LinkedIn hay WhatsApp, trang có được lập chỉ mục hay không, và cách trang co giãn trên điện thoại.
Những thẻ thực sự quan trọng
| Thẻ | Được dùng bởi | Mục đích |
|---|---|---|
<title> | Google, tab trình duyệt | Tiêu đề có thể nhấp trong kết quả tìm kiếm, là tín hiệu liên quan đã được xác nhận. |
meta description | Google, Bing | Thường được dùng làm đoạn trích dưới tiêu đề; ảnh hưởng đến tỷ lệ nhấp, không ảnh hưởng trực tiếp đến thứ hạng. |
link rel="canonical" | Google, Bing | Chỉ ra URL ưu tiên khi cùng một nội dung truy cập được qua nhiều địa chỉ (tham số, dấu gạch chéo cuối, http/https). |
meta robots | Tất cả các trình thu thập chính | noindex giữ trang khỏi kết quả; max-image-preview:large cho phép hiển thị ảnh thu nhỏ lớn trong Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | Giao thức Open Graph: tiêu đề, mô tả, ảnh và loại của liên kết được chia sẻ. |
twitter:* | X | Bố cục card (summary hoặc summary_large_image) và ghi nhận tài khoản; dùng các thẻ og: làm phương án dự phòng. |
viewport, charset | Trình duyệt | Thu phóng đúng trên di động và mã hóa văn bản chính xác. |
Thẻ meta keywords cũ cố ý không được tạo: Google đã bỏ qua nó suốt hơn một thập kỷ, và nó chỉ tiết lộ chiến lược từ khóa của bạn cho đối thủ.
Những lỗi thường gặp mà công cụ này giúp tránh
- og:image dùng URL tương đối. Các công cụ quét mạng xã hội cần URL
https://tuyệt đối. Thêmog:image:widthvàog:image:heightđể ảnh hiển thị ngay lần chia sẻ đầu tiên, thay vì sau khi quét lại. - Noindex cùng canonical. Trỏ canonical sang URL khác mà vẫn đặt
noindexsẽ gửi tín hiệu mâu thuẫn; hãy chọn một trong hai. - Dấu ngoặc kép chưa được escape. Dấu
"trong mô tả sẽ làm hỏng thuộc tính. Mọi giá trị đều được escape HTML trong kết quả. - Thẻ trùng lặp. Các nền tảng như Webflow, plugin SEO của WordPress và Shopify đã tự xuất sẵn nhiều thẻ. Thêm tay một
<title>hoặcog:imagethứ hai sẽ khiến công cụ thu thập phải đoán thẻ nào được dùng.
Webflow: trường cài đặt hay mã tùy chỉnh
Webflow tự ghi tiêu đề, mô tả, tiêu đề/mô tả/ảnh Open Graph, canonical, charset và viewport từ phần cài đặt Page và Site, nên dán cả một head đầy đủ vào mã tùy chỉnh sẽ gây trùng lặp. Chọn Mã tùy chỉnh Webflow ở trên, kết quả chỉ chứa những gì Webflow không thể đặt gốc: chỉ thị robots, theme-color, og:site_name, og:locale, tài khoản X và các liên kết icon bổ sung. Trên các trang mẫu CMS, ô mã tùy chỉnh cũng nhận các trường CMS được chèn vào. Sau khi xuất bản, hãy kiểm tra kết quả thực tế bằng Meta Tag Checker và Open Graph Checker, hoặc thiết kế ảnh chia sẻ bằng OG Image Generator.
Cũng được tìm dưới tên: tạo meta tag, meta tag generator, og tags generator, tạo open graph, tạo twitter card, html meta tags, thẻ meta seo, social meta tags.
Các công cụ dùng kèm tốt với Công cụ tạo Meta Tag
- Xem trước SERP — Viết thẻ title và meta description, rồi xem chính xác Google có thể cắt chúng ở đâu.
- Tạo Favicon — Tạo bộ favicon đầy đủ từ logo, một chữ cái hoặc một emoji: favicon.ico nhiều kích thước, Apple touch icon, icon Android/PWA, webclip cho Webflow, web manifest và các thẻ HTML để dán vào trang.
- Trình tạo Schema Markup — Chọn loại schema, điền biểu mẫu và sao chép JSON-LD sẵn sàng để dán.
- Giải thích robots.txt — Các quy tắc robots.txt ngắn nhưng dễ hiểu sai.
Câu hỏi thường gặp
Meta tag còn quan trọng với SEO không?
Ảnh Open Graph nên có kích thước bao nhiêu?
Tôi có cần cả thẻ Open Graph lẫn thẻ Twitter không?
og:title, og:description và og:image làm phương án dự phòng, nên bạn chỉ cần thêm twitter:card (và tùy chọn twitter:site) bên cạnh Open Graph.