tigtools

Xem trước Open Graph

Nhập nội dung các thẻ Open Graph để xem gần đúng giao diện của liên kết khi được chia sẻ và kiểm tra ảnh có đúng kích thước hay không.

Chạy ngay trên trình duyệt Không cần đăng ký

Trình duyệt tải ảnh này trực tiếp từ địa chỉ bạn nhập.

Khuyến nghị: 1200 × 630 px (1.91:1), JPG hoặc PNG, dung lượng dưới vài megabyte. Tránh đặt nội dung quan trọng sát mép vì một số ứng dụng sẽ cắt ảnh thành hình vuông.

Thẻ liên kết lớn
Không có ảnh
example.com
—
Thẻ liên kết nhỏ
Không có ảnh
example.com
—

Đây là các bản mô phỏng thẻ chung. Mỗi ứng dụng có bố cục, phông chữ và cách cắt ảnh riêng, đồng thời lưu bản xem trước vào bộ nhớ đệm.

Cách sử dụng

  1. Nhập og:title và og:description đang dùng hoặc dự định dùng trên trang.
  2. Dán URL đầy đủ của og:image. Công cụ sẽ tải ảnh và báo kích thước pixel thực tế.
  3. Thêm URL hoặc tên miền của trang, rồi so sánh bản xem trước thẻ lớn và nhỏ, đồng thời khắc phục các cảnh báo.

Cách hoạt động

Khi ai đó chia sẻ liên kết, hầu hết mạng xã hội và ứng dụng trò chuyện sẽ tải trang và đọc các thẻ Open Graph: og:title, og:description, og:image và og:url. Sau đó, chúng tạo một thẻ xem trước. Hình ảnh ngang có tỷ lệ khoảng 1.91:1 thường tạo thẻ lớn với ảnh ở phía trên; ảnh nhỏ hoặc vuông thường tạo thẻ gọn hơn với hình thu nhỏ bên cạnh phần văn bản.

Công cụ này hiển thị hai kiểu thẻ chung để bạn đánh giá độ dài văn bản và cách ảnh được cắt. Công cụ kiểm tra kích thước gốc của ảnh sau khi trình duyệt tải ảnh: nếu ảnh nhỏ hơn 200 × 200 px, nhiều ứng dụng sẽ bỏ qua ảnh; nếu nhỏ hơn 600 × 315 px, các ứng dụng thường dùng bố cục nhỏ; tỷ lệ khác xa 1.91:1 đồng nghĩa với việc ảnh sẽ bị cắt. Kích thước 1200 × 630 px được khuyến nghị rộng rãi vì ảnh vẫn sắc nét trên màn hình mật độ điểm ảnh cao.

Bản xem trước không thể cho biết chính xác một ứng dụng cụ thể sẽ hiển thị nội dung ra sao. Các ứng dụng khác nhau về số dòng tiêu đề và mô tả được hiển thị; một số không dùng phần mô tả, và hầu hết lưu vào bộ nhớ đệm bản xem trước một thời gian sau lần chia sẻ đầu tiên, nên thay đổi thẻ có thể không xuất hiện ngay. Nhiều nền tảng có công cụ gỡ lỗi riêng để làm mới bộ nhớ đệm này.

Ví dụ

Dùng ảnh chụp màn hình làm og:image

Ảnh chụp màn hình 1440 × 900 có tỷ lệ 1.6:1. Công cụ cảnh báo về tỷ lệ này: ở thẻ lớn, phần trên và dưới ảnh sẽ bị cắt. Xuất ảnh ở kích thước 1200 × 630 sẽ giúp tránh những bất ngờ.

Chỉ dùng logo làm ảnh

Logo 180 × 180 nhỏ hơn 200 × 200 px, nên nhiều ứng dụng sẽ không hiển thị ảnh. Thay vào đó, hãy dùng biểu ngữ ngang lớn hơn có logo.

Kiểm tra độ dài tiêu đề

og:title dài 90 ký tự sẽ xuống thành ba dòng trong bản xem trước thẻ lớn. Rút ngắn còn khoảng 60 ký tự giúp thẻ gọn gàng trong hầu hết ứng dụng.

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

Tại sao liên kết của tôi hiển thị khác nhau trên Facebook, LinkedIn và X?

Mỗi nền tảng hiển thị thẻ theo bố cục, cách cắt ảnh và giới hạn văn bản riêng; một số nền tảng hiển thị mô tả, số khác thì không. Bản xem trước này chỉ là mô phỏng chung, không sao chép thiết kế của bất kỳ nền tảng nào.

Tôi đã đổi og:image nhưng ảnh cũ vẫn xuất hiện. Tại sao?

Các nền tảng lưu bản xem trước liên kết vào bộ nhớ đệm. Hãy dùng công cụ gỡ lỗi chia sẻ riêng của nền tảng để tải lại trang, hoặc đợi bộ nhớ đệm hết hạn. Đổi tên tệp ảnh cũng có thể giúp ích.

Tôi có thể dùng ảnh SVG hoặc WebP không?

Hầu hết nền tảng không hỗ trợ SVG. WebP hoạt động trên nhiều ứng dụng nhưng không phải tất cả; JPG hoặc PNG là lựa chọn an toàn nhất.

Tại sao công cụ không tải được ảnh của tôi?

URL có thể yêu cầu đăng nhập, trỏ đến trang HTML thay vì tệp ảnh, hoặc máy chủ có thể chặn yêu cầu từ các trang web khác. Nếu trình duyệt không tải được ảnh tại đây, trình thu thập dữ liệu của nền tảng mạng xã hội cũng có thể không tải được.

Quyền riêng tư

Văn bản bạn nhập được giữ trong trình duyệt. Để kiểm tra ảnh, trình duyệt của bạn sẽ gửi yêu cầu trực tiếp đến URL đã nhập (không gửi referrer), vì vậy máy chủ sẽ nhận được một yêu cầu ảnh thông thường. Không có dữ liệu nào được gửi đến TIG Tools.