Giải Thích Thẻ Open Graph: Cách Xây Dựng Xem Trước Liên Kết trên Mạng Xã Hội

Bất cứ khi nào bạn chia sẻ một liên kết web trong một bài đăng trên Facebook, dán một bài viết vào nhóm Telegram, hoặc nhắn tin một trang sản phẩm cho bạn bè trên Twitter, bạn đều mong muốn thấy một thẻ xem trước trực quan được trình bày đẹp mắt xuất hiện. Thẻ đó—với hình ảnh banner sắc nét, tiêu đề hấp dẫn và tóm tắt ngắn gọn—không xuất hiện một cách ngẫu nhiên. Nó được tạo ra thông qua một tiêu chuẩn web gọi là giao thức Open Graph. Nhưng nếu mã website của bạn thiếu các thẻ meta này, các nền tảng mạng xã hội sẽ hiển thị một hộp màu xám xấu xí hoặc chọn một hình thu nhỏ ngẫu nhiên từ trang của bạn. Học cách vận hành của các thẻ open graph là điều cần thiết cho các nhà phát triển web và các nhà tiếp thị kỹ thuật.

Ban đầu được Facebook giới thiệu vào năm 2010, giao thức Open Graph được thiết kế để tích hợp các trang web bên ngoài vào mạng lưới đồ thị xã hội. Trước Open Graph, các mạng xã hội phải đoán một bài viết nói về gì bằng cách quét văn bản đoạn thô và kiểm tra các thẻ hình ảnh HTML, thường dẫn đến các bản xem trước hình ảnh không mong muốn. Ngày nay, Open Graph đã trở thành tiêu chuẩn internet phổ quát được LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack và WhatsApp hỗ trợ. Trong bài phân tích kỹ thuật này, bạn sẽ học chính xác cú pháp cho các thẻ OG cơ bản, hiểu yêu cầu về kích thước hình ảnh, và khám phá cách gỡ lỗi cũng như tối ưu hóa thẻ xem trước để đạt được mức độ tương tác xã hội tối đa.

Bằng cách nắm vững metadata Open Graph, bạn đảm bảo rằng mọi liên kết được chia sẻ từ miền của bạn trông hấp dẫn, chuyên nghiệp và được tối ưu hóa cho việc chia sẻ trên mạng xã hội.

Bên cạnh các nguồn cấp dữ liệu mạng xã hội công khai, thẻ Open Graph cũng quyết định cách các liên kết hiển thị trong phần mềm hợp tác riêng tư và các công cụ nhắn tin nhóm như Slack, Microsoft Teams và Discord. Khi một thành viên trong nhóm dán URL của bạn vào kênh Slack của công ty hoặc máy chủ Discord dành cho nhà phát triển, bot nội bộ của ứng dụng sẽ phân tích dữ liệu Open Graph của bạn theo thời gian thực, hiển thị tiêu đề, hình thu nhỏ và đoạn tóm tắt trực tiếp trong luồng trò chuyện. Dữ liệu chất lượng cao đảm bảo các bên liên quan nội bộ và thành viên cộng đồng tương tác ngay lập tức với liên kết của bạn.

Giao thức Open Graph là gì?

Giao thức Open Graph là một tập hợp các thẻ meta có cấu trúc mà các nhà phát triển web đặt bên trong phần <head> của tài liệu HTML. Khi một trình thu thập tự động (như facebookexternalhit hoặc TelegramBot) truy cập trang của bạn, nó sẽ phân tích các thẻ này để tạo ra một đối tượng xem trước phong phú tương tác.

Không có thẻ Open Graph, một liên kết chia sẻ chỉ là văn bản phẳng. Với thẻ Open Graph, liên kết của bạn biến thành một thẻ hình ảnh tương tác có độ hiển thị cao, giúp tăng đáng kể tỷ lệ nhấp qua trên các mạng xã hội.

Các thẻ Open Graph cốt lõi mà bạn phải bao gồm

Mỗi trang web công khai nên bao gồm bốn thẻ Open Graph cơ bản để đảm bảo hiển thị nhất quán trên tất cả các nền tảng chính:

Luôn đảm bảo rằng og:url khớp với thẻ liên kết chuẩn của bạn, ngăn chặn việc số liệu tương tác xã hội và tín hiệu liên kết ngược bị phân tán trên các biến thể URL.

Tối ưu hóa hình ảnh Open Graph cho màn hình hiện đại

Hình ảnh là yếu tố quan trọng nhất trong bất kỳ thẻ xem trước nào. Để đảm bảo đồ họa của bạn hiển thị với độ sắc nét hoàn hảo trên màn hình smartphone hiện đại có độ phân giải cao, hãy tuân theo các thông số kỹ thuật kỹ thuật sau:

• Độ phân giải tiêu chuẩn (1.91:1): Sử dụng 1200x630 pixel. Đây là tiêu chuẩn chung cho các thẻ tóm tắt trên Facebook, LinkedIn và Twitter.
• Phương án màn hình rộng (16:9): 1200x675 pixel được sử dụng rộng rãi cho nội dung video, chia sẻ trên YouTube và các blog đáp ứng hiện đại.
• Khai báo Kích thước Rõ ràng: Luôn bao gồm <meta property="og:image:width" content="1200" /> và <meta property="og:image:height" content="630" />. Điều này cho phép các bộ thu thập dữ liệu mạng xã hội hiển thị bố cục thẻ ngay lập tức trong lần quét đầu tiên mà không cần phải tải xuống và tính toán kích thước hình ảnh một cách bất đồng bộ.
• Hạn chế kích thước tệp: Giữ kích thước tệp dưới 5MB. Hầu hết các công cụ cạo dữ liệu mạng xã hội sẽ ngừng tải hình ảnh vượt quá 5MB để bảo toàn băng thông mạng.
• Văn bản quan trọng ở trung tâm: Các nền tảng xã hội cắt bớt hình ảnh xem trước khác nhau trên nguồn cấp dữ liệu di động so với thanh bên trên máy tính để bàn. Giữ tất cả logo quan trọng, tiêu đề văn bản và khuôn mặt ở chính giữa trong "vùng an toàn" giữa của hình ảnh.

Twitter Cards và Open Graph: cách chúng tương tác

Twitter (X) duy trì đánh dấu siêu dữ liệu độc quyền riêng của mình gọi là Thẻ Twitter, nhưng nó cũng hỗ trợ gốc cơ chế dự phòng Open Graph.

Để đảm bảo các liên kết của bạn hiển thị dưới dạng thẻ hình ảnh lớn, hấp dẫn trên Twitter thay vì các hình thu nhỏ vuông nhỏ, hãy bao gồm các thẻ Twitter chuyên dụng này cùng với các thẻ Open Graph của bạn:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

Việc thiết lập twitter:card thành summary_large_image là bắt buộc nếu bạn muốn xem trước hình ảnh toàn chiều rộng. Nếu bỏ qua, Twitter sẽ mặc định hiển thị bản xem trước chỉ có văn bản gọn gàng, thu hút ít lượt nhấp chuột hơn nhiều.

Các nhà xuất bản nâng cao cũng nên triển khai các thuộc tính Open Graph bổ sung như og:locale và article:published_time. Việc khai báo og:locale thông báo cho các trình thu thập dữ liệu về ngôn ngữ chính và định dạng khu vực của nội dung, trong khi mốc thời gian xuất bản giúp các công cụ khám phá nội dung như Google Discover nhận diện các bài báo biên tập mới.

Cũng nên khôn ngoan khi duy trì một hệ thống dự phòng hình ảnh có cấu trúc. Nếu một tác giả quên tải lên hình ảnh nổi bật riêng cho một bài đăng blog cụ thể, mẫu quản lý nội dung của bạn nên tự động chèn một hình ảnh thương hiệu mặc định rõ ràng, chất lượng cao thay vì để các trình thu thập dữ liệu hiển thị thẻ xem trước trống.

Bạn cũng có thể khám phá cách các thẻ Open Graph tương tác với các tên miền phụ thương hiệu trong hướng dẫn của chúng tôi về tên miền phụ thương hiệu.

Kiểm tra, xác thực và khắc phục sự cố các thẻ xem trước

Trước khi triển khai một chiến dịch tiếp thị hoặc chia sẻ các liên kết công khai, hãy luôn xác thực các thẻ Open Graph của bạn bằng cách sử dụng các bộ công cụ gỡ lỗi chính thức của nền tảng:

• Công cụ Gỡ lỗi Chia sẻ của Meta: Dán URL của bạn để xem trước thẻ Facebook, kiểm tra cảnh báo thẻ và buộc làm mới bộ nhớ đệm của trình thu thập thông tin như đã thảo luận trong hướng dẫn của chúng tôi về sửa hình ảnh xem trước sai.
• Telegram @WebpageBot: Gửi liên kết của bạn tới bot đã được xác minh này trong Telegram để kiểm tra hiển thị xem trước trên di động và xóa bộ nhớ đệm hình ảnh cũ.
• Trình Kiểm Tra Bài Đăng LinkedIn: Xóa bộ nhớ đệm xem trước liên kết bảy ngày của LinkedIn và báo cáo các trường siêu dữ liệu bị thiếu.
• Kiểm tra liên kết tự động: Xác minh chuỗi chuyển hướng, chứng chỉ SSL và mã trạng thái bằng công cụ kiểm tra liên kết miễn phí của chúng tôi.

Bằng cách triển khai đầy đủ siêu dữ liệu Open Graph và xác thực cách hiển thị bản xem trước trên mọi nền tảng lớn, bạn đảm bảo các liên kết web của mình nổi bật trong các nguồn cấp dữ liệu đông đúc và thúc đẩy sự tương tác tối đa.

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