Xem Trước Open Graph

Open Graph thực sự là gì

Giao thức Open Graph được tạo bởi Facebook vào năm 2010 như một cách để biến bất kỳ trang web nào thành một "rich object" trong đồ thị xã hội, một bộ siêu dữ liệu có cấu trúc mà các ứng dụng khác (ban đầu là Facebook, hiện nay cũng có LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, và hàng chục ứng dụng khác) có thể đọc để render một thẻ xem trước khi ai đó dán URL của bạn. Đặc tả chính thức tồn tại tại ogp.me và giao thức đã hiệu quả trở thành lingua franca của việc chia sẻ liên kết trên web.

Không có các thẻ OG, các nền tảng xã hội cào trang của bạn và đoán: chúng chọn một tiêu đề, lấy hình ảnh đầu tiên mà chúng có thể tìm thấy, và gọi nó là một thẻ. Kết quả hiếm khi là điều bạn muốn. Với các thẻ OG, bạn kiểm soát tiêu đề, mô tả, và hình ảnh, đó là sự khác biệt giữa một liên kết được đánh bóng và một cái trông bị hỏng.

Bốn Thẻ Bắt Buộc (theo ogp.me)

Đặc tả Open Graph chính thức xác định bốn thuộc tính bắt buộc. Để đủ điều kiện là một đối tượng Open Graph, một trang phải khai báo cả bốn:

Các thẻ tùy chọn được đề xuất bao gồm og:description (một hoặc hai câu tóm tắt), og:site_name (tên trang web của bạn như một nhãn), og:locale (ngôn ngữ và khu vực), và các gợi ý kích thước hình ảnh og:image:width / og:image:height / og:image:alt. Bao gồm các gợi ý kích thước cho phép các client xã hội phân bổ trước đúng lượng không gian và tránh sự dịch chuyển bố cục khi hình ảnh tải.

Twitter / X Cards: Cùng Ý Tưởng, Thẻ Hơi Khác

X (trước đây là Twitter) có không gian tên siêu dữ liệu riêng, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, nhưng quan trọng, X chuyển sang các thẻ OG khi các thẻ cụ thể của Twitter bị thiếu. Vì vậy, một trang chỉ vận chuyển các thẻ OG vẫn nhận được một thẻ trên X. Nơi hai cái khác nhau là trong loại thẻ:

• twitter:card = summary, hình thu nhỏ vuông nhỏ, tiêu đề, mô tả.
• twitter:card = summary_large_image, hình ảnh full-width ở đầu thẻ. Mặc định hiện đại cho chia sẻ nội dung vì nó nhận được nhiều sự chú ý hình ảnh hơn trong feed.
• app và player, cho cài đặt ứng dụng và video inline tương ứng.

Lưu ý: bản xem trước Twitter Card Validator độc lập tại cards-dev.twitter.com/validator đã bị X xóa vào ngày 2 tháng 8 năm 2022. Cách hiện tại để xác minh một thẻ là bắt đầu một tweet mới trong Tweet Composer, dán URL, và để bản xem trước render, bạn không cần thực sự đăng tweet. Một số công cụ của bên thứ ba (bao gồm cái này) gần đúng thẻ được render để bạn có thể lặp lại trước khi go live.

Kích Thước Hình Ảnh Thực Sự Hoạt Động

Không có một kích thước hoàn hảo duy nhất, nhưng hình ảnh 1200×630 (tỷ lệ khung hình 1,91:1) là cá cược duy nhất đáng tin cậy nhất, hoạt động ở mọi nơi mà không có cắt xén lớn. Khuyến nghị mỗi nền tảng:

Giữ văn bản và khuôn mặt quan trọng gần trung tâm của hình ảnh, mọi nền tảng đều cắt xén khác nhau và một logo ở góc có thể biến mất sau các lớp phủ UI của nền tảng.

Tại Sao Thẻ Của Bạn Đôi Khi Không Hiển Thị

Nếu bạn đã thêm các thẻ OG nhưng bản xem trước vẫn bị hỏng hoặc trống, các nghi phạm thông thường:

• HTTPS là bắt buộc. Facebook và hầu hết các nền tảng hiện đại từ chối các URL hình ảnh http://. Phục vụ og:image qua HTTPS.
• Hình ảnh không thể truy cập công khai. Đằng sau xác thực, bị chặn bởi danh sách cho phép IP, hoặc trả về 403 cho crawler của nền tảng. Kiểm tra bằng cách mở URL hình ảnh trong một cửa sổ trình duyệt riêng tư.
• Hình ảnh quá nhỏ. Dưới mức tối thiểu của nền tảng (Facebook 200×200, LinkedIn 1200×627), thẻ rơi xuống một hình thu nhỏ nhỏ hoặc không có hình ảnh nào cả.
• Tỷ lệ khung hình sai. Một hình ảnh vuông 1:1 được gửi như summary_large_image trên X bị cắt giữa, thường là tệ.
• Cache. Các nền tảng xã hội cache siêu dữ liệu OG của bạn một cách tích cực. Sau khi sửa các thẻ, truy cập Sharing Debugger của Facebook và nhấp "Scrape Again" để làm mới; Post Inspector của LinkedIn làm điều tương tự; X nhận các thay đổi vào lần tiếp theo ai đó dán URL.
• Robots.txt chặn crawler xã hội. Hãy chắc chắn rằng các user agent như facebookexternalhit, Twitterbot, LinkedInBot, Slackbot có thể lấy trang và hình ảnh của bạn.
• Máy chủ trả về non-2xx cho crawler. Kiểm tra nhật ký máy chủ của bạn cho các user agent của bot xã hội.
• URL hình ảnh tương đối. og:image phải là một URL tuyệt đối (https://yoursite.com/og.jpg), không bao giờ /og.jpg.

Vấn Đề Cache

Khi một nền tảng xã hội cào trang của bạn, siêu dữ liệu được cache trong một khoảng thời gian, truyền thuyết cộng đồng đặt nó khoảng 7 ngày cho Facebook và LinkedIn, mặc dù không có nền tảng nào ghi lại TTL chính xác. Cập nhật các thẻ OG của bạn không tự động làm mới cache. Để buộc cào lại, hãy sử dụng các công cụ chính thức: Facebook Sharing Debugger, LinkedIn Post Inspector. X nhận siêu dữ liệu mới khi URL được chia sẻ tiếp theo. Slack và Discord làm mới bản xem trước của họ dựa trên các thẻ OG tại thời điểm fetch, vì vậy chúng cập nhật nhanh hơn Facebook.

Giá Trị og:type Phổ Biến

Thẻ og:type nói với nền tảng xã hội loại đối tượng nào mà trang đại diện. Hầu hết các trang là website (mặc định) hoặc article; các giá trị cụ thể theo chiều dọc cho phép các nền tảng render các thẻ phong phú hơn. Từ đặc tả:

• website, mặc định cho các trang chung.
• article, bài đăng blog, tin tức. Kết hợp với article:published_time, article:author, article:section, article:tag.
• book, kết hợp với book:author, book:isbn.
• profile, cho các trang hồ sơ người dùng.
• video.movie / video.episode / video.tv_show / video.other, cho nội dung video.
• music.song / music.album / music.playlist / music.radio_station, cho âm nhạc.

Giới Hạn Độ Dài Trong Thực Tế

Không có nền tảng nào thực thi giới hạn cứng về độ dài tiêu đề hoặc mô tả, nhưng mỗi cái cắt xén sau một điểm:

• Tiêu đề, giữ dưới ~60 ký tự để an toàn trên các nền tảng; ~70 cắt xén trên hầu hết. Thông điệp quan trọng trong 50 đầu tiên.
• Mô tả, dưới ~155-200 ký tự trước khi cắt xén. Ít hơn trên di động (khoảng 100). Đưa thông tin chính lên đầu.
• Văn bản alt hình ảnh, nên có mặt (og:image:alt) cho trình đọc màn hình và các client có ý thức về khả năng tiếp cận; dưới 100 ký tự.

JSON-LD vs Open Graph (Chúng Là Những Thứ Khác Nhau)

Một sự nhầm lẫn phổ biến: dữ liệu có cấu trúc JSON-LD (sử dụng từ vựng schema.org) và các thẻ meta Open Graph làm các công việc khác nhau. OG / Twitter Cards kiểm soát bản xem trước chia sẻ xã hội, những gì hiển thị khi ai đó dán URL của bạn vào Slack hoặc Facebook. JSON-LD với schema.org giúp Google phân tích cú pháp trang của bạn cho kết quả tìm kiếm phong phú, thẻ công thức, thông tin sản phẩm, đoạn FAQ trong Google Search. Cả hai đều được khuyến nghị, và chúng không thay thế nhau.

Các Sai Lầm Phổ Biến

1. Sử dụng URL og:image tương đối. Đặc tả yêu cầu một URL tuyệt đối. Các đường dẫn tương đối bị bỏ qua âm thầm.
2. Sử dụng logo trang web chung cho mỗi trang. Hình ảnh OG là anh hùng của thẻ của bạn, mỗi trang xứng đáng có một hình ảnh độc đáo, lý tưởng là liên kết vào nội dung của trang.
3. Quên og:image:width và og:image:height. Một số client phân bổ trước không gian và bỏ qua hình ảnh mà không có các gợi ý này.
4. Thiếu loại twitter:card summary_large_image. Không có nó, X mặc định là thẻ summary nhỏ hơn với hình thu nhỏ vuông, thường kém hấp dẫn hơn.
5. Đặt văn bản chính ở các góc của hình ảnh. Các nền tảng khác nhau cắt xén khác nhau. Các đối tượng và văn bản quan trọng nên ở trung tâm 80%.
6. Cập nhật các thẻ nhưng không làm mới cache. Truy cập Sharing Debugger / Post Inspector chính thức sau mỗi thay đổi.
7. Gửi URL hình ảnh HTTP. Hầu hết các nền tảng từ chối các hình ảnh không phải HTTPS; thẻ sẽ xuất hiện mà không có một hình ảnh.
8. Chỉ sử dụng og:title và og:description. Không có og:image, thẻ được render như một stub chỉ-văn-bản thưa thớt trên hầu hết các nền tảng.

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

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Công cụ liên quan