Key Takeaways
- Open Graph (OG) tags are HTML meta tags that control how your page appears when shared on social media platforms like Facebook, LinkedIn, WhatsApp, and Slack.
- Without OG tags, platforms auto-generate ugly, broken previews that kill click-through rates.
- The 4 essential OG tags are: og:title, og:description, og:image (1200×630px), and og:url.
- OG tags are not a Google ranking factor, but they directly impact social traffic, CTR, and brand perception.
- Use our free Open Graph Generator to create and preview all your OG tags in under 60 seconds.
What Are Open Graph Tags?
Open Graph (OG) tags are a set of HTML meta tags placed in the <head> section of a webpage that control how that page appears when shared on social media platforms and messaging apps. They were created by Facebook in 2010 and are now used universally by Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, Discord, and most other platforms that generate link previews.
Without Open Graph tags, platforms like LinkedIn will attempt to scrape your page and guess what to show — often pulling an irrelevant image, a truncated or missing title, and no description. The result is a blank, generic-looking link that nobody clicks. OG tags give you complete control over the preview.
In HTML, Open Graph tags look like this:
<meta property="og:title" content="What Are Open Graph Tags? Complete Guide" />
<meta property="og:description" content="Learn how OG tags control your social media previews and boost CTR." />
<meta property="og:image" content="https://yoursite.com/images/og-guide.jpg" />
<meta property="og:url" content="https://yoursite.com/open-graph-guide" />
<meta property="og:type" content="article" />Why Open Graph Tags Matter for SEO (Indirectly)
Open Graph tags are not a direct Google ranking factor. Google has confirmed this explicitly. However, they have a powerful indirect impact on your SEO performance:
- Higher social CTR: A compelling OG image and title generates significantly more clicks from social shares than a broken auto-generated preview. More clicks = more traffic.
- More backlinks: Content that looks professional when shared is more likely to be cited and linked to by other sites.
- Better brand perception: Consistent, high-quality OG previews across all social platforms reinforce trust and authority — signals Google increasingly uses to evaluate content quality.
- Social engagement signals: High engagement (clicks, shares, comments) on social platforms can drive traffic spikes that lead to improved organic visibility.
Bottom line: OG tags don't move you up Google's rankings directly, but the traffic and authority they generate through social media do.
The 4 Essential Open Graph Tags (Every Page Needs These)
1. og:title
The title displayed in the social media preview card. This can differ from your HTML <title> tag — and often should. While your meta title is optimized for Google and keyword ranking, your og:title should be optimized for social engagement: punchy, benefit-driven, and designed to stop the scroll.
<meta property="og:title" content="On-Page SEO Checklist: 20 Things to Check Before Publishing" />Best practice: Keep under 60–70 characters to avoid truncation on mobile previews. Front-load the most compelling part of the title.
2. og:description
The descriptive text below the title in the preview card. Like the og:title, this can differ from your HTML meta description. Use it to expand on the benefit and give users a specific reason to click.
<meta property="og:description" content="Use this 20-point checklist to audit every page before it goes live. Covers title tags, schema, internal links, Core Web Vitals and more." />Best practice: Aim for 155–160 characters. Include a clear value proposition or a specific number/fact that builds curiosity.
3. og:image
The image that dominates the social preview card. This is the most visually impactful OG tag — the difference between a link preview nobody looks at and one that stops the scroll entirely.
<meta property="og:image" content="https://yoursite.com/images/open-graph-guide-1200x630.jpg" />Best practice: Use exactly 1200×630 pixels — this is the universal standard for crisp rendering across all platforms and devices. Use a file under 8MB. Avoid small text in the image (it'll be unreadable on mobile). Always use an absolute URL (not a relative path).
4. og:url
The canonical URL of the page. This consolidates social share counts and engagement signals to one URL, even if multiple URL variations exist (with/without trailing slash, with UTM parameters, etc.).
<meta property="og:url" content="https://smdevs.in/tools/seo/open-graph-generator" />Best practice: Match this exactly to your page's canonical URL.
Additional Open Graph Tags (Recommended)
og:type
Declares the type of content. The default is website. For blog posts and articles, use article to unlock additional metadata fields (author, publish date, tags) that platforms like LinkedIn use to categorize and distribute content.
<meta property="og:type" content="article" />og:site_name
Your brand name. Displayed below the preview title on some platforms. Helps with brand recognition in social feeds.
<meta property="og:site_name" content="SM Developers" />og:locale
Specifies the language and region of the page content. Important for international sites. Defaults to en_US.
<meta property="og:locale" content="en_IN" />Twitter Card Tags vs Open Graph Tags
Twitter/X uses its own card system alongside (or instead of) Open Graph tags. Twitter Card tags take priority on Twitter — but if Twitter Card tags are absent, Twitter falls back to OG tags. For maximum compatibility, implement both:
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title Here" />
<meta name="twitter:description" content="Your description here." />
<meta name="twitter:image" content="https://yoursite.com/og-image.jpg" />Use summary_large_image as your Twitter card type — it displays a full-width image preview (the "big card" format) instead of a small thumbnail, which dramatically improves click rates on Twitter/X.
Good vs Bad Open Graph Tag Examples
❌ Bad og:image Example
Using your site logo (typically square, small, and lacks context) as the OG image. When a 512×512 logo is displayed in a 1200×630 preview slot, platforms either stretch it (blurry) or add white bars (ugly). Either way, the preview looks broken and unprofessional.
✅ Good og:image Example
A purpose-built 1200×630 image that visually communicates the content topic — a headline, a relevant graphic, and brand colors. The SM Developers blog posts you're reading right now each have a custom Cloudinary-hosted 1200×630 OG image specifically designed for social sharing.
❌ Bad og:title Example
<meta property="og:title" content="Page 1 | SM Developers" />No keyword, no value, could be any page on the internet.
✅ Good og:title Example
<meta property="og:title" content="Free Open Graph Generator — Preview Your Social Cards Instantly" />Clear, benefit-driven, includes the tool name and primary keyword.
How to Add Open Graph Tags to Your Website
- HTML/custom sites: Add OG meta tags manually inside the
<head>of each page's HTML. - WordPress: Plugins like Yoast SEO, Rank Math, or All in One SEO handle OG tags automatically per post/page.
- Next.js: Use the
metadataexport withopenGraphobject — Next.js generates the correct meta tags automatically. - Shopify: Built into most themes; customize per product through the SEO section in product settings.
How to Generate and Preview Open Graph Tags for Free
Use our free Open Graph Generator to build all your OG tags, preview exactly how your link will look on Facebook, Twitter, and LinkedIn, and copy the ready-to-paste code — all in under 60 seconds, no account required.
After implementing your tags, you can validate them using Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) or LinkedIn's Post Inspector. These tools fetch your page and show you the exact preview social platforms will display.
What is an Open Graph image and what size should it be?
An Open Graph image (og:image) is the preview image that social platforms display when a link to your page is shared. The recommended size is 1200×630 pixels — this is the universal standard for full-quality rendering across Facebook, LinkedIn, Twitter/X, WhatsApp, and Slack. The image must be hosted at a publicly accessible URL (not password-protected or behind authentication) and should be under 8MB in file size.
Do Open Graph tags affect Google rankings?
No — Open Graph tags are not a direct Google ranking signal. Google has confirmed this. However, OG tags indirectly improve SEO performance by increasing social click-through rates (which drives more traffic), encouraging more backlinks (social content that looks professional gets shared more), and building brand authority signals that Google's algorithms increasingly factor into rankings through measures like E-E-A-T evaluation.
What happens if I don't add Open Graph tags?
Without OG tags, social platforms scrape your page and auto-generate previews — usually pulling a random image, a truncated or missing title, and no description. These auto-generated previews are almost always worse than manually crafted ones: they look broken, unprofessional, and generate far fewer clicks. Every page you want shared on social media should have OG tags.
What is the difference between og:title and the HTML title tag?
The HTML <title> tag is optimized for search engines — it appears as the blue clickable headline in Google search results and is the most important on-page SEO element. The og:title is optimized for social media sharing — it appears in link preview cards on platforms like Facebook, LinkedIn, and Twitter. They can (and often should) be different: the <title> targets keyword ranking, while og:title targets social engagement and click-through rate from social feeds.
