What Are Open Graph Tags?

Open Graph tags — commonly written as OG tags — are a set of HTML meta tags placed inside a page's <head> section that tell social media platforms exactly how to display your content when someone shares a link. They define the title, description, image, URL, and content type that appear in the preview card shown on Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage, and many other platforms that render link previews.

The open graph protocol was created by Facebook and introduced in 2010. The name comes from Facebook's goal of turning any webpage into a rich "graph object" — something the social web could understand, categorise, and display meaningfully, just like a native Facebook post. Today the open graph protocol is an open standard documented at ogp.me and is implemented by virtually every major social and messaging platform in existence.

Without OG tags, when someone pastes your URL into a Facebook post, a tweet, or a WhatsApp message, the platform has to guess what to show. It may scrape whatever title tag it finds, pull an arbitrary image from the page, and truncate your body text for a description. The result is often a poor-quality card with the wrong image, a truncated title, or no image at all. This directly reduces click-through rates and undermines the value of every social share your content receives.

With properly configured OG tags, you take full control. You decide exactly which title, which image, and which description appear — regardless of the platform showing it. This matters for branding consistency, for click-through rates, and ultimately for the amount of traffic your content earns from social channels.

Use the Open Graph checker to scan any URL and see exactly which OG tags are present and whether they pass platform requirements. Or use the OG preview tool to see a live simulation of how your page will look when shared on Facebook, Twitter, and LinkedIn.

Quick definition: Open Graph tags are HTML meta tags that use the property attribute with an og: prefix (e.g. og:title, og:image) to provide structured metadata about a webpage to social platforms and link-preview engines.

The Open Graph Protocol: Background and Purpose

The open graph protocol sits at the intersection of HTML metadata and the social web. Before it existed, web publishers had no standardised way to tell a crawler "this is the title you should use" or "this is the representative image for this page." Search engines had their own signals (title tags, meta descriptions, structured data), but social crawlers had nothing equivalent.

Facebook's solution was to borrow the idea of RDFa — a way of embedding machine-readable data into HTML — and simplify it into a practical, easy-to-implement system. The key innovation was using the HTML <meta> tag's property attribute rather than the more familiar name attribute, and namespacing all properties with og:. This meant publishers could add a handful of lines to their <head> and instantly communicate structured metadata to any platform that understood the protocol.

Twitter later introduced its own extension called Twitter Cards, which follows a similar pattern but uses the name attribute with a twitter: prefix. Crucially, Twitter also falls back to Open Graph tags when Twitter Card tags are absent, meaning a single well-implemented set of OG tags covers almost every major platform simultaneously.

LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage, Telegram, and dozens of other platforms all read Open Graph tags when generating link previews. The protocol has effectively become the universal language for link previews on the modern web.

Every Open Graph Property Explained

The open graph protocol defines both basic properties that apply to all content types and structured properties tied to specific object types like articles, videos, music, and products. Here is a complete breakdown.

Basic OG Properties (Required for All Pages)

Property	What It Controls	Recommended Value / Notes
`og:title`	The headline shown in the share card	Up to 60–70 characters. Can differ from your HTML title tag — use a more social-friendly version if needed.
`og:description`	The supporting text below the title	2–4 sentences, up to ~200 characters. Make it compelling — this is what drives clicks from social feeds.
`og:image`	The preview image shown in the card	Absolute URL required. Minimum 1200 x 630 px. JPEG or PNG. Under 8 MB (under 1 MB recommended).
`og:url`	The canonical URL of the page	Use the canonical, clean URL without session IDs or tracking parameters. Helps deduplication across platforms.
`og:type`	The type of content object	Most pages: `website`. Blog posts and news articles: `article`. See object types section below.

Optional but Valuable Basic Properties

Property	What It Controls	Notes
`og:site_name`	The name of the overall website	Shown alongside the page title on some platforms. E.g. "RankNibbler". Helps brand recognition in shared cards.
`og:locale`	The language and territory of the content	Format: `en_GB`, `en_US`, `fr_FR`. Defaults to `en_US` if absent.
`og:locale:alternate`	Alternative language versions available	Useful for multilingual sites. Can be repeated for multiple alternates.
`og:image:width`	Width of the OG image in pixels	Providing this prevents platforms from having to download the full image to determine dimensions, speeding up card rendering.
`og:image:height`	Height of the OG image in pixels	As above. Always pair with `og:image:width`.
`og:image:alt`	Alt text for the OG image	Important for accessibility. Screen readers on some platforms use this text.
`og:image:type`	MIME type of the OG image	E.g. `image/jpeg`, `image/png`, `image/webp`.
`og:video`	URL of a video associated with the page	Enables richer video card previews on platforms that support them.
`og:audio`	URL of audio associated with the page	Used primarily for music and podcast content.
`og:determiner`	The word before the object title in a sentence	E.g. "a", "an", "the", "auto". Rarely needed in practice.

Article-Specific OG Properties

When og:type is set to article, you can include additional structured properties that platforms may use to surface content in topic feeds, news aggregators, and recommendation engines.

Property	What It Controls
`article:published_time`	ISO 8601 datetime when the article was first published (e.g. `2026-03-19T09:00:00Z`)
`article:modified_time`	ISO 8601 datetime of the last significant update
`article:expiration_time`	When the article is no longer relevant (optional)
`article:author`	URL of an author profile page (can be repeated for multiple authors)
`article:section`	The top-level section or category of the article
`article:tag`	Tags or keywords associated with the article (can be repeated)

Product OG Properties

E-commerce pages benefit from additional product-specific open graph properties. While not part of the original ogp.me spec, Facebook's product catalogue system and many shopping platforms recognise these extensions:

Property	What It Controls
`product:price:amount`	Numeric price value (e.g. `29.99`)
`product:price:currency`	ISO 4217 currency code (e.g. `GBP`, `USD`)
`product:availability`	`in stock`, `out of stock`, `preorder`
`product:condition`	`new`, `refurbished`, `used`
`product:brand`	The brand name of the product
`product:retailer_item_id`	Your internal SKU or product ID

Video and Music OG Properties

For pages with video content, use og:type set to video.movie, video.episode, video.tv_show, or video.other and include:

video:actor — Profile URL of an actor
video:director — Profile URL of a director
video:duration — Length in seconds
video:release_date — ISO 8601 release date
video:tag — Tags (repeatable)

For music, use og:type of music.song, music.album, music.playlist, or music.radio_station. Properties include music:duration, music:album, music:musician, and music:release_date.

Complete HTML Code Examples

Below are production-ready code examples for the most common use cases. Place all of these inside your HTML <head> element, before the closing </head> tag.

Standard Blog Post or Article Page

<!-- Core Open Graph Tags -->
<meta property="og:title" content="What Are Open Graph Tags? Complete Guide">
<meta property="og:description" content="Open Graph tags control how your pages look when shared on social media. Learn every OG property, image spec, and platform behaviour.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/what-are-open-graph-tags">
<meta property="og:image" content="https://yoursite.com/images/og-open-graph-guide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Diagram showing Open Graph tag structure in HTML">
<meta property="og:site_name" content="YourSite">
<meta property="og:locale" content="en_GB">

<!-- Article-Specific Tags -->
<meta property="article:published_time" content="2026-03-19T09:00:00Z">
<meta property="article:modified_time" content="2026-04-01T12:00:00Z">
<meta property="article:author" content="https://yoursite.com/author/jane-doe">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Social Media SEO">
<meta property="article:tag" content="Meta Tags">

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="What Are Open Graph Tags? Complete Guide">
<meta name="twitter:description" content="Open Graph tags control how your pages look when shared on social media.">
<meta name="twitter:image" content="https://yoursite.com/images/og-open-graph-guide.jpg">
<meta name="twitter:image:alt" content="Diagram showing Open Graph tag structure in HTML">
<meta name="twitter:site" content="@yourhandle">

Homepage or Brand Page (og:type = website)

<meta property="og:title" content="YourSite — Free SEO Checker">
<meta property="og:description" content="Analyse any webpage for on-page SEO issues in seconds. Check title tags, meta descriptions, headings, images, and more — free.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yoursite.com/">
<meta property="og:image" content="https://yoursite.com/images/og-homepage.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="YourSite">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="YourSite — Free SEO Checker">
<meta name="twitter:description" content="Analyse any webpage for on-page SEO issues in seconds.">
<meta name="twitter:image" content="https://yoursite.com/images/og-homepage.jpg">

E-Commerce Product Page

<meta property="og:title" content="Blue Running Shoes — Ultralight Trail Model">
<meta property="og:description" content="Lightweight trail running shoes with carbon-plate midsole. Available in sizes 4–13. Free UK delivery.">
<meta property="og:type" content="product">
<meta property="og:url" content="https://yoursite.com/products/blue-trail-shoes">
<meta property="og:image" content="https://yoursite.com/images/blue-trail-shoes.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="YourStore">
<meta property="product:price:amount" content="89.99">
<meta property="product:price:currency" content="GBP">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Blue Running Shoes — Ultralight Trail Model">
<meta name="twitter:description" content="Lightweight trail running shoes with carbon-plate midsole. £89.99.">
<meta name="twitter:image" content="https://yoursite.com/images/blue-trail-shoes.jpg">

Twitter Card Tags: Full Reference

Twitter (now X) reads Open Graph tags as a fallback but its native system is Twitter Cards. Defining Twitter Card tags gives you control over the specific card type displayed and lets you tie cards to your Twitter account for analytics. The name attribute (rather than property) is used for all Twitter Card tags.

Tag	Values / Notes
`twitter:card`	Required. The card layout type. Options: `summary` (small square image + text), `summary_large_image` (wide image above text), `app` (app download card), `player` (inline video/audio). Most content pages should use `summary_large_image`.
`twitter:site`	The @username of the website's Twitter account (e.g. `@ranknibbler`). Shown in the card footer and ties card impressions to your Twitter Analytics.
`twitter:creator`	The @username of the individual content author. Useful for bylined articles and journalism.
`twitter:title`	Card headline. Max 70 characters. Falls back to `og:title` if absent.
`twitter:description`	Card description. Max 200 characters. Falls back to `og:description` if absent.
`twitter:image`	Absolute image URL. Recommended: 1200 x 628 px. Max 5 MB. Supported formats: JPEG, PNG, WebP, GIF (static only). Falls back to `og:image` if absent.
`twitter:image:alt`	Alt text for the card image. Max 420 characters. Important for accessibility.
`twitter:player`	HTTPS URL of the inline player iframe (required for player cards).
`twitter:player:width`	Player iframe width in pixels.
`twitter:player:height`	Player iframe height in pixels.
`twitter:app:name:iphone`	App name for iPhone app cards.
`twitter:app:id:iphone`	App Store ID for iPhone app cards.

Fallback behaviour: If twitter:title is absent, Twitter uses og:title. If twitter:description is absent, Twitter uses og:description. If twitter:image is absent, Twitter uses og:image. The one tag that does NOT fall back is twitter:card — if it is missing, no Twitter Card is rendered at all, even if all other OG tags are present.

OG Image Specifications: Every Platform

The OG image is the single highest-impact element of any share card. An eye-catching, correctly sized image can double or triple click-through rates compared to a missing or misformatted one. Different platforms have different requirements, but following a single set of conservative specifications covers all of them.

Universal Recommended Specification

Dimensions: 1200 x 630 pixels
Aspect ratio: 1.91:1
Format: JPEG (best compression/quality ratio) or PNG (for logos, screenshots, or anything needing transparency)
File size: Under 1 MB (platforms accept up to 5–8 MB but smaller files load faster and cards render quicker)
Colour space: sRGB
Text in image: Keep critical text away from edges. Assume a 5% safe zone margin on all sides.
URL: Must be an absolute URL, not a relative path. Must be publicly accessible — password-protected or localhost URLs will not work.

Platform-by-Platform Image Requirements

Platform	Recommended Size	Min Size	Max File Size	Notes
Facebook	1200 x 630 px	600 x 315 px	8 MB	Images under 600 x 315 px display as small thumbnails. Ratio must be between 1.91:1 and 1:1 to avoid cropping.
Twitter / X	1200 x 628 px	300 x 157 px	5 MB	`summary_large_image` crops to ~2:1. `summary` card crops to 1:1 square.
LinkedIn	1200 x 627 px	1200 x 627 px	5 MB	LinkedIn is strict about minimum size. Images below minimum are dropped entirely. PNG often renders sharper for text-heavy images.
WhatsApp	1200 x 630 px	300 x 200 px	5 MB	Preview only shown if image is publicly accessible. No fallback to page screenshot.
Slack	1200 x 630 px	80 x 80 px	No hard limit	Slack respects `og:image:width` and `og:image:height` to avoid unnecessary full downloads.
Discord	1200 x 630 px	None specified	8 MB	Discord renders large image embeds and also reads `og:color` (non-standard) to set embed accent colour if present.
Pinterest	1000 x 1500 px (2:3 portrait)	100 x 100 px	20 MB	Pinterest prefers portrait images for its grid. Use a separate `og:image` or rely on Pinterest-specific meta if your content suits portrait format.
iMessage / iOS	1200 x 630 px	300 x 157 px	No hard limit	Uses Apple's Link Presentation framework which reads OG tags directly.
Telegram	1200 x 630 px	None specified	5 MB	Telegram's link preview bot caches images aggressively; use cache-busting URLs when updating OG images.

OG Image Design Best Practices

Brand every image. Include your logo or brand colours so shares are recognisable even out of context.
Use large, legible text. The card appears at reduced size in a feed. Body-sized text becomes illegible — use display sizes (48 px or larger).
Maintain contrast. Ensure text over images meets WCAG AA contrast ratios.
Avoid image text duplication. If your card title already conveys the message, the image text can focus on visual interest rather than repeating the headline.
Generate dynamically where possible. For blogs, product pages, and articles, automated OG image generation (via tools like Vercel OG, Cloudinary, or custom scripts) ensures every page has a unique, relevant image.
Test before publishing. Use the OG preview tool to check how your image renders across simulated platform views before a page goes live.

How Each Platform Handles Open Graph Tags

Facebook

Facebook was the creator of the open graph protocol and remains one of its most stringent implementers. Facebook's crawler (facebookexternalhit) fetches pages when a URL is pasted into a post, comment, or message. It reads OG tags to build the share preview shown in News Feed.

Key Facebook behaviours to know:

Facebook aggressively caches OG data. If you update your OG tags, you must use the Facebook Sharing Debugger to force a re-scrape. Enter the URL and click "Scrape Again".
If og:image is missing or too small, Facebook falls back to other images found on the page. The fallback image is often irrelevant or very small.
Facebook respects the og:url tag for deduplicating shares — all shares of variations of the same URL get aggregated under the canonical OG URL.
Facebook Instant Articles and Facebook News both read article:published_time and article:modified_time for freshness signals.
The Open Graph protocol's og:type determines which action verbs appear in the share — "posted", "read", "watched", etc.

Twitter / X

Twitter reads Twitter Card tags first and falls back to OG tags. The key requirement is the twitter:card tag — without it, no preview is shown. Since most pages should use summary_large_image, adding this single tag is the minimum requirement to unlock rich previews on X.

Twitter's card validator (at developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards) can be used to preview and debug cards. Note that Twitter also caches card data, though its cache refreshes more quickly than Facebook's.

One important change: following Elon Musk's acquisition of Twitter, the platform has progressively de-emphasised external link previews in feeds to reduce users clicking away. In some feed contexts, only the image is shown with the URL overlaid, rather than the full card with title and description. This makes the OG image even more critical — it now has to do more communicative work on its own.

LinkedIn reads OG tags when a URL is shared in a post, message, or article. LinkedIn's crawler is called LinkedInBot. Key LinkedIn-specific behaviours:

LinkedIn is stricter about image dimensions than Facebook. Images below 1200 x 627 px are frequently rejected or displayed very small.
LinkedIn caches OG data for approximately 7 days. Force a refresh using the LinkedIn Post Inspector.
LinkedIn shows og:site_name prominently below the card. If absent, it falls back to the domain name.
LinkedIn does not support Twitter Card tags and reads OG tags exclusively.
og:title is truncated at approximately 150 characters on LinkedIn; og:description at around 300 characters.

WhatsApp shows link previews in both personal chats and group chats. The preview fetching is done server-side by WhatsApp's crawler. Key points:

WhatsApp reads og:title, og:description, and og:image. It does not display og:site_name prominently.
The image must be publicly accessible — WhatsApp cannot fetch images behind authentication or on localhost.
WhatsApp truncates titles at approximately 100 characters and descriptions at around 200 characters.
Cache duration is typically 24–72 hours. There is no official WhatsApp cache-clearing tool; the most reliable method is adding a query parameter to bust the cache (e.g. ?v=2).
WhatsApp Business API supports rich link previews in programmatic messages, again using OG tags.

Slack and Discord

Both Slack and Discord are major surfaces where links are shared, especially in developer, marketing, and community contexts. Both read OG tags fully.

Slack "unfurls" links automatically in channels. Workspace admins can disable unfurling, but for most workspaces it is on by default. Slack reads all core OG tags and displays a compact card with site name, title, description, and image. Providing og:image:width and og:image:height helps Slack avoid downloading the full image just to determine dimensions.

Discord renders OG images as large embeds inline in chat. Discord also reads a non-standard og:color / theme-color meta tag to set the embed's left-border accent colour, which is a nice branding touch for pages frequently shared in Discord communities.

Open Graph Tags vs Standard Meta Tags

It is common to confuse Open Graph tags with standard HTML meta tags. They overlap in purpose — both provide metadata about a page — but they serve different audiences and systems.

Aspect	Standard Meta Tags	Open Graph Tags
Primary audience	Search engines (Google, Bing)	Social platforms and link-preview crawlers
HTML attribute used	`name` (e.g. `name="description"`)	`property` (e.g. `property="og:title"`)
Affects search rankings?	Yes (indirectly — title and description affect CTR)	No direct ranking effect
Affects social share appearance?	Only as a fallback on some platforms	Yes — primary source for all major platforms
Can differ from page content?	Yes, though it should match reasonably	Yes — OG title and description can be crafted specifically for social sharing
Required?	Title tag required. Meta description recommended.	Not required, but strongly recommended for any page likely to be shared
Validated by?	Google Search Console, Site Audit	Facebook Debugger, LinkedIn Post Inspector, OG Checker

An important nuance: Google does not use OG tags for organic search rankings. However, if you use structured data (JSON-LD) in combination with OG tags, you get comprehensive metadata coverage across both search and social channels. The meta tag generator on RankNibbler can produce both standard meta tags and OG tags together for any page.

Another nuance: your OG title and description do not need to be identical to your standard title and meta description. In fact, it often makes sense to write them differently. Your meta description is optimised for search result pages where a user has expressed clear intent — it should be factual and descriptive. Your OG description is optimised for social feeds where the user has no prior intent — it should be compelling, benefit-led, and sometimes more emotive.

Debugging Open Graph Tags

Diagnosing OG tag problems is a routine part of technical SEO and front-end development. Here are the main tools and methods.

Platform-Native Debugging Tools

Facebook Sharing Debugger — developers.facebook.com/tools/debug/ — Shows exactly what Facebook's crawler sees, including all OG properties it detected, any warnings, and the cached preview. The "Scrape Again" button forces a cache refresh.
LinkedIn Post Inspector — linkedin.com/post-inspector/ — Shows the LinkedIn card preview and lets you trigger a re-scrape. The most reliable way to clear LinkedIn's 7-day OG cache.
Twitter Card Validator — Previously available at cards-dev.twitter.com/validator; Twitter has deprecated the standalone tool but card preview is available within the Twitter developer portal for verified developers.

Third-Party and On-Site Tools

RankNibbler Open Graph Checker — Checks any URL for all OG tags, flags missing or malformed properties, validates image dimensions, and gives a pass/fail against the most important platform requirements.
RankNibbler OG Preview — Renders a simulated preview of how your page will look when shared on Facebook, Twitter, LinkedIn, and WhatsApp — without having to share the actual URL anywhere. Ideal for QA before publishing.
RankNibbler Site Audit — Crawls your entire site and flags pages with missing OG tags, oversized images, non-absolute URLs, duplicate OG titles, and other common problems at scale.

Common OG Tag Problems and Fixes

Problem	Likely Cause	Fix
No image shown in share card	`og:image` missing, relative URL used, or image too small	Add `og:image` with an absolute URL. Ensure image is at least 600 x 315 px (ideally 1200 x 630 px).
Old/wrong image shown after update	Platform cache not refreshed	Use Facebook Sharing Debugger "Scrape Again" or LinkedIn Post Inspector to force a re-scrape.
Wrong title shown on Facebook	Stale cache, or multiple conflicting `og:title` tags	Ensure only one `og:title` tag exists. Force a re-scrape via Facebook Debugger.
Twitter shows no card (plain URL only)	`twitter:card` tag missing	Add `<meta name="twitter:card" content="summary_large_image">` to the `<head>`.
LinkedIn ignores the OG image	Image too small (below 1200 x 627 px)	Resize image to at least 1200 x 627 px and re-upload. Force a re-scrape via LinkedIn Post Inspector.
WhatsApp shows no preview	Image behind authentication, or page requires JavaScript to render OG tags	Ensure OG tags are in the server-rendered HTML, not injected by JavaScript. Ensure image is publicly accessible.
OG image loads slowly in card	Large file size or no dimensions specified	Compress image to under 300 KB. Add `og:image:width` and `og:image:height` tags.
Description truncated on share	`og:description` too long	Keep `og:description` under 150 characters to avoid truncation on all platforms.

JavaScript-Rendered Pages and OG Tags

This is a critical technical issue for React, Vue, Angular, and other JavaScript-heavy sites. Social media crawlers typically do not execute JavaScript. They fetch the raw HTML response from the server and parse OG tags from that. If your OG tags are injected into the DOM by JavaScript after page load, crawlers will never see them.

Solutions:

Server-side rendering (SSR): Ensure the full HTML including all OG tags is returned in the initial server response. Next.js, Nuxt.js, and SvelteKit all support SSR natively.
Static site generation (SSG): Pre-render pages with correct OG tags baked into the HTML at build time.
Dynamic rendering: Serve a pre-rendered HTML snapshot to crawlers (detected by user agent) while serving the full JavaScript app to browsers. Tools like Rendertron or Prerender.io support this pattern.

Adding Open Graph Tags in Popular CMS Platforms

WordPress

WordPress does not add OG tags by default. The most common method is installing the Yoast SEO or Rank Math plugin, both of which add comprehensive OG support:

Yoast SEO: Go to SEO > Social in the left menu. Enable the Open Graph metadata option on the Facebook and Twitter tabs. Yoast automatically generates OG tags for all posts and pages using your post title, excerpt, and featured image. You can override the OG title, description, and image per post in the Yoast meta box below the editor.
Rank Math: Open Graph support is enabled by default. Configure global defaults under Rank Math > Titles & Meta > Global Meta. Per-post overrides are available in the Rank Math panel in the editor sidebar.
All in One SEO (AIOSEO): Similar functionality — configure under AIOSEO > Social Networks.
Manual implementation: If you prefer not to use a plugin, add OG tags directly to your theme's header.php file within the <head> section, using PHP conditionals to output the correct values for each post type.

Shopify

Shopify's default themes include basic OG tags for product, collection, and blog pages. To verify and extend OG support:

In the Shopify admin, go to Online Store > Themes > Edit Code.
Open theme.liquid and search for og: to see existing OG tag implementations.
Product pages typically use product.title, product.description, and the first product image for OG data.
For more control, the SEO Manager or Smart SEO Shopify apps provide per-product OG overrides.
Shopify's default OG image for products is the first product image, which is often portrait-format and not 1.91:1. If social sharing matters for your products, create dedicated 1200 x 630 OG images and reference them explicitly in your Liquid templates.

Squarespace

Squarespace handles OG tags automatically for most content. To customise:

Go to Pages > select a page > Social Image to upload a custom OG image per page.
The page title and meta description feed into OG title and description automatically.
For global defaults, go to Marketing > SEO > Social Sharing and upload a fallback OG image used when no page-level image is set.

Wix

In the Wix Editor, click on a page, then click the three-dot menu and select "SEO Basics." You can set a custom OG image (called "Social Share Image" in Wix), OG title, and OG description per page. Wix also respects its site-level social share settings as a fallback for pages without custom images.

Webflow

Webflow has excellent built-in OG support. For each page, go to Page Settings > SEO Settings. You can set a custom OG title, description, and image. For CMS collection pages (blog posts, products), you can bind OG fields to CMS fields dynamically, ensuring every item in a collection has unique, relevant OG data automatically.

Hugo, Jekyll, Gatsby, and Static Site Generators

Most static site generators support OG tags through their theme or layout files. In Hugo, OG tags are typically defined in the baseof.html layout using front matter variables. In Gatsby, use the react-helmet package or the built-in Head export from Gatsby 5+. In Next.js, use the Metadata API (App Router) or Head component (Pages Router) to define OG tags per page or template.

Open Graph Tags and SEO: The Indirect Connection

OG tags do not directly influence Google's organic search rankings. Google's own guidance is clear that social signals (likes, shares, retweets) are not ranking factors. However, the indirect relationship between OG tags and SEO is real and significant.

The mechanism works like this:

A page with well-crafted OG tags generates higher-quality share cards on social platforms.
Better-looking share cards earn higher click-through rates from social feeds.
More visitors to the page means more opportunities for users to engage, share further, and link back from their own sites.
Backlinks earned through social-driven discovery are genuine editorial links, which are a confirmed ranking factor.
Increased branded traffic and engagement signals may also influence personalised ranking factors indirectly.

There is also the Bing dimension: Bing has historically placed more weight on social signals than Google. While Bing is a smaller market share, for some sites it is a non-trivial traffic source, and optimising for social sharing via OG tags has a more direct path to Bing rankings.

Run a full technical SEO audit — including OG tag completeness — with the RankNibbler site audit. The audit checks every page on your site and highlights missing, duplicate, or malformed OG tags alongside all other on-page SEO signals.

SEO tip: OG title and meta description serve different purposes. Your meta description targets search intent; your OG description targets social engagement. Writing them separately — with the same underlying accuracy but different tones — tends to outperform copying one from the other.

Frequently Asked Questions About Open Graph Tags

1. What are open graph tags and why do I need them?

Open graph tags are HTML meta tags in your page's <head> that tell social platforms what title, description, and image to show when someone shares a link to your page. Without them, platforms guess — and often get it wrong, resulting in ugly or irrelevant share cards that reduce click-through rates. You need them on any page you want people to share on social media.

2. What is the open graph protocol?

The open graph protocol is the open standard, originally created by Facebook in 2010, that defines how webpages communicate their metadata to social platforms. It is documented at ogp.me. The protocol defines a set of properties (prefixed with og:) that describe a page's type, title, description, image, and URL using HTML meta tags.

3. Do OG tags help with Google SEO?

Not directly. Google does not use OG tags as a ranking factor. However, they help indirectly by increasing click-through rates from social shares, which can drive more traffic and earn more backlinks — both of which contribute to SEO over time.

4. What is the difference between og:title and the HTML title tag?

The HTML <title> tag is used by search engines for ranking and is shown in browser tabs and search results. The og:title property is used by social platforms for share card headlines. They can contain different text — the title tag is typically concise and keyword-focused, while the OG title can be more conversational or benefit-led for social audiences.

5. What size should my OG image be?

The universal recommendation is 1200 x 630 pixels at a 1.91:1 aspect ratio. Use JPEG for photographs and complex images, PNG for logos and text-heavy images. Keep the file size under 1 MB. This specification covers Facebook, Twitter, LinkedIn, WhatsApp, and most other platforms with a single image.

6. Can I use a relative URL for og:image?

No. The og:image value must be an absolute URL — it must start with https:// (or http://, though HTTPS is strongly preferred). Relative URLs like /images/og.jpg will not work because social platform crawlers do not have the context to resolve them.

7. Why is my old OG image still showing after I updated it?

Social platforms cache OG data aggressively. To force a refresh, use the Facebook Sharing Debugger and click "Scrape Again" for Facebook, or the LinkedIn Post Inspector for LinkedIn. For other platforms, adding a version query parameter to your image URL (e.g. changing og-image.jpg to og-image.jpg?v=2) is the most reliable cross-platform cache-busting technique.

8. Do I need both OG tags and Twitter Card tags?

Technically, Twitter falls back to OG tags for title, description, and image. But you must still include the twitter:card tag — Twitter will not show a card preview at all without it, regardless of whether OG tags are present. Best practice is to include both sets. Twitter Card tags give you precise control and let you tie cards to your Twitter Analytics account via twitter:site.

9. What happens if og:type is not set?

Platforms default to treating the page as og:type = website if the tag is absent. This is usually fine for homepages and landing pages. For blog posts and news articles, explicitly setting og:type = article and including article-specific properties (article:published_time, etc.) enables richer behaviour on some platforms.

10. Why is WhatsApp not showing my OG image?

The most common cause is that the image URL requires authentication or is blocked. WhatsApp's server-side crawler must be able to fetch the image without cookies or sessions. Another common cause is that your OG tags are injected by JavaScript — WhatsApp's crawler reads the raw server-rendered HTML and will not execute JavaScript. Ensure OG tags are in the initial HTML response.

11. Can I have multiple og:image tags on one page?

Yes, the open graph protocol supports multiple image objects using og:image and its structured sub-properties (og:image:url, og:image:width, og:image:height, og:image:alt). Platforms will typically use the first image. Providing multiple options is mostly useful for platforms that select based on aspect ratio, though in practice most platforms use the first defined image.

12. How do I check if my OG tags are working correctly?

The quickest methods are: (1) use the RankNibbler Open Graph Checker to scan your URL and see all detected tags; (2) use the OG preview tool to see how your card renders on Facebook, Twitter, and LinkedIn; (3) use the Facebook Sharing Debugger for the authoritative view of what Facebook sees. For site-wide coverage, the RankNibbler site audit checks every page.

13. Should every page on my site have OG tags?

Ideally yes, but prioritise strategically. At minimum, every page that could realistically be shared on social media — homepage, product pages, blog posts, key landing pages — should have complete OG tags. Internal utility pages, admin pages, and pages marked noindex are lower priority. The site audit helps you identify which pages are missing OG tags at scale.

14. What is og:url used for and is it required?

og:url specifies the canonical URL of the page — the "true" URL that social platforms should associate all shares with, regardless of which URL variant was used (e.g. with or without trailing slash, with or without UTM parameters). All share counts on Facebook, for example, are aggregated under the og:url value. It is technically optional but strongly recommended. It should match your page's canonical URL.

15. Can OG tags be different from the actual page content?

Yes, within reason. OG title and description can be written specifically for social audiences and do not need to be verbatim copies of your HTML title tag and meta description. However, they must accurately represent the page content. Using misleading OG tags to entice clicks to unrelated content violates most platforms' policies and damages user trust.

Quick-Reference: OG Tag Checklist

Use this checklist for every page you want to share on social media:

og:title — Present, unique per page, under 60–70 characters, compelling for social audiences
og:description — Present, under 150 characters, benefit-led, not a duplicate of meta description
og:image — Present, absolute HTTPS URL, 1200 x 630 px, under 1 MB, JPEG or PNG
og:image:width and og:image:height — Present, set to actual image dimensions
og:image:alt — Present, descriptive, under 420 characters
og:url — Present, matches canonical URL, no tracking parameters
og:type — Set to article for blog posts, website for other pages, product for e-commerce
og:site_name — Present, consistent across all pages
og:locale — Set correctly for your primary language (e.g. en_GB)
twitter:card — Present, set to summary_large_image for most content pages
twitter:title — Present or reliably falling back to og:title
twitter:description — Present or reliably falling back to og:description
twitter:image — Present or reliably falling back to og:image
OG tags in server HTML — Not JavaScript-injected; present in the raw HTTP response
Article tags — If og:type = article, include article:published_time and article:modified_time

Validate your implementation with the Open Graph checker, preview results with the OG preview tool, generate tags automatically with the meta tag generator, and audit your entire site for OG coverage with the site audit.

Ready to check your site? The RankNibbler homepage runs a free on-page audit covering 30+ SEO checks including Open Graph tags, Twitter Cards, title tags, meta descriptions, headings, images, and structured data — for any URL, instantly.

Last updated: April 2026