When someone shares your web page on Facebook, LinkedIn, Slack, or any major social platform, what they see is determined almost entirely by your Open Graph meta tags. A compelling, well-formatted link preview can double the click-through rate of a shared link. A missing or broken preview leaves a poor impression and loses potential traffic. This guide covers everything you need to implement Open Graph correctly.
> Quick start: Use our free [Open Graph Generator](/tools/open-graph-generator) to create all required OG tags for any page in seconds — no technical knowledge needed.
What is Open Graph?
The Open Graph protocol was introduced by Facebook in 2010 to standardise how web pages present themselves when shared on social platforms. It uses a set of meta tags with the og: prefix that provide explicit instructions about a page's title, description, image, and type.
Before Open Graph, social platforms had to guess what content to display when a URL was shared — crawling the page and picking the first image or the first paragraph of text. Results were inconsistent and often wrong. Open Graph solved this by giving publishers explicit control.
Today, Open Graph tags are used by: Facebook, Instagram, LinkedIn, Pinterest, Slack, Discord, Microsoft Teams, iMessage link previews, WhatsApp, and many other messaging and social platforms.
Core Open Graph Tags
Advertisement
There are four essential 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."> <meta property="og:image" content="https://example.com/images/og-image.jpg"> <meta property="og:url" content="https://example.com/current-page-url">
og:title: The title of your content as it should appear in the preview card. Can differ from your HTML title tag. Recommended length: 60–90 characters.
og:description: A 1–2 sentence description of the page content. Aim for 100–200 characters. Write it as compelling ad copy — this is what convinces people to click.
og:image: The URL of the image to show in the preview. This is the most impactful element — a strong, relevant image dramatically increases engagement. Must be an absolute URL starting with https://.
og:url: The canonical URL of the page. This ensures that even if the link was shared with tracking parameters, the preview shows the canonical address.
Open Graph Image Requirements
The image is the most important element of a link preview. Requirements and recommendations:
- Minimum size: 600×315 pixels (1.91:1 aspect ratio)
- Recommended size: 1200×630 pixels for high-resolution displays
- Maximum file size: Aim for under 1MB for fast loading
- Formats: JPEG and PNG are universally supported; avoid WebP as some platforms do not support it
- Must be served over HTTPS
Design guidelines:
- Keep important content (logos, text) away from edges as some platforms crop to square
- Use high contrast for any text in the image
- Include your brand or site name
- Test your images on multiple platforms — preview sizes vary
Additional Useful Tags
<meta property="og:type" content="website"> <!-- Options: website, article, book, profile, video.movie, music.song --> <meta property="og:site_name" content="ToolHub"> <!-- The name of your website, shown alongside the title --> <meta property="og:locale" content="en_US"> <!-- Language and region of your content --> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <!-- Explicitly declaring dimensions helps platforms display images faster --> <meta property="og:image:alt" content="Description of the image"> <!-- Alt text for accessibility -->
Open Graph for Articles
For blog posts and news articles, use the article type and its associated tags:
<meta property="og:type" content="article"> <meta property="article:published_time" content="2024-12-05T09:00:00Z"> <meta property="article:modified_time" content="2024-12-05T09:00:00Z"> <meta property="article:author" content="https://example.com/authors/jane-doe"> <meta property="article:section" content="Technology"> <meta property="article:tag" content="SEO">
Twitter Card Tags
Twitter (now X) supports Open Graph but also has its own card tags for additional control:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="Description for Twitter sharing."> <meta name="twitter:image" content="https://example.com/twitter-image.jpg"> <meta name="twitter:image:alt" content="Image description"> <meta name="twitter:site" content="@yourhandle"> <meta name="twitter:creator" content="@authorhandle">
Use summary_large_image for most content pages. Twitter will fall back to OG tags if Twitter-specific tags are absent.
Testing Your Open Graph Tags
Several official tools let you preview and debug OG tags:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug/): Fetches your page as Facebook sees it and shows the preview card. Also clears Facebook's cache.
- LinkedIn Post Inspector (linkedin.com/post-inspector/): Similar tool for LinkedIn previews.
- Twitter Card Validator: Accessible in Twitter's developer portal.
Always test after making changes to OG tags. Platforms cache previews for hours or days — use the debugger tools to force a re-crawl.
Dynamic OG Tags in Next.js and React
In modern React frameworks, OG tags are typically set programmatically. In Next.js 13 and later:
export async function generateMetadata({ params }) {
const post = await getPost(params.slug)
return {
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.ogImage, width: 1200, height: 630 }],
type: 'article',
publishedTime: post.publishedAt,
},
}
}Don't forget to also set good URL slugs for each page — use our [Slug Generator](/tools/slug-generator) to create clean, keyword-rich slugs, and our [Meta Tag Generator](/tools/meta-tag-generator) for a full set of tags including OG.
Generating OG Images Automatically
For sites with many pages (blogs, e-commerce), manually creating OG images for every page is impractical. Options for automated OG image generation:
- Vercel OG Image Generation (using
@vercel/og) - Cloudinary image transformation API with URL parameters
- Puppeteer or Playwright to screenshot a rendered HTML template
Frequently Asked Questions
Q: Do Open Graph tags help with Google SEO?
Not directly — OG tags are not a Google ranking factor. But they dramatically improve click-through rates when your content is shared on social media, which drives more referral traffic.
Q: What happens if I don't have Open Graph tags?
Social platforms will make their best guess — picking the first image they find on the page and the first paragraph of text. Results are often poor, low-quality, or completely wrong.
Q: How often do social platforms update the cached preview?
Facebook caches previews for up to 7 days. Use the Facebook Sharing Debugger to force an immediate re-crawl after updating your OG tags.
Q: Can I use the same OG image for all pages on my site?
Yes, using a default site-wide OG image is better than having no image. However, page-specific images that reflect the actual content perform significantly better on social media.
Conclusion
Open Graph tags are one of the highest-leverage, lowest-effort SEO and marketing improvements available. [Use ToolHub's Open Graph Generator](/tools/open-graph-generator) to create all the necessary tags for any page in seconds — then test them in Facebook's Sharing Debugger to ensure your previews look great.