Open Graph Meta Tags: Complete Guide for Social Sharing

When someone shares your website link on Facebook, Twitter, LinkedIn, or Slack, the preview card they see is controlled by Open Graph (OG) meta tags. These small snippets of HTML determine your title, description, image, and more in the shared link preview. Getting them right means the difference between a link that gets clicked and one that gets ignored. This guide covers every OG property, Twitter Card tag, and optimization technique you need.

What Are Open Graph Meta Tags?

Open Graph is a protocol created by Facebook in 2010 that allows web pages to become rich objects in a social graph. When you add OG tags to your page's <head> section, social media platforms read these tags to generate link previews. The protocol has since been adopted by LinkedIn, Twitter (with extensions), Pinterest, Slack, Discord, and virtually every platform that displays link previews.

Without OG tags, social platforms will try to guess your title, description, and image from your page's regular HTML. The results are often wrong — pulling navigation text, missing images, or truncated descriptions. OG tags give you full control over how your content appears when shared.

Essential OG Meta Tags

These are the four core OG tags that every page should have:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page (150-200 characters)">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

These four tags alone will dramatically improve your social sharing previews. But for full optimization, add these additional properties:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Website 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">

Complete OG Tag Reference

Property	Required	Description
`og:title`	Yes	The title of your page as it should appear in the preview. Keep under 60 characters.
`og:description`	Yes	A brief description of the page content. Aim for 150-200 characters for optimal display.
`og:image`	Yes	The absolute URL to the preview image. Use high-quality images for best results.
`og:url`	Yes	The canonical URL of the page. Should match your canonical link tag.
`og:type`	Recommended	The type of content: website, article, video.movie, music.song, book, profile, etc.
`og:site_name`	Recommended	The name of the overall website (not the individual page).
`og:locale`	Optional	The locale of the content (e.g., en_US, zh_CN, ja_JP).
`og:image:width`	Recommended	Width of the OG image in pixels. Helps platforms render the image correctly.
`og:image:height`	Recommended	Height of the OG image in pixels.
`og:image:alt`	Recommended	Alt text description of the image for accessibility.

OG Image Specifications

The OG image is the most impactful element of your social preview. Here are the specifications for each major platform:

Platform	Recommended Size	Aspect Ratio	Max File Size
Facebook	1200 × 630 px	1.91:1	8 MB
Twitter	1200 × 628 px	1.91:1	5 MB
LinkedIn	1200 × 627 px	1.91:1	5 MB
Pinterest	1000 × 1500 px	2:3	20 MB
Slack/Discord	1200 × 630 px	1.91:1	Varies

💡 Universal recommendation: Create your primary OG image at 1200×630 pixels (1.91:1 ratio) for maximum compatibility across all platforms. For Pinterest, create a separate taller image using the og:image:pinterest pattern or structured data.

Twitter Card Tags: Complete Reference

Twitter Cards extend the Open Graph protocol with platform-specific properties. When both OG and Twitter Card tags are present, Twitter prioritizes its own tags. Here's the complete reference:

Tag	Description
`twitter:card`	Card type: summary, summary_large_image, app, player. Use summary_large_image for most content.
`twitter:site`	@username of the website (appears in the card footer).
`twitter:creator`	@username of the content author.
`twitter:title`	Title (falls back to og:title if not specified).
`twitter:description`	Description (falls back to og:description).
`twitter:image`	Image URL (falls back to og:image).
`twitter:image:alt`	Image alt text.

Here's a complete implementation example combining OG and Twitter Card tags:

<!-- Open Graph Tags -->
<meta property="og:title" content="10 SEO Tips for 2026">
<meta property="og:description" content="Boost your search rankings with these proven SEO strategies that work in 2026.">
<meta property="og:image" content="https://example.com/seo-tips-2026.jpg">
<meta property="og:url" content="https://example.com/seo-tips-2026">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Blog">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myblog">
<meta name="twitter:creator" content="@authorname">
<meta name="twitter:title" content="10 SEO Tips for 2026">
<meta name="twitter:description" content="Boost your search rankings with these proven SEO strategies.">
<meta name="twitter:image" content="https://example.com/seo-tips-2026.jpg">

OG Tags vs Twitter Cards: Key Differences

Feature	Open Graph	Twitter Cards
Created by	Facebook (2010)	Twitter (2012)
Used by	Facebook, LinkedIn, Pinterest, Slack, Discord	Twitter/X only
Tag format	`property="og:..."`	`name="twitter:..."`
Fallback behavior	Default	Falls back to OG tags
Unique features	Rich media types (video, audio, article)	App installs, player cards

Article-Specific OG Tags

For blog posts and articles, these additional OG properties provide structured data to social platforms:

<meta property="article:published_time" content="2026-04-09T00:00:00Z">
<meta property="article:modified_time" content="2026-04-10T00:00:00Z">
<meta property="article:author" content="https://example.com/authors/jane">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Marketing">

These tags help platforms categorize your content and display author information in the preview card.

Common OG Tag Mistakes

Missing og:image:width and og:image:height: Without dimensions, platforms may render your image incorrectly or crop it unexpectedly. Always include both.
Using relative URLs for og:image: OG image URLs must be absolute (starting with https://). Relative paths like /images/preview.jpg will break.
Images behind authentication: Social platform crawlers can't log in. If your OG image requires authentication, it won't appear in previews.
Forgetting to declare og:type: Without it, platforms assume "website" type. For articles, explicitly set og:type="article" to unlock article-specific features.
Not testing previews: Always validate your OG tags using platform debugging tools before publishing.

Debugging and Testing OG Tags

Each major platform provides a debugging tool to preview how your OG tags will appear:

Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — Shows how your link appears on Facebook and Instagram. Includes a "Scrape Again" button to refresh cached previews.
Twitter Card Validator: cards-dev.twitter.com/validator — Previews your Twitter Card and validates your markup.
LinkedIn Post Inspector: www.linkedin.com/post-inspector/ — Validates and previews your link on LinkedIn.
OpenGraph.xyz: A third-party tool that checks all platforms simultaneously.

⚠️ Cache warning: Social platforms aggressively cache OG data. If you update your tags, use the platform's debugging tool to force a re-scrape. Facebook's cache can persist for 30+ days without manual clearing.

📌 Generate OG tags in seconds. Use our free Open Graph Meta Tag Generator to create properly formatted, copy-paste-ready meta tags for any page.

Frequently Asked Questions

What are Open Graph meta tags?

Open Graph (OG) meta tags are HTML tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, and Twitter. They define the title, description, image, and other properties of your shared link preview.

What is the difference between OG tags and Twitter Cards?

OG tags were created by Facebook and are used by most social platforms. Twitter Cards are Twitter's own meta tags that override OG tags when content is shared on Twitter/X. They include additional properties like twitter:site and twitter:creator.

What is the recommended OG image size?

The recommended Open Graph image size is 1200×630 pixels with a 1.91:1 aspect ratio. This works well across Facebook, LinkedIn, and Twitter. The minimum size is 200×200, and maximum file size is 8MB for most platforms.

Do OG tags affect SEO rankings?

OG tags don't directly affect Google search rankings. However, they indirectly benefit SEO by improving click-through rates when your content is shared on social media, which can drive traffic and generate backlinks that do influence rankings.

How long does it take for OG tag changes to appear?

Social platforms cache OG data aggressively. Facebook may cache your tags for up to 30 days. Use each platform's debugging tool (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) to force an immediate re-scrape.