OGP meta tags là gì? og:title và og:image cơ bản cho share link【2026】

(Cập nhật: 19 tháng 7, 2026 ) OGP Open Graph og:title og:image meta tags share card HTML
Kết luận

OGP = bộ meta nói cho mạng xã hội “card này hiện gì”. Cốt lõi: og:title (tiêu đề card), og:image (ảnh lớn), kèm og:description và og:url. Ảnh phải https tuyệt đối, kích thước quanh 1200×630. Khai báo đúng trong HTML public trước — rồi mới lo cache Zalo/Facebook. Xem trước nhanh bằng OGP Preview.

Landing tuyển dụng hoặc blog tiếng Việt vừa lên production. Paste vào group Zalo: chỉ hiện URL xám, không ảnh, title lấy từ <title> dài khó đọc. Marketing hỏi “SEO hỏng?”. Thường chưa phải cache — mà chưa có (hoặc sai) thẻ Open Graph.

Bài OGP không hiện / checklist launch và xóa cache OGP xử lý khi card đã từng crawl. Bài này dừng ở tầng OGP meta tags là gì — đặc biệt og:title và og:image — để bạn viết đúng từ đầu.

Bài viết này giúp bạn

  • Hiểu Open Graph khác <title> / SEO meta thế nào
  • Viết đúng bộ tối thiểu: title, description, image, url, type
  • Tránh lỗi ảnh relative, kích thước lệch, meta chỉ có sau hydrate JS
  • Checklist copy-paste cho Astro/Next/HTML tĩnh
  • Dùng OGP Preview trước khi nhờ team share

Open Graph Protocol (OGP) là gì?

Open Graph là quy ước meta do Facebook phổ biến, sau đó hầu hết mạng xã hội và chat (Zalo, LinkedIn, Discord…) đọc theo. Bot fetch HTML, tìm:

<meta property="og:…" content="…" />

rồi dựng share card: ảnh lớn + tiêu đề + mô tả. Không giống schema JSON-LD (rich result Google) — OGP chủ yếu cho hiển thị khi share, không thay structured data.

LớpVí dụAi đọc
Tab / SEO cơ bản<title>, meta name="description"Trình duyệt, Google
Open Graphog:title, og:image…Facebook, Zalo, LinkedIn…
Twitter Cardtwitter:card, twitter:imageX (Twitter); nhiều site vẫn set song song

Thiếu OGP ≠ site “không index”. Chỉ là link share xấu hoặc thiếu ảnh.

Bộ thẻ tối thiểu — trọng tâm og:title và og:image

<head>
  <title>Kawa Dev Tools — công cụ trình duyệt cho developer</title>
  <meta name="description" content="Contrast, hash, OGP preview… chạy local." />

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/vi/tools/" />
  <meta property="og:title" content="Kawa Dev Tools — xem trước link đẹp khi share" />
  <meta property="og:description" content="Bộ công cụ dev chạy trên trình duyệt, không cần đăng ký." />
  <meta property="og:image" content="https://example.com/og/tools-vi-1200x630.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
</head>

og:title

  • Là dòng chữ lớn trên card, không phải bắt buộc trùng <title>.
  • Nên 1 câu rõ sản phẩm/lợi ích; tránh nhồi từ khóa SEO dài.
  • Thiếu → crawler thường lấy <title> (có thể kèm tên site dài, khó đọc trên mobile).

og:image

  • Quyết định CTR: card có ảnh vs link trần.
  • URL tuyệt đối https — /images/og.png hoặc http://… thường fail.
  • Mốc an toàn: ~1200×630 (tỷ lệ ~1.91:1). Vuông 1:1 vẫn hiện trên một số app nhưng dễ crop xấu trên Facebook/LinkedIn.
  • File quá nhẹ (icon 64px) bị phóng mờ; quá nặng có thể timeout khi scrape.

og:description

  • 1–2 câu phụ dưới title. Cắt ngắn trên mobile — đưa thông tin quan trọng lên đầu.
  • Không dán nguyên đoạn blog 300 từ.

og:url

  • URL canonical sẽ share. Lệch www / non-www / có-trailing-slash → hai cache khác nhau về sau.
  • Nên khớp URL marketing paste thật.

og:type

  • website cho trang chung; article cho bài viết. Sai type ít khi “gãy” card, nhưng nên đúng ngữ cảnh.
og:title / og:image — đúng vs sai thường gặp
Tình huống Sai Đúng hướng
Đường ảnh content="/og.png" https://domain.com/og.png
Kích thước Logo 200×200 làm hero card ~1200×630, chữ lớn đọc được khi thu nhỏ
Title Copy cả H1 + slogan + năm + CTA Một dòng rõ, ≤ ~60–70 ký tự cảm nhận
Render Meta chỉ gắn sau useEffect Có sẵn trong HTML SSR/SSG / file tĩnh
Môi trường Chỉ đúng trên localhost Đúng trên URL public mà user sẽ paste

Vì sao SPA / client-only hay “mất” OGP?

Nhiều crawler không chạy full JavaScript như Chrome của bạn. Nếu og:title chỉ được React gắn sau hydrate:

  1. Bot nhận HTML rỗng / template mặc định
  2. Card lấy title site gốc hoặc không có ảnh
  3. Dev mở DevTools thấy meta đúng → tưởng “OGP đã OK”

Giải pháp: SSR, SSG, hoặc inject meta ở tầng server/edge. Framework kiểu Astro/Next App Router (với metadata API) phù hợp hơn CSR thuần cho landing cần share.

Case: tiếng Việt trên card

  • Unicode: title tiếng Việt (dấu) hoạt động bình thường nếu HTML UTF-8.
  • Độ dài: Zalo/Facebook cắt description sớm — đừng để CTA ở câu cuối.
  • Ảnh có chữ: font lớn, tương phản cao; tránh paragraph nhỏ trên banner 1200px (khi thu còn ~300px trên điện thoại sẽ không đọc được).
  • Không nhét số điện thoại / giá VND dày đặc vào ảnh nếu hay đổi — mỗi lần đổi ảnh lại đụng cache (xem bài cache riêng).

Quy trình thêm OGP cơ bản (15 phút)

  1. Viết og:title + og:description như copy quảng cáo ngắn.
  2. Export ảnh 1200×630, upload CDN/static, ghi URL https.
  3. Chèn meta vào layout <head> của đúng trang (không chỉ homepage nếu share deep link).
  4. Deploy → View Source hoặc curl -sL URL | findstr og: (Windows) / grep og: — xác nhận có trong HTML.
  5. Mở OGP Preview, dán URL (lưu ý CORS: một số site chặn fetch từ tool; khi đó dựa view-source + debugger MXH).
  6. Mới nhờ marketing paste Zalo/Facebook.
Giới hạn công cụ preview

OGP Preview Kawa chạy trên trình duyệt và có thể không fetch được site chặn CORS. Khi lỗi fetch: mở mã nguồn trang, kiểm tra từng property="og:…", rồi dùng Sharing Debugger / Post Inspector sau khi public. Preview không thay bước scrap cache.

Checklist “đủ để share lần đầu”

  • Có og:title, og:description, og:image, og:url, og:type
  • og:image là https tuyệt đối, mở được trong tab ẩn danh
  • Ảnh khoảng 1200×630, chữ đọc được khi thu nhỏ
  • Meta có trong HTML gốc (không phụ thuộc click vào app rồi mới gắn)
  • og:url khớp URL sẽ paste (www / path)
  • Đã xem trước bằng tool hoặc view-source
  • (Sau này) Nếu sửa meta mà MXH còn cũ → làm theo bài xóa cache OGP

Liên kết tiếp theo

Hiểu og:title và og:image trước khi đổ lỗi “Zalo cache” — phần lớn link xấu lần đầu chỉ vì meta thiếu, ảnh relative, hoặc HTML chưa có thẻ khi bot đến.