The Complete Guide to Open Graph Tags

· 7 min read

TL;DR — Key Takeaways

  • •Open Graph tags control how your links appear when shared on Facebook, LinkedIn, Slack, Discord, and most messaging apps.
  • •Four tags are required: og:title, og:type, og:image, and og:url. Everything else is optional but recommended.
  • •Your og:image should be exactly 1200x630 pixels for optimal display across all platforms.
  • •Always test with real sharing debuggers before deploying — platforms cache aggressively and bugs are hard to fix after the fact.

You spend hours writing a blog post, ship it, share it on LinkedIn, and... it shows up as a bare URL with no image and a garbled title. Sound familiar?

Open Graph tags are the fix. They're a protocol originally created by Facebook that tells social platforms exactly how to display your content when someone shares a link. Almost every major platform supports them now, and getting them right can dramatically increase your click-through rates.

Required Tags

The four tags you must include on every page. Without these, platforms will guess — and they'll guess wrong.

og:title

The title of your page as it should appear when shared. This doesn't have to match your <title> tag — in fact, it often shouldn't. Your HTML title might include your brand name for SEO, but your OG title should be clean and compelling for social feeds.

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

og:type

Tells platforms what kind of content this is. For most pages, use website. For blog posts, use article. The type determines which additional properties are available (articles can have article:published_time, for example).

<meta property="og:type" content="article" />

og:image

This is the single most impactful Open Graph tag. A good share image is the difference between someone scrolling past your link and actually clicking it. The requirements:

<meta property="og:image" content="https://yoursite.com/og-image.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" />

Pro tip: Include text on your OG image that summarizes the page content. Many users decide whether to click based solely on the preview image, especially on mobile. Tools like Figma or Canva make it easy to create OG image templates.

og:url

The canonical URL for the page. This tells platforms which URL to associate all shares with, preventing link equity from being split across URL variations (with/without trailing slash, query parameters, etc.).

<meta property="og:url" content="https://yoursite.com/blog/my-post" />

Recommended Optional Tags

Not strictly required, but strongly recommended for a polished sharing experience.

og:description

A one or two sentence summary of the page. Most platforms display this below the title. Keep it under 200 characters — anything longer gets truncated.

<meta property="og:description" content="Everything you need to know about OG tags." />

og:site_name

Your brand name. Displayed above the title on Facebook and some other platforms. Useful for brand recognition in busy social feeds.

<meta property="og:site_name" content="AuditMyPage" />

og:locale

The language and region of your content. Defaults to en_US if not specified. Only set this if your content is in a different language.

<meta property="og:locale" content="en_US" />

Implementation in Modern Frameworks

How to add OG tags in Next.js, plain HTML, and other common setups.

Next.js (App Router)

Next.js makes this dead simple with the metadata export. It generates all the OG meta tags for you:

// app/blog/my-post/page.tsx
export const metadata = {
  title: "My Blog Post — MySite",
  description: "A great post about great things.",
  openGraph: {
    title: "My Blog Post",
    description: "A great post about great things.",
    type: "article",
    images: [
      {
        url: "https://mysite.com/og/my-post.jpg",
        width: 1200,
        height: 630,
        alt: "My Blog Post cover image",
      },
    ],
  },
};

Plain HTML

Add the meta tags directly in your <head>:

<head>
  <meta property="og:title" content="My Page Title" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://mysite.com/og.jpg" />
  <meta property="og:url" content="https://mysite.com/page" />
  <meta property="og:description" content="Page description." />
  <meta property="og:site_name" content="MySite" />
</head>

Testing Your Tags

Always verify your OG tags with the official debuggers before sharing your links.

Platforms cache OG data aggressively. If you share a link with broken tags and then fix them, some platforms will keep showing the old (broken) preview for hours or even days. Test first, share second.

Official Debuggers

Common Mistakes

The OG tag mistakes I see most often when auditing sites.

1. Using Relative Image URLs

This is the most common one. og:image must be an absolute URL starting with https://. Relative paths like /images/og.jpg won't work — platforms have no way to resolve them.

2. Wrong Image Dimensions

Using a square image (say, your logo) as the OG image results in ugly cropping and wasted space. Stick to 1200x630. If you don't have a custom image per page, create a generic branded template at those dimensions and use it as the default.

3. Duplicate Tags

Some CMS platforms or plugins inject OG tags automatically, and then developers add them manually too. Double tags confuse platforms. Check your page source to make sure each OG property appears exactly once.

4. Forgetting og:type

If you omit og:type, most platforms default to website, which is fine for homepages but wrong for blog posts. Use article for content pages — it enables article-specific properties and changes how some platforms render the preview.

5. Not Including og:image:alt

Accessibility matters everywhere, including social previews. The og:image:alt property provides alt text for your share image. Screen readers on social platforms use this to describe the image to visually impaired users.

Check your Open Graph tags automatically

AuditMyPage scans your URL and validates all Open Graph properties, checks that your image URL resolves, and flags missing or malformed tags. Takes 30 seconds.

Audit your site — Free