Trình kiểm tra Open Graph

Tiếp theo

Dán HTML của trang (chỉ riêng phần <head> là đủ) và trình kiểm tra này sẽ phân tích mọi thẻ meta og:twitter: mà nó tìm thấy, rồi cho biết trong sáu thẻ thiết yếu có những thẻ nào, thiếu thẻ nào và giá trị chính xác của từng thẻ. Vì công cụ đọc phần đánh dấu bạn dán vào chứ không truy cập một URL trực tiếp, nó cũng hoạt động trên máy chủ thử nghiệm, localhost và các trang nằm sau đăng nhập, nơi không một trình thu thập dữ liệu trực tuyến nào tiếp cận được.

Cách công cụ đọc các thẻ của bạn

  1. 1

    Mở mã nguồn của trang

    Nhấn Ctrl+U (Cmd+Option+U trên macOS) để xem mã HTML thô mà các trình thu thập dữ liệu mạng xã hội thực sự nhận được.

  2. 2

    Sao chép phần head

    Chọn từ `<head>` đến `</head>`. Phần `<body>` không cần thiết, mặc dù dán cả trang cũng không gây hại gì.

  3. 3

    Dán vào công cụ

    Mọi thẻ `<meta>` được phân tích ngay khi bạn nhập. Không có URL nào bị truy cập: chỉ phần đánh dấu bạn dán vào mới được kiểm tra.

  4. 4

    Đọc danh sách kiểm tra

    Sáu mục kiểm tra sẽ chuyển sang xanh hoặc đỏ: og:title, og:description, og:type, og:url, og:image và twitter:card.

  5. 5

    Xem lại các giá trị tìm thấy

    Mọi thẻ og: và twitter: đều được liệt kê kèm nội dung của nó, nên các lỗi gõ nhầm, giá trị rỗng và đường dẫn ảnh tương đối đều lộ ra rõ ràng.

Các thẻ Open Graph mà công cụ tìm kiếm

Thẻ Mục đích Có trong danh sách kiểm tra?
og:title Tiêu đề của thẻ chia sẻ Có, bắt buộc
og:description Tiêu đề phụ của thẻ chia sẻ Có, bắt buộc
og:type website, article, video, v.v. Có, bắt buộc
og:url URL chuẩn (canonical) Có, bắt buộc
og:image URL ảnh xem trước Có, bắt buộc
og:site_name Tên thương hiệu phía trên tiêu đề Được liệt kê khi có
og:locale en_US, es_ES, v.v. Được liệt kê khi có

Bất kỳ thẻ og: nào khác trong phần đánh dấu của bạn cũng được liệt kê, ngay cả khi nó không nằm trong danh sách kiểm tra.

Các thẻ Twitter Card

X (Twitter) quay về dùng Open Graph khi thiếu các thẻ riêng của nó, nên chỉ có twitter:card nằm trong danh sách kiểm tra. Những thẻ còn lại được liệt kê mỗi khi công cụ tìm thấy chúng.

Thẻ Mục đích
twitter:card summary, summary_large_image, v.v.
twitter:site @tài khoản của trang xuất bản
twitter:creator @tài khoản của tác giả
twitter:title Ghi đè og:title
twitter:description Ghi đè og:description
twitter:image Ghi đè og:image

Thông số ảnh hoạt động ở mọi nơi

Công cụ xác nhận rằng og:image đã được khai báo, nhưng nó không bao giờ tải tệp về, nên hãy tự kiểm tra các mục sau:

  • Kích thước: 1200 x 630 px (Facebook, LinkedIn, thẻ Twitter cỡ lớn).
  • Tỷ lệ khung hình: 1.91:1 cho summary_large_image.
  • Dung lượng tệp: dưới 5 MB, lý tưởng là dưới 1 MB để trình thu thập dữ liệu không bị hết thời gian chờ.
  • Định dạng: JPG hoặc PNG. WebP và AVIF vẫn được hỗ trợ thiếu nhất quán.
  • URL tuyệt đối: luôn dùng địa chỉ https://... đầy đủ, không bao giờ dùng đường dẫn tương đối theo giao thức hay tương đối theo gốc.

Những sự cố thường gặp mà báo cáo phát hiện

  • Không có og:image. Lỗi phổ biến nhất. Không có ảnh, thẻ chia sẻ tụt xuống thành một liên kết màu xanh không được định dạng.
  • Thẻ có mặt nhưng rỗng. Công cụ in ra mọi giá trị, nên một og:title không có gì phía sau rất dễ phát hiện.
  • Đường dẫn ảnh tương đối. og:image phải là một URL tuyệt đối; đường dẫn như /img/card.jpg làm hỏng việc thu thập dữ liệu.
  • og:url không khớp. Khi og:url khác với canonical thật, các nền tảng có thể từ chối thu thập trang.
  • Thẻ được chèn bằng JavaScript. Chúng không bao giờ xuất hiện trong view-source, nên cũng không xuất hiện ở đây, và hầu hết trình thu thập dữ liệu sẽ không thấy chúng.
  • Thẻ chia sẻ cũ trên Facebook. Không phải lỗi đánh dấu: Facebook lưu bộ nhớ đệm các lần thu thập. Buộc làm mới bằng Sharing Debugger của nó.

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

Vì dán phần đánh dấu cho thấy chính xác những gì một trình thu thập dữ liệu mạng xã hội nhìn thấy trong phản hồi thô, và cách này hoạt động trên cả những trang không trình thu thập nào chạm tới được: máy chủ thử nghiệm, localhost, mạng nội bộ và mọi thứ nằm sau đăng nhập. Hãy mở trang, nhấn Ctrl+U, sao chép mã nguồn rồi dán vào đây.

Không hẳn. X quay về dùng các thẻ Open Graph khi thiếu thẻ twitter:, đó là lý do chỉ twitter:card nằm trong danh sách kiểm tra. Chỉ thêm những thẻ còn lại khi bạn muốn tiêu đề, mô tả hoặc hình ảnh trên X khác với mọi nền tảng khác.

Trình kiểm tra (inspector) hiển thị DOM sau khi JavaScript đã chạy, trong khi các trình thu thập dữ liệu mạng xã hội đọc phản hồi HTML thô. Hãy dùng view-source (Ctrl+U), không phải inspector, và dán chính phần đó. Nếu thẻ chỉ tồn tại trong DOM, hãy thêm kết xuất phía máy chủ hoặc dịch vụ prerender để các trình thu thập có thể thấy nó.

1200 x 630 px, JPG hoặc PNG. Đây là kích thước khuyến nghị cho thẻ cỡ lớn của Facebook và LinkedIn, được X chấp nhận, và co giãn gọn gàng trong Slack, Discord cùng các ứng dụng mở rộng liên kết khác. Công cụ xác nhận rằng og:image đã được khai báo, nhưng nó không mở tệp, nên hãy tự kiểm tra kích thước.

Facebook lưu bộ nhớ đệm kết quả thu thập tới 30 ngày. Hãy dán URL vào Sharing Debugger tại developers.facebook.com/tools/debug và thu thập lại để xóa bộ nhớ đệm.

Công cụ liên quan

Công cụ này có phiên bản bằng các ngôn ngữ khác