Open Graph meta tags control how your web pages appear when shared on social media. Get them right and your links display rich, branded preview cards. Get them wrong and you get blank thumbnails, missing titles, or truncated descriptions.

This cheat sheet covers every Open Graph meta tag you need, with copy-paste code examples and platform-specific notes. Bookmark it for quick reference.

The 4 Required OG Tags

These are the minimum tags every page should have. Without them, most platforms will generate poor or unpredictable previews.

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary of the page content." />
<meta property="og:image" content="https://yoursite.com/images/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />

og:title

The title of your page as it should appear in the preview card. Keep it under 60 characters to avoid truncation on most platforms. This does not need to match your HTML <title>tag — you can craft a more compelling version specifically for social sharing.

og:description

A one- or two-sentence summary of the page. Aim for 120–160 characters. Facebook and LinkedIn show approximately 2 lines of description text. Twitter/X may ignore this in favor of twitter:description if set.

og:image

The absolute URL of the image to display in the preview card. The recommended size is 1200 × 630 pixels in PNG or JPEG format, under 1 MB. Always use an absolute URL (including https://) — relative paths will not work.

og:url

The canonical URL of the page. This tells platforms which URL to attribute shares to, preventing duplicate share counts across URL variants (with/without trailing slash, query parameters, etc.).

Recommended OG Tags

These tags are technically optional but improve the quality and consistency of your preview cards.

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:image:type" content="image/png" />

og:type

The type of content. Use website for homepages and landing pages, article for blog posts and news, and product for e-commerce. The default if omitted is website.

og:site_name

The name of your overall site (not the individual page). Facebook displays this above the title in some contexts, giving users context about the source.

og:locale

The language and region of the content, in the format language_TERRITORY (e.g., en_US, fr_FR, de_DE). Defaults to en_US if not specified.

og:image:width and og:image:height

Specifying the image dimensions helps platforms render the preview without waiting for the image to load. This prevents layout shifts and ensures your image is displayed at the correct aspect ratio immediately.

og:image:alt

A text description of the image for accessibility. Screen readers and platforms that cannot display the image will use this text instead.

Article-Specific Tags

When og:type is set to article, you can provide additional metadata about the publication.

<meta property="article:published_time" content="2026-03-24T00:00:00Z" />
<meta property="article:modified_time" content="2026-03-24T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/author/name" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="open graph" />
<meta property="article:tag" content="seo" />

article:published_time and article:modified_time use ISO 8601 format. You can include multiple article:tag entries for different topics.

Twitter/X Card Tags

Twitter/X uses its own card system alongside Open Graph. If Twitter card tags are present, Twitter/X prefers them. Otherwise, it falls back to OG tags.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Page description for Twitter." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.png" />
<meta name="twitter:image:alt" content="Description of the image" />

Card Types

summary_large_image— Large image above the title. Best for most content. Use this for blog posts, landing pages, and tools.
summary— Small square image next to the title and description. Good for profile pages or content where the image is not the focus.
player— For embedded media (video/audio). Requires additional tags and Twitter approval.

Platform-Specific Notes

Facebook / Meta

Prefers 1200 × 630 images (1.91:1 ratio)
Minimum image size: 200 × 200 pixels
Caches OG data aggressively — use the Sharing Debugger to refresh
Reads og:* tags natively (it created the protocol)

Recommended image: 1200 × 627 pixels
Minimum: 200 × 200 pixels
Will fall back to the first large image on the page if no OG image is set
Use their Post Inspector tool to refresh cached previews

Twitter/X

Uses Twitter Card tags first, falls back to OG tags
Large image card: 1200 × 628 (roughly the same as OG standard)
Summary card image: 144 × 144 minimum, 4096 × 4096 maximum
Images must be under 5 MB

Discord

Reads OG tags directly, no additional tags needed
Shows larger images when og:image is wide (1.91:1)
Respects og:site_name in the embed header
Supports a special theme-color meta tag for the embed sidebar color

Slack

Reads OG tags and renders a rich unfurl
Shows og:site_name as the source label
Falls back to twitter:* tags if OG tags are missing

Complete Template

Copy this template for a blog post or article page. It covers Open Graph, Twitter Cards, and article metadata:

<!-- Open Graph -->
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A compelling description under 160 characters." />
<meta property="og:image" content="https://yoursite.com/images/article-og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:url" content="https://yoursite.com/blog/article-slug" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

<!-- Article metadata -->
<meta property="article:published_time" content="2026-03-24T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/team" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="open graph" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Article Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://yoursite.com/images/article-og.png" />
<meta name="twitter:image:alt" content="Description of the image" />

Common Mistakes to Avoid

Using relative URLs for og:image. Always use absolute URLs starting with https://. Relative paths like /images/og.png will not resolve correctly.
Forgetting og:image dimensions. Without og:image:width and og:image:height, platforms must download the image to determine its size, which slows rendering.
Images that are too large. Keep images under 1 MB for OG and under 5 MB for Twitter. Large images may time out during platform scraping.
Not setting twitter:card. Without this tag, Twitter/X defaults to the small summary card even if you have a large OG image.
Duplicate og:image tags. Only include one og:image tag. Multiple images may confuse some platforms.
Not testing after changes. Platform caches mean old OG data can persist for hours or days. Always test with platform debuggers after making changes.

Generate OG Images with AI

Now that you know the tags, you need the image. Instead of using the same templates as everyone else, try generating unique Open Graph images with AI. Pixola's OG Image Generatorcreates custom 1200 × 630 images from your text, logo, or URL — no design skills required.