Key Takeaways
- Open Graph tags are meta tags in your website’s <head> that control how your links appear when shared on WhatsApp, Facebook, LinkedIn, and X (Twitter).
- Without them, social platforms generate broken, random, or missing link previews that damage click-through rates and brand trust.
- The 5 essential tags are: og:title, og:description, og:image, og:url, and og:type.
- Your OG image must be at least 1200 × 630 px — the most common reason previews look wrong is an undersized or missing image.
- You can generate all your Open Graph tags for free in seconds using BeTopSEO’s free SEO tool — no login required.
- Always test your tags using the Facebook Debugger, LinkedIn Post Inspector, and Twitter Card Validator before publishing.
- If a fix does not show immediately, you need to clear the social platform’s cache — not just update your code.
You share a blog post on WhatsApp, and it shows up as a plain, ugly text link with no image, no title, and no description. You post your homepage on LinkedIn, and it pulls the wrong image — one from three years ago. You share a product page on Facebook, and the preview is blank.
This is one of the most frustrating problems website owners face — and the fix takes less than five minutes once you understand what Open Graph tags are and how they work.
Open Graph tags are the lines of code in your website’s <head> section that tell social platforms exactly how to display your link when someone shares it. Without them, WhatsApp, Facebook, LinkedIn, and X (Twitter) are guessing — and they usually guess wrong.
In this guide, we will cover exactly what Open Graph tags are, why your previews look broken, the 5 essential tags every page needs, a platform-by-platform image size guide, and a step-by-step process to generate, add, and test them — including using BeTopSEO’s free Open Graph tag generator. If you are already working on your site’s on-page SEO, getting OG tags right is one of the highest-ROI fixes you can make today.
What Are Open Graph Tags?
Open Graph tags — often written as “OG tags” — are a type of meta tag originally created by Facebook in 2010 as part of the Open Graph Protocol. Their purpose is simple: to give social platforms a standardised way to read your page’s key information — title, description, image, and URL — so they can build a rich preview when someone shares your link.
They live in the <head> section of your HTML, invisible to website visitors but read by every social platform’s web crawler the moment your URL is pasted into a post, message, or status update.
Without OG tags, platforms fall back to guessing. Facebook might pull a random image from your page. WhatsApp might show nothing at all. LinkedIn might pull your logo from 2019. The Open Graph protocol eliminates this guesswork entirely — but only if you implement it correctly.
OG tags are part of a broader set of Technical SEO signals that affect how your content appears across the web — not just in Google search results, but everywhere your URLs travel.
Why Your Link Previews Look Broken: 7 Common Causes
Before we look at the fix, it helps to know exactly what causes broken previews. Here are the seven most common reasons:
1. No Open Graph tags at all
The most common cause. If your pages have no OG tags, every social platform will try to generate a preview on its own — with inconsistent and usually poor results. This is especially common on older WordPress sites or custom-built websites where OG tags were never added.
2. Missing og:image tag
If you have og:title and og:description but no og:image, the link preview will appear with no thumbnail image. On WhatsApp especially, this makes the link look untrustworthy and dramatically reduces click-through rates.
3. Image is too small
Facebook and LinkedIn require a minimum image size of 200 × 200 px just to show anything, but for a proper large card preview, you need at least 1200 × 630 px. Images below the minimum are simply not displayed.
4. Wrong image aspect ratio
Each platform has a preferred aspect ratio. Facebook and LinkedIn prefer 1.91:1 (roughly 1200 × 630 px). An image that is square or portrait-oriented will be cropped, often cutting off text or your logo.
5. Cached old data
You fixed your OG tags but the old broken preview still shows. This is a caching issue — not a code issue. Social platforms cache your page’s metadata for days or even weeks. You need to clear the cache using each platform’s dedicated debugger tool (covered below).
6. OG tags set by a plugin conflicting with theme tags
On WordPress sites, it is common to have OG tags being generated by both your theme (e.g. Astra, Divi, Elementor) and an SEO plugin (e.g. Yoast, Rank Math). When both output tags for the same property, platforms may read either one — leading to inconsistent or wrong previews. Only one source should output OG tags.
7. og:url does not match the actual page URL
If your og:url tag points to a different page than the one being shared, some platforms will fetch the metadata from the URL inside the tag — not from the page being shared. This can cause the wrong title and image to appear.
The 5 Essential Open Graph Tags Every Page Needs
There are over a dozen OG tag types, but five of them are non-negotiable. Every page on your website should have all five.
1. og:title
The title is displayed in the social preview card. This does not have to match your page’s HTML <title> tag exactly — you can write a more social-friendly version. Keep it under 60–70 characters to avoid truncation.
<meta property="og:title" content="Open Graph Tags: Why Links Look Broken & How to Fix It">2. og:description
The short description is shown beneath the title in the preview card. Aim for 120–155 characters. Write it as a benefit statement — what will the reader get from clicking? This is your social media meta description.
<meta property="og:description" content="Fix broken WhatsApp and LinkedIn previews in minutes. Learn the 5 OG tags every page needs and how to test them — free tool included.">3. og:image
The thumbnail image shown in the preview card. This is the single most important OG tag for click-through rates. Use an absolute URL (including https://), not a relative path.
<meta property="og:image" content="https://betopseo.com/wp-content/uploads/your-image.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">4. og:url
The canonical URL of the page. This should always be the clean, canonical version of the page URL — no tracking parameters, no query strings. It tells platforms which URL to associate the shared content with.
<meta property="og:url" content="https://betopseo.com/blogs/open-graph-tags-guide/">5. og:type
Tells the platform what kind of content this is. For blog posts and standard pages, use article. For your homepage or brand pages, use website. For products, use product.
<meta property="og:type" content="article">Open Graph Image Size Guide for Every Platform (2025)
The single biggest cause of broken or cropped link previews is the wrong image size. Here is the definitive size guide for every major platform:
| Platform | Recommended Size | Minimum Size | Aspect Ratio | Notes |
|---|---|---|---|---|
| 1200 × 630 px | 600 × 315 px | 1.91:1 | Large card shown when og:image is ≥600px wide | |
| 1200 × 627 px | 1200 × 627 px | 1.91:1 | Strict — below minimum shows no image preview | |
| 1200 × 630 px | 300 × 200 px | 1.91:1 | Shows smaller thumbnail; same og:image tag used | |
| X (Twitter) | 1200 × 628 px | 300 × 157 px | 2:1 | Uses twitter:image tag — separate from og:image |
| Telegram | 1200 × 630 px | 200 × 200 px | Any | Reads og:image automatically |
How to Generate and Add Open Graph Tags in 60 Seconds
You do not need a developer or any coding knowledge to add Open Graph tags to your website. Here is the fastest way to do it:
- Go to betopseo.com/free-seo-tools/ — BeTopSEO’s free SEO meta tag and schema generator. No login required.
- Select “Open Graph Tags” from the tool options and fill in your page title, description, URL, and image URL.
- Copy the generated code. The tool outputs ready-to-use HTML meta tags.
- Paste into your website’s <head> section. In WordPress with Yoast SEO: go to the post → Yoast → Social tab → paste your title, description, and image URL. In Rank Math: post → Rank Math → Social → same process. For manual sites: paste the code directly in the HTML <head>.
- Publish the page and proceed to testing (see next section).
How to Test Your Open Graph Tags on Every Platform
After adding your OG tags, always test before you share. Each platform has its own tool and its own cache — you need to clear both to see your changes correctly.
Facebook Sharing Debugger
Go to developers.facebook.com/tools/debug/, paste your URL, and click “Debug.” If the preview shows old data, click “Scrape Again” to clear Facebook’s cache and fetch the latest version of your tags. This is the most important tool — Facebook’s cache is notoriously sticky.
LinkedIn Post Inspector
Go to linkedin.com/post-inspector/, paste your URL, and click “Inspect.” LinkedIn’s cache refreshes automatically when you use this tool — no manual scrape needed. Note: LinkedIn requires images to be at least 1200 × 627 px or it will not display an image at all.
Twitter Card Validator
Go to cards-dev.twitter.com/validator, paste your URL, and click “Preview Card.” This reads your twitter:card and twitter:image tags specifically — note that X (Twitter) uses its own twitter: tags in addition to OG tags, covered in the meta data section below.
WhatsApp does not have a public debugger. The fastest way to test is to send the URL to yourself in WhatsApp Web (via “New Message” to your own number) and check the preview. If it shows old data, update your OG tags, clear your site cache (if you use WP Rocket, W3 Total Cache, or a CDN like Cloudflare), then test again.
Open Graph Tags vs Twitter Card Tags: What’s the Difference?
X (formerly Twitter) introduced its own meta tag system called Twitter Cards before it agreed to read Open Graph tags. Today, X reads both — but Twitter Card tags take priority if both are present on a page.
This means you should include both sets of tags for maximum compatibility:
| Property | Open Graph tag | Twitter Card equivalent |
|---|---|---|
| Card type | Not applicable | twitter:card = “summary_large_image” |
| Title | og:title |
twitter:title |
| Description | og:description |
twitter:description |
| Image | og:image |
twitter:image |
| Site handle | Not applicable | twitter:site = “@BetopSeo” |
If you already have OG tags on your pages and don’t want to add Twitter Card tags separately, X will fall back to reading your og:title, og:description, and og:image tags automatically. But for the large image card format (which significantly outperforms the small thumbnail), you need twitter:card set to summary_large_image.
Open Graph Tags and SEO: Do They Affect Google Rankings?
Open Graph tags are not a direct Google ranking factor. Google’s search crawler does not use og:title or og:description to determine rankings — it uses the HTML <title> tag and meta name="description" for that.
However, OG tags have a significant indirect impact on SEO performance in three ways:
- Social sharing drives backlinks. When your content is shared widely on social platforms with an attractive preview, more people see it, click it, and link to it. Backlinks from real editorial sources are one of the strongest SEO ranking signals.
- CTR from social traffic boosts engagement signals. Traffic from social shares that read your content, stay on your page, and explore your site sends positive engagement signals to Google.
- Brand mentions and citations. Content that spreads socially generates brand mentions across the web — an increasingly important entity signal in Google’s understanding of your business.
For a complete on-page strategy that covers meta tags, schema, and OG tags together, see BeTopSEO’s on-page SEO services or read our guide on what schema markup is and how it works.
Complete Open Graph Tag Code: Copy and Paste
Here is the full set of Open Graph and Twitter Card tags you should add to every blog post. Replace the placeholder values with your actual content:
<!-- Primary SEO meta -->
<title>Your Page Title Here | BeTopSEO</title>
<meta name="description" content="Your meta description here — 150 to 160 characters.">
<link rel="canonical" href="https://betopseo.com/blogs/your-post-url/">
<!-- Open Graph — Facebook, LinkedIn, WhatsApp -->
<meta property="og:type" content="article">
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="Your OG description here — 120 to 155 characters.">
<meta property="og:url" content="https://betopseo.com/blogs/your-post-url/">
<meta property="og:image" content="https://betopseo.com/wp-content/uploads/your-image.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="BeTopSEO">
<meta property="og:locale" content="en_IN">
<meta property="article:author" content="BeTopSEO">
<meta property="article:published_time" content="2026-06-28T00:00:00+05:30">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="open graph tags, social media SEO, meta tags">
<meta property="article:publisher" content="https://www.facebook.com/betopseo">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@BetopSeo">
<meta name="twitter:creator" content="@BetopSeo">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="Your Twitter description here — under 200 characters.">
<meta name="twitter:image" content="https://betopseo.com/wp-content/uploads/your-image.webp">
<meta name="twitter:image:alt" content="Descriptive alt text for your OG image">How Open Graph Tags Connect to Your Broader Technical SEO Strategy
Open Graph tags are one piece of a complete technical SEO setup. When implemented alongside the following, your content performs significantly better both in search and on social:
- Schema markup — tells Google the meaning of your content for rich results and AI Overviews. Works alongside OG tags, not instead of them.
- Technical SEO — site speed, Core Web Vitals, crawlability, and canonical tags all affect how reliably your OG tags are read by bots.
- On-page SEO — your HTML title tag and meta description work in search results the same way OG tags work on social. Both need to be optimised.
- Content strategy — great OG images and descriptions only help if the content behind the click delivers value. Bounce rates from social traffic affect your overall SEO health.
- AI search optimisation — structured, well-tagged content is more likely to be cited in AI Overviews, ChatGPT, and Perplexity responses. OG tags are part of the broader metadata ecosystem that AI crawlers read.
If you want a complete technical audit of your site’s meta tags, OG tags, schema markup, and on-page signals, our SEO audit service covers all of this with a prioritised action plan.
Frequently Asked Questions About Open Graph Tags
What are Open Graph tags in SEO?
Open Graph tags are meta tags added to your website’s <head> section that control how your pages appear when shared on social media platforms like Facebook, WhatsApp, LinkedIn, and X (Twitter). They define the title, description, image, and URL shown in link previews. While they are not a direct Google ranking factor, they significantly impact click-through rates from social sharing, which indirectly benefits SEO.
Why is my WhatsApp link preview not showing an image?
The most common reasons are: your page is missing an og:image tag, the image URL in your OG tag is incorrect, the image is smaller than 300 × 200 px (WhatsApp’s minimum), or WhatsApp has cached an old version of your page. Add a correct og:image tag with an absolute HTTPS URL pointing to a 1200 × 630 px image, then wait up to 24 hours for WhatsApp’s cache to refresh. You can generate the correct tag using BeTopSEO’s free tool.
Do Open Graph tags affect Google rankings?
Open Graph tags are not a direct Google ranking factor. Google uses your HTML <title> tag and meta name="description" for search results — not OG tags. However, OG tags indirectly benefit SEO by improving social sharing click-through rates, which drives more traffic, backlinks, and brand mentions — all of which contribute positively to organic rankings over time.
What is the correct Open Graph image size?
The recommended OG image size that works across all major platforms is 1200 × 630 px with an aspect ratio of 1.91:1. LinkedIn is the strictest — it will not display any image below 1200 × 627 px. Keep your key content (text, logo) within the central 80% of the canvas as edges may be cropped on mobile previews. Save as WebP or JPG, maximum 8 MB.
What is the difference between og:title and the HTML title tag?
Your HTML <title> tag is what Google displays in search results and what appears in your browser tab. Your og:title tag is what social platforms display in link preview cards. They can be different — and often should be. Your HTML title is optimised for search keywords; your OG title can be more conversational or benefit-focused for a social media audience.
Why does my LinkedIn share still show old content after I updated the OG tags?
LinkedIn caches your page’s metadata. To force a refresh, go to linkedin.com/post-inspector/, paste your URL, and click “Inspect.” This triggers LinkedIn to re-scrape your page and clear the cached preview. It usually updates within a few minutes of using the Inspector tool.
Do I need Open Graph tags if I use WordPress with Yoast or Rank Math?
Both Yoast SEO and Rank Math automatically generate Open Graph tags for your pages — you do not need to add them manually in your theme’s code. However, you should configure the Social settings in your chosen plugin, and upload a custom OG image for each page. If both Yoast and Rank Math are active simultaneously (which you should avoid), they will output duplicate OG tags and cause conflicts.
What is og:type and what should I set it to?
The og:type tag tells social platforms what kind of content your page contains. For blog posts and articles, use article. For your homepage or general web pages, use website. For product pages, use product. For video content, use video.other. The most commonly used values for a business website are website for the homepage and article for all blog posts and resource pages.
Fix Your Link Previews Today — Free
Getting Open Graph tags right across every page of your website — with the correct image sizes, properly written descriptions, and validated code — takes less time than you think.
Start with BeTopSEO’s free meta tag generator to generate your OG tags instantly. Or, if you want a full Technical SEO audit that covers OG tags, schema markup, meta titles, and your entire on-page setup, our team is ready to help.
📞 Book a free SEO consultation | in**@******eo.com | +91 8074932361