You spend an hour writing a blog post, pick the perfect image, and hit publish. Then someone shares it on Facebook or LinkedIn, and the preview that shows up is... nothing like what you imagined. Maybe there's no image at all. Maybe it grabbed a random logo from your sidebar. Maybe the title is your site's generic tagline instead of the actual headline. This happens constantly, and it's almost never a content problem — it's a missing or broken Open Graph tag.
Open Graph tags are the small pieces of code that control exactly how your page looks when it's shared on social media. Get them right, and your links show up with the image, title, and description you actually chose. Skip them, and you're leaving that entirely up to guesswork by whichever platform is pulling the preview together.
In this guide, we'll cover what Open Graph actually is, how it works behind the scenes, which tags you truly need versus which ones are optional, and the mistakes that quietly break social previews on otherwise well-built websites. If you'd rather skip the manual setup, our
Open Graph Generator builds all the required tags for you in a few seconds.
What Is Open Graph?
Open Graph is a protocol, originally created by Facebook back in 2010, that lets any webpage describe itself to social media platforms in a standardized way. Instead of a platform guessing which image or headline to use when someone shares your link, Open Graph gives it exact instructions: use this title, this description, this image, and treat this page as this type of content.
Today, the open graph protocol is used far beyond Facebook. LinkedIn, Slack, WhatsApp, Discord, Pinterest, and most messaging apps all read Open Graph data to build link previews. It's become the unofficial standard for how the web communicates "here's what this page is about" to any platform that wants to show a preview.
What Are Open Graph Tags?
Open Graph tags, often shortened to "OG tags," are meta tags placed inside a webpage's
<head> section. Each one follows the same basic pattern:
<meta property="og:title" content="Your Page Title" />
The
property attribute tells the platform which piece of information this is (title, description, image, and so on), and the
content attribute holds the actual value. A complete set of open graph meta tags usually includes a title, description, image, URL, and type, though there are many optional ones for more specific use cases.
SEO Tip: Open graph tags don't directly influence Google rankings the way title tags or meta descriptions do, but they strongly influence click-through rate from social platforms, which indirectly drives traffic, engagement, and even backlinks — all things that support your broader SEO efforts.
Why Open Graph Tags Matter for SEO & Social Media
It's easy to assume social meta tags are just a cosmetic detail, but they affect real outcomes:
- Higher click-through rates: A clean preview with a relevant image and clear title earns more clicks than a broken or generic-looking one.
- Brand consistency: You control exactly how your content looks when shared, instead of leaving it to a platform's automatic guesswork.
- More shares: People are more likely to share a link that looks polished and trustworthy in their feed.
- Indirect SEO benefit: More clicks and shares from social platforms often translate into more traffic, more backlinks over time, and stronger overall visibility — even though Open Graph itself isn't a direct Google ranking factor.
- Fewer broken previews: Without proper tags, some platforms pull a random image or an outdated cached title, which can look unprofessional or even misleading.
How Open Graph Works
Here's the process, step by step, whenever someone shares a link: the platform (Facebook, LinkedIn, Slack, and so on) sends a request to fetch your page. It scans the
<head> section for Open Graph meta tags. If it finds them, it uses those exact values to build the preview card. If it doesn't find them, it falls back to guessing — usually grabbing the page's regular title tag, the first image it finds in the content, and a snippet of visible text.
That fallback behavior is exactly why so many sites end up with awkward or incomplete previews. The platform isn't broken; it's just filling in gaps you left open.
How to Generate Open Graph Tags
You have two realistic options: write the tags manually, or generate them instantly with a tool.
Manual method:
- Decide on your page title, description, and image (ideally 1200 x 630 pixels for the image).
- Write each tag following the
og:property format shown earlier.
- Place all tags inside the
<head> section of your HTML.
- Double-check the image URL is absolute (starts with https://), publicly accessible, and not blocked by robots.txt.
Automated method (recommended for most people):
- Open our Open Graph Generator.
- Fill in your title, description, image URL, and page URL.
- The tool formats a complete, properly structured set of open graph meta tags automatically.
- Copy the generated code and paste it into your page's head section, or into your CMS's social sharing settings if it has one.
This approach removes the most common causes of broken previews: missing quotation marks, wrong property names, or an image path that isn't actually a full, working URL.
Open Graph Tag Examples
Here's what a complete, working set of open graph tags looks like for a blog post:
<meta property="og:title" content="10 SEO Tips for New Websites" />
<meta property="og:description" content="Practical, beginner-friendly SEO tips to help new websites start ranking faster." />
<meta property="og:image" content="https://example.com/images/seo-tips-cover.jpg" />
<meta property="og:url" content="https://example.com/blog/seo-tips-new-websites" />
<meta property="og:type" content="article" />
And here's an example for an ecommerce product page, where the type changes to reflect the content:
<meta property="og:title" content="Men's Running Shoes - Blue" />
<meta property="og:description" content="Lightweight, breathable running shoes designed for everyday training." />
<meta property="og:image" content="https://example.com/images/blue-running-shoes.jpg" />
<meta property="og:type" content="product" />
Essential Open Graph Tags
| Tag | What It Does | Required? |
|---|
| og:title | Sets the headline shown in the preview | Yes |
| og:description | Sets the short summary text below the title | Yes |
| og:image | Sets the preview image, ideally 1200x630px | Yes |
| og:url | Confirms the canonical URL of the shared page | Yes |
| og:type | Defines the content type (website, article, product, etc.) | Yes |
Optional Open Graph Tags
These aren't required for a basic preview to work, but they add useful detail depending on your content type:
- og:site_name — displays your website or brand name alongside the preview.
- og:locale — specifies the language and region, useful for multilingual sites.
- og:image:width / og:image:height — tells the platform your image dimensions in advance, which can speed up rendering.
- og:image:alt — provides alt text for the preview image, improving accessibility.
- article:published_time — useful for blog posts and news content, showing publish date data to platforms that support it.
- fb:app_id — connects the page to a specific Facebook app, mainly relevant for larger publishers using Facebook analytics tools.
Open Graph vs Twitter Cards
Open Graph and Twitter Cards solve the same basic problem — controlling how a link looks when shared — but they use separate tag sets, even though X (formerly Twitter) will fall back to reading Open Graph tags if Twitter-specific ones aren't present.
| Aspect | Open Graph | Twitter Cards |
|---|
| Used by | Facebook, LinkedIn, Slack, WhatsApp, Pinterest, and most other platforms | X (formerly Twitter) |
| Tag prefix | og: | twitter: |
| Fallback behavior | Platforms without OG tags guess using the page's own title/image | X falls back to Open Graph tags if Twitter Card tags are missing |
| Recommended image size | 1200 x 630px | 1200 x 628px (summary_large_image) |
Best Practice: Add both Open Graph and Twitter Card tags if you want full control everywhere. Since X reads Open Graph tags as a fallback, adding proper og tags first covers most platforms even before you touch Twitter-specific markup.
Common Open Graph Mistakes
| Mistake | Why It Breaks the Preview |
|---|
| Using a relative image path | Platforms need an absolute URL; relative paths often fail to load entirely |
| Image blocked by robots.txt | The platform can't fetch an image it isn't allowed to crawl |
| Image too small or wrong aspect ratio | Gets cropped awkwardly or rejected by the platform's minimum size requirement |
| Missing og:url tag | Some platforms may cache the wrong canonical link for shares |
| Duplicate or conflicting tags | Multiple og:title tags on one page can confuse which value gets used |
| Forgetting to refresh cached previews | Facebook and LinkedIn cache old previews, so updates don't show until manually re-scraped |
Warning: If you update your Open Graph tags after a page has already been shared, most platforms will keep showing the old cached preview until you force a re-scrape using their debugging tools (like Facebook's Sharing Debugger or LinkedIn's Post Inspector).
Best Practices
- Always use an absolute URL for og:image, never a relative path.
- Keep og:title under roughly 60 characters so it doesn't get cut off on most platforms.
- Keep og:description under roughly 155 characters for the same reason.
- Use a 1200 x 630px image for the widest platform compatibility.
- Set og:type accurately (website, article, product) since some platforms display content differently based on it.
- Test every important page using a social preview debugging tool before sharing it publicly.
- Re-scrape cached previews after any major content or image update.
Expert Advice: For blogs and news sites, set a unique og:image per article instead of reusing one generic site-wide image. Unique, relevant preview images consistently earn higher click-through rates than a repeated logo or banner, since they visually signal what the specific article is actually about.
Frequently Asked Questions
1. What is the correct size for an Open Graph image?
1200 x 630 pixels is the widely recommended size, since it displays cleanly across Facebook, LinkedIn, and most other platforms without awkward cropping.
2. Do Open Graph tags affect Google rankings directly?
No, Open Graph tags aren't a direct Google ranking factor, but the increased clicks, shares, and traffic they generate from social platforms can indirectly support your broader SEO performance.
3. Why does my link preview show the wrong image?
This is usually caused by a missing og:image tag, a relative image path, or a cached preview from before you added the correct tags. Re-scraping the URL with a debugging tool often fixes it.
4. Are Open Graph tags required for every page on my site?
They're not technically required, but any page you expect to be shared on social media — blog posts, product pages, landing pages — benefits significantly from having them.
5. What's the difference between og:type "website" and "article"?
"website" is a general-purpose type for most pages, while "article" is meant specifically for blog posts and news content, and unlocks additional optional tags like published_time.
6. Can I use the same Open Graph tags for every page on my site?
You can, but it's not recommended. Unique titles, descriptions, and images per page create far more relevant, click-worthy previews than one generic set reused everywhere.
7. How do I force Facebook or LinkedIn to update a cached preview?
Use Facebook's Sharing Debugger or LinkedIn's Post Inspector, paste in your URL, and request a re-scrape. This clears the old cached preview and pulls your current tags.
8. Do I need both Open Graph and Twitter Card tags?
It's best practice to include both, since X primarily reads twitter: tags first and only falls back to Open Graph if those are missing, meaning dedicated Twitter tags give you more precise control there.
9. Can Open Graph tags be added to a single-page application (SPA)?
Yes, but it requires extra care, since many crawlers don't execute JavaScript. Server-side rendering or pre-rendering is usually necessary so the tags are present in the initial HTML response.
10. What happens if I don't set an og:description?
The platform will typically fall back to your page's regular meta description or a snippet of visible page text, which may not represent the page as clearly as a custom description would.
11. Is there a character limit for og:title and og:description?
There's no strict enforced limit, but staying around 60 characters for the title and 155 characters for the description avoids truncation on most platforms.
12. Do open graph meta tags work on WhatsApp link previews?
Yes, WhatsApp reads Open Graph tags to build link previews, which is why a properly tagged page shows a clean image and title even in a simple chat app.
Conclusion
Open Graph tags are a small piece of code with an outsized effect on how your content actually performs once it leaves your website. A polished, accurate preview earns more clicks, more shares, and a more professional first impression — while a missing or broken one leaves that entirely to chance.
If you're not sure your pages are set up correctly, generate a complete set of tags with our
Open Graph Generator, paste them into your page's head section, and test the result with a social preview debugging tool before you share it.