If you've ever opened a page's source code and seen a cluster of tags starting with "og:", you've run into Open Graph meta tags without necessarily knowing what they do. They look like ordinary meta tags, sitting quietly in the head section, but they're doing something specific: controlling exactly what shows up when that page gets shared on Facebook, LinkedIn, Slack, WhatsApp, or almost any other platform with a link preview.
This guide breaks down the syntax itself, walks through a full working HTML example, and explains each core tag individually — og:title, og:description, og:image, og:url, and og:type — along with the image sizing rules that trip up more people than you'd expect. We'll also cover how to actually test your tags before you rely on them, and the errors that quietly break previews on otherwise solid websites. If you'd rather generate a complete, correctly formatted set instantly, our
Open Graph Generator builds them for you in seconds.
What Are Open Graph Meta Tags?
Open Graph meta tags are a specific set of meta tags, defined by the open graph protocol, that describe a webpage's title, description, image, type, and URL in a format that social platforms can read automatically. Instead of a platform scraping your page and guessing what matters, these tags hand it the exact information directly.
They live inside your page's
<head> section, alongside your regular SEO meta tags, but they serve a different audience — social sharing tools rather than search engine ranking algorithms.
Open Graph Meta Tag Syntax
Every Open Graph meta tag follows the same basic structure:
<meta property="og:PROPERTY_NAME" content="VALUE" />
Two things matter here. First, it's
property, not
name, unlike standard HTML meta tags — this is a common source of errors, since people copy the format of a regular meta tag out of habit. Second, the value inside
content should never include unescaped quotation marks, line breaks, or HTML — keep it as clean, plain text.
Common Mistake: Writing <meta name="og:title" ...> instead of <meta property="og:title" ...>. Platforms that strictly follow the Open Graph protocol will ignore a tag using the wrong attribute, even though the tag looks correct at a glance.
Complete HTML Example
Here's a full, working set of open graph meta tags for a blog post, exactly as you'd place it inside the head section:
<head>
<meta property="og:title" content="How to Speed Up Your Website in 2026" />
<meta property="og:description" content="Practical, no-fluff steps to improve page speed and Core Web Vitals." />
<meta property="og:image" content="https://example.com/images/speed-guide-cover.jpg" />
<meta property="og:url" content="https://example.com/blog/speed-up-website-2026" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Blog" />
</head>
This is enough for a properly formatted preview on nearly every major platform. Everything beyond this — image dimensions, locale, alt text — is refinement, not a requirement.
og:title Explained
og:title sets the headline shown in the preview card. It doesn't have to match your page's regular
<title> tag exactly, though it usually should for consistency. Keep it close to 60 characters so it doesn't get cut off, and make it specific — "How to Speed Up Your Website in 2026" earns more clicks than a vague "Blog Post."
og:description Explained
og:description is the short summary text shown just below the title in most previews. Aim for around 155 characters. Think of it the same way you'd think of a meta description for search results — it should tell someone exactly what they'll get if they click, without repeating the title word for word.
og:image Explained
og:image sets the preview image. This is the single most important tag for grabbing attention in a crowded social feed, and it's also the tag most likely to break due to a small technical mistake. The URL must be absolute (starting with https://), publicly accessible without login, and not blocked by robots.txt.
og:url Explained
og:url confirms the canonical URL of the page being shared. This matters more than it looks — if this tag is missing or pointing to the wrong URL, some platforms may cache the preview under an unintended link, which can cause confusing behavior if the page later moves or gets a cleaner URL.
og:type Explained
og:type tells the platform what kind of content this is — common values include "website," "article," and "product." This isn't just cosmetic. Setting it to "article" unlocks additional optional tags, like published date, that some platforms display alongside the preview. Setting it to "product" can trigger different rendering on platforms that support ecommerce-specific previews.
Open Graph Image Size Guide
| Use Case | Recommended Size | Notes |
|---|
| General / Facebook / LinkedIn | 1200 x 630px | Widest compatibility across most platforms |
| Minimum accepted (Facebook) | 600 x 315px | Below this, some platforms reject or shrink the image awkwardly |
| Square format (some chat apps) | 1200 x 1200px | Useful as a fallback for apps that crop to a square thumbnail |
| File size | Under 8MB | Smaller files load and cache faster across platforms |
Best Practice: Stick to a 1.91:1 aspect ratio (like 1200 x 630px) as your default. It's the one size that renders cleanly across the widest range of platforms without cropping out important parts of the image.
Facebook Open Graph Debugger
Facebook's Sharing Debugger is the standard tool for checking exactly what Facebook sees when it reads your Open Graph tags. Paste in a URL, and it shows you the title, description, and image it detected, along with any warnings about missing or malformed tags. It's also the tool you use to force a re-scrape after updating your tags, since Facebook caches previews and won't refresh them automatically just because you changed the underlying code.
How to Test Open Graph Tags
Before assuming your tags are working, run through this quick verification process:
- View your page's source code and confirm each og: tag is present with the correct property/content structure.
- Paste the page URL into Facebook's Sharing Debugger to see exactly what it detects.
- Check LinkedIn's Post Inspector separately, since it caches previews independently from Facebook.
- Send the link to yourself on WhatsApp or Slack to see a real-world preview in a messaging context.
- If anything looks wrong, fix the tag, then use the debugging tool's "scrape again" option rather than waiting for the cache to expire naturally.
Common Errors
| Error | Cause |
|---|
| Preview shows no image | og:image missing, using a relative path, or blocked by robots.txt |
| Wrong title or description shown | Tags missing, or platform is showing a stale cached version |
| Image looks cropped or stretched | Image doesn't match the recommended 1.91:1 aspect ratio |
| Preview doesn't update after edits | Platform is showing a cached version; needs a manual re-scrape |
| Tags ignored entirely | Used "name" instead of "property" in the meta tag |
Best Practices
- Use property="og:..." syntax exactly, never name="og:...".
- Always use absolute URLs for both og:url and og:image.
- Match og:image to a 1.91:1 aspect ratio, ideally 1200 x 630px.
- Write a unique og:title and og:description per page, rather than reusing one generic set site-wide.
- Set og:type accurately based on the actual content of the page.
- Test with a real debugging tool before assuming a preview works correctly.
- Force a re-scrape after any meaningful content or image change.
Expert Advice: If your site generates pages dynamically (through a CMS or JavaScript framework), make sure the og: tags are present in the actual HTML response the crawler receives — not injected later by client-side JavaScript. Most social platform crawlers don't execute JavaScript, so tags added that way are often invisible to them entirely.
FAQs
1. What's the difference between og:title and the regular HTML title tag?
The HTML
<title> tag controls what shows in the browser tab and search results, while og:title controls what shows specifically in social media link previews. They can match, but they don't have to.
2. Can I use a GIF as my og:image?
Most platforms accept GIFs, but they'll typically display only a static frame in the preview rather than animating it, so a standard JPG or PNG is usually a safer, more predictable choice.
3. Do I need og:image:width and og:image:height?
They're optional, but including them can help some platforms render the preview slightly faster, since they don't need to calculate the image dimensions themselves.
4. Why does my Open Graph image look fine on LinkedIn but broken on Facebook?
Different platforms cache and validate images independently, and they may enforce slightly different minimum size or aspect ratio rules, so an image passing on one platform can still get rejected or cropped oddly on another.
5. Is og:url the same as my canonical tag?
They serve different purposes but should usually point to the same URL. The canonical tag tells search engines which version to index, while og:url tells social platforms which URL to associate with the shared preview.
6. What og:type should I use for a homepage?
"website" is the standard choice for a homepage or general landing page, reserving "article" and "product" for more specific content types.
7. Can I have multiple og:image tags on one page?
Yes, the Open Graph protocol technically allows multiple image tags, and some platforms will let users choose between them, though most will just default to the first one listed.
8. Why isn't my updated og:description showing up after I changed it?
This is almost always a caching issue. Use the platform's debugging tool to force a fresh scrape rather than waiting for the cache to expire on its own.
9. Do Open Graph meta tags work the same way on mobile apps as they do on desktop browsers?
Yes, the underlying tags are identical — mobile apps like the Facebook or LinkedIn apps read the same og: tags from the page's HTML as their desktop counterparts.
10. Is there a tool that checks all my Open Graph tags at once?
Yes, Facebook's Sharing Debugger and LinkedIn's Post Inspector both show a full breakdown of detected tags, and many general SEO auditing tools include Open Graph checks as part of a full site crawl.
Conclusion
Open Graph meta tags follow a simple, consistent syntax, but the details — property versus name, absolute URLs, correct image sizing, cache refreshing — are exactly where small mistakes quietly break an otherwise well-built page. Once you understand what og:title, og:description, og:image, og:url, and og:type are each responsible for, writing them correctly (or generating them instantly) becomes straightforward.
If you'd rather skip typing out the syntax by hand, build your next set of tags with our
Open Graph Generator, then confirm everything renders correctly with a debugging tool before you share the page.