A Quick Guide to Open Graph and Twitter Cards

Open Graph and Twitter Card tags decide what a link looks like when someone shares it. Most technical blogs have either too few or too many. Here is the minimum that actually works.

Open Graph (most platforms)

• og:title: the post title. Not the site name.
• og:description: one sentence, ~140 characters.
• og:url: the canonical URL.
• og:image: absolute URL, 1200x630, <300KB.
• og:type: article for blog posts.
• og:site_name: the publication name.

Twitter Card

• twitter:card: summary_large_image for posts with a cover image.
• twitter:title, twitter:description, twitter:image: same as Open Graph, may be more terse.

Easy mistakes

• Using a relative URL in og:image. Crawlers will not resolve it.
• Setting og:image to a 200x200 thumbnail. The card will look bad.
• Forgetting article:published_time and article:modified_time. Some platforms surface these.

Validation

The platform validators are the only test that matters. Twitter's card validator and Facebook's sharing debugger are the canonical tools. YJTOON pages pass both.