Open Graph Writing Guide

A practical checklist to make thumbnails render correctly on KakaoTalk, Naver, Facebook, and X.

1. The 5 essential tags

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Summary under 100 chars" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />

2. og:image specs

  • Resolution: 1200×630 recommended (1.91:1). 600×315 minimum.
  • Size: under 8MB. KakaoTalk often fails above 5MB.
  • Format: PNG or JPG. WebP is unreliable on KakaoTalk.
  • Filename: ASCII + dashes. Non-ASCII filenames break on FB/Kakao.
  • HTTPS required: most platforms reject HTTP images.

3. KakaoTalk tips

  • Cache is sticky (2–3 hours). If your change does not reflect, that is expected.
  • Force refresh via Kakao Debugger.
  • Large-card conditions: og:image width ≥ 600px, og:title + og:description both set, image publicly reachable.

4. Naver Blog / Cafe

  • Naver parses only a subset of OG and also picks the first body image.
  • Square (1:1) images look cleanest on Naver search/blog list.
  • Allow Yeti and Daumoa in robots.txt.

5. Facebook / X

  • Facebook Sharing Debugger → "Scrape Again" for instant refresh.
  • Set twitter:card=summary_large_image for big cards on X.
  • X falls back to og:image if twitter:image is missing.

6. Common breakage patterns

  • Vercel/Cloudflare preview domains set og:url to the canonical host → cache key conflicts.
  • SPA (React/Vue) with empty initial HTML → needs SSR or prerender.
  • og:image with query string → KakaoTalk may mis-key the cache.
  • Signed CDN URLs expire → thumbnails break a few days later.

7. Debug order

  1. Scan with this tool first (which tags are missing).
  2. FB Sharing Debugger — verify image fetch over HTTPS.
  3. Kakao Debugger — force cache refresh.
  4. Paste the link into an actual KakaoTalk chat to eyeball.

← Back to preview