Open Graph là một nhóm thẻ meta đặt trong phần đầu trang HTML, dùng để quyết định ảnh, tiêu đề và mô tả hiển thị khi một đường link được chia sẻ lên Facebook, Zalo, LinkedIn và nhiều nền tảng khác. Không có thẻ Open Graph, các nền tảng này sẽ tự đoán nội dung hiển thị — và thường đoán sai hoặc chọn nhầm ảnh không phù hợp. Bài này đưa 4 thẻ OG tối thiểu theo chuẩn chính thức, code mẫu, và cách kiểm bằng công cụ Sharing Debugger.
Open Graph là gì — vì sao ảnh hưởng đến lượt chia sẻ
Open Graph (viết tắt OG) là một giao thức được công bố công khai tại ogp.me, cho phép bất kỳ trang web nào khai báo thông tin về chính nó theo một cấu trúc chung mà các nền tảng mạng xã hội có thể đọc được. Khi bạn dán một link vào khung soạn bài trên Facebook hoặc Zalo, nền tảng đó sẽ quét phần đầu trang HTML của link để tìm các thẻ OG, rồi dùng dữ liệu đó để dựng khung xem trước (ảnh, tiêu đề, mô tả ngắn). Nếu thiếu thẻ OG, nền tảng phải tự suy luận từ nội dung trang — kết quả thường là chọn một ảnh ngẫu nhiên trên trang hoặc lấy một đoạn văn bản không đại diện cho nội dung chính.
4 thẻ OG tối thiểu theo chuẩn ogp.me
Theo tài liệu chính thức của giao thức Open Graph, 4 thuộc tính sau được quy định là bắt buộc cho mọi trang:
| Thẻ | Ý nghĩa | Ví dụ giá trị |
|---|---|---|
| og:title | Tiêu đề của trang khi hiển thị trong khung chia sẻ | “Dịch vụ thiết kế website chuẩn SEO” |
| og:type | Loại nội dung của trang, ảnh hưởng đến thuộc tính nào khác có thể cần thêm | “website” hoặc “article” cho hầu hết trang/bài viết |
| og:image | Ảnh đại diện hiển thị trong khung xem trước | Đường dẫn tuyệt đối tới file ảnh |
| og:url | URL chính thức (canonical) của trang, dùng làm định danh lâu dài | Địa chỉ đầy đủ bắt đầu bằng https:// |
Ngoài 4 thẻ trên, og:description (mô tả ngắn hiển thị dưới tiêu đề) không nằm trong nhóm bắt buộc theo tài liệu gốc, nhưng hầu hết nền tảng đều hiển thị nó nếu có — nên trong thực tế vẫn nên khai báo đầy đủ cả og:description.
Code mẫu đặt thẻ OG đúng vị trí
Các thẻ OG đặt trong phần <head> của trang HTML, ví dụ:
<head>
<meta property="og:title" content="Tên trang của bạn" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://vidulieu.com/anh-dai-dien.jpg" />
<meta property="og:url" content="https://vidulieu.com/duong-dan-trang/" />
<meta property="og:description" content="Mô tả ngắn gọn về nội dung trang." />
</head>
Lưu ý og:url nên trùng với URL chuẩn (canonical) của trang, og:image nên dùng đường dẫn tuyệt đối (bắt đầu bằng https://), không dùng đường dẫn tương đối — một số nền tảng không đọc được ảnh nếu đường dẫn thiếu phần gốc domain.
Nếu website chạy trên WordPress, phần lớn plugin SEO phổ biến đã tự sinh các thẻ này dựa trên tiêu đề, mô tả và ảnh đại diện (featured image) bạn đặt cho từng bài/trang — khi đó bạn không cần tự viết tay đoạn code trên, chỉ cần điền đủ các trường tương ứng trong phần cài đặt SEO của từng bài. Việc hiểu đoạn code mẫu vẫn có ích để bạn tự kiểm tra xem plugin có đang sinh đủ 4 thẻ bắt buộc hay không, đặc biệt với các trang được tạo bằng builder tùy chỉnh, nơi plugin SEO đôi khi không nhận diện đúng ảnh đại diện.
og:image cần thêm thuộc tính con nào
Thẻ og:image có thể đi kèm một số thuộc tính con tùy chọn, giúp nền tảng hiển thị chính xác hơn mà không cần tự tải ảnh về đo trước:
- og:image:width, og:image:height: kích thước ảnh theo pixel, giúp nền tảng dựng khung xem trước nhanh hơn, không cần chờ tải ảnh để đo kích thước.
- og:image:alt: mô tả nội dung ảnh — theo tài liệu gốc, nếu trang đã khai báo og:image thì nên khai báo kèm og:image:alt để mô tả ảnh đó, có lợi thêm cho khả năng tiếp cận.
- og:image:secure_url: một đường dẫn ảnh thay thế dùng riêng cho các trang HTTPS, nếu ảnh gốc được phục vụ qua một địa chỉ khác.
Vì sao mỗi nền tảng có thể hiển thị khung xem trước khác nhau dù cùng một trang
Mặc dù cùng dựa trên giao thức Open Graph, cách từng nền tảng đọc và hiển thị dữ liệu không hoàn toàn giống nhau. Facebook thường ưu tiên og:image và og:title để dựng khung xem trước dạng ảnh lớn kèm tiêu đề; một số nền tảng khác có thể kết hợp thêm thẻ của Twitter Card (ví dụ twitter:card, twitter:image) nếu có, và sẽ ưu tiên dữ liệu riêng của mình nếu trang khai báo cả hai nhóm thẻ. Vì vậy, nếu bạn thấy khung xem trước khác nhau giữa hai nền tảng cho cùng một đường link, nguyên nhân có thể không phải lỗi, mà do mỗi nền tảng đọc một bộ ưu tiên thẻ khác nhau, chưa kể còn độ trễ cập nhật cache riêng của từng nền tảng.
Cách kiểm bằng Sharing Debugger — vì sao ảnh cũ vẫn hiện sau khi sửa
Meta Sharing Debugger (công cụ của Meta for Developers, tại developers.facebook.com/tools/debug/) cho phép dán một URL để xem chính xác Facebook đang đọc được những thẻ OG nào từ trang đó. Vấn đề hay gặp nhất: sau khi sửa lại thẻ OG, ảnh/tiêu đề cũ vẫn hiện khi chia sẻ — nguyên nhân thường là Facebook đã lưu cache dữ liệu OG của URL đó từ lần quét trước. Cách xử lý: dán lại URL vào Sharing Debugger rồi bấm nút làm mới để buộc nền tảng quét lại trang và cập nhật dữ liệu đã lưu, thay vì dùng bản cache cũ.
Open Graph khác schema.org (dữ liệu có cấu trúc) ở đâu
| Tiêu chí | Open Graph | Schema.org |
|---|---|---|
| Mục đích chính | Kiểm soát khung xem trước khi chia sẻ link lên mạng xã hội | Giúp công cụ tìm kiếm hiểu rõ nội dung/thực thể trên trang |
| Nơi đọc dữ liệu | Facebook, Zalo, LinkedIn và các nền tảng chia sẻ link khác | Chủ yếu công cụ tìm kiếm (Google, Bing…) |
| Vị trí khai báo | Thẻ meta trong phần head | Dữ liệu có cấu trúc (thường dạng JSON-LD) trong phần head hoặc body |
Hai hệ thống này không loại trừ nhau — một trang nên có cả hai, vì chúng phục vụ hai nhóm “người đọc” khác nhau (nền tảng xã hội và công cụ tìm kiếm). Xem thêm cách khai báo dữ liệu có cấu trúc tại schema markup là gì.
Lỗi hay gặp khi thiết lập OG trên WordPress
- Nhiều plugin cùng tự tạo thẻ OG, dẫn đến trùng thẻ hoặc thẻ của plugin sau ghi đè plugin trước không đúng ý muốn — nên chỉ để một plugin SEO đảm nhiệm việc này, xem thêm plugin SEO cho WordPress.
- og:image trỏ tới ảnh quá nhỏ hoặc sai tỉ lệ, khiến ảnh bị nền tảng cắt xén xấu trong khung xem trước.
- Quên cập nhật og:url khi đổi đường dẫn trang, khiến khung chia sẻ dẫn về một URL cũ không còn tồn tại.
- Để og:title/og:description trùng lặp y hệt SEO title và meta description trên mọi trang — về kỹ thuật không sai, nhưng mất cơ hội viết một dòng mô tả hấp dẫn hơn riêng cho lúc chia sẻ, vì ngữ cảnh người đọc trên mạng xã hội khác với người đang tìm kiếm trên Google.
Link trang bạn chia sẻ lên Facebook, Zalo đang hiện sai ảnh hoặc sai mô tả?
VIDCO kiểm tra và sửa lại thẻ Open Graph cho website, đảm bảo mỗi lần chia sẻ đều hiện đúng ảnh, đúng tiêu đề bạn muốn, không còn bị cache ảnh cũ.
Nguồn tham khảo
Thông tin trong bài được đối chiếu với các nguồn chính thức dưới đây tại thời điểm biên soạn; văn bản và chính sách có thể thay đổi.
- Giao thức Open Graph (ogp.me)
- Hướng dẫn chia sẻ cho quản trị viên web (Meta for Developers)
- Trình gỡ lỗi chia sẻ của Meta
Câu hỏi thường gặp
Thiếu thẻ OG thì link vẫn chia sẻ được chứ?
Được, nhưng nền tảng sẽ tự đoán ảnh/tiêu đề từ nội dung trang, kết quả thường không như ý muốn. Khai báo đầy đủ OG giúp bạn kiểm soát chính xác những gì hiển thị.
og:image nên dùng kích thước ảnh bao nhiêu?
Tài liệu gốc không quy định một kích thước cố định; thực tế nên dùng ảnh có tỉ lệ ngang rộng, đủ lớn để không bị mờ khi hiển thị trên các khung xem trước khác nhau, và khai báo kèm og:image:width/height để nền tảng hiển thị nhanh hơn.
Sửa thẻ OG xong mà Facebook vẫn hiện ảnh cũ thì làm sao?
Dùng Sharing Debugger để quét lại URL đó, bấm nút làm mới dữ liệu — Facebook sẽ đọc lại thẻ OG hiện tại thay vì dùng bản đã lưu cache trước đó.
Open Graph có cần cho từng trang riêng hay chỉ cần ở trang chủ?
Cần cho từng trang riêng. Mỗi trang nên có og:title, og:url và og:image phù hợp với nội dung của chính trang đó, không nên dùng chung một bộ thẻ OG của trang chủ cho toàn site.
Open Graph có bắt buộc theo luật hay chỉ là khuyến nghị kỹ thuật?
Chỉ là một giao thức kỹ thuật tự nguyện, không phải yêu cầu pháp lý. Trang không khai báo OG vẫn hoạt động bình thường, chỉ là khung xem trước khi chia sẻ sẽ do nền tảng tự suy luận thay vì theo đúng ý bạn.
