Open Graph: ảnh chia sẻ Facebook, Zalo hiện sai và cách sửa

Khi ai đó dán đường dẫn trang của bạn vào Facebook, Zalo, Messenger hay nhiều ứng dụng chat khác, khung xem trước (ảnh, tiêu đề, một dòng mô tả) được dựng từ các thẻ Open Graph trong <head>. Thiếu thẻ thì nền tảng tự đoán, thường lấy nhầm logo, ảnh biểu tượng nhỏ xíu hoặc không có ảnh. Sửa đúng gồm ba việc: khai đủ bốn thẻ cơ bản với đường dẫn tuyệt đối, dùng ảnh 1200×630 điểm ảnh tải được công khai, rồi bảo nền tảng đọc lại vì chúng giữ bản cũ trong bộ nhớ đệm.

Open Graph là gì

Open Graph là bộ thẻ meta do Facebook đặt ra, mô tả ở ogp.me. Nó không ảnh hưởng thứ hạng trên Google. Giá trị của nó nằm ở chỗ khác: một đường dẫn chia sẻ có ảnh rõ, tiêu đề đúng thì được bấm nhiều hơn hẳn một đường dẫn trơ trụi. Với site Việt, nơi phần lớn lượt giới thiệu truyền miệng đi qua Facebook và Zalo, đây là thứ đáng làm ngay.

Bốn thẻ cơ bản theo ogp.me:

Thẻ	Chứa gì	Ghi chú
og:title	Tiêu đề hiện trong khung xem trước	Có thể khác thẻ title, thường bỏ tên thương hiệu ở đuôi
og:type	website cho trang chủ, article cho bài	Ít ảnh hưởng hiển thị nhưng nên có
og:image	Đường dẫn tuyệt đối tới ảnh	Thẻ quan trọng nhất
og:url	Đường dẫn chính thức của chính trang này	Nên trùng với canonical

Thêm og:description (một hai câu, thường dùng lại meta description), og:site_name và og:locale là vi_VN.

Mẫu đầy đủ

<meta property="og:type" content="article">
<meta property="og:site_name" content="SEO Gốc">
<meta property="og:title" content="Sitemap XML: cấu trúc, giới hạn và lastmod">
<meta property="og:description" content="Mỗi tệp tối đa 50.000 URL. Cách chia sitemap con và ghi lastmod đúng.">
<meta property="og:url" content="https://vidu.vn/bai/sitemap-xml">
<meta property="og:image" content="https://vidu.vn/anh/og/sitemap-xml.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Sơ đồ một sitemap chỉ mục trỏ tới ba sitemap con">
<meta property="og:locale" content="vi_VN">
<meta name="twitter:card" content="summary_large_image">

Hai thẻ og:image:width và og:image:height hay bị bỏ, nhưng tài liệu của Facebook nói rõ: khai sẵn kích thước thì trình thu thập dựng được ảnh ngay ở lần chia sẻ đầu tiên, không phải chờ tải và xử lý ảnh. Thiếu hai thẻ này, lần chia sẻ đầu của một bài mới đôi khi ra khung không ảnh. Thẻ twitter:card dành cho X; khi thiếu các thẻ twitter: khác, X dùng lại thẻ Open Graph.

Ảnh: kích thước, định dạng, tải được

• Kích thước 1200×630 (tỉ lệ khoảng 1,91:1) là cỡ Facebook khuyến nghị để hiện khung ảnh lớn. Ảnh nhỏ hơn nhiều sẽ bị hiện thành ô vuông nhỏ bên cạnh chữ, hoặc không hiện. Zalo cũng hiện ảnh ngang theo tỉ lệ gần như vậy, nên một ảnh 1200×630 dùng được cho cả hai.
• Đặt chữ và logo vào giữa, chừa lề. Mỗi nền tảng, mỗi màn hình cắt mép ảnh một chút khác nhau; chữ sát mép dễ mất.
• Định dạng JPEG hoặc PNG là an toàn nhất với mọi nền tảng và ứng dụng chat. Ảnh nén nhẹ, vài trăm KB, để trình thu thập tải nhanh.
• Ảnh phải tải được công khai: trả mã 200, kiểu nội dung image/jpeg hoặc image/png, không cần đăng nhập, không chặn theo tên miền gọi tới.

Facebook và Zalo giữ bản cũ: làm mới thế nào

Facebook đọc trang ở lần đầu có người chia sẻ, rồi giữ kết quả trong bộ nhớ đệm. Bạn sửa ảnh, sửa tiêu đề xong, người khác chia sẻ lại vẫn thấy bản cũ. Cách làm mới:

1. Mở Sharing Debugger (Trình gỡ lỗi chia sẻ) của Facebook, dán đường dẫn trang.
2. Bấm “Scrape Again” (thu thập lại). Công cụ hiện đúng các thẻ Facebook đọc được, cảnh báo thẻ thiếu, ảnh quá nhỏ hoặc không tải được.
3. Nếu ảnh vẫn cũ, đổi tên tệp ảnh hoặc thêm tham số phiên bản (sitemap-xml.jpg?v=2) rồi thu thập lại. Facebook giữ đệm theo đường dẫn ảnh, đường dẫn mới thì phải tải ảnh mới.

Zalo cũng giữ bản xem trước đã đọc. Cách chắc chắn nhất để Zalo hiện ảnh mới là cách thứ ba ở trên: ảnh mới thì đường dẫn mới. Đây cũng là lý do nên đặt tên tệp ảnh chia sẻ có dấu thời gian hoặc số phiên bản ngay từ đầu, thay vì ghi đè lên tệp cũ cùng tên.

Lỗi hay gặp

• og:url trên mọi trang đều trỏ về trang chủ. Đây là lỗi tai hại và khó nhận ra: Facebook coi og:url là địa chỉ chính thức và đọc thẻ từ địa chỉ đó. Kết quả là chia sẻ bài nào cũng ra ảnh và tiêu đề của trang chủ. Lỗi này hay đến từ mẫu giao diện ghi cứng tên miền vào og:url.
• og:image là đường dẫn tương đối (/anh/og.jpg). Chuẩn yêu cầu đường dẫn tuyệt đối có https://. Một số nền tảng tự ghép được, nhiều nền tảng không.
• Tường lửa chặn trình thu thập. Chế độ chống bot của Cloudflare hoặc plugin bảo mật chặn trình thu thập của Facebook (tên gọi facebookexternalhit) và các nền tảng khác. Trang mở bình thường trên trình duyệt nhưng chia sẻ không ra ảnh. Sharing Debugger sẽ báo mã lỗi 403 hoặc trang thử thách.
• Chống lấy ảnh trộm (hotlink) chặn mọi yêu cầu ảnh không đến từ chính tên miền, chặn luôn cả trình thu thập.
• Ảnh trả mã 200 nhưng là trang HTML: đường dẫn ảnh sai, máy chủ trả trang 404 tuỳ biến với mã 200. Trình duyệt mở ra thấy “không tìm thấy trang”, còn nền tảng thì không có ảnh.
• Thẻ Open Graph chèn bằng JavaScript. Trình thu thập của Facebook, Zalo đọc HTML máy chủ trả về, không chạy JavaScript. Các thẻ phải có sẵn trong HTML gốc; xem bài site dựng bằng JavaScript.
• Nhiều thẻ og:image do plugin và giao diện cùng in. Nền tảng thường lấy thẻ đầu tiên, có khi là ảnh bạn không chọn.

Việc không cần làm: thiết kế ảnh riêng cho từng nền tảng. Một ảnh 1200×630, chữ nằm giữa, là đủ cho Facebook, Zalo, Messenger, X và phần lớn ứng dụng chat. Với site nhiều bài, ảnh chia sẻ sinh tự động từ tiêu đề bài trên nền màu thương hiệu vẫn tốt hơn hẳn việc để nền tảng tự lấy một ảnh bất kỳ.

Tự soát nhanh bằng dòng lệnh

Muốn biết trình thu thập thật sự nhận được gì (không phải thứ trình duyệt của bạn thấy sau khi đăng nhập, sau khi JavaScript chạy), hãy tải trang bằng curl với tên trình thu thập của Facebook, rồi lọc các thẻ:

curl -sL -A "facebookexternalhit/1.1" https://vidu.vn/bai/sitemap-xml | grep -o '<meta property="og:[^>]*>'
curl -sI https://vidu.vn/anh/og/sitemap-xml.jpg | grep -i -E '^(HTTP|content-type)'

Lệnh đầu cho biết thẻ có trong HTML gốc hay không và tường lửa có trả trang thử thách thay vì trang thật. Lệnh thứ hai cho biết ảnh có trả mã 200 với kiểu image/… hay không. Hai dòng này bắt được phần lớn lỗi trong mục trên.

Liên quan tới SEO thế nào

Open Graph không phải yếu tố xếp hạng. Nhưng nó liên quan gián tiếp: og:title là một trong các nguồn Google có thể dùng khi tự tạo tiêu đề hiển thị (xem bài thẻ title), và og:url lệch với canonical là tín hiệu mâu thuẫn về địa chỉ chính thức. Giữ ba thứ thống nhất: canonical, og:url và đường dẫn trong sitemap cùng là một địa chỉ.

Danh sách kiểm nhanh

1. Có đủ og:title, og:description, og:image, og:url, og:type.
2. og:url là địa chỉ của chính trang, trùng canonical.
3. og:image tuyệt đối, https, 1200×630, JPEG/PNG, có khai width/height.
4. Ảnh mở được từ máy lạ, không bị tường lửa hay chống hotlink chặn.
5. Thẻ có trong HTML máy chủ trả về, mỗi thẻ một lần.
6. Sau khi sửa: thu thập lại bằng Sharing Debugger; ảnh mới thì đổi tên tệp.

Kiểm bằng SEO Gốc

Công cụ chấm điểm đọc các thẻ Open Graph trên trang chủ, báo thẻ nào thiếu, rồi tải thử og:image như một trình thu thập: ảnh không trả 200 hoặc kiểu nội dung không phải ảnh thì báo “og:image không tải được”. Mục này chiếm 4/100 điểm trong thang chấm. Ảnh chia sẻ cũng cần mô tả thay thế qua thẻ og:image:alt cho người dùng trình đọc màn hình.