Open Graph Tags: The Complete Guide (& Free Checker)

What Are Open Graph Tags?

Open Graph tags (OG tags) are HTML meta tags that control how your web pages appear when shared on social media platforms. They tell platforms like Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, and Discord exactly what title, description, and image to display when someone shares a link to your page.

Without OG tags, social platforms are left to guess what your content is about, often choosing an irrelevant image or cutting off your title in awkward places. With OG tags, you take control of that first impression — and first impressions in a social feed can mean the difference between a click and a scroll-past.

The Open Graph protocol was originally developed by Facebook in 2010 to standardize how web pages integrate into the social graph. Today it has been widely adopted beyond Facebook and serves as the de facto standard for link previews across virtually every major social platform and messaging application.

Why OG Tags Matter for Your Website

Every time someone shares a link to your website on social media, that share either works for you or against you. A compelling OG image can drive 3–5× more clicks than the same link without one. Here is why properly configured OG tags are essential:

• Click-through rates: Pages with optimized OG images get significantly higher engagement than those without. Visual previews capture attention in a fast-moving feed.
• Brand consistency: Custom OG images let you maintain branding across every platform where your content is shared — even platforms you do not control.
• Accurate previews: Without OG tags, platforms might pull the wrong image (a logo, an ad banner, or nothing at all) and truncate your title unpredictably.
• SEO signal amplification: Higher click rates on shared links send positive engagement signals. While social shares are not a direct ranking factor, the traffic they drive can be.
• Professional credibility: Broken or missing social previews undermine trust. Visitors who see a polished preview before clicking arrive with higher intent.

"Social sharing is often the fastest path to viral distribution. OG tags are the lever that makes shared links compelling instead of forgettable."

Essential OG Tags Reference

The Open Graph protocol defines a core set of tags that every page should implement, plus optional tags for more granular control. Here is the complete reference:

Core Tags (Required for All Pages)

Tag	Status	Description	Recommended Length
og:title	Required	The title of your page as it should appear in the preview card. Should be descriptive and compelling — this is your headline.	50–60 characters
og:description	Required	A short summary of the page content. Think of it as your pitch to get the click. Platforms usually show 2–3 lines.	100–160 characters
og:image	Required	The URL of the image to display in the preview card. Use an absolute URL (include https://). This has the single biggest impact on click rate.	1200×630px, under 8 MB
og:url	Required	The canonical URL of your page. Helps aggregate likes and shares when a page can be accessed from multiple URLs.	Full absolute URL
og:type	Recommended	The type of content. Common values: website (default), article, product, video.movie, book.	—

Optional But Valuable Tags

Tag	Status	Description
og:site_name	Optional	The name of your website (e.g., "RankPath"). Displayed alongside the preview on some platforms.
og:locale	Optional	The locale of the content (e.g., en_US). Helps platforms serve correct regional versions.
og:image:width	Optional	Width of the OG image in pixels. Helps crawlers avoid downloading the image to detect dimensions.
og:image:height	Optional	Height of the OG image in pixels.
og:image:alt	Optional	Alt text for the OG image. Improves accessibility and is shown when images fail to load.
article:published_time	Optional	For og:type = article. ISO 8601 datetime of publication (e.g., 2026-02-23T10:00:00Z).
article:author	Optional	For og:type = article. URL of the author's profile or name.

Minimal Complete Example

<head>
  <!-- Open Graph / Social Sharing -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/my-page">
  <meta property="og:title" content="Your Compelling Page Title Here">
  <meta property="og:description" content="A short, enticing description of what this page is about. Keep it under 160 characters.">
  <meta property="og:image" content="https://example.com/images/my-page-social.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Description of the image for accessibility">
  <meta property="og:site_name" content="Your Site Name">
</head>

Twitter / X Card Tags

Twitter (now X) has its own set of meta tags that control how links appear in tweets. While Twitter does read some OG tags as fallback values, you should implement Twitter Card tags explicitly for the best results. There are four Twitter Card types:

• summary: Small square thumbnail + title + description. Good for general content.
• summary_large_image: Large image above title + description. Best for articles and blog posts with strong visuals.
• app: For mobile apps, links to the App Store or Google Play.
• player: For embeddable video or audio content.

For most websites, summary_large_image is the right choice — it gives you maximum visual real estate in the Twitter feed.

Complete Twitter Card Implementation

<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:creator" content="@AuthorHandle">
<meta name="twitter:title" content="Your Page Title (under 70 characters)">
<meta name="twitter:description" content="Description for Twitter. Under 200 characters.">
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg">
<meta name="twitter:image:alt" content="Alt text for Twitter image">

Image Specifications by Platform

The most common source of broken social previews is an incorrectly sized OG image. Each platform has different requirements and rendering behavior. Here are the current recommended dimensions:

Image Best Practices

• Use absolute URLs: Always include the full URL (e.g., https://example.com/images/og.jpg), never relative paths like /images/og.jpg.
• Use JPEG for photographs: JPEG produces smaller file sizes for photographic images. PNG is better for text-heavy graphics with sharp edges.
• Optimize file size: Run images through a compressor like Squoosh or TinyPNG. Large OG images slow down crawler fetches and can cause previews to fail on WhatsApp.
• Avoid text-heavy images: Small text in a social card is unreadable on mobile. If using text, keep it large and centered.
• Cache-busting: Platforms aggressively cache OG images. When you update an OG image, append a version parameter (e.g., ?v=2) to force re-crawl.
• Serve over HTTPS: HTTP image URLs cause mixed-content warnings and may not load in Facebook's preview.

Best Practices for Writing OG Tags

Writing a Strong og:title

The og:title does not need to be identical to your page's <title> tag. It should be optimized for shareability rather than for search engine results pages. A good OG title:

• Is 50–60 characters to avoid truncation on most platforms
• Leads with the most important information (front-loaded)
• Uses active, specific language ("How to Fix" beats "A Guide to Fixing")
• Does not include your site name unless space allows — platforms often add it separately
• Includes a number or compelling hook where appropriate ("7 Mistakes" performs better than "Common Mistakes")

Writing a Strong og:description

Unlike the HTML <meta name="description"> which is optimized for search results, your og:description is optimized for social sharing context. Users reading it are mid-scroll in a social feed. Make it count:

• Keep it under 160 characters (Facebook truncates at roughly 300 characters, but shorter is better)
• Complete the thought started by the title, do not repeat it
• Address the reader's implied question: "What will I get from this?"
• Use a call to action when natural: "Learn how", "Discover why", "See how"

Choosing the Right og:type

The most important distinction is between website and article. Use article for any blog post, news item, or dated content piece — it unlocks the article:published_time and article:author tags and signals to platforms that this is time-sensitive content. Use website for your homepage and evergreen product pages.

Common OG Tag Mistakes to Avoid

1. Using Relative URLs for og:image

This is the most common technical mistake. og:image requires an absolute URL. When Facebook, LinkedIn, or Twitter's crawler fetches your page, it needs to know the full image address.

<!-- WRONG - relative URL will fail -->
<meta property="og:image" content="/images/social-card.jpg">

<!-- CORRECT - full absolute URL -->
<meta property="og:image" content="https://example.com/images/social-card.jpg">

2. Images That Are Too Small

Facebook will reject OG images smaller than 200×200px and will display a blurry or cropped image for anything below 600×315px. Always use 1200×630px as your baseline to ensure high-resolution previews on all devices and Retina displays.

3. Wrong Aspect Ratio

Even if an image is the right resolution, the wrong aspect ratio causes cropping. Facebook uses 1.91:1. An image that is perfectly square (1:1) will be aggressively cropped on most platforms. Use an image editor to crop your OG images to 1.91:1 before upload.

4. Missing og:url (Causes Split Engagement Counts)

If your page is accessible from multiple URLs (e.g., https://example.com/page and https://example.com/page/), omitting og:url means Facebook counts likes and shares separately for each URL variant. Always set og:url to your canonical URL.

5. OG Title Too Long

Titles over 60 characters are typically truncated with "..." on Facebook. On Twitter with summary_large_image, titles over 70 characters are truncated. Write your most important words first.

6. Stale Cached Previews After Updates

Platforms cache OG data aggressively. After updating OG tags, use the platform's debugging tool to force a re-crawl. Facebook has the Sharing Debugger; Twitter has the Card Validator. Alternatively, append a version query param to your og:url temporarily.

7. Dynamic Pages Without OG Tags

If your site renders content client-side (React, Vue, Angular single-page apps), OG tags must be set in the server-rendered HTML or via server-side rendering — not injected by JavaScript. Social crawlers typically do not execute JavaScript. Use Next.js, Nuxt, or a server-side rendering solution to ensure OG tags are present in the initial HTML response.

How to Add OG Tags

Plain HTML

Place OG tags inside the <head> element of your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Article Title - My Site</title>

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://mysite.com/my-article">
  <meta property="og:title" content="My Article Title">
  <meta property="og:description" content="What this article covers in 1-2 sentences.">
  <meta property="og:image" content="https://mysite.com/images/my-article.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="My Site">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="My Article Title">
  <meta name="twitter:description" content="What this article covers.">
  <meta name="twitter:image" content="https://mysite.com/images/my-article.jpg">
</head>
<body>
  ...
</body>
</html>

WordPress (with Yoast SEO)

If you use Yoast SEO (free or premium), navigate to the post or page editor, scroll to the Yoast SEO meta box, and click the Social tab. You can set a custom OG title, description, and image independently for Facebook and Twitter. Yoast injects the correct meta tags automatically.

For site-wide defaults, go to SEO → Social in the WordPress admin and configure your homepage and default social image there.

Next.js (App Router)

In Next.js 13+ App Router, use the metadata export in your page.tsx or layout.tsx:

// app/articles/my-article/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Article Title',
  description: 'What this article covers in 1-2 sentences.',
  openGraph: {
    title: 'My Article Title',
    description: 'What this article covers in 1-2 sentences.',
    url: 'https://mysite.com/articles/my-article',
    siteName: 'My Site',
    images: [
      {
        url: 'https://mysite.com/images/my-article.jpg',
        width: 1200,
        height: 630,
        alt: 'Description of the article image',
      },
    ],
    type: 'article',
    publishedTime: '2026-02-23T00:00:00Z',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Article Title',
    description: 'What this article covers.',
    images: ['https://mysite.com/images/my-article.jpg'],
  },
}

export default function Page() {
  return <article>...</article>
}

Next.js (Pages Router)

In the older Pages Router, use next/head:

// pages/articles/my-article.tsx
import Head from 'next/head'

export default function ArticlePage() {
  return (
    <>
      <Head>
        <meta property="og:type" content="article" />
        <meta property="og:url" content="https://mysite.com/articles/my-article" />
        <meta property="og:title" content="My Article Title" />
        <meta property="og:description" content="What this article covers." />
        <meta property="og:image" content="https://mysite.com/images/my-article.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <article>...</article>
    </>
  )
}

Webflow

In Webflow, open the page settings panel for any page and scroll to the Open Graph Settings section. Upload an OG image and enter your title and description directly. Webflow generates the correct meta tags automatically when publishing.

Shopify

For product and collection pages, most Shopify themes include OG tags by default using Liquid templates. Check your theme's snippets/head.liquid or layout/theme.liquid for existing og: tags. For blog articles, the default Shopify blog templates also output OG tags from the post title, excerpt, and featured image.

Validate Your OG Tags for Free

Writing OG tags is only half the job — you also need to verify they are being correctly parsed by social platforms. A tag might exist in your HTML but fail to render correctly due to a caching issue, an incorrect image URL, or a meta tag being injected by JavaScript rather than server-rendered.

RankPath's free OG Checker lets you instantly preview how any URL will appear when shared on Twitter, Facebook, and LinkedIn. Just enter a URL and see:

• The rendered social card preview as it would appear on each platform
• Which OG tags are present and their values
• Warnings for common issues: missing tags, wrong image dimensions, title too long, missing og:url
• Fallback behavior — what platforms will show if OG tags are absent or incomplete

When to Use the OG Checker

• After launching a new page: Verify OG tags are correctly served in the initial HTML response (not just injected by JavaScript).
• After updating OG content: Confirm the new title, description, or image is live and not showing the cached version.
• Before a campaign or PR push: Audit high-traffic destination pages before a product launch or press release to avoid embarrassing broken previews.
• Competitive research: Check how your competitors' pages appear in social feeds.
• QA for client sites: Build OG tag validation into your launch checklist for every client website.

Frequently Asked Questions