DEV Community

Strahorn Consulting
Strahorn Consulting

Posted on

The Complete Guide to Open Graph Tags (And How to Test Them)

#webdev #beginners #html #seo

You share a link. Someone clicks it. Before they even read the page, they've already judged it — based on the preview card that appeared in their feed.

That preview is built entirely from Open Graph tags. Get them right and your content looks polished and clickable everywhere it's shared. Get them wrong (or skip them entirely) and you get an ugly blank card or, worse, your site's raw URL.

This guide covers everything you need to know: what OG tags are, which ones matter, how Twitter handles them differently, what developers commonly mess up, and how to test your implementation.

What Are Open Graph Tags?

Open Graph (OG) is a protocol originally created by Facebook in 2010. It lets you control how your web pages appear when shared on social platforms, messaging apps, and anywhere else that generates link previews.

OG tags live in the <head> of your HTML, invisible to users but read by crawlers when your URL is shared. Think of them as metadata that tells external services: here's the title, description, image, and type of content on this page.

Without them, platforms have to guess — and they're not great at it.

The 6 Essential OG Tags

1. og:title

The title of your page as it should appear in the preview.

<meta property="og:title" content="The Complete Guide to Open Graph Tags" />
Enter fullscreen mode Exit fullscreen mode

Keep it under 60 characters. It may get truncated on some platforms. Don't just copy your <title> tag — OG titles can be slightly different, more descriptive, or marketing-oriented.

2. og:description

A short summary of the page content. Shown below the title in most preview cards.

<meta property="og:description" content="Learn how OG tags work, which ones matter, and how to test your implementation across platforms." />
Enter fullscreen mode Exit fullscreen mode

Aim for 1–2 sentences, around 100–150 characters. This is your pitch — make it count.

3. og:image

The image shown in the preview card. This is the most impactful tag — a strong image dramatically increases click-through rates.

<meta property="og:image" content="https://yoursite.com/images/og-image.png" />
Enter fullscreen mode Exit fullscreen mode

Critical requirements:

  • Use an absolute URL (not /images/og-image.png)
  • Recommended dimensions: 1200 × 630px
  • Format: PNG or JPEG (SVG is not supported by most platforms)
  • File size: under 8MB, ideally under 1MB

4. og:url

The canonical URL of the page.

<meta property="og:url" content="https://yoursite.com/blog/og-tags-guide" />
Enter fullscreen mode Exit fullscreen mode

This should match the canonical URL of the page, without tracking parameters. It helps prevent duplicate content issues when the same page is accessible at multiple URLs.

5. og:type

The type of content. For most web pages, this is website. For blog posts, use article.

<meta property="og:type" content="article" />
Enter fullscreen mode Exit fullscreen mode

Common values: website, article, video.movie, music.song, profile.

6. og:site_name

The name of your overall site (not the page title).

<meta property="og:site_name" content="Your Brand Name" />
Enter fullscreen mode Exit fullscreen mode

Shown in smaller text alongside the title in some preview cards.

Putting It Together

Here's a complete example for a blog post:

<head>
  <meta property="og:title" content="The Complete Guide to Open Graph Tags" />
  <meta property="og:description" content="Everything developers need to know about OG tags — with code examples and testing tips." />
  <meta property="og:image" content="https://yoursite.com/images/og-guide-cover.png" />
  <meta property="og:url" content="https://yoursite.com/blog/og-tags-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Your Brand" />
</head>
Enter fullscreen mode Exit fullscreen mode

Twitter Card Tags

Twitter (now X) originally created its own metadata system called Twitter Cards. While Twitter will fall back to OG tags if Twitter Card tags are missing, explicitly setting them gives you more control.

twitter:card

Defines the card type. The most common options:

  • summary — Small square image, title, description
  • summary_large_image — Large image above title and description
  • player — Embeds video or audio 
<meta name="twitter:card" content="summary_large_image" />
Enter fullscreen mode Exit fullscreen mode

twitter:title and twitter:description 

<meta name="twitter:title" content="The Complete Guide to Open Graph Tags" />
<meta name="twitter:description" content="Everything developers need to know about OG tags." />
Enter fullscreen mode Exit fullscreen mode

twitter:image 

<meta name="twitter:image" content="https://yoursite.com/images/og-guide-cover.png" />
Enter fullscreen mode Exit fullscreen mode

Note: Twitter images have a max file size of 5MB for JPEGs and PNGs.

Full Twitter + OG Setup 

<!-- Open Graph -->
<meta property="og:title" content="The Complete Guide to Open Graph Tags" />
<meta property="og:description" content="Everything developers need to know about OG tags." />
<meta property="og:image" content="https://yoursite.com/images/og-guide-cover.png" />
<meta property="og:url" content="https://yoursite.com/blog/og-tags-guide" />
<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="The Complete Guide to Open Graph Tags" />
<meta name="twitter:description" content="Everything developers need to know about OG tags." />
<meta name="twitter:image" content="https://yoursite.com/images/og-guide-cover.png" />
Enter fullscreen mode Exit fullscreen mode

Common Mistakes

1. Missing Tags Entirely

Easiest fix: add them. Many sites simply never bother. Check your site now — you might be surprised.

2. Using Relative URLs for og:image

/images/og.png does not work. Crawlers need an absolute URL with the full domain:

<!-- Wrong -->
<meta property="og:image" content="/images/og.png" />

<!-- Right -->
<meta property="og:image" content="https://yoursite.com/images/og.png" />
Enter fullscreen mode Exit fullscreen mode

3. Wrong Image Dimensions

The sweet spot is 1200 × 630px (1.91:1 aspect ratio). Images that are too small, too tall, or off-ratio get cropped, letterboxed, or ignored.

4. Using SVG Images

Major platforms (Facebook, LinkedIn, Slack, Discord) do not support SVG for OG images. Convert to PNG.

5. Caching Issues

Platforms cache OG data aggressively. After updating your tags, you'll need to explicitly re-scrape your URL:

6. Dynamic Sites That Render Tags Client-Side

Crawlers often don't execute JavaScript. If you're rendering OG tags via React/Vue/etc. without SSR, platforms may not see them. Use server-side rendering or a headless pre-rendering service.

How to Test Your OG Tags

Writing the tags is half the battle. Testing is where most developers skip out — and then wonder why their links look broken when shared.

The fastest way to check: PagePulse.

PagePulse is a free tool that shows you exactly how your site renders on:

  • Google Search (title + description)
  • Facebook (OG card preview)
  • X/Twitter (Twitter Card preview)
  • LinkedIn (link preview)
  • Slack (unfurl card)
  • Discord (embed preview)

It also gives you a 0–100 score with a letter grade (A+ through F), flags missing or misconfigured tags, warns about image dimension issues, and tells you what to fix.

No signup required — just paste your URL and see results instantly.

Checklist Before You Ship

Before publishing any page or launching a new site, run through this:

  • [ ] og:title — under 60 chars, compelling
  • [ ] og:description — 100–150 chars, clear value prop
  • [ ] og:image — absolute URL, 1200×630px PNG/JPEG, under 1MB
  • [ ] og:url — matches canonical URL, no tracking params
  • [ ] og:type — website or article
  • [ ] og:site_name — your brand name
  • [ ] twitter:card — set to summary_large_image
  • [ ] All image URLs are absolute, not relative
  • [ ] Tested on at least 2 platforms

Getting OG tags right takes 15 minutes and pays off every time someone shares your content. It's one of the highest-ROI SEO/marketing tasks a developer can do.

Check your site's OG tags for free at https://pagepulse.cc — see exactly how your links appear on Google, Facebook, Twitter, LinkedIn, Slack, and Discord, with a score and specific recommendations to improve.

Top comments (0)