Xem trước Open Graph

Cách dùng

1. 1 Dán bất kỳ URL công khai nào.
2. 2 Nhấn Test (hoặc Enter). Chúng tôi sẽ tải trang và phân tích các thẻ meta og:* và twitter:*.
3. 3 Xem trước liên kết hiển thị ra sao trên Facebook, Twitter / X, LinkedIn và Slack — kèm cảnh báo kiểm tra.

Vì sao dùng công cụ này

• Bốn bản xem trước nền tảng đặt cạnh nhau — được tinh chỉnh chi tiết để khớp với thẻ chia sẻ thật.
• Cảnh báo kiểm tra giúp phát hiện thẻ bị thiếu, tiêu đề quá dài, và URL hình ảnh dùng HTTP.
• Xem các thẻ og:* và twitter:* gốc đúng như cách các nền tảng đọc chúng.
• Được cache trong 10 phút, có giới hạn tần suất để tránh lạm dụng.

Câu hỏi thường gặp

Xem trước Open Graph là gì?

Xem trước Open Graph (Open Graph Preview) là công cụ cho biết một URL sẽ hiển thị như thế nào khi được chia sẻ trên các nền tảng mạng xã hội. Công cụ đọc các thẻ meta Open Graph và Twitter Card của trang, sau đó dựng lại thẻ chia sẻ mô phỏng cho các mạng như Facebook, Twitter, LinkedIn và Slack, giúp bạn kiểm tra tiêu đề, mô tả và hình ảnh trước khi đăng. Công cụ chạy hoàn toàn trên trình duyệt, không cần tài khoản.

Tính năng

Ví dụ

https://github.com — page HTML with <meta property="og:title" content="GitHub · Build and ship software...">, og:image, og:type="object", and twitter:card="summary_large_image"

JSON: { resolved_url, status: 200, tags: { title, description, canonical, favicon, og: {title, image, url, type, ...}, twitter: {card, title, image, ...} }, warnings: [] } — rendered as four share-card previews (Facebook, Twitter/X, LinkedIn, Slack) plus a raw tag list; result cached 600s per URL

Trường hợp sử dụng

1. 1

   Kiểm tra chất lượng trước khi xuất bản

   Kiểm tra thẻ chia sẻ của một bài blog hoặc landing page trước khi xuất bản, phát hiện og:image bị thiếu hoặc og:title quá dài.

2. 2

   Gỡ lỗi thẻ chia sẻ bị hỏng

   Xem chính xác các giá trị og:* và twitter:* đã được phân giải mà nền tảng sẽ đọc, bao gồm cả việc og:image có phân giải thành URL HTTPS tuyệt đối hay không.

3. 3

   So sánh giữa các nền tảng

   So sánh cách tiêu đề, mô tả và hình ảnh của cùng một URL fallback khác nhau giữa các bản xem trước unfurl của Facebook, Twitter/X, LinkedIn và Slack.

Tài liệu tham khảo

• The Open Graph Protocol — Open Graph Protocol (ogp.me)
• Sharing for Webmasters (Open Graph tags on Facebook) — Meta for Developers
• Cards Markup Tags (twitter:card meta tags) — X (Twitter) Developer Platform
• <link>: The External Resource Link element (rel="canonical"/"icon") — MDN Web Docs

Công cụ liên quan