What Are Open Graph Tags?
Open Graph (OG) tags are <meta> elements placed inside the <head> section of an HTML document. They form a communication protocol between your web page and social media platforms, telling those platforms exactly which title, description, image, and URL to display when someone shares a link to your content. The Open Graph protocol was introduced by Facebook in 2010 and has since become the de-facto standard for social sharing metadata across the web.
When someone pastes a URL into Facebook, LinkedIn, WhatsApp, Slack, or dozens of other applications, the platform's crawler visits the page, reads the OG tags in the <head>, and constructs the preview card from those values. Without OG tags, the platform has to guess — and it usually guesses wrong. You might end up with a tiny logo instead of your hero image, the wrong heading, or a description pulled from somewhere in the body text that makes no sense out of context.
OG tags are distinct from standard HTML <title> and <meta name="description"> tags, although they serve a related purpose. Your title tag and meta description are primarily for search engines; your OG tags are primarily for social platforms and messaging apps. Both matter for a well-rounded on-page SEO strategy, and you should treat them independently so each is optimised for its specific context.
Twitter (now X) developed its own variation called Twitter Cards, which uses name attributes rather than property attributes, but the concept is identical. Most modern platforms accept either format, and many will fall back to OG tags when Twitter Card tags are absent. For maximum compatibility you should implement both sets, which takes only a few extra lines of markup.
You can learn more about the protocol itself at the What Is Open Graph guide, or use the OG Preview tool to see exactly how your page looks when shared before you publish it.
Why Open Graph Tags Matter for Social Sharing and SEO
Click-through rate from social media shares depends heavily on the quality of the preview card. Studies consistently show that posts with a large, relevant image outperform those with no image or an automatically selected thumbnail — in some cases by a factor of three or more. A compelling preview card acts as a micro-advertisement for your content every time someone shares it.
Beyond direct clicks, there is an indirect SEO dimension. Social shares generate branded search queries, backlink opportunities, and referral traffic signals that search engines use as quality indicators. A page that looks trustworthy and polished in a social preview is more likely to be clicked, saved, and linked to. OG tags do not directly influence Google's ranking algorithm, but the downstream effects of better engagement are real.
There is also a brand credibility angle. If your competitor's links produce crisp, on-brand share cards while yours generate broken previews, prospective customers notice. Every touchpoint in a buying journey contributes to the overall perception of professionalism, and social previews are a touchpoint most websites neglect.
Finally, OG tags matter for internal sharing too. When employees share company blog posts in Slack, or when a customer forwards a product URL in WhatsApp, the preview card is the first thing the recipient sees. Getting it right increases the chance those informal shares convert into visits.
All Essential Open Graph Properties Explained
The Open Graph protocol defines a large number of optional properties, but in practice five core tags cover the needs of almost every page. Here is a detailed breakdown of each one, plus the additional properties that apply to specific content types.
og:title
The og:title property defines the heading that appears in the share card. It does not have to match your HTML <title> tag exactly. In fact, it is often better if it does not. Your HTML title tag needs to include the brand name and targeted keyword for SEO purposes; your OG title can be more conversational or benefit-driven because it is competing for attention in a social feed rather than a search results page.
Keep OG titles under 60 characters to avoid truncation on most platforms. Facebook truncates at around 55 characters, LinkedIn at around 70, and Twitter/X at around 70 as well. Writing a tight, punchy title that works across all of them is the safest approach.
<meta property="og:title" content="How to Write OG Tags That Get More Clicks">
og:description
The og:description property provides supporting context beneath the title. On most platforms it is displayed in a smaller font and may be truncated at around 150-200 characters. Use it to expand on the value proposition of the page — what the reader will learn, get, or achieve by clicking through. Avoid copying your meta description verbatim; write something that works as a standalone social teaser.
<meta property="og:description" content="Step-by-step guide to Open Graph tags with code examples, image specs, and platform-by-platform testing instructions.">
og:image
The og:image property is the single most impactful OG tag. A large, relevant image transforms a plain URL into an eye-catching card. The value must be an absolute URL to the image file — relative paths do not work because the social platform's crawler fetches the image independently of the page context.
The recommended dimensions are 1200 x 630 pixels at a 1.91:1 aspect ratio. This renders well as a large card on Facebook, LinkedIn, and Twitter. For WhatsApp and iMessage link previews, the image is shown square-cropped, so keep your focal point centred. The file should be under 8 MB (Facebook's hard limit is 8 MB; Twitter's is 5 MB), and JPEG or PNG are the most universally supported formats.
You can optionally add og:image:width and og:image:height to help platforms size the image without downloading it first, which speeds up preview generation:
<meta property="og:image" content="https://www.example.com/images/og-image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="A diagram showing how Open Graph tags work">
og:url
The og:url property specifies the canonical URL of the page. This is important when a page can be accessed via multiple URLs — for example, with and without a trailing slash, via HTTP and HTTPS, or through a CDN subdomain. Setting og:url to the canonical version consolidates all shares of that page so that like and share counts aggregate correctly in Facebook's system rather than being split across variants.
<meta property="og:url" content="https://www.example.com/blog/open-graph-guide">
og:type
The og:type property tells the platform what kind of content the page represents. The most common values are website (the default, used for homepages and general pages) and article (used for blog posts and news articles). Setting og:type to article unlocks additional article-specific properties such as article:published_time, article:author, and article:section, which some platforms use to enrich the preview.
Other valid types include book, profile, music.song, music.album, video.movie, and video.episode. For e-commerce pages, use og:type of product combined with product-specific properties.
<meta property="og:type" content="article"> <meta property="article:published_time" content="2026-04-01T09:00:00+00:00"> <meta property="article:author" content="https://www.example.com/team/jane-doe">
og:site_name
The og:site_name property identifies the name of your website as a brand, separate from the page title. Some platforms display it alongside or above the title. This is particularly useful if your OG title does not include your brand name.
<meta property="og:site_name" content="RankNibbler">
og:locale
The og:locale property specifies the language and territory of the page content. The default assumption is en_US. If your site serves multiple languages, set this to the appropriate locale per page and use og:locale:alternate to declare alternatives.
<meta property="og:locale" content="en_GB">
Full Reference Table: Open Graph and Twitter Card Tags
| Tag | Type | Required | Description |
|---|---|---|---|
og:title | OG | Yes | Page title shown in the share card. Keep under 60 characters. |
og:description | OG | Yes | Supporting description. Keep under 160 characters. |
og:image | OG | Yes | Absolute URL of the share image. Recommended 1200x630px. |
og:url | OG | Yes | Canonical URL of the page. |
og:type | OG | Yes | Content type: website, article, product, etc. |
og:site_name | OG | Recommended | Name of the website/brand. |
og:locale | OG | Recommended | Language and territory code, e.g. en_GB. |
og:image:width | OG | Optional | Width of the share image in pixels. |
og:image:height | OG | Optional | Height of the share image in pixels. |
og:image:alt | OG | Optional | Alt text for the share image (accessibility). |
og:video | OG | Optional | URL of a video to display in the share card. |
article:published_time | OG | Optional | ISO 8601 publish date for article-type pages. |
article:author | OG | Optional | URL of the author's profile page. |
twitter:card | Yes | Card type: summary, summary_large_image, app, player. | |
twitter:title | Recommended | Title for Twitter share. Falls back to og:title. | |
twitter:description | Recommended | Description for Twitter. Falls back to og:description. | |
twitter:image | Recommended | Image URL for Twitter. Falls back to og:image. | |
twitter:image:alt | Optional | Alt text for the Twitter share image. | |
twitter:site | Optional | @username of the website's Twitter account. | |
twitter:creator | Optional | @username of the content author. |
Twitter Card Tags: A Complete Guide
Twitter Card tags use the name attribute instead of the property attribute used by Open Graph tags. This is the key syntactic difference: OG tags look like <meta property="og:..."> while Twitter Card tags look like <meta name="twitter:...">. Both live in the <head>. The distinction matters because some parsers and validators are strict about this.
Twitter Card Types
There are four Twitter Card types, each producing a different visual treatment in a tweet:
- summary — A small square thumbnail image on the left with title and description on the right. Used for general web pages, short-form content, and pages where the image is secondary to the text.
- summary_large_image — A large landscape image above the title and description. This is the most effective card type for most content, as it commands more attention in a feed. Use it for blog posts, landing pages, and any page where visual impact matters.
- app — Displays an app store download card linking to an iOS, Android, or Google Play listing. Used for mobile app landing pages.
- player — Embeds an inline media player for video and audio content. Requires approval from Twitter/X.
For most websites, summary_large_image is the correct choice. Here is the minimal markup for a well-configured Twitter Card:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Open Graph Checker - Analyse OG Tags Instantly"> <meta name="twitter:description" content="Check og:title, og:image, og:description and all social meta tags on any URL in seconds."> <meta name="twitter:image" content="https://www.example.com/images/og-image.jpg"> <meta name="twitter:image:alt" content="Screenshot of the RankNibbler open graph checker tool"> <meta name="twitter:site" content="@ranknibbler">
Twitter Card Fallback Behaviour
Twitter/X checks for Twitter Card tags first. If twitter:title is absent, it falls back to og:title. The same applies to twitter:description and twitter:image. This means that if your OG tags are well-configured, adding Twitter Card tags is a small incremental step — you mainly need twitter:card to specify the card type, and you can optionally override specific values if you want Twitter to show something different from other platforms.
OG Image Best Practices: The 1200x630 Standard and Beyond
The share image is what stops the scroll. A weak or missing image and your link competes on text alone. Here is everything you need to know to get the OG image right every time.
Recommended Dimensions
| Platform | Recommended Size | Minimum Size | Aspect Ratio | Notes |
|---|---|---|---|---|
| Facebook / Meta | 1200 x 630px | 600 x 315px | 1.91:1 | Images below 600x315 display as tiny thumbnails |
| Twitter / X | 1200 x 628px | 300 x 157px | 2:1 | summary_large_image crops to 2:1; summary uses 1:1 |
| 1200 x 627px | 1200 x 627px | 1.91:1 | Strict about minimum; smaller images may not display | |
| 1200 x 630px | 300 x 200px | Variable | Shown as square crop — keep focal point centred | |
| Slack | 1200 x 630px | 400 x 209px | 1.91:1 | Unfurled links show a small thumbnail; larger is better |
| iMessage / iOS | 1200 x 630px | 300 x 200px | Variable | Fetched by Apple's Link Presentation framework |
Image Format and File Size
JPEG is the best default format for photographic OG images because it delivers the smallest file size at acceptable quality. PNG is better for images with text, logos, or hard edges, where JPEG compression artefacts would be visible. WebP is supported by most modern crawlers but not universally, so JPEG or PNG remain safer choices. Keep file size under 1 MB where possible — most platforms will fetch the image on every share, and a large file causes slow or failed preview generation.
Image Content Guidelines
- Include your brand logo or colour scheme so the card is identifiable even before the text is read.
- If you use text on the image, keep it large (minimum 24pt equivalent) and away from the edges, which may be cropped on some platforms.
- Avoid image carousels or animated GIFs for OG images — most platforms only display a static frame.
- Use a safe zone of roughly 50px around the edges to account for cropping variation across platforms.
- A/B test different OG images for high-traffic pages by rotating the
og:imagevalue and measuring click-through from social referral traffic in Analytics. - Never hotlink to external CDNs you do not control. If the CDN changes or the file moves, your share image breaks silently.
Generating OG Images Programmatically
Large sites with hundreds or thousands of pages cannot manually create a unique OG image for every URL. The modern solution is to generate OG images dynamically. Common approaches include:
- Serverless image generation — Frameworks like Next.js offer an
opengraph-image.tsxconvention that renders a React component to a PNG using the Edge Runtime at request time. - Puppeteer/Playwright screenshots — Render a purpose-built HTML template to an image at build time or via a Lambda function. Tools like Vercel's OG Image service use this approach.
- Canvas-based services — Services such as Bannerbear or Cloudinary's auto-crop/overlay features can generate social images from templates with variable data passed as query parameters.
How OG Tags Affect Social Sharing: Platform-by-Platform Behaviour
Each platform parses OG tags slightly differently, caches previews for different lengths of time, and imposes different character limits. Understanding these differences helps you craft tags that look correct everywhere.
Facebook and Meta Platforms
Facebook is the originator of the Open Graph protocol and implements it the most completely. When someone shares a link, Facebook's Sharing Debugger crawls the URL, caches the result, and serves that cached version to every user who sees the share. The cache TTL is typically between 24 hours and several days, which means an incorrect OG image or title can persist for a long time after you fix it on the page. To force a cache refresh, use the Facebook Sharing Debugger and click "Scrape Again".
Facebook uses og:type to determine which additional structured properties are valid. Setting og:type to article allows you to add article:published_time, article:modified_time, article:author, article:section, and article:tag. These extra properties feed into Facebook's content graph and can influence how the platform categorises and distributes your content.
Facebook's title truncation sits at around 55 characters. Description text is shown on two lines (approximately 100-110 characters total) before being cut. The image dimensions are strictly 1.91:1; images that deviate significantly are cropped or letterboxed.
Twitter / X
Twitter/X reads its own twitter:* tags first, falling back to OG tags if Twitter Card tags are absent. The twitter:card declaration is required — without it, Twitter defaults to the basic summary card type, which shows a small thumbnail rather than the large image you probably want.
Twitter's crawler is called Twitterbot and can be seen in server access logs. It does not execute JavaScript, so any OG tags injected dynamically via client-side JS will not be picked up. All OG and Twitter Card tags must be in the raw HTML served by the server. Twitter caches card metadata aggressively; use the Card Validator to preview and bust the cache.
Twitter images for summary_large_image are cropped to approximately 2:1. Images taller than 1:1 get cropped at the top and bottom. Twitter requires images to be under 5 MB. Animated GIFs are allowed in tweets but not via Twitter Card image tags.
LinkedIn is the strictest of the major platforms when it comes to image specifications. It requires a minimum image size of 1200 x 627 pixels and will silently fall back to a generic link card if the image does not meet the minimum. LinkedIn also respects og:title and og:description but applies its own character truncation — the title is cut at around 70 characters and the description at around 100.
LinkedIn does not honour Twitter Card tags; it only reads OG tags. This is another reason to maintain complete OG tag coverage independently of your Twitter Card implementation. LinkedIn has its own Post Inspector at linkedin.com/post-inspector for debugging and cache refreshing.
WhatsApp reads og:title, og:description, and og:image. It crops the image to a square thumbnail in most contexts, so a centred composition is important. WhatsApp does not currently provide a preview debugging tool, so testing requires actually sending the link in a chat. The preview is generated when the link is pasted, not when the message is sent, and WhatsApp caches previews per device session rather than centrally — meaning the cache is harder to bust.
WhatsApp's crawler identifies itself as WhatsApp in the User-Agent string. It does not execute JavaScript. If your pages require authentication before serving OG tags, previews will fail in WhatsApp just as they do in other platforms.
Slack
Slack unfurls links using OG tags and displays them as rich attachments in channels. The og:image appears as a small thumbnail to the right of the text. Slack respects og:title, og:description, og:image, and og:site_name. Workspace administrators can disable link unfurling, but when it is enabled, well-configured OG tags make a material difference to how professional internal links appear in team communications.
iMessage and iOS Link Previews
Apple's iMessage uses the LinkPresentation framework to generate link previews, which reads OG tags. The preview appears as a card with the image, title, and site name. On iOS 13 and later, the image can appear large if the user taps to expand. The recommended image size is the standard 1200x630px, and JPEG or PNG formats are both supported.
OG Tags vs Meta Tags: Understanding the Difference
The term "meta tags" covers everything in the <head> of an HTML document. OG tags are a subset of meta tags, but the two serve different audiences and different purposes. Here is a clear comparison:
| Property | Standard Meta Tags | Open Graph Tags |
|---|---|---|
| Primary audience | Search engine crawlers | Social media crawlers and messaging apps |
| Attribute syntax | name="..." | property="og:..." |
| Influences Google ranking | Yes (indirectly, via title/description quality) | No direct influence |
| Influences social preview | Only as a fallback if OG tags are absent | Yes, primary source |
| Can differ per page | Yes | Yes |
| Supported by SERP | Yes | No |
| Supported by Facebook/LinkedIn | As fallback only | Yes, primary |
The key practical point is that you need both. A page with excellent OG tags but a missing meta description will lose click-throughs from search. A page with a great meta description but no OG tags will produce poor social previews. Use the Meta Tag Generator to build a full set of both types for any page, and use the OG Preview tool to check how your social tags render before publishing.
Complete Example: Well-Configured OG and Twitter Card Markup
Here is a complete, production-ready block of OG and Twitter Card markup for a blog article page. Copy and adapt this for your own pages:
<!-- Core Open Graph tags --> <meta property="og:title" content="The Complete Guide to Open Graph Tags"> <meta property="og:description" content="Learn how og:title, og:image, and og:description control your social previews. Includes code examples, image specs, and debugging tips."> <meta property="og:image" content="https://www.example.com/images/open-graph-guide-og.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Open Graph tag code snippet on a dark background"> <meta property="og:url" content="https://www.example.com/blog/open-graph-guide"> <meta property="og:type" content="article"> <meta property="og:site_name" content="Example Site"> <meta property="og:locale" content="en_GB"> <!-- Article-specific OG properties --> <meta property="article:published_time" content="2026-04-01T09:00:00+00:00"> <meta property="article:modified_time" content="2026-04-01T09:00:00+00:00"> <meta property="article:author" content="https://www.example.com/team/author-name"> <meta property="article:section" content="SEO"> <meta property="article:tag" content="Open Graph"> <meta property="article:tag" content="Meta Tags"> <!-- Twitter Card tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="The Complete Guide to Open Graph Tags"> <meta name="twitter:description" content="How og:title, og:image, and og:description control your social previews — with examples."> <meta name="twitter:image" content="https://www.example.com/images/open-graph-guide-og.jpg"> <meta name="twitter:image:alt" content="Open Graph tag code snippet on a dark background"> <meta name="twitter:site" content="@examplesite"> <meta name="twitter:creator" content="@authorhandle">
Debugging OG Previews: Tools and Techniques
Even when your OG tags are correctly written, previews can fail to update because of caching, server configuration issues, or JavaScript-rendered content. Here is a systematic approach to diagnosing and fixing OG preview problems.
Platform Debug Tools
| Platform | Debug Tool | URL |
|---|---|---|
| Facebook / Meta | Sharing Debugger | developers.facebook.com/tools/debug |
| Twitter / X | Card Validator | cards-dev.twitter.com/validator |
| Post Inspector | linkedin.com/post-inspector | |
| Rich Pins Validator | developers.pinterest.com/tools/url-debugger | |
| Any platform | RankNibbler OG Checker | ranknibbler.com |
Step-by-Step Debugging Process
- Check the raw HTML first. Use RankNibbler's OG tag checker or the OG Preview tool to fetch the raw HTML and confirm the tags are present in the server response. If the tags are missing here, no other debugging step will help until the HTML is fixed.
- Verify absolute URLs. Every URL value in an OG tag — for
og:image,og:url, andog:video— must start withhttps://. Relative paths are not supported by any platform crawler. - Test the image URL directly. Paste the
og:imageURL into a browser. If it redirects, returns a 404, or requires authentication, the social platform will not be able to fetch it. The image must be publicly accessible. - Check the Content-Type header. The image URL must return an appropriate MIME type (
image/jpeg,image/png, etc.). Some servers return incorrect content types for dynamically generated images, which causes parsers to reject them. - Bust the cache. For Facebook, use the Sharing Debugger and click "Scrape Again". For LinkedIn, use the Post Inspector and click "Inspect". For Twitter, paste the URL into the Card Validator. There is no official cache-busting tool for WhatsApp; you may need to append a versioned query parameter to the
og:imageURL and update it whenever you change the image. - Check for JavaScript dependency. All social crawlers, including Twitterbot and Facebook's crawler, are HTML-only parsers. They do not execute JavaScript. If your OG tags are injected by a client-side framework (React, Vue, Angular, or similar), they will not be seen. You must use server-side rendering (SSR) or static site generation (SSG) for pages you want to share on social media.
- Check noindex / nofollow. Pages blocked by a
robots.txtDisallow rule, or by anoindexmeta tag, may be skipped by some social crawlers. The crawler needs to be able to access the page to read its tags. - Validate HTTPS certificate. A site with an expired or invalid SSL certificate will cause some crawlers to fail silently. Ensure your certificate is valid before investigating anything else.
Using RankNibbler's OG Checker
RankNibbler's site audit fetches your page from the server-side and extracts all OG and Twitter Card tags from the raw HTML response. Unlike browser-based inspection, which shows you the post-JavaScript DOM, RankNibbler sees exactly what a social crawler sees. This makes it the fastest way to verify that your tags are actually present in the response before testing on individual platforms. The OG Preview tool goes one step further by rendering a visual mock-up of how your tags will appear as a share card.
How RankNibbler Scores Your Open Graph Tags
When you run a site audit on RankNibbler, the Open Graph check contributes up to 10 points to your overall on-page SEO score. The scoring is based on the presence, completeness, and quality of your OG tags. Here is how the 10 points are allocated:
| Check | Points | Notes |
|---|---|---|
| og:title present | 2 | Required. Must be non-empty. |
| og:description present | 2 | Required. Must be non-empty. |
| og:image present and absolute URL | 2 | Required. URL must start with https:// and be publicly accessible. |
| og:url present and matches canonical | 1 | Should match the canonical URL of the page. |
| og:type present | 1 | Must be a valid OG type value. |
| twitter:card present | 1 | Required for correct Twitter/X rendering. |
| twitter:image present | 1 | Ensures correct rendering on Twitter even if og:image differs. |
Pages scoring below 7/10 on OG tags are flagged in the audit report with specific recommendations. To check your score, enter your URL on the RankNibbler homepage or run a full site audit to check multiple pages at once.
OG Tags in WordPress
WordPress does not add Open Graph tags by default. The most common approach is to use an SEO plugin, all of which provide OG tag management as a core feature.
Yoast SEO
Yoast SEO adds OG tags automatically based on your post's featured image, title, and excerpt. You can override the OG title, description, and image per post from the "Social" tab in the Yoast metabox at the bottom of the post editor. Go to SEO > Social in the WordPress admin to set site-wide defaults for Facebook and Twitter, including your default OG image for pages without a featured image.
Rank Math
Rank Math generates OG tags by default and provides per-post override fields under the "Social" tab in the post metabox. It also supports site-wide defaults. If you have previously used a different SEO plugin and are migrating, Rank Math includes an import wizard that transfers OG settings from Yoast, All in One SEO, and other popular plugins.
All in One SEO (AIOSEO)
AIOSEO manages OG tags through its "Social Networks" module. Enable it under All in One SEO > Social Networks, then configure per-post overrides from the AIOSEO metabox in the post editor. AIOSEO supports both Open Graph and Twitter Card tags with individual image upload fields.
Custom WordPress Implementation
If you prefer not to use a plugin, you can add OG tags to your WordPress theme's header.php using the following pattern inside the <head> section. This is a simplified example for a blog post context:
<?php if (is_singular()) : ?>
<?php
$post_thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'large');
$og_image = $post_thumbnail_url ? $post_thumbnail_url : get_site_icon_url();
?>
<meta property="og:title" content="<?php echo esc_attr(get_the_title()); ?>">
<meta property="og:description" content="<?php echo esc_attr(get_the_excerpt()); ?>">
<meta property="og:image" content="<?php echo esc_url($og_image); ?>">
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<?php endif; ?>
For production use, extend this to handle all page types (homepage, archives, products) and ensure the image dimensions meet the 1200x630px recommendation before outputting them.
OG Tags in Shopify
Shopify's default themes include basic OG tags, but the implementation varies by theme and is often incomplete. Products, collections, and blog posts are the three main content types where OG tags matter most for social sharing.
Checking Shopify OG Tags
The easiest way to check which OG tags your Shopify store is outputting is to use RankNibbler's OG checker. Enter the URL of a product page, collection page, and blog post to see what is present and what is missing. Common Shopify OG issues include product images being served at too small a size, missing og:description on collection pages, and the store name not being set in og:site_name.
Editing OG Tags in Shopify Liquid
OG tags in Shopify themes are managed in the theme.liquid layout file or a dedicated snippets file. To edit them, go to Online Store > Themes > Edit Code and open layout/theme.liquid. Look for og:title to find the existing OG block and modify it. Here is a clean example for a product page context:
{% if template contains 'product' %}
<meta property="og:title" content="{{ product.title | escape }}">
<meta property="og:description" content="{{ product.description | strip_html | truncate: 160 | escape }}">
<meta property="og:image" content="https:{{ product.featured_image | img_url: '1200x630', crop: 'center' }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:type" content="product">
<meta property="og:site_name" content="{{ shop.name | escape }}">
<meta name="twitter:card" content="summary_large_image">
{% endif %}
Note the use of img_url: '1200x630', crop: 'center' to serve the image at the correct social dimensions from Shopify's CDN. Without this, Shopify may serve a very small thumbnail URL in the OG image tag.
Common Open Graph Mistakes and How to Fix Them
| Mistake | Impact | Fix |
|---|---|---|
| Missing og:image | No image in share card; significantly lower engagement | Add a 1200x630px branded image as og:image on every page |
| Relative URL in og:image | Image fails to load on all platforms | Use an absolute URL starting with https:// |
| Image too small (under 200x200px) | Facebook may not display the image at all | Serve image at minimum 600x315px; recommended 1200x630px |
| og:title over 60 characters | Title truncated mid-word on Facebook and other platforms | Keep og:title to 55-60 characters maximum |
| og:description copied from meta description verbatim | Missed opportunity to optimise for social context | Write a separate social-optimised description |
| No twitter:card tag | Twitter defaults to small summary card instead of large image | Add twitter:card with value "summary_large_image" |
| OG tags set by JavaScript | Social crawlers do not execute JS; tags are invisible | Render OG tags in server-side HTML |
| Stale cached preview after content update | Old title or image displayed to users sharing the updated page | Use Facebook Sharing Debugger or LinkedIn Post Inspector to bust cache |
| Same OG image on every page | Generic brand image; missed opportunity for relevance | Use page-specific images or dynamically generated OG images |
| Image hosted on authenticated or gated CDN | Crawler cannot access image; fallback or no image shown | Ensure the og:image URL is publicly accessible with no auth |
| Duplicate og:title and og:description tags | Platforms may pick the wrong one; validation errors | Ensure only one instance of each tag exists in the head |
| Missing og:url on paginated or filtered URLs | Like/share counts split across URL variants | Set og:url to the canonical URL on every page |
OG Tags and Structured Data: How They Work Together
Open Graph tags and JSON-LD structured data are both forms of metadata that provide context to external systems, but they serve different purposes and should not be conflated. OG tags communicate with social media crawlers; structured data (Schema.org JSON-LD) communicates with search engines and enables rich results in Google Search.
For an article page, you should implement both. The OG tags control the social preview card. The JSON-LD Article schema controls eligibility for Google News, Top Stories, and FAQ rich results. The content in the two systems can and should overlap — the same title, description, and image URL can appear in both — but they are maintained separately and parsed by different systems.
Similarly, on-page SEO factors like the HTML <title> tag, heading structure, and meta description operate entirely independently of OG tags. A complete SEO setup includes all three layers: standard meta tags for search engines, OG tags for social platforms, and structured data for rich results eligibility.
Generating and Previewing OG Tags with RankNibbler
RankNibbler provides two complementary tools for working with Open Graph tags:
- Open Graph Checker — Enter any URL to fetch its OG and Twitter Card tags from the server-side HTML. The checker lists every tag found, flags missing required tags, and gives you an OG score out of 10. This is the fastest way to audit existing pages without opening browser developer tools.
- OG Preview Tool — Enter a URL or manually input tag values to see a rendered preview of how your share card will look on Facebook, Twitter, and LinkedIn. Useful for checking truncation, image cropping, and overall visual quality before publishing.
- Meta Tag Generator — Build a complete set of HTML meta tags, Open Graph tags, and Twitter Card tags from a form. Copy the generated markup directly into your page's
<head>. - Site Audit — Run a full audit of your website to identify pages with missing or incomplete OG tags across your entire site. The audit report prioritises the pages most in need of attention.
- SERP Snippet Generator — Preview how your title tag and meta description appear in Google search results alongside your OG tag preview.
Frequently Asked Questions About Open Graph Tags
Do Open Graph tags affect Google SEO rankings?
Not directly. Google does not use OG tags as a ranking signal. However, OG tags affect how your content appears when shared on social media, which influences click-through rates and social engagement. Higher social traffic can increase branded searches and backlink acquisition, both of which have indirect SEO benefits. In that sense, well-configured OG tags support your SEO strategy without being a direct ranking factor.
What happens if I don't add OG tags to my page?
If OG tags are absent, social platforms fall back to their own heuristics. Facebook typically uses the HTML <title> as the share title, guesses at a description from the first paragraph of body text, and selects the first image on the page — which is often a logo, navigation icon, or unrelated image. The result is unpredictable and usually looks poor compared to a purpose-crafted OG setup. WhatsApp and iMessage may show no preview at all if no OG image is found.
Can my OG title be different from my HTML title tag?
Yes, and it often should be. Your HTML <title> tag is written to satisfy search engines — it typically includes your brand name and a target keyword. Your og:title is read in a social media feed context, where brevity and conversational tone perform better. Writing them separately gives you the opportunity to optimise each for its specific context.
What is the best OG image size?
The widely recommended standard is 1200 x 630 pixels at a 1.91:1 aspect ratio. This renders correctly as a large card on Facebook, LinkedIn, and Twitter. For Twitter's summary_large_image card, the image is cropped to approximately 2:1, so keeping the main subject centred and away from the very top and bottom edges is important. Keep file size under 1 MB for fast preview generation, and use JPEG for photos or PNG for images with text.
Why is my Facebook share showing the old image even after I updated it?
Facebook caches OG data aggressively. After updating your OG image, you need to manually bust Facebook's cache using the Facebook Sharing Debugger. Enter your page URL, click "Debug", then click "Scrape Again" to force Facebook to re-fetch the latest version of your tags. The cache typically expires naturally within 24-72 hours, but for time-sensitive changes the debugger is the only reliable fix.
Do Twitter/X Card tags override Open Graph tags?
Twitter reads twitter:* tags first. If a specific Twitter Card tag is present, it takes precedence over the equivalent OG tag for rendering on Twitter/X. If a Twitter Card tag is absent, Twitter falls back to the corresponding OG tag. For example, if twitter:image is absent but og:image is present, Twitter will use the OG image. This means you can implement a minimal Twitter Card setup (just twitter:card at minimum) and rely on your OG tags for the rest, or you can override individual values with separate Twitter Card tags.
Can I use a CDN URL for my og:image?
Yes, as long as the CDN URL is publicly accessible without authentication and serves the image with a correct Content-Type header. Some CDNs add token-based access control to URLs that expires after a certain time; this will cause your OG image to break for anyone who shares the link after the token expires. Always use a stable, permanent, publicly accessible URL for your og:image. Shopify's CDN and Cloudinary both work well for this purpose when configured correctly.
How many OG image tags can I have on one page?
The Open Graph specification allows multiple og:image tags on a single page. When multiple are present, platforms typically use the first one. Some platforms may allow users to select from multiple images when sharing. In practice, using a single well-configured og:image is simpler and more predictable than using multiple. If you do use multiple, accompany each with its corresponding og:image:width, og:image:height, and og:image:alt properties.
Do OG tags work for product pages on e-commerce sites?
Yes, and they matter particularly for e-commerce. Product pages are frequently shared by customers on social media and via messaging apps. A product OG image should show the product clearly against a clean background at 1200x630px. Set og:type to product if you are implementing extended product properties, or simply use og:type of website for a straightforward implementation. Include the product name and a short benefit-led description in og:description. For Shopify stores, use the Liquid template approach shown above. For WooCommerce, the Yoast WooCommerce SEO add-on provides full OG support for product pages.
What is og:type and which value should I use?
The og:type property declares the nature of the content. The most commonly used values are website (for homepages and general pages), article (for blog posts, news articles, and editorial content), and product (for e-commerce product pages). Using article instead of website for blog posts unlocks the article:* namespace, allowing you to add publish date, author, and category properties. For most sites, using website as the default for non-article pages and article for posts is the correct approach.
Check Your OG Tags with RankNibbler
Open Graph tags are one of the easiest on-page improvements you can make, and the payoff is visible and measurable: better-looking share cards, higher click-through rates from social posts, and a more professional presence across every platform your content reaches.
Use RankNibbler's free tools to check and optimise your OG setup:
- Open Graph Checker — Audit any URL for OG and Twitter Card tags in seconds and get a score out of 10.
- OG Preview Tool — Visualise how your share card looks on Facebook, Twitter, and LinkedIn before publishing.
- Meta Tag Generator — Generate a complete block of OG, Twitter Card, and standard meta tags ready to paste into your HTML.
- Site Audit — Scan your entire website for pages with missing or incomplete OG tags and get a prioritised fix list.
- SERP Snippet Generator — Preview your search result appearance alongside your social preview for a complete picture of your metadata.
Enter your URL on the RankNibbler homepage to run a free OG tag check now, or explore the What Is Open Graph guide to go deeper on the protocol and its capabilities.