Tối ưu hóa văn bản OGP - Cải thiện hiển thị chia sẻ mạng xã hội

8 phút đọc

Open Graph Protocol (OGP) kiểm soát cách các trang web của bạn hiển thị khi được chia sẻ trên mạng xã hội. Được Facebook giới thiệu tại hội nghị F8 năm 2010, OGP là một bộ từ vựng siêu dữ liệu dựa trên RDFa, hiện được hỗ trợ bởi hầu hết mọi mạng xã hội và ứng dụng nhắn tin. Nếu không cấu hình đúng cách, tiêu đề sẽ bị cắt ngắn và mô tả không mong muốn xuất hiện, làm giảm đáng kể tỷ lệ nhấp chuột. Hướng dẫn này bao gồm tối ưu hóa văn bản OGP và thông số hiển thị theo từng nền tảng. Để tìm hiểu sâu hơn, hãy tham khảo sách về chiến lược tiếp thị mạng xã hội.

Đặc tả và lịch sử OGP

OGP được Facebook tạo ra vào năm 2010 để chuẩn hóa cách các trang web được hiển thị trong bảng tin mạng xã hội. Đặc tả được công bố tại ogp.me định nghĩa bốn thuộc tính bắt buộc: og:title, og:type, og:image và og:url. Chúng được đặt dưới dạng thẻ <meta property="og:..."> trong phần tử <head> của HTML.

Trước khi có OGP, các nền tảng mạng xã hội thu thập thẻ <title> và <meta name="description"> để tạo bản xem trước liên kết. Tuy nhiên, các phần tử này được tối ưu hóa cho công cụ tìm kiếm và thường tạo ra bản xem trước khó đọc hoặc quá dài trong bảng tin mạng xã hội. OGP đã giải quyết vấn đề này bằng cách cung cấp một lớp siêu dữ liệu riêng dành cho việc chia sẻ trên mạng xã hội.

Thông số hiển thị theo nền tảng

Mỗi nền tảng mạng xã hội hiển thị văn bản OGP khác nhau. Bảng sau đây cho thấy giới hạn ký tự đo được trên ứng dụng di động của từng nền tảng. Phiên bản máy tính để bàn thường hiển thị nhiều ký tự hơn một chút.

Nền tảngHiển thị og:titleHiển thị og:descriptionKích thước hình ảnh
X (Twitter)~70 ký tự (di động ~55)~120 ký tự (có thể bị ẩn ở định dạng thẻ)1200×628px
Facebook~60 ký tự (di động ~45)~80 ký tự (di động ~65)1200×630px
LinkedIn~70 ký tự~100 ký tự1200×627px
Slack~70 ký tự~150 ký tự1200×630px

Giới hạn nghiêm ngặt nhất là hiển thị di động của Facebook, nơi og:title bị cắt ngắn ở khoảng 45 ký tự và og:description ở khoảng 65. Để đảm bảo hiển thị đúng trên tất cả các nền tảng, hãy giữ og:title trong khoảng 40-45 ký tự.

Mối quan hệ giữa độ dài og:title và CTR

Độ dài của og:title ảnh hưởng trực tiếp đến tỷ lệ nhấp chuột (CTR). Tiêu đề từ 30-50 ký tự thường đạt CTR cao nhất - quá ngắn thì thiếu thông tin, quá dài thì bị cắt ngắn giữa câu.

Tiêu đề chứa số cụ thể đặc biệt hiệu quả. Các cụm từ như "5 cách để..." hoặc "Hướng dẫn 2025" có thể cải thiện CTR từ 20-30% so với tiêu đề trừu tượng. Tiêu đề dạng câu hỏi ("Bạn vẫn đang làm X?") cũng kích thích sự tò mò và khuyến khích nhấp chuột.

Tối ưu hóa og:title

Hành vi khi og:title và HTML Title không khớp

og:title và thẻ HTML <title> là các phần tử độc lập có thể có giá trị khác nhau. Trình thu thập dữ liệu của nền tảng ưu tiên og:title, nhưng sẽ sử dụng thẻ <title> khi og:title không được đặt.

Tuy nhiên, hãy cẩn thận khi hai giá trị này khác nhau đáng kể. Google đôi khi sử dụng og:title cho tiêu đề kết quả tìm kiếm, điều này có nghĩa là nội dung thẻ title đã được tối ưu hóa SEO của bạn có thể không xuất hiện trong kết quả tìm kiếm. Cách tiếp cận được khuyến nghị là tối ưu hóa thẻ title cho từ khóa và og:title cho sức hấp dẫn cảm xúc và CTR, đồng thời giữ cả hai cùng hướng về một chủ đề cốt lõi.

Viết og:description

Giữ og:description trong khoảng 70-100 ký tự. Đặt thông tin quan trọng nhất trong 40 ký tự đầu tiên để việc cắt ngắn không làm mất ý nghĩa. Bạn có thể sử dụng cùng nội dung với meta description, nhưng hãy cân nhắc sử dụng ngôn ngữ thân thiện hơn phù hợp với đối tượng mạng xã hội.

Hành vi dự phòng của og:description

Khi og:description không được đặt, mỗi nền tảng sử dụng logic dự phòng riêng. Facebook đọc <meta name="description">, và nếu cũng không có, nó tự động trích xuất văn bản từ nội dung trang. X (Twitter) kiểm tra twitter:description → og:description → meta description theo thứ tự, và sử dụng trích xuất văn bản từ nội dung trang nếu không có thuộc tính nào được đặt.

Văn bản được trích xuất tự động thường bao gồm menu điều hướng và nội dung thanh bên, dẫn đến bản xem trước không mong muốn. Luôn đặt og:description một cách rõ ràng. Sử dụng Bộ đếm ký tự để xác minh độ dài og:title và og:description của bạn nằm trong giới hạn hiển thị của từng nền tảng.

Hướng dẫn hình ảnh OGP

Nền tảngKích thước tối thiểuKích thước khuyến nghịTỷ lệ khung hình
Facebook200×200px1200×630px1.91:1
X (Twitter)144×144px (tóm tắt) / 300×157px (lớn)1200×628px1.91:1
LinkedIn200×200px1200×627px1.91:1
Slack250×250px1200×630px1.91:1

Hành vi crawler của nền tảng

Trình thu thập dữ liệu OGP của mỗi nền tảng hoạt động khác nhau. Trình thu thập của Facebook (facebookexternalhit) không thực thi JavaScript, điều này có nghĩa là các trang web được render phía client (CSR) tạo thẻ OGP động sẽ không cung cấp được siêu dữ liệu đúng cách.

Twitterbot của X và trình thu thập của LINE cũng chỉ phân tích HTML tĩnh. Slackbot của Slack theo dõi tối đa 5 lần chuyển hướng nhưng cũng không thực thi JavaScript.

Nếu bạn đang sử dụng các framework SPA như React hoặc Vue.js, thẻ OGP phải được xuất thông qua render phía server (SSR) hoặc tạo trang tĩnh (SSG). generateMetadata của Next.js và useHead của Nuxt cung cấp các cách tích hợp sẵn trong framework để xuất thẻ OGP chính xác.

Cơ chế cache OGP và phương pháp cập nhật

Mỗi nền tảng lưu cache thông tin OGP, vì vậy việc cập nhật thẻ OGP sẽ không được phản ánh ngay lập tức. Thời gian cache khác nhau theo nền tảng:

Sau khi cập nhật OGP, luôn chạy lại quét trên Facebook Sharing Debugger và X Card Validator để xác nhận hiển thị đúng như ý định của bạn.

Gỡ lỗi và xác thực

Luôn xác minh cài đặt OGP bằng công cụ gỡ lỗi của nền tảng trước khi xuất bản. Các lỗi cấu hình không được phát hiện sẽ lan truyền hiển thị không mong muốn mỗi khi trang được chia sẻ.

Sử dụng Bộ đếm ký tự để kiểm tra độ dài văn bản OGP trước khi xuất bản, đảm bảo chúng nằm trong giới hạn hiển thị của từng nền tảng.

Cấu hình OGP theo CMS

Các nền tảng CMS và framework chính đều có cách tiếp cận riêng để cấu hình OGP:

Cạm bẫy khi tạo OGP động

Khi tạo thẻ OGP động dựa trên đầu vào của người dùng hoặc giá trị cơ sở dữ liệu, có một số cạm bẫy cần chú ý.

Đầu tiên, việc escape HTML là thiết yếu. Nếu og:title hoặc og:description bao gồm đầu vào của người dùng, việc không escape <, >, & và " sẽ tạo ra lỗ hổng HTML injection.

Thứ hai, khi tạo og:image động (ví dụ: thông qua Vercel OG Image Generation hoặc biến đổi Cloudinary), việc tạo hình ảnh chậm có thể gây timeout cho trình thu thập. Trình thu thập của Facebook timeout sau khoảng 4 giây, vì vậy hãy lưu cache trước hình ảnh đã tạo hoặc phục vụ chúng thông qua CDN.

Thứ ba, khi URL chứa tham số truy vấn hoặc fragment, hãy đặt og:url thành URL canonical (không có tham số truy vấn). Điều này ngăn số lượt chia sẻ bị phân tán giữa các biến thể URL khác nhau của cùng một nội dung.

Lịch sử đặc tả OGP

Facebook đã cập nhật đáng kể đặc tả OGP vào năm 2013, nâng kích thước og:image tối thiểu khuyến nghị lên 600×315 pixel. Thay đổi này gây ra các vấn đề hiển thị trên diện rộng ở các trang web vẫn sử dụng kích thước hình ảnh cũ. Năm 2018, kích thước khuyến nghị được tăng thêm lên 1200×630px để hỗ trợ màn hình độ phân giải cao.

X (trước đây là Twitter) duy trì các thẻ meta Twitter Card riêng (twitter:card, twitter:title, v.v.), nhưng sử dụng thẻ OGP dự phòng khi thẻ Twitter Card không được đặt. Điều này có nghĩa là thẻ OGP được cấu hình đúng cách cung cấp phạm vi hiển thị cơ bản ngay cả khi không có thẻ Twitter Card. Tuy nhiên, thẻ twitter:card không có tương đương OGP và phải được đặt rõ ràng.

Các lỗi thường gặp

Kỹ thuật OGP chuyên nghiệp

Kết luận

Tối ưu hóa văn bản OGP là chiến lược cơ bản để tăng lưu lượng truy cập từ mạng xã hội. Hãy nhắm đến 40-45 ký tự cho og:title và 70-100 cho og:description. Vì thẻ OGP có thể được đặt độc lập với thẻ title HTML và meta description, hãy tận dụng sự linh hoạt này để tạo thông điệp tối ưu cho mạng xã hội. Luôn xác minh bằng Facebook Sharing Debugger và X Card Validator trước khi xuất bản. Sử dụng Bộ đếm ký tự để kiểm tra độ dài văn bản OGP và ngăn ngừa vấn đề cắt ngắn.