Công cụ tạo thẻ meta Open Graph
Tạo thẻ meta Open Graph cho bản xem trước liên kết trên Facebook, LinkedIn, WhatsApp, Slack và Discord: tiêu đề, mô tả, ảnh kèm kích thước và alt, kiểu, URL, locale.
URL tuyệt đối; kích thước 1200×630 px phù hợp với hầu hết mạng xã hội.
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
Tạo thẻ Open Graph là gì?
Công cụ này tạo các thẻ Open Graph <meta property="og:…"> quyết định cách một liên kết hiển thị khi được chia sẻ trên Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram và nhiều ứng dụng khác. Nó bao gồm og:type, tiêu đề, mô tả, URL, tên website, locale và ảnh kèm secure URL, chiều rộng, chiều cao và văn bản alt, đồng thời cảnh báo khi thiếu các thuộc tính bắt buộc.
Cách sử dụng Tạo thẻ Open Graph
- Điền og:title, og:type, og:url và og:image (bốn thuộc tính bắt buộc).
- Thêm mô tả, tên website, locale cùng kích thước và văn bản alt của ảnh.
- Khắc phục mọi cảnh báo thiếu thuộc tính.
- Sao chép các thẻ vào phần <head> của trang.
Khi nào nên dùng Tạo thẻ Open Graph
Dùng công cụ bất cứ khi nào một trang sẽ được chia sẻ và bạn muốn kiểm soát bản xem trước thay vì để mỗi ứng dụng tự đoán. Các mạng xã hội lưu cache bản xem trước; sau khi đổi thẻ, hãy dùng công cụ gỡ lỗi của nền tảng (ví dụ Facebook Sharing Debugger) để làm mới. Với X (Twitter), xem thêm công cụ tạo Twitter Card.
Tạo thẻ Open Graph hoạt động như thế nào
Mỗi trường không trống trở thành một thẻ <meta property="og:…" content="…"> với nội dung đã được thoát ký tự HTML, theo thứ tự mà giao thức Open Graph khuyến nghị. Khi URL ảnh dùng https, một thẻ og:image:secure_url có cùng URL sẽ được thêm; chiều rộng, chiều cao và alt của ảnh chỉ được ghi khi đã đặt ảnh.
Các Trường Hợp Sử Dụng Phổ Biến
- Cho bài blog hiển thị ảnh xem trước lớn trên LinkedIn và Facebook.
- Đặt og:locale cho trang đã bản địa hóa.
- Thêm og:image:alt để tăng khả năng tiếp cận.
- Giúp trang sản phẩm hiện tên và ảnh sản phẩm trên WhatsApp.
Câu Hỏi Thường Gặp
Kích thước ảnh nào phù hợp nhất?
1200×630 px (1,91:1) hiển thị tốt trên hầu hết nền tảng. Hãy đặt nội dung quan trọng ở giữa vì một số ứng dụng cắt thành hình vuông.
Những thẻ og nào là bắt buộc?
Giao thức yêu cầu og:title, og:type, og:image và og:url. Mô tả và tên website không bắt buộc nhưng nên có.
Vì sao Facebook vẫn hiện ảnh cũ?
Bản xem trước được lưu cache. Hãy thu thập lại URL trong Sharing Debugger, hoặc đổi URL ảnh.