Open Graph Tags: The Complete Guide to Better Social Sharing in 2025
Every time someone shares a link from your website on Facebook, WhatsApp, LinkedIn, or Twitter, Open Graph tags decide what they see. A missing og:image or a default site title instead of a page-specific headline can cost you clicks. This guide covers everything you need to know about OG tags — from what they are to how to implement them correctly.
What Are Open Graph Tags?
Open Graph (OG) tags are a type of HTML meta tag that you place in the <head> section of your web pages. They were created by Facebook in 2010 as part of the Open Graph Protocol — a standard that enables any web page to become a rich object in a social graph.
When someone shares your URL on a social media platform, that platform's crawler visits your page, reads the OG tags, and builds a preview card showing your chosen title, description, image, and other metadata. Without OG tags, platforms do their best to guess — and the results are usually poor.
Key Fact: Research consistently shows that links with rich social previews (compelling image, clear title, concise description) receive significantly more clicks than bare URLs or links with automatically generated previews. OG tags are your control panel for those previews.
The Open Graph Protocol is now supported by Facebook, WhatsApp, LinkedIn, Pinterest, Slack, Discord, Telegram, iMessage link previews, and even Google in some search and discovery features. Twitter developed its own parallel system called Twitter Cards, which this guide also covers.
The Core Open Graph Tags You Must Have
There are four OG tags that every page on your site should include — without exception. Facebook and most other platforms consider these the minimum required set.
Recommended Additional Tags
Adding og:image:width and og:image:height tells Facebook the image dimensions upfront, which speeds up preview generation and prevents layout shifts during the crawl.
OG Tag Reference: All Supported Properties
| OG Tag | Purpose | Recommended Value |
|---|---|---|
og:title | Title shown in the share preview | 55–60 characters, unique per page |
og:description | Description text below title | 100–150 characters |
og:image | Preview image URL | Absolute HTTPS URL, 1200×630px |
og:url | Canonical URL of the page | Match your canonical tag |
og:type | Content type | website, article, product, video |
og:site_name | Your brand/website name | Consistent across all pages |
og:locale | Language and region | en_IN, en_US, hi_IN etc. |
og:image:width | Image width in pixels | 1200 |
og:image:height | Image height in pixels | 630 |
article:author | Author of the article | Facebook profile URL or name |
article:published_time | Publication date | ISO 8601 format |
article:section | Category/section | e.g., Technology, Finance |
Twitter Card Tags — OG's Close Relative
Twitter (now X) developed its own metadata system called Twitter Cards. While Twitter will fall back to OG tags if Twitter Card tags are absent, explicitly setting Twitter Card tags gives you more control over how your content appears on the platform.
The twitter:card value summary_large_image displays a large image above the title — ideal for blog posts and product pages. Use summary for a smaller thumbnail alongside the text.
Real-World Examples: OG Tags in Action
Indian E-commerce Store — Product Page (Mumbai)
An online clothing brand in Mumbai adds OG tags to each product page with a model shot as the og:image (1200×630px), the product name as og:title, and a short description highlighting the fabric and price. When customers share product links in family WhatsApp groups, the preview shows the actual product photo — driving direct purchases from the share.
Without OG tags, the preview showed the site logo and homepage description for every product — a lost conversion opportunity.
News Portal — Article Sharing (Delhi)
A Hindi-language news website in Delhi uses og:locale="hi_IN" along with article-specific OG tags including article:published_time. When their stories get shared on Facebook, the preview clearly shows the article headline, a relevant news photograph, and publication time — increasing click-through from news feeds by a measurable margin over their older site which had only site-level OG tags.
SaaS Tool — LinkedIn Sharing (London)
A UK-based SaaS company shares blog posts on LinkedIn via their company page. After implementing correct OG tags with a 1.91:1 aspect ratio image, their link previews went from showing a broken image placeholder to a professional-looking card with their product screenshot. LinkedIn engagement on shared posts improved significantly after this change.
WordPress Blog — Social Media Growth (Pune)
A personal finance blogger in Pune installs Yoast SEO on their WordPress site and configures unique OG titles and descriptions for each post. They also create custom 1200×630px OG images using a free design tool. Their posts, when shared in personal finance Facebook groups, now stand out visually — growing their blog traffic through social sharing.
og:image Best Practices
The og:image tag is the single most impactful OG tag for click-through rates. A compelling image makes your link preview stand out in crowded social feeds. Here are the definitive guidelines:
| Platform | Recommended Size | Min Size | Aspect Ratio |
|---|---|---|---|
| 1200×630px | 600×315px | 1.91:1 | |
| 1200×627px | 1200×627px | 1.91:1 | |
| Twitter (Large) | 1200×600px | 300×157px | 2:1 |
| 1200×630px | 300×200px | 1.91:1 | |
| 1000×1500px | 600×900px | 2:3 |
- Always use absolute URLs for og:image — relative paths will not work
- Use HTTPS for all image URLs to avoid mixed content warnings
- Keep image file size under 8MB (ideally under 300KB for speed)
- Use JPG, PNG, GIF, or WebP format
- Include og:image:width and og:image:height to speed up preview generation
- Avoid heavy text overlays — some platforms may penalise overly text-heavy images
- Never use a different image from the one displayed on the page — this can trigger spam flags
How to Implement OG Tags in Different Platforms
WordPress (with Yoast SEO)
Yoast SEO is the most popular OG tag solution for WordPress. After installing the plugin, go to Yoast SEO → Social → Facebook and enable Open Graph metadata. You can then set custom OG titles, descriptions, and images for each post and page from the Yoast block in the editor sidebar.
WordPress (with Rank Math)
Rank Math automatically generates OG tags from your SEO title and meta description. You can override them per-post from the Social tab in the Rank Math panel. Rank Math also generates Twitter Card tags automatically.
Shopify
Most modern Shopify themes include OG tags for product pages automatically. To verify, open your theme's product.liquid template and check for og:title meta tags. If missing, add them manually or install an SEO app from the Shopify App Store.
Custom HTML / Static Sites
Add OG tags directly inside the <head> section of each page. For static site generators like Hugo, Jekyll, or Next.js, add OG tags to your layout templates using page-level variables for dynamic content.
React / Next.js
Use the Next.js Metadata API (App Router) or the next/head component (Pages Router) to inject OG tags. The next-seo npm package is a popular solution that simplifies OG tag management across large Next.js applications.
Common OG Tag Mistakes to Avoid
- Using the same og:title and og:description on every page (site-level defaults)
- Setting og:image to a relative URL like /images/og.jpg instead of an absolute HTTPS URL
- Using a tiny image (below 600×315px) that displays as a broken or unsupported preview
- Leaving og:type as "website" on blog posts — use "article" instead
- Forgetting to update OG tags when you change a page title or featured image
- Using og:description longer than 200 characters — most platforms truncate it
- Setting og:url to a different URL than your canonical tag — causes confusion for crawlers
- Always test your OG tags after publishing or updating any page
- Regenerate social media caches on Facebook after fixing OG tags using Facebook Sharing Debugger
How to Check and Debug Your OG Tags
After implementing OG tags, always verify them before sharing your pages on social media. There are several ways to check your OG tags:
Using the StoreDropship Open Graph Checker
Our free Open Graph Checker is the fastest way to see all OG tags on any URL — including OG tags, Twitter Card tags, and a visual social preview. Just paste your URL and get instant results with missing tag alerts.
Facebook Sharing Debugger
Facebook's official debugging tool (accessible at developers.facebook.com/tools/debug) shows exactly how Facebook crawls your page. Importantly, it also lets you force Facebook to re-scrape your URL and clear its cached preview — essential when you update OG tags after a page has already been shared.
LinkedIn Post Inspector
LinkedIn's Post Inspector (linkedin.com/post-inspector) shows your LinkedIn preview and lets you re-fetch updated OG data. LinkedIn caches OG data for 7 days, so if you change OG tags, you need to use this tool to force a refresh.
Twitter Card Validator
Twitter's Card Validator (cards-dev.twitter.com/validator) previews how your page appears in a Twitter Card. Note that Twitter now requires your account to be approved for large image cards.
Browser DevTools
Open DevTools (F12), go to the Elements tab, and search for og: in the head section to manually inspect all OG tags on any page — useful for quick checks during development without leaving your editor.
Check Your OG Tags Right Now
Use our free Open Graph Checker to instantly see all OG and Twitter Card tags on any URL, preview how your page looks on social media, and identify missing tags.
Open the OG Checker →Recommended Hosting
Hostinger
If you are building a website for your tools, blog, or store, reliable hosting matters for speed and uptime. Hostinger is a popular option used worldwide.
Visit Hostinger →Disclosure: This is a sponsored link.
Contact Us
Have questions or feedback about this Open Graph guide? Reach out to us anytime.