- Social SEO
- SEO
- Getting Started
The Beginner's Guide to Open Graph Tags and Twitter Cards
Control how your pages look when shared on social media. Learn which Open Graph and Twitter Card tags to set and see examples for every platform.
When someone shares your page on Facebook, LinkedIn, Twitter, or Slack, these platforms look for Open Graph (OG) and Twitter Card meta tags to generate the preview. Without them, the platform guesses — and the result is usually a blank image, a truncated title, or no description at all.
What Are Open Graph Tags?
Open Graph is a protocol created by Facebook that lets you control how your content appears when shared on social media. The tags go in your page’s <head>:
<meta property="og:title" content="How to Write Meta Titles for SEO" />
<meta property="og:description" content="Learn how to craft titles that rank higher and earn more clicks." />
<meta property="og:image" content="https://www.example.com/images/meta-titles-og.jpg" />
<meta property="og:url" content="https://www.example.com/blog/meta-title-seo" />
<meta property="og:type" content="article" />Despite being created by Facebook, Open Graph tags are used by virtually every social platform: LinkedIn, Pinterest, Slack, Discord, iMessage, and more.
What Are Twitter Cards?
Twitter (X) has its own set of meta tags that control how links appear in tweets:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Write Meta Titles for SEO" />
<meta name="twitter:description" content="Learn how to craft titles that rank higher and earn more clicks." />
<meta name="twitter:image" content="https://www.example.com/images/meta-titles-og.jpg" />Twitter will fall back to OG tags if Twitter Card tags aren’t present, but specifying both gives you the most control.
The Essential Tags
Must-Have Tags
| Tag | What It Does | Example |
|---|---|---|
og:title | The headline shown in the preview | ”How to Write Meta Titles for SEO” |
og:description | The summary text below the title | ”Learn how to craft titles…” |
og:image | The preview image | URL to a 1200x630 image |
og:url | The canonical URL of the page | Your page’s full URL |
og:type | The type of content | ”article” for blog posts, “website” for homepages |
twitter:card | The Twitter card format | ”summary_large_image” for most content |
Nice-to-Have Tags
| Tag | What It Does |
|---|---|
og:site_name | Your brand name (shown above the title on Facebook) |
og:locale | Language and region (e.g., “en_US”) |
twitter:site | Your brand’s Twitter handle |
twitter:creator | The author’s Twitter handle |
article:published_time | Publication date for articles |
article:author | Author URL or profile |
OG Image Best Practices
The image is the most important OG tag — it dominates the social preview and has the biggest impact on click-through rates.
Size Requirements
| Platform | Recommended Size | Minimum Size |
|---|---|---|
| 1200 x 630 px | 600 x 315 px | |
| Twitter (large) | 1200 x 628 px | 300 x 157 px |
| 1200 x 627 px | 200 x 200 px | |
| All platforms | 1200 x 630 px | — |
Use 1200 x 630 pixels for a single image that works everywhere.
Image Tips
- Use high-contrast text if your image includes a title overlay
- Keep text within the center 80% of the image — platforms may crop edges
- Use your brand colors for recognition
- Avoid stock photos — custom images perform significantly better
- Use JPEG or PNG — not SVG, GIF, or WebP (some platforms don’t support them)
- Keep file size under 5 MB (Facebook’s limit) — aim for under 1 MB
Common Image Mistakes
- Using a tiny logo as the OG image (looks unprofessional when stretched)
- Using an image with important text at the edges (gets cropped)
- Not specifying an image at all (platform picks a random image from the page)
Complete Template
Here’s a copy-paste template for a blog post:
<!-- Open Graph -->
<meta property="og:title" content="Your Post Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary." />
<meta property="og:image" content="https://www.yoursite.com/images/post-og.jpg" />
<meta property="og:url" content="https://www.yoursite.com/blog/post-slug" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Brand" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Post Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary." />
<meta name="twitter:image" content="https://www.yoursite.com/images/post-og.jpg" />How to Test Your Tags
After setting up your tags, test them:
- Facebook: Use the Sharing Debugger to preview and clear Facebook’s cache
- Twitter: Use the Card Validator to preview your card
- LinkedIn: Use the Post Inspector to preview and refresh
Important: These platforms cache previews aggressively. After updating your tags, use the debugger tools to force a cache refresh.
Do Social Tags Affect SEO?
Open Graph and Twitter Card tags are not a direct Google ranking factor. Google uses your regular <title> and <meta name="description"> tags, not OG tags.
However, social tags indirectly help SEO by:
- Increasing click-through rates on shared links (more traffic)
- Encouraging more shares (better previews → more shares → more backlinks)
- Building brand recognition across platforms
How Do I Check My Social Tags?
What seoutils.dev checks: Our free audit scans for all essential Open Graph and Twitter Card tags — og:title, og:description, og:image, og:url, twitter:card, and twitter:title. You’ll see which tags are present and which are missing.
Run a free audit to check your social meta tags.
This is part of our Complete SEO Audit Checklist. Related: How to Write Meta Titles and Descriptions.