MetoolzyMetoolzy

Open Graph Preview

Xem trước liên kết của bạn khi chia sẻ trên Facebook, Twitter và LinkedIn.

Multi-Platform Preview

See how your link looks on Facebook, Twitter, and LinkedIn.

Raw Tag Inspector

View all extracted Open Graph and Twitter meta tags.

Missing Tag Warnings

Get alerts about missing recommended meta tags.

Server-Side Fetch

Bypasses CORS by fetching pages on the server.

Giới thiệu về Open Graph Preview

The Open Graph Preview Checker fetches any public URL and shows you exactly how that page's link will appear when shared on Facebook, Twitter/X, and LinkedIn. Open Graph meta tags control the title, description, and image displayed in social share cards — getting these right can dramatically increase click-through rates on shared links. Many developers discover too late that their image is the wrong size, their title is missing, or their description is being cut off. This tool does a server-side fetch to bypass CORS restrictions, extracts all og:, twitter:, and standard meta tags, renders accurate previews for each platform, and highlights any missing recommended tags with clear warnings. Use it before every launch to verify your social sharing setup is perfect.

Làm sao để Open Graph Preview?

  1. Enter the full URL of the web page you want to preview (https:// is added automatically if omitted).
  2. Click the Preview button — the tool fetches the page server-side to avoid CORS issues.
  3. Review the Facebook, Twitter/X, and LinkedIn preview cards to see exactly how your link will look.
  4. Check the Missing Tags warning section to identify any recommended meta tags that are absent.
  5. Expand the Extracted Meta Tags table to inspect all raw property values including image URLs.
  6. Fix any issues in your HTML, redeploy, and re-check until all platforms show the correct preview.

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

Why does my preview look different from what I see on the actual social platform?

Social platforms aggressively cache Open Graph data — sometimes for up to 7 days. Facebook has a Sharing Debugger tool and Twitter has a Card Validator where you can force a cache refresh after updating your meta tags. This tool always fetches the latest version of your page.

My page returns an error — what could be causing this?

Common causes include: the page requires authentication, the server blocks non-browser user-agents, the URL redirects to a page that requires JavaScript to render content, or the server has strict CORS/firewall rules. Try with a publicly accessible page first.

What is the recommended og:image size?

For best results across all platforms, use an image that is 1200×630 pixels. Facebook and LinkedIn require a minimum of 200×200 px. Twitter large image cards need at least 300×157 px. The image must be served over HTTPS and be publicly accessible (no login required).

Which Open Graph tags are considered essential?

The four essential Open Graph tags are og:title, og:description, og:image, and og:url. Without og:type (defaulting to "website"), og:site_name, and the Twitter Card tags, you may get inconsistent or degraded previews on some platforms.

Does fixing my Open Graph tags affect my Google ranking?

Not directly. Open Graph tags are not used by Google for ranking. However, better-looking social cards lead to higher click-through rates on shared links, which can drive more traffic and indirectly improve your site's authority signals over time.

Cách Kiểm Tra & Xem Trước Thẻ Open Graph (OG) Khi Share Link Mạng Xã Hội Trực Tuyến

Trong thực tế phát triển phần mềm và tối ưu website, việc sử dụng công cụ kiểm tra open graph đóng vai trò vô cùng quan trọng. Bạn vừa xuất bản một bài viết tâm huyết hoặc ra mắt một sản phẩm mới trên website, nhưng khi chia sẻ đường link lên Facebook, Twitter (X), LinkedIn hay Zalo thì hình ảnh đại diện lại bị méo mó, tiêu đề bị cắt cụt hoặc tệ hơn là hoàn toàn không hiển thị ảnh thumbnail? Lỗi hiển thị thẻ chia sẻ mạng xã hội (Social Share Cards) không chỉ làm giảm nghiêm trọng tính chuyên nghiệp của thương hiệu mà còn đánh rơi tới 70% tỷ lệ nhấp chuột (CTR) của chiến dịch Marketing. Công cụ xem trước thẻ Open Graph trực tuyến của Metoolzy giúp bạn mô phỏng chính xác 100% giao diện hiển thị của liên kết trên các mạng xã hội lớn nhất trước khi bấm nút đăng bài.

Giao Thức Open Graph (OG) Là Gì Và Tại Sao Lại Quyết Định Tỷ Lệ Click?

Giao thức Open Graph (OG) được phát triển bởi Facebook vào năm 2010 nhằm chuẩn hóa cách thức các trang web giao tiếp với mạng xã hội. Khi một người dùng dán đường liên kết vào khung đăng bài hoặc gửi tin nhắn chat, crawler của mạng xã hội (như facebookexternalhit hay Twitterbot) sẽ tự động quét mã nguồn HTML của trang web để tìm các thẻ <meta property="og:..."> nằm trong phần <head>.

Các thẻ Open Graph quan trọng nhất bao gồm:

  • og:title: Tiêu đề của liên kết hiển thị trên card mạng xã hội (khuyến nghị 60 - 90 ký tự).
  • og:description: Đoạn mô tả tóm tắt nội dung hấp dẫn người đọc (khuyến nghị 150 - 200 ký tự).
  • og:image: Hình ảnh đại diện (Thumbnail). Đây là yếu tố thị giác quan trọng nhất thu hút ánh nhìn của người dùng khi lướt bảng tin (Feed). Kích thước tiêu chuẩn vàng là 1200 x 630 pixel (tỷ lệ 1.91:1).
  • og:url: Đường dẫn canonical chuẩn của bài viết.
  • twitter:card: Thẻ định dạng hiển thị riêng cho mạng xã hội X/Twitter (như summary_large_image hoặc summary).

Những Lỗi Phổ Biến Khi Cấu Hình Thẻ Open Graph

  1. Sai tỷ lệ khung hình của ảnh Thumbnail: Sử dụng ảnh vuông (1:1) hoặc ảnh dọc cho thẻ og:image sẽ khiến Facebook và Twitter tự động cắt xén (crop) hai bên, làm mất logo hoặc chữ trên hình ảnh.
  2. Kích thước file ảnh quá nặng: Nếu ảnh thumbnail vượt quá 8MB, crawler của mạng xã hội sẽ bỏ qua việc tải ảnh do vượt quá thời gian chờ (timeout), dẫn đến bài đăng không có ảnh.
  3. Quên cấu hình giao thức HTTPS cho liên kết ảnh: Đường dẫn ảnh bắt buộc phải sử dụng giao thức bảo mật https://.
  4. Bộ nhớ đệm (Cache) của mạng xã hội chưa được cập nhật: Khi bạn vừa sửa lại ảnh hoặc tiêu đề trên web, Facebook vẫn có thể hiển thị hình ảnh cũ do cơ chế lưu cache. Bạn cần dùng công cụ kiểm tra để quét lại (Re-scrape).

Ưu Điểm Đột Phá Của Công Cụ Open Graph Preview Trên Metoolzy

Mô Phỏng Trực Quan Đa Nền Tảng (Multi-Platform Preview)

Không cần phải đăng thử lên từng mạng xã hội để kiểm tra, công cụ cho phép bạn quan sát đồng thời giao diện hiển thị trên các nền tảng phổ biến nhất:

  • Facebook Feed Card: Hiển thị ảnh lớn nằm trên tiêu đề và mô tả.
  • Twitter / X Large Image Card: Hiển thị thẻ bo tròn hiện đại chuẩn giao diện X mới nhất.
  • LinkedIn Update Card: Mô phỏng thẻ tin tức chuyên nghiệp dành cho doanh nghiệp.
  • Tin nhắn chat (Messenger, Zalo, Telegram, Slack): Kiểm tra xem thumbnail có bị co nhỏ thành icon vuông hay không.

Kiểm Tra Trực Tiếp Bằng URL Hoặc Dán Mã Thẻ Meta

  • Kiểm tra từ URL đang chạy: Chỉ cần nhập đường dẫn website của bạn, công cụ sẽ tự động cào (fetch) dữ liệu và phân tích các thẻ meta đang có.
  • Chế độ kiểm thử cục bộ (Sandbox Mode): Nếu website đang phát triển trên localhost chưa public ra internet, bạn có thể tự nhập tiêu đề, mô tả và tải ảnh lên để kiểm tra trước bố cục hiển thị.

Báo Cáo Cảnh Báo Và Gợi Ý Tối Ưu (Warning Diagnostics)

Công cụ tự động đếm số ký tự và đưa ra cảnh báo:

  • Cảnh báo tiêu đề quá dài có nguy cơ bị cắt dấu ....
  • Cảnh báo ảnh đại diện không đạt tỷ lệ 1200x630px.
  • Cảnh báo thiếu các thẻ Twitter Card bổ trợ.

Bảng Tiêu Chuẩn Kích Thước Ảnh & Độ Dài Thẻ Meta Cho Mạng Xã Hội

Nền tảng Thẻ quy định Kích thước ảnh tối ưu Tỷ lệ khung hình Giới hạn tiêu đề
Facebook og:image 1200 x 630 px (tối thiểu 600x315) 1.91 : 1 60 - 80 ký tự
Twitter / X twitter:image 1200 x 675 px (Large card) 16 : 9 Dưới 70 ký tự
LinkedIn og:image 1200 x 627 px 1.91 : 1 Dưới 100 ký tự
Zalo og:image 1200 x 630 px 1.91 : 1 70 - 90 ký tự
Pinterest og:image 1000 x 1500 px (ảnh dọc) 2 : 3 Dưới 100 ký tự

Hướng Dẫn Sử Dụng Trong 3 Bước

Bước 1: Nhập URL Cần Kiểm Tra

Mở công cụ xem trước thẻ Open Graph trên Metoolzy. Nhập đường link trang web của bạn vào thanh địa chỉ và nhấn nút Kiểm tra (Preview).

Bước 2: Quan Sát Kết Quả Mô Phỏng

Xem xét kỹ lưỡng hình ảnh, tiêu đề và mô tả trên các tab Facebook, Twitter, LinkedIn. Kiểm tra xem các thông điệp quan trọng có bị che khuất hay không.

Bước 3: Nhận Mã HTML Đã Chuẩn Hóa

Nếu có thông tin cần điều chỉnh, bạn có thể chỉnh sửa trực tiếp trên giao diện và bấm nút Sinh mã HTML (Generate Code) để sao chép đoạn mã meta dán vào phần <head> của website.

Câu Hỏi Thường Gặp (FAQ)

Làm thế nào để Facebook xóa bộ nhớ đệm và hiển thị ảnh mới nhất?

Sau khi cập nhật thẻ meta trên website, bạn có thể truy cập công cụ Facebook Sharing Debugger chính thức, nhập URL và bấm nút "Scrape Again" để ép Facebook cập nhật lại cache hình ảnh ngay lập tức.

Có cần thiết phải khai báo cả thẻ Open Graph và Twitter Card không?

Có. Mặc dù Twitter có thể đọc dự phòng (fallback) các thẻ og:... nếu thiếu thẻ twitter:..., nhưng việc khai báo rõ ràng thẻ twitter:card (với giá trị summary_large_image) sẽ đảm bảo hình ảnh của bạn luôn hiển thị to toàn màn hình trên giao diện Twitter thay vì một hình thu nhỏ bên góc.

Tại sao hình ảnh Open Graph của tôi hiển thị mờ trên màn hình Retina?

Để hình ảnh sắc nét trên các màn hình có mật độ điểm ảnh cao (Retina, 2K, 4K), bạn bắt buộc phải thiết kế ảnh ở độ phân giải 1200x630px. Nếu dùng ảnh kích thước nhỏ 600x315px, trình duyệt sẽ phóng to ảnh dẫn đến hiện tượng vỡ hạt.

Tóm Tắt Lợi Ích Của Công Cụ

Việc áp dụng giải pháp kiểm tra open graph giúp bạn tiết kiệm đáng kể thời gian thao tác, loại bỏ sai sót thủ công và nâng cao năng suất làm việc mỗi ngày. Hãy thường xuyên thực hiện kiểm tra open graph trực tiếp trên Metoolzy để đạt hiệu quả tối ưu nhất cho dự án của bạn.

Công Cụ Liên Quan Hữu Ích Trên Metoolzy

Để nâng cao tối đa hiệu suất làm việc, bạn có thể kết hợp cùng các công cụ miễn phí sau:

Tóm Tắt Lợi Ích Của Công Cụ

Việc áp dụng giải pháp kiểm tra open graph giúp bạn tiết kiệm đáng kể thời gian thao tác, loại bỏ sai sót thủ công và nâng cao năng suất làm việc mỗi ngày. Hãy thường xuyên thực hiện kiểm tra open graph trực tiếp trên Metoolzy để đạt hiệu quả tối ưu nhất cho dự án của bạn. Nhờ khả năng xử lý tức thì, tính năng kiểm tra open graph sẽ là trợ thủ đắc lực không thể thiếu trong quy trình làm việc chuyên nghiệp.

📚 Bài Viết Cùng Chủ Đề Nên Đọc