Open Graph Tags: The Complete Guide
When someone shares your link on Facebook, LinkedIn, Slack, or iMessage, Open Graph tags determine what appears in the preview. Here's everything you need to get them right.
When someone shares a link on Facebook, LinkedIn, Slack, or iMessage, the platform reads a set of HTML tags to decide what to show in the preview: the title, description, and image. These are Open Graph tags, and without them, platforms either display a bare URL or generate a preview using whatever text and images they find on the page.
If you just want to know whether your tags are set, run the free Open Graph checker on any URL first, then use this guide to fix whatever is missing.
What are Open Graph tags?
Open Graph was created by Facebook in 2010 to give websites a standardised way to control how their content appeared when shared. The protocol was quickly adopted by almost every other platform: Twitter/X, LinkedIn, Pinterest, WhatsApp, Slack, Discord, and more.
Open Graph tags are <meta> elements in the <head> of your HTML. They use the property attribute (not name) and the og: prefix:
<meta property="og:title" content="Your page title" />
Platforms send a request to your URL and parse the <head> of the returned HTML. They never render your JavaScript - only raw server-side HTML is read. This means Open Graph tags must be rendered server-side.
Here is every tag this guide covers at a glance, and whether you actually need it:
| Tag | What it does | Do you need it? |
|---|---|---|
og:title | The headline shown on the preview card | Yes |
og:description | The summary line beneath the title | Yes |
og:image | The preview image (1200 by 630) | Yes for a full card |
og:url | The canonical URL for the share | Recommended |
og:type | Content type, website or article | Optional |
og:site_name | Your site name beside the title | Optional |
og:image:width / height / alt | Dimensions and accessible text for the image | Optional |
twitter:card | Card layout on X, usually summary_large_image | Optional |
The four Yes and Recommended rows are the ones worth checking on every page. The rest are polish. The sections below explain each in turn.
Required Open Graph tags
These four tags are the minimum you need for a functional social preview:
og:title
The title that appears in the preview. This should be specific to the page - not just your site name. Keep it under 60 characters to avoid truncation on most platforms.
<meta property="og:title" content="How to Fix a Slow Website in 2026" />
og:description
A short summary of the page content. Most platforms show around 100-150 characters before truncating. It should describe the page content specifically, not repeat the title.
<meta property="og:description" content="Core Web Vitals, image optimisation, render-blocking scripts - here is what actually moves the needle." />
og:image
The image that appears in the preview card. A few rules that matter:
- Dimensions: Use 1200 × 630 pixels. If you use a smaller image, platforms may display it as a thumbnail rather than a full-width card.
- Format: JPEG or PNG. Both are universally supported.
- Absolute URL: The
og:imagevalue must be an absolute URL, not a relative path. - No redirects: Some platforms will not follow redirects to reach your OG image. Serve it from the final URL.
<meta property="og:image" content="https://yoursite.com/images/post-cover.jpg" />
og:url
The canonical URL of the page being shared. This tells platforms the authoritative URL to use when tracking shares and comments.
<meta property="og:url" content="https://yoursite.com/blog/your-post-slug" />
Optional but recommended tags
og:type
Describes the type of content. The default is website, which is appropriate for most pages. Use article for blog posts.
<meta property="og:type" content="article" />
og:site_name
The name of your overall website, distinct from the page title. Displayed alongside the title on some platforms.
<meta property="og:site_name" content="AuditZap" />
og:image:width, og:image:height, og:image:alt
Dimension tags help platforms render your image without downloading it first to check dimensions. The alt tag provides accessibility for screen readers and fallback text.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A diagram showing Core Web Vitals scores" />
Twitter / X card tags
Twitter reads standard Open Graph tags but also has its own twitter: meta tags that take precedence on Twitter/X. The most important is twitter:card, which controls the card layout:
<meta name="twitter:card" content="summary_large_image" />
summary_large_image- full-width image card (most common for articles)summary- small square image thumbnail
If you omit twitter:title, twitter:description, and twitter:image, Twitter falls back to the og: equivalents.
Dynamic OG images
For sites with many pages - blogs, product catalogues, documentation - creating a custom 1200×630 image for every page manually is impractical. The modern approach is dynamic OG image generation.
Next.js has built-in support via next/og. Define an opengraph-image.tsx file alongside your page, return an ImageResponse with text and styling, and Next.js generates the image on request. The result is a unique, branded OG image for every page without the manual work.
Open Graph image dimensions by platform
Every platform reads the same og:image tag, but they crop and size it differently. A single 1200 by 630 pixel image (a 1.91:1 aspect ratio) is the safe default that renders well almost everywhere. The table below summarises what each major platform expects.
| Platform | Recommended size | Aspect ratio | File size limit |
|---|---|---|---|
| 1200 x 630 | 1.91:1 | Up to 8 MB | |
| 1200 x 627 | 1.91:1 | Up to 5 MB | |
| X (Twitter) | 1200 x 628 | 1.91:1 | Up to 5 MB |
| Slack and Discord | 1200 x 630 | 1.91:1 | A few MB |
| 1000 x 1500 | 2:3 (tall) | Up to 20 MB |
The practical rules that matter across all of them: keep the image at or above 600 by 315 pixels (below that, Facebook and others fall back to a small square thumbnail instead of a full-width card), use an absolute URL, and serve the image directly with no redirect. Keep the file comfortably under the smallest limit (around 5 MB) so every platform accepts it, and avoid putting essential text near the edges where a tighter crop could clip it.
Setting Open Graph tags by CMS
Every platform has its own place to set Open Graph tags. Here is where to look on the five most common ones, plus a note on Shopify's ecommerce specifics.
WordPress
An SEO plugin does the work. Yoast, Rank Math, and AIOSEO each add a Social or Open Graph tab to every post and page where you set the social title, description, and image. Yoast and Rank Math also let you set a site-wide default image under their social settings, used for anything you do not override per post. If your links share as a bare URL, the usual cause is that no SEO plugin is active, or the theme prints its own conflicting tags. You can audit your WordPress site to see which pages currently ship no Open Graph tags at all.
Shopify
The theme controls Open Graph output on Shopify. Most modern themes generate og:title, og:description, and og:image from the product, collection, or page fields automatically. Set the Search engine listing on each item and give every product a featured image, since that image is what most themes pass to og:image. Check your theme settings for a default social image used on pages without their own. If a product still shares with no image, open the theme code and confirm the layout outputs the og:image meta from product.featured_image. A full Shopify store audit flags the templates missing tags.
Squarespace
Set the social sharing image and description in each page's SEO panel. A site-wide fallback image lives under Marketing, then Social Sharing. Squarespace writes the Open Graph tags for you once those fields are filled, so the fix is almost always just filling them in rather than editing code. See what your live pages emit with a Squarespace site audit.
Wix
Open a page's SEO settings and use the Social Share tab to set the title, description, and image for Facebook and X separately. Dynamic pages take these from SEO patterns bound to your collection fields, so set the pattern once and every item inherits a unique preview. Run a Wix site audit to catch pages where the Social Share fields were left blank.
Webflow
Set Open Graph fields per static page in Page Settings under the Open Graph heading. For CMS collections, open the collection template's page settings and bind the Open Graph title, description, and image to collection fields so every item gets its own preview instead of a shared default. Because Webflow gives you raw markup, an unbound field silently publishes dozens of items with no tags at once. A Webflow project audit shows exactly which template pages are affected.
How to test your Open Graph tags
Social platforms cache OG data aggressively. After deploying changes, use a validator to confirm the tags are present and correct, then force a fresh scrape where the platform allows it:
- Facebook Sharing Debugger shows exactly what Facebook reads, lists any warnings, and has a Scrape Again button that clears the cache for Facebook, Messenger, and Instagram in one go.
- LinkedIn Post Inspector re-scrapes each time you submit a URL and shows the title, description, and image LinkedIn will use. LinkedIn's own cache clears roughly every seven days.
- X (Twitter) retired its standalone Card Validator, so the reliable test now is to paste the link into a draft post or a direct message to yourself and check the preview that appears before sending.
- AuditZap Open Graph checker fetches the page server-side, the same way a platform does, and reports every core tag that is missing or malformed in one pass. It is the fastest way to confirm a fix before you touch any platform cache.
A few common issues to watch for:
og:imageis a relative URL instead of absolute- Image dimensions are below 600 by 315 (minimum for full-width cards on Facebook)
og:titleorog:descriptionis missing entirely- Tags are rendered by JavaScript rather than server-side HTML
og:urlhas a trailing slash inconsistency with the canonical URL
Cache busting after a change
The most frustrating part of Open Graph work is that platforms cache your preview for days. If you fix a tag and re-share the link, you often still see the old, broken card. The fix is to force a re-scrape rather than wait for the cache to expire.
- On Facebook, paste the URL into the Sharing Debugger and click "Scrape Again". This clears Facebook's cache and refreshes the preview for Messenger and Instagram too.
- On LinkedIn, the Post Inspector re-scrapes automatically each time you submit the URL, and LinkedIn's cache clears roughly every seven days.
- For Slack, Discord, and iMessage, appending a harmless query string (for example
?v=2) makes the platform treat it as a new URL and fetch fresh tags, which is a quick way to preview a change before the real link's cache clears.
Open Graph FAQs
Are Open Graph tags required for SEO?
Not directly. Open Graph tags do not influence your Google rankings. They control how your links look when shared on social and in messaging apps, which drives click-through and referral traffic, so they matter for reach even though they are not a ranking factor.
What are the minimum Open Graph tags I need?
og:title and og:description are the practical minimum for a functional preview. Add og:image and og:url to get a full, well-rendered card with your chosen image and canonical URL.
What size should my og:image be?
Use 1200 by 630 pixels as the default. Stay above 600 by 315 or some platforms show a small thumbnail instead of a full-width card, use an absolute URL, and serve it without a redirect.
Why is my preview still showing the old image?
Platforms cache Open Graph data aggressively. After changing a tag, force a fresh scrape with the Facebook Sharing Debugger or LinkedIn Post Inspector rather than waiting for the cache to expire on its own.
Do I need separate Twitter Card tags?
Not always. X reads standard Open Graph tags as a fallback, so getting those right covers most cases. Add twitter:card set to summary_large_image if you want to guarantee the large-image layout on X specifically.
Why do my Open Graph tags not work at all?
The most common cause is that the tags are added by JavaScript after the page loads. Platforms only read the raw server-rendered HTML and never run your scripts, so the tags must be present in the initial HTML response.
Can I use the same og:image for every page?
You can, and a branded site-wide default is better than no image. But a per-page image almost always earns more clicks, because it can match the specific article or product. A common pattern is a generated image per page (see dynamic OG images above) with a single branded fallback for anything without its own.
Do Open Graph tags work on WhatsApp, iMessage, and Discord?
Yes. WhatsApp, iMessage, Slack, and Discord all read the same Open Graph tags to build their link previews. Discord and Slack respect og:title, og:description, and og:image directly, and appending a harmless query string like ?v=2 is the quickest way to bypass their cache while you test a change.
Open Graph tags are one piece of a healthy page. Once yours are set, a full website audit will check them alongside your titles, meta descriptions, structured data, and Core Web Vitals, and the structured data guide covers the schema that controls how the same pages appear in search.
AuditZap checks every core OG tag on any URL - title, description, image, and URL - and highlights anything missing or malformed before you share the link.