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) đượ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:
Metoolzyog: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).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.https://.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:
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ị.Công cụ tự động đếm số ký tự và đưa ra cảnh báo:
....| 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 đề |
|---|---|---|---|---|
og:image |
1200 x 630 px (tối thiểu 600×315) | 1.91 : 1 | 60 – 80 ký tự | |
| Twitter / X | twitter:image |
1200 x 675 px (Large card) | 16 : 9 | Dưới 70 ký tự |
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ự |
og:image |
1000 x 1500 px (ảnh dọc) | 2 : 3 | Dưới 100 ký tự |
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).
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.
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.
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ó. 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.
Để 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.
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.
Để 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:
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.