DEV Community

Snappy Tools
Snappy Tools

Posted on

Open Graph Meta Tags: What They Are and How to Generate Them Correctly

#webdev #html #seo #beginners

When someone shares a link on Twitter/X, Facebook, LinkedIn, or Slack, you see a preview card with a title, description, and image. Those cards are powered by Open Graph meta tags — small HTML snippets in your page's <head>.

Getting them right is one of the highest-leverage quick wins in web development. A good social preview dramatically increases click-through rate.

The Core Tags

At minimum, every page needs these four:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A 1–2 sentence description of the page." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/this-page/" />
Enter fullscreen mode Exit fullscreen mode

Four tags. That's it. They get you a functional preview on every major platform.

Extended Tags Worth Adding 

<meta property="og:type" content="website" />
<!-- Use "article" for blog posts, "product" for e-commerce -->

<meta property="og:site_name" content="Your Site Name" />
<!-- Appears below the title on some platforms -->

<meta name="twitter:card" content="summary_large_image" />
<!-- Makes Twitter use a large image preview instead of a small thumbnail -->

<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A 1–2 sentence description." />
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg" />
Enter fullscreen mode Exit fullscreen mode

The twitter: tags are separate because Twitter/X has its own spec. In practice, Twitter falls back to og: tags when twitter: tags are absent — but specifying both gives you more control over the Twitter card format.

The og:image Tag: Most Common Mistakes

Wrong size: og:image should be at least 1200 × 630 pixels. Smaller images appear blurry or get cropped.

Relative URL: The og:image value must be an absolute URL (https://...). Relative paths (/images/preview.jpg) don't work for social crawlers.

Slow load: Social platform crawlers time out quickly. Your og:image should load fast and be under 300 KB. JPEG works best for photographic images.

Aggressive caching: Facebook and LinkedIn cache og:image heavily. After changing it, use their debugging tools (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.

Verifying Your Tags

Every major platform has an official scraping tool:

  • Facebook: developers.facebook.com/tools/debug/
  • LinkedIn: linkedin.com/post-inspector/inspect/
  • Twitter/X: Paste in Twitter cards validator
  • Slack: Just paste the URL into a Slack message — it unfurls automatically

These show you exactly what the platform sees, including which tags it picks up and what the preview will look like.

Dynamic OG Tags in Common Frameworks

Next.js (App Router):

export const metadata = {
  title: 'My Page',
  openGraph: {
    title: 'My Page',
    description: 'Page description',
    images: [{ url: 'https://yourdomain.com/og-image.jpg' }],
  },
};
Enter fullscreen mode Exit fullscreen mode

WordPress: Yoast SEO generates OG tags automatically from your page title and featured image.

Static HTML: Add the tags manually to each page's <head>.

Generating the Tags

Rather than writing the HTML by hand, SnappyTools has a free Open Graph Meta Tag Generator that lets you fill in a form, previews the card for Twitter/X, Facebook, and LinkedIn, and outputs the complete tag block to paste into your <head>. No login, runs in your browser.

tl;dr: Four tags get you functional social previews everywhere. Add twitter:card: summary_large_image for a large Twitter preview. Make your og:image 1200 × 630px, absolute HTTPS URL, under 300 KB.

Top comments (0)