Khi ai đó chia sẻ một URL lên Facebook, LinkedIn hay Zalo, nền tảng mạng xã hội sẽ tự động tìm kiếm thẻ og:image để biết ảnh nào cần hiển thị trong preview. Nếu không có og:image hoặc ảnh không đúng chuẩn, mạng xã hội sẽ tự chọn ngẫu nhiên một ảnh từ trang — thường là kết quả rất xấu. Ảnh preview đẹp tăng CTR (click-through rate) lên 5-7 lần so với không có ảnh.
Content với hình ảnh được chia sẻ nhiều hơn 650% so với content chỉ có text. Post Facebook với ảnh tối ưu đúng chuẩn nhận được 2.3 lần lượt click cao hơn post không có ảnh.
Open Graph Image Là Gì và Tại Sao Quan Trọng Với SEO?
Open Graph protocol là hệ thống metadata do Facebook phát triển năm 2010, được áp dụng rộng rãi bởi tất cả các mạng xã hội lớn. Thẻ og:image trong thẻ <head> của trang web chỉ định ảnh sẽ hiển thị khi URL được chia sẻ. Với SEO, OG image ảnh hưởng gián tiếp thông qua: tăng lưu lượng social traffic, cải thiện brand awareness và tăng tỷ lệ chia sẻ — tất cả đều là tín hiệu authority tích cực với Google.
Kích Thước Chuẩn Cho Từng Nền Tảng 2026
- ▸Facebook / Zalo: 1200×630px (tỷ lệ 1.91:1) — kích thước khuyến nghị chính thức
- ▸Twitter/X Cards: 1200×628px (summary_large_image) hoặc 800×418px (summary)
- ▸LinkedIn: 1200×627px — LinkedIn ưu tiên ảnh ngang, tỷ lệ 1.91:1
- ▸WhatsApp: 400×400px minimum, hiển thị dạng thumbnail vuông
- ▸Kích thước an toàn cho mọi nền tảng: 1200×630px, file <5MB, JPG hoặc PNG
Luôn giữ "safe zone" — vùng quan trọng như text và logo trong 1000x540px giữa ảnh 1200×630px. Các mạng xã hội có thể crop 10-15% viền ảnh khi hiển thị ở một số vị trí.
Thiết Kế Open Graph Image Hiệu Quả
OG image hiệu quả không chỉ đẹp mà còn phải truyền thông điệp ngay cả khi nhìn từ xa, không đọc caption. Các yếu tố thiết kế quan trọng:
- ▸Tiêu đề bài viết ngắn gọn (dưới 60 ký tự) trên ảnh — font đủ lớn để đọc trên mobile
- ▸Logo thương hiệu ở góc — tăng nhận diện khi ảnh được repost mà không có context
- ▸Background có contrast cao với text — test cả dark mode và light mode
- ▸Tránh text quá dày đặc — OG image không phải infographic, cần thoáng và dễ đọc nhanh
- ▸Màu sắc thương hiệu nhất quán — người dùng nhận ra nguồn trước khi đọc tiêu đề
Triển Khai OG Image Trong HTML và CMS
HTML thuần
Thêm vào thẻ <head>: <meta property="og:image" content="URL_ảnh_đầy_đủ">. URL phải là đường dẫn tuyệt đối (https://...), không phải relative path. Bổ sung: og:image:width (1200), og:image:height (630), og:image:type (image/jpeg).
WordPress (Yoast SEO / RankMath)
Yoast SEO và RankMath đều có field "Social Image" cho từng bài viết và trang. Đây là nơi upload ảnh OG riêng biệt. Nếu không set, plugin sẽ dùng featured image của bài viết — vì thế featured image cũng cần đúng tỷ lệ 1.91:1.
Next.js
Dùng generateMetadata() với openGraph: { images: [{ url, width: 1200, height: 630, alt }] }. Next.js 13+ hỗ trợ dynamic OG image generation bằng ImageResponse API — tạo OG image động từ template, không cần Photoshop.
Kiểm Tra và Debug OG Image
- ▸Facebook Sharing Debugger (developers.facebook.com/tools/debug) — cache, preview và validate OG tags
- ▸Twitter Card Validator (cards-dev.twitter.com/validator) — preview Twitter card
- ▸LinkedIn Post Inspector (linkedin.com/post-inspector) — validate LinkedIn share
- ▸OpenGraph.xyz — kiểm tra nhanh OG image trên tất cả nền tảng cùng lúc
Khi cập nhật OG image, Facebook cache ảnh cũ trong 24-48 giờ. Dùng Facebook Sharing Debugger và nhấn "Scrape Again" để buộc Facebook refresh cache ngay lập tức.