Xem Trước Open Graph
EXAMPLE WEBSITE
Ví Dụ Tiêu Đề Trang
Đây là ví dụ mô tả nội dung trang sẽ xuất hiện khi được chia sẻ trên mạng xã hội.
https://example.com/page
Ví Dụ Tiêu Đề Trang
Đây là ví dụ mô tả nội dung trang sẽ xuất hiện khi được chia sẻ trên mạng xã hội.
example.com
websiteCách sử dụng Open Graph Previewer
- 1
Nhập URL trang
Dán URL đầy đủ của trang bạn muốn kiểm tra vào ô URL trang web.
- 2
Lấy dữ liệu OG
Nhấn "Fetch OG Data" để kéo về tiêu đề, mô tả, ảnh và tên trang Open Graph hiện có của trang.
- 3
Chỉnh sửa thủ công nếu cần
Chuyển sang Edit Manually để điều chỉnh tiêu đề, mô tả, URL ảnh, kiểu và các trường khác, đồng thời xem bản xem trước cập nhật.
- 4
Xem trước và sao chép thẻ
Xem lại bản xem trước thẻ Facebook và Twitter, sau đó sao chép các meta tag được tạo để thêm chúng vào trang của bạn.
Hướng dẫn dứt khoát về Open Graph và bản xem trước liên kết
Giao thức Open Graph là gì
Giao thức Open Graph là một tập hợp nhỏ các thẻ meta, ban đầu được Facebook giới thiệu, cho phép bất kỳ trang web nào tự mô tả mình như một đối tượng phong phú khi được chia sẻ. Thay vì một liên kết màu xanh trơ trụi, một trang có các thẻ Open Graph biến thành một thẻ với một dòng tiêu đề, một bản tóm tắt và một hình ảnh lớn. Các thẻ này nằm trong phần head của trang và dùng thuộc tính property với tiền tố og, ví dụ og:title và og:image, đi kèm một thuộc tính content giữ giá trị. Vì tiêu chuẩn này được áp dụng rộng rãi, cùng những thẻ og giờ đây điều khiển bản xem trước ở nhiều nơi hơn rất nhiều so với chỉ riêng Facebook.
Open Graph hoàn toàn xoay quanh việc trình bày trong bối cảnh mạng xã hội và nhắn tin. Nó không có tác động trực tiếp đến thứ hạng tìm kiếm, nhưng nó có tác động lớn đến tỷ lệ nhấp chuột và việc chia sẻ, vì một tấm thẻ hấp dẫn thì được nhấp và chia sẻ lại trong khi một tấm thẻ trơn hoặc hỏng thì bị lướt qua.
Các thẻ Open Graph cốt lõi
Năm thuộc tính đảm nhận phần lớn công việc. og:title là dòng tiêu đề của tấm thẻ và có thể khác với thẻ title HTML của bạn, cho phép bạn viết cách diễn đạt được tối ưu cho việc chia sẻ. og:description là dòng phụ trợ bên dưới nó. og:image là hình thu nhỏ, và nó mang trọng lượng thị giác lớn nhất cho đến nay. og:url là URL chuẩn mà tấm thẻ nên trỏ tới, vốn giữ cho các lượt chia sẻ được gộp lại trên một địa chỉ ngay cả khi cùng nội dung có thể truy cập qua nhiều URL. og:type mô tả đối tượng, thường là website cho một trang chung chung hoặc article cho một bài blog hay một bản tin.
Các thuộc tính bổ sung tinh chỉnh kết quả: og:site_name gắn nhãn nguồn, og:locale khai báo ngôn ngữ, và đối với hình ảnh, og:image:width và og:image:height giúp các nền tảng dàn dựng tấm thẻ trước khi hình ảnh tải xong. Việc điền những thuộc tính này tạo ra một bản xem trước đáng tin cậy hơn, hiển thị nhanh hơn.
Twitter Card và cách X đọc các thẻ của bạn
X dùng các thẻ twitter card riêng của nó, nhưng nó khoan dung: nếu các thẻ riêng của Twitter vắng mặt, nó sẽ dùng tạm các thẻ Open Graph của bạn. Thẻ then chốt là twitter:card, nơi summary_large_image tạo ra bố cục hình ảnh lớn mà hầu hết thương hiệu mong muốn, trong khi summary cho ra một hình thu nhỏ nhỏ hơn bên cạnh phần chữ. Bạn cũng có thể đặt twitter:title, twitter:description, twitter:image và twitter:site để ghi đè các giá trị Open Graph riêng cho X khi bạn muốn nội dung khác ở đó.
Trong thực tế, một chiến lược tốt là đặt các thẻ Open Graph đầy đủ để bao phủ rộng rãi và chỉ thêm twitter:card để chọn dùng bố cục hình ảnh lớn, để X kế thừa phần còn lại từ Open Graph. Điều này tránh việc phải duy trì hai bộ thẻ gần như giống hệt nhau trong khi vẫn nhận được tấm thẻ phong phú hơn trên X.
Những yêu cầu về hình ảnh quyết định thành bại của tấm thẻ
og:image là nơi hầu hết các bản xem trước thành công hoặc thất bại. Kích thước được khuyến nghị rộng rãi là 1200 x 630 pixel, một tỷ lệ khoảng 1.91 trên 1, vốn lấp đầy tấm thẻ hình ảnh lớn một cách gọn gàng trên Facebook, LinkedIn và X mà không bị cắt xén. Hãy dùng một URL tuyệt đối, công khai truy cập được, bắt đầu bằng https; những đường dẫn tương đối như /images/card.png là lý do số một khiến một hình thu nhỏ đơn giản là không xuất hiện, vì trình cào quét không có URL gốc nào để phân giải chúng. Hãy giữ tệp dưới vài trăm kilobyte và tránh đặt chữ thiết yếu gần các mép, vì các nền tảng khác nhau cắt xén có hơi khác nhau.
Mỗi nền tảng cũng áp đặt các mức tối thiểu và tối đa riêng của nó. Những hình ảnh quá nhỏ sẽ rút về một hình thu nhỏ tí hon hoặc hoàn toàn không có ảnh, và những tệp cực lớn có thể bị bỏ qua. Bám theo một tệp JPEG hoặc PNG 1200 x 630 duy nhất được phục vụ qua HTTPS là lựa chọn an toàn nhất để hiển thị nhất quán ở mọi nơi.
Cách Facebook, LinkedIn, Discord và Slack hiển thị bản xem trước
Khi một liên kết được dán vào bất kỳ nền tảng nào trong số này, nền tảng gửi bot cào quét riêng của nó đi lấy trang và đọc phần head trước khi hiển thị một tấm thẻ. Facebook dùng facebookexternalhit, Slack và Discord có các bot riêng, và mỗi bên phân tích các thẻ og để dựng bản xem trước. Điều này nghĩa là bản xem trước phản ánh những gì trình cào quét thấy ở phía máy chủ, vốn có thể khác với những gì một người dùng đã đăng nhập thấy, đặc biệt trên những trang yêu cầu đăng nhập hoặc hiển thị các thẻ meta của chúng bằng JavaScript sau khi tải.
Vì việc hiển thị diễn ra ở phía bot, có hai điều quan trọng. Thứ nhất, các thẻ og của bạn phải hiện diện trong HTML ban đầu mà máy chủ trả về, chứ không phải được chèn vào về sau bởi các script phía máy khách mà trình cào quét có thể không thực thi. Thứ hai, trang phải truy cập được bởi bot mà không cần xác thực, nếu không trình cào quét sẽ nhận được một bức tường đăng nhập thay vì nội dung của bạn và bản xem trước trả về trống rỗng.
Bộ nhớ đệm, các trình gỡ lỗi và việc buộc cào lại
Các nền tảng mạng xã hội lưu vào bộ nhớ đệm bản xem trước mà chúng cào quét một cách mạnh tay, đôi khi suốt nhiều ngày. Đây là nguồn gốc của lời than phiền kinh điển rằng các thẻ Open Graph đã cập nhật không hiển thị: nền tảng vẫn đang phục vụ phiên bản trong bộ đệm từ trước khi bạn thay đổi. Cách khắc phục là dùng chính công cụ gỡ lỗi của nền tảng để buộc một lượt cào quét mới. Sharing Debugger của Facebook, Post Inspector của LinkedIn và trình kiểm chứng thẻ của X đều lấy lại trang và cho bạn thấy chính xác chúng đã phân tích những thẻ nào, đồng thời cũng là một cách để chẩn đoán vì sao một tấm thẻ trông có vẻ sai.
Hãy biến việc cào lại thành một phần trong quy trình xuất bản của bạn mỗi khi bạn thay đổi một tiêu đề, mô tả hoặc hình ảnh trên một URL đã được chia sẻ. Không có nó, những lượt chia sẻ ban đầu có thể khóa cứng một tấm thẻ cũ hoặc hỏng vốn nán lại lâu sau khi bản thân trang đã đúng. Trình xem trước này cho phép bạn kiểm tra các thẻ trước khi xuất bản để cần ít chỉnh sửa hơn về sau.
Những lỗi Open Graph thường gặp nhất
Những thất bại lặp đi lặp lại đều có thể đoán trước: một og:image bị thiếu khiến tấm thẻ không có hình thu nhỏ, một URL ảnh tương đối mà trình cào quét không thể phân giải, một og:image được phục vụ qua HTTP trên một trang vốn dùng HTTPS (điều mà một số nền tảng từ chối), và các thẻ được chèn bằng JavaScript mà trình cào quét không bao giờ chạy. Một lỗi thường gặp khác là để og:url trỏ tới một URL không chuẩn hoặc URL thử nghiệm, vốn chia tách số lượt chia sẻ và có thể gửi người dùng tới nhầm chỗ.
Một lỗi tinh vi hơn là quên rằng Open Graph và đoạn trích tìm kiếm của bạn là hai thứ riêng biệt. og:title và og:description kiểm soát tấm thẻ mạng xã hội, trong khi thẻ title HTML và meta description kiểm soát kết quả Google, và chúng không nhất thiết phải giống hệt nhau. Hãy tối ưu mỗi thứ cho bối cảnh của nó: súc tích và khơi gợi tò mò cho tấm thẻ mạng xã hội, rõ ràng và lưu tâm đến từ khóa cho đoạn trích tìm kiếm.
Câu hỏi thường gặp
Thẻ Open Graph là gì và vì sao chúng quan trọng?
Bản xem trước Facebook và Twitter hoạt động như thế nào?
Tôi có thể tạo thẻ mà không cần một trang có sẵn không?
Vì sao việc lấy một URL có thể thất bại hoặc không trả về dữ liệu?
Công cụ có miễn phí không, và điều gì xảy ra với URL tôi nhập?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này