The Complete Guide to OGP Tags: Optimize Your Social Sharing with Open Graph Protocol
What Are OGP Tags?
Open Graph Protocol (OGP) is a set of meta tags that control how your web pages appear when shared on social media platforms. Originally created by Facebook (now Meta) in 2010, OGP has become the universal standard adopted by nearly every major platform including X (formerly Twitter), LinkedIn, Slack, Discord, and LINE.
When someone shares a link without OGP tags, the platform has to guess what title, description, and image to display. The result is often a plain URL or a poorly formatted preview that nobody wants to click. With properly configured OGP tags, you get a rich, visually appealing card that communicates your content at a glance.
The impact is significant. Links with well-designed OGP images see two to three times higher engagement rates compared to links without them. If you are publishing content and not setting OGP tags, you are leaving clicks on the table.
The Required OGP Tags
The OGP specification defines four required tags that every page should include.
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/og-image.png" />
</head>
og:title
The title displayed in the social share card. This can differ from your HTML <title> tag, allowing you to craft a version optimized for social feeds.
- Keep it under 40 characters to avoid truncation on most platforms
- Front-load your primary keyword
- Make it compelling enough to earn a click in a busy feed
og:type
Defines the type of content. The most common values are:
websitefor homepages and general pagesarticlefor blog posts and news articlesproductfor e-commerce product pagesprofilefor personal or author pages
og:url
The canonical URL of the page. This should match the URL in your <link rel="canonical"> tag to avoid confusion.
og:image
The thumbnail image displayed in the share card. This is the single most impactful OGP tag for driving clicks.
Recommended OGP Tags
Beyond the four required tags, these additional tags are strongly recommended.
<meta property="og:description" content="A concise summary of your page in 70-120 characters" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
og:description provides a short summary displayed below the title on most platforms. Keep it between 70 and 120 characters for optimal display.
og:site_name identifies your website separately from the page title. Some platforms display it alongside the title.
og:locale specifies the language and region of the content. Use en_US for English or ja_JP for Japanese.
OGP Image Best Practices
Getting the image right is critical since it takes up the most visual real estate in a share card.
| Specification | Recommended Value |
|---|---|
| Dimensions | 1200 x 630 pixels |
| Aspect ratio | 1.91:1 |
| File format | PNG or JPEG |
| File size | Under 1 MB (must be under 5 MB) |
Design Tips
- Place important text in the center of the image since platforms may crop the edges differently
- Use your brand colors and logo consistently so readers recognize your content instantly
- Keep text at a minimum font size of 24px to remain legible on mobile
- Use high-contrast colors for readability
- Avoid placing critical elements within 10% of any edge
Setting Up Twitter Cards for X
X uses its own meta tags in addition to OGP. While X will fall back to OGP tags when Twitter-specific tags are missing, you need to explicitly set the twitter:card type.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_handle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary of your page" />
<meta name="twitter:image" content="https://example.com/images/og-image.png" />
Twitter Card Types
| Type | Description | Minimum Image Size |
|---|---|---|
summary | Small thumbnail card | 144 x 144 px |
summary_large_image | Large image card | 300 x 157 px (recommended: 1200 x 630) |
player | Video or audio player | Varies |
For most websites, summary_large_image is the best choice. The large image format dominates the timeline and attracts significantly more attention than the small thumbnail variant.
Complete Implementation Example
Here is a full set of OGP and Twitter Card tags for a blog article.
<head>
<!-- Open Graph Tags -->
<meta property="og:title" content="The Complete Guide to OGP Tags" />
<meta property="og:description" content="Learn how to set up Open Graph tags to optimize your social media sharing and boost click-through rates." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/ogp-tags-guide" />
<meta property="og:image" content="https://example.com/images/ogp-guide.png" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_handle" />
<meta name="twitter:title" content="The Complete Guide to OGP Tags" />
<meta name="twitter:description" content="Set up Open Graph tags to optimize social sharing" />
<meta name="twitter:image" content="https://example.com/images/ogp-guide.png" />
</head>
Implementing OGP in Next.js
Next.js App Router provides a clean, type-safe API for managing OGP tags through the metadata export.
// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
export async function generateMetadata({ params }): Promise<Metadata> {
const post = getPostBySlug(params.slug);
return {
title: post.title,
description: post.description,
openGraph: {
title: post.title,
description: post.description,
url: `https://example.com/blog/${params.slug}`,
type: 'article',
images: [
{
url: `https://example.com/images/${params.slug}.png`,
width: 1200,
height: 630,
alt: post.title,
},
],
siteName: 'Your Site Name',
locale: 'en_US',
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.description,
images: [`https://example.com/images/${params.slug}.png`],
},
};
}
This approach eliminates the need for manual <meta> tags in your HTML. Next.js handles rendering them in the <head> automatically.
Implementing OGP in WordPress
WordPress offers several plugin options for managing OGP tags without writing code.
- Yoast SEO provides a "Social" tab in the post editor where you can customize the OGP title, description, and image for each page
- All in One SEO includes similar OGP management features with a user-friendly interface
- Rank Math offers built-in social media preview and OGP tag controls
If you prefer a code-based approach, you can add OGP tags by hooking into wp_head in your theme's functions.php file. This gives you full control but requires maintenance when themes are updated.
Testing and Debugging OGP Tags
Always validate your OGP tags after implementation. Even a small typo can break the entire preview card.
Official Debugging Tools
- Facebook Sharing Debugger (developers.facebook.com/tools/debug/): Validates OGP tags and lets you clear the cached version of any URL
- X Card Validator: Previews how your Twitter Card will appear in the timeline
Common Issues and Fixes
Image not showing: The image URL must be an absolute path starting with https://. Relative paths will not work. Also verify the image file is accessible (not blocked by robots.txt or authentication).
Stale information after updating tags: Social platforms aggressively cache OGP data. After changing your tags, use the respective debugging tool to force a refresh. Facebook's "Scrape Again" button and X's validator both trigger a re-fetch.
Wrong title or description: If og:title is not set, platforms fall back to the <title> tag, which may include unwanted suffixes like your site name. Always set og:title explicitly.
How OGP Tags Impact SEO
OGP tags are not a direct Google ranking factor. However, they contribute to SEO through indirect but meaningful channels.
- Increased social traffic: Better-looking share cards lead to more clicks, driving more visitors to your site
- Natural backlink acquisition: Content that gets widely shared on social media attracts attention from bloggers and journalists who may link to it
- Brand visibility: Consistent, professional OGP images build brand recognition and trust over time
IndexReady, our free scoring tool, checks OGP tag configuration as part of its SEO analysis. The OGP check is worth up to 8 points and verifies that og:title, og:description, and og:image are all properly set. Run your site through the tool to catch any missing tags.
Summary
OGP tags are a small investment of time that pays dividends every time someone shares your content. Set the four required tags (og:title, og:type, og:url, og:image) along with og:description and og:site_name. Add Twitter Card tags with summary_large_image for maximum visibility on X. Use a 1200 x 630 pixel image for universal compatibility. Then validate everything with the official debugging tools before you publish.
FAQ
Do I need both OGP tags and Twitter Card tags?
You need OGP tags at minimum since they serve as the universal standard. X will fall back to OGP values when Twitter-specific tags are absent. However, you must set twitter:card explicitly to control the card type. For the best results, set both OGP and Twitter Card tags so you have full control over how your content appears on every platform.
What happens if I do not set an og:image?
Without an og:image, most platforms will either show no image at all or attempt to pick one from your page content, often selecting an irrelevant logo, icon, or advertisement. Since the image is the primary visual element of a share card, missing it can reduce click-through rates by 50% or more.
How do I update cached OGP data on social platforms?
Each platform caches OGP data independently. For Facebook and platforms that use its crawler, paste your URL into the Facebook Sharing Debugger and click "Scrape Again." For X, use the Card Validator. LinkedIn has its own Post Inspector tool. After forcing a refresh, the updated tags should appear within a few minutes.
Can og:title and og:description be different from my SEO title and meta description?
Yes, and in many cases they should be. Your SEO title and meta description are optimized for search engine results pages, while OGP tags are optimized for social media feeds. Search titles might include keywords strategically, while social titles should prioritize curiosity and click appeal. Keep og:description shorter than meta description since social platforms display less text.