← Back to Blog

OG Image Meta Tags: The Complete Guide to Open Graph Tags

Every meta tag you need for perfect social media previews on Facebook, Twitter/X, LinkedIn, and beyond. Copy-paste examples included.

What Are Open Graph Meta Tags?

Open Graph meta tags are snippets of HTML that you add to your page's <head>section. When someone shares your URL on a social media platform, the platform's crawler reads these tags to build a rich preview card with a title, description, and image.

Without these tags, platforms either display a plain URL or try to auto-extract content from the page — which rarely looks good. Setting proper OG tags gives you full control over how your content appears when shared.

The Essential OG Tags (Minimum Viable Setup)

Every page on your site should have at least these four tags:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A compelling description of your page" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/page" />
</head>

Complete OG Tag Reference

Basic Tags

  • og:title — The title of your page. Keep it under 60 characters for best display. This overrides the <title> tag for social previews.
  • og:description — A brief summary of the page content. Aim for 100-200 characters. Platforms may truncate longer descriptions.
  • og:url — The canonical URL for the page. Use the full absolute URL, not a relative path.
  • og:type — The type of content. Common values: website, article, product, profile.
  • og:site_name — The name of your website or app. Displayed above the title on some platforms.
  • og:locale — The locale of the content, e.g. en_US. Defaults to en_US if not set.

Image Tags

  • og:image — The full URL to the preview image. Must be an absolute URL (not a relative path). Use HTTPS.
  • og:image:width — Width of the image in pixels. Recommended: 1200.
  • og:image:height — Height of the image in pixels. Recommended: 630.
  • og:image:type — MIME type of the image: image/png, image/jpeg, or image/gif.
  • og:image:alt — Alt text for the image. Important for accessibility and SEO.

Article Tags (for blog posts)

  • article:published_time — ISO 8601 date string, e.g. 2026-03-24T00:00:00Z.
  • article:modified_time — When the article was last updated.
  • article:author— URL to the author's profile.
  • article:tag — Tags/keywords for the article. Can be specified multiple times.

Twitter Card Meta Tags

Twitter/X uses its own set of meta tags in addition to Open Graph. If Twitter-specific tags are not present, Twitter falls back to OG tags. For maximum control, include both:

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description" />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Description of the image" />

The twitter:card value determines the layout:

  • summary_large_image — Large image above the title (recommended for most pages)
  • summary — Small square thumbnail next to the title
  • player — For video/audio embeds

Full Example: Blog Post with All Tags

Here's a complete example with all recommended OG and Twitter meta tags for a blog post:

<head>
  <!-- Primary Meta Tags -->
  <title>How to Build a Blog — My Site</title>
  <meta name="description" content="A step-by-step guide..." />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://mysite.com/blog/how-to-build-a-blog" />
  <meta property="og:title" content="How to Build a Blog" />
  <meta property="og:description" content="A step-by-step guide..." />
  <meta property="og:image" content="https://ogpix-pi.vercel.app/api/og?title=How+to+Build+a+Blog&theme=gradient" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="How to Build a Blog" />
  <meta property="og:site_name" content="My Site" />

  <!-- Article -->
  <meta property="article:published_time" content="2026-03-24T00:00:00Z" />
  <meta property="article:tag" content="tutorial" />
  <meta property="article:tag" content="blogging" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="How to Build a Blog" />
  <meta name="twitter:description" content="A step-by-step guide..." />
  <meta name="twitter:image" content="https://ogpix-pi.vercel.app/api/og?title=How+to+Build+a+Blog&theme=gradient" />
</head>

Using OG Tags in Next.js

If you're using Next.js App Router, you don't write meta tags directly. Instead, export a metadata object:

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "How to Build a Blog — My Site",
  description: "A step-by-step guide...",
  openGraph: {
    title: "How to Build a Blog",
    description: "A step-by-step guide...",
    type: "article",
    images: [{
      url: "https://ogpix-pi.vercel.app/api/og?title=How+to+Build+a+Blog",
      width: 1200,
      height: 630,
      alt: "How to Build a Blog",
    }],
  },
  twitter: {
    card: "summary_large_image",
    title: "How to Build a Blog",
    description: "A step-by-step guide...",
    images: ["https://ogpix-pi.vercel.app/api/og?title=How+to+Build+a+Blog"],
  },
};

Common Mistakes

  • Relative image URLs: The og:image must be an absolute URL starting with https://. Relative paths like /images/og.png will not work.
  • Missing image dimensions: Without og:image:width and og:image:height, some platforms may not display the image at all on first share.
  • HTTP instead of HTTPS: Most platforms now require HTTPS for OG images. HTTP URLs may be blocked or ignored.
  • Duplicate tags: Having multiple og:title tags confuses crawlers. Ensure each tag appears only once (except article:tag which is intentionally repeatable).
  • Caching issues: Platforms cache OG data aggressively. After updating your tags, use platform-specific debug tools to refresh the cache.

Debugging & Validation Tools

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug — Test and refresh your OG tags
  • Twitter Card Validator: cards-dev.twitter.com/validator — Preview your Twitter card
  • LinkedIn Post Inspector: linkedin.com/post-inspector — Debug LinkedIn previews
  • OpenGraph.xyz: Preview how your page looks across platforms

The Easiest Way: Generate OG Images with OGPix

Writing meta tags is only half the battle — you also need actual images to reference in those tags. OGPix is the easiest way to generate beautiful OG images without any design tools or complex infrastructure.

Point your og:image tag at the OGPix API and your image is generated on-the-fly:

<meta property="og:image"
  content="https://ogpix-pi.vercel.app/api/og
    ?title=Your+Page+Title
    &description=Your+description
    &theme=gradient" />

Try the OGPix playground to design your image visually, or grab a free API key to start generating images programmatically.