Open Graph Tags for Blogs: The CMS Guide to Social Sharing
6 OG tags, Twitter cards, image specs, and testing tools.
A blog post without Open Graph tags is invisible on social media. Someone shares your URL on LinkedIn, and the preview is a blank card — no image, no title, just a raw link that nobody clicks. You wrote something worth reading, but the platform never gave it a chance.
Open Graph tags fix that. They're the small HTML snippets that tell Facebook, LinkedIn, X (formerly Twitter), and Slack what to show when your URL is shared. This guide covers exactly which tags you need, what they should say, how to test them, and what your CMS should be handling automatically.
TL;DR: Six OG tags do most of the work — og:title, og:description, og:image, og:type, og:url, and og:site_name. Add Twitter card tags on top. Your featured image should be 1200×630px. Test with the OpenGraph.xyz tool before publishing. A good CMS renders all of this for you automatically from your post's existing SEO fields.
What Are Open Graph Tags?
Open Graph is a protocol created by Facebook (now Meta) in 2010. It uses <meta> tags in your page's <head> to define how your content appears when shared on social platforms.
<meta property="og:title" content="Your Post Title Here" />
<meta property="og:description" content="A clear summary of what this post is about." />
<meta property="og:image" content="https://yoursite.com/images/post-cover.jpg" />
When someone pastes your URL into a social post, the platform's crawler reads these tags and builds a preview card. Without them, platforms guess — and they usually guess wrong.
The Open Graph protocol is now used far beyond Facebook. LinkedIn, Slack, Discord, WhatsApp, iMessage, X, and most modern apps all read OG tags when generating link previews. A single set of well-written tags makes your content look professional everywhere.
The 6 OG Tags Every Blog Post Needs
These six tags are the minimum for a correct social preview. Every blog post you publish should have all six.
1. og:title
The headline shown in the preview card. Keep it under 60 characters — most platforms truncate beyond that.
<meta property="og:title" content="Open Graph Tags for Blogs: The CMS Guide to Social Sharing" />
This can match your <title> tag or be a slightly different version written specifically for social. If your page title includes a brand suffix like "| YourSite", consider dropping it from the OG title — the preview card has limited space.
2. og:description
The short description below the title. Aim for 120–155 characters. This isn't a meta description repeat — write it to entice clicks from a social feed, not to satisfy search engines.
<meta property="og:description" content="Six OG tags, Twitter card setup, image sizing, and testing tools — everything you need for better social previews from your blog." />
Strong OG descriptions are specific, not vague. "Learn about Open Graph" converts worse than "Six tags that make your blog posts look good on LinkedIn and X."
3. og:image
The image shown in the preview. This is the most important tag. A good image gets clicks. A missing image makes your link invisible.
<meta property="og:image" content="https://yoursite.com/storage/posts/open-graph-guide.webp" />
Specs matter here — see the "OG Image Problem" section below for exact dimensions and formats.
4. og:type
Tells platforms what kind of content this is. For blog posts, use article. For your homepage or other pages, use website.
<meta property="og:type" content="article" />
When you set og:type to article, you can also add article-specific properties like article:published_time and article:author for richer previews on platforms that support them.
5. og:url
The canonical URL of the page. This matters when your content is accessible at multiple URLs (www vs non-www, trailing slashes, UTM parameters). It tells crawlers which URL to treat as the source.
<meta property="og:url" content="https://yoursite.com/blog/open-graph-tags-for-blogs/" />
Always use the full URL including HTTPS. Never use a relative path here.
6. og:site_name
Your brand name. This appears in smaller text on some platforms, usually below the title. It reinforces who you are.
<meta property="og:site_name" content="UnfoldCMS" />
Set this once at the site level — it shouldn't change per post.
Twitter / X Card Tags
Twitter (now X) developed its own card system that runs in parallel with Open Graph. When an X card tag is present, X uses it. When it's absent, X falls back to OG tags — but the fallback rendering is often worse.
The core tags you need:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Open Graph Tags for Blogs: The CMS Guide" />
<meta name="twitter:description" content="Six OG tags, image specs, testing tools, and common mistakes." />
<meta name="twitter:image" content="https://yoursite.com/storage/posts/open-graph-guide.webp" />
Note the difference in syntax: Twitter uses name= not property=. They're separate meta tag attributes.
Which card type to use? summary_large_image shows a big image above the text, which gets significantly more clicks than summary (small thumbnail on the left). Use summary_large_image for every blog post. summary is fine for brief link updates where the image doesn't matter.
You can optionally add:
<meta name="twitter:site" content="@YourHandle" />
<meta name="twitter:creator" content="@AuthorHandle" />
These don't change the visual much, but they're good practice for attribution and verification.
The OG Image Problem: Size, Format, and What Actually Renders
The OG image is where most blogs fail. Either the image is missing, too small, or the wrong dimensions — and the result is a squished, cropped, or blank preview.
Recommended size: 1200×630 pixels (1.91:1 ratio)
This is the spec that Facebook, LinkedIn, and X all accept correctly. Anything smaller than 600×315 will likely not display at all on some platforms.
Format: WebP is fine for modern platforms. JPEG works everywhere. PNG works but produces larger files. Avoid GIFs for OG images — they won't animate on most platforms and just add file size.
File size: Keep it under 1MB. Under 300KB is better. Platforms cache these, but a slow initial fetch can cause the preview to show blank. Compress your images.
What renders well: High contrast, large text if you include it, faces (they attract attention), and clean backgrounds. Dark images with thin white text often read as black squares on mobile.
What doesn't work: Tiny logos, screenshots with lots of detail that vanishes at preview size, text-heavy images with small fonts, and transparent backgrounds (PNG transparency becomes black on some platforms).
The short rule: if you can't read it on a business card, you can't read it in a social preview.
How to Test Your OG Tags
Always test before you publish. Here are the tools:
OpenGraph.xyz
The fastest option. Paste your URL and see what each major platform shows. It fetches your OG tags live and renders platform-accurate previews side by side. Also shows you the raw meta tags it found.
URL: opengraph.xyz
LinkedIn Post Inspector
LinkedIn's official tool. Fetches your page and shows exactly how it'll appear in a LinkedIn feed. Also lets you force LinkedIn to re-scrape your URL — useful after fixing bad OG tags.
URL: linkedin.com/post-inspector
Facebook Sharing Debugger
Meta's tool shows what Facebook will render and flags errors like missing tags or wrong image dimensions. It also clears Facebook's cache when you update tags.
URL: developers.facebook.com/tools/debug
X (Twitter) Card Validator
Twitter's validator shows the card preview and reports any warnings. Available in the X developer portal.
Testing workflow: Publish to a draft or staging URL first, test with OpenGraph.xyz, fix any issues, then publish the real URL. Once a URL is shared on social platforms, their caches hold the old preview for hours. Getting it right first is easier than clearing caches later.
Common OG Mistakes
Missing og:image
The most common error. You have title and description tags but forgot the image. The result is a plain text link with no visual preview. On mobile feeds, it's nearly invisible.
Fix: Make sure every published post has an image attached and that your CMS generates the og:image tag automatically from it.
Image Too Small
An image must be at least 600×315px for most platforms to display it. Under that threshold, you get the same result as no image. Above 1200×630px is wasted bandwidth — platforms downscale but don't upscale.
Description Over 200 Characters
Most platforms cut off the description around 150–200 characters. Writing a 300-character OG description means readers see a truncated sentence ending with "..." — which reads as incomplete and unprofessional.
Wrong og:type
Using website instead of article for blog posts means you lose the article-specific enrichments (published date, author). Minor, but easy to fix.
Mismatched URL and Canonical
If your og:url points to a different URL than your <link rel="canonical">, platforms may cache two different versions of your preview. Always keep them the same.
Stale Cache After Updates
Updated your OG image but the old one still shows? That's the platform's cache. You need to use the Facebook Sharing Debugger or LinkedIn Post Inspector to force a re-scrape. You can't clear it by just republishing.
JSON-LD Article Schema vs OG Tags: Different Jobs
These two are often confused because they both describe your content. But they serve completely different purposes.
| OG Tags | JSON-LD Article Schema | |
|---|---|---|
| Read by | Social platforms (Facebook, LinkedIn, X) | Search engines (Google, Bing) |
| Purpose | Generate social preview cards | Eligible for rich results in search |
| Format | <meta> tags in <head> |
<script type="application/ld+json"> in <head> |
| Required for | Good social sharing | Search rich results (sitelinks, article blocks) |
OG tags make your posts look good on social. JSON-LD Article schema helps your posts appear in Google's rich results — article carousels, recipe cards, FAQ boxes — and feeds AI systems like Google's AI Overviews.
You need both. One doesn't replace the other.
For a deeper look at JSON-LD setup, see JSON-LD Structured Data for Blogs — it covers the full Article schema, Author entity, and FAQ markup that Google uses for rich result eligibility.
How UnfoldCMS Handles OG Tags
For developers evaluating a CMS, here's what to look for in OG tag handling — and what UnfoldCMS does in practice.
UnfoldCMS renders og:title, og:description, og:image, og:type, and og:url automatically in the <head> of every post. The values come directly from the post's SEO fields:
- og:title → comes from the
seo_titlefield in the database - og:description → comes from the
meta_descfield - og:image → comes from the featured image (Spatie Media Library,
featured-imagecollection), served atlargeconversion size
Twitter card tags (twitter:card, twitter:title, twitter:description, twitter:image) are also rendered alongside the OG tags, using summary_large_image format.
JSON-LD Article schema is auto-rendered via schema_article() — no manual markup needed per post.
The practical benefit: once you set your SEO title, meta description, and featured image in the admin, all social previews work automatically. You don't write any meta tag HTML by hand. Check the full feature list for more about how UnfoldCMS manages on-page SEO.
If you're running your own CMS or a static site, you'll need to build this yourself — or pick a CMS that handles it. See our CMS SEO checklist to evaluate what your current setup is missing.
FAQ
Do OG tags affect SEO rankings?
Not directly. Google doesn't use OG tags as a ranking factor. But they affect click-through rates on social media, which drives traffic, which can indirectly improve ranking signals. Rich social previews also increase branded search after someone sees your shared post.
Should og:title be exactly the same as my page title?
Not necessarily. Your page title might have a brand suffix ("| YourSite") that wastes characters on a preview card. Your OG title can be a shorter, punchier version — same topic, slightly different angle. Keep both under 60 characters.
What happens if I don't set OG tags at all?
Platforms fall back to guessing. They might pick the first image on the page (often a logo or something random), the first paragraph of text, or just show a plain link. The result is inconsistent and usually much less compelling than a proper OG setup.
Can I set different OG images per post?
Yes — and you should. Using the same image for every post means every shared link looks identical. A per-post featured image that becomes the og:image is the right setup. That's what most well-built CMS platforms do, including UnfoldCMS.
How often should I re-test my OG tags?
After any significant template change, after updating your image CDN or domain, and whenever you update a post that was previously shared widely. Platforms cache aggressively — force a re-scrape using the debugger tools mentioned above.
What to Do Next
Start with the audit: pick your last 5 published posts and paste each URL into OpenGraph.xyz. Note which ones have a missing image, a truncated title, or no description. Those are your immediate fixes.
Then make sure your CMS handles OG tags automatically going forward. Manually adding meta tags to every post doesn't scale — the first time you forget, a shared link underperforms. Your CMS should render og:title, og:description, og:image, og:type, og:url, and twitter:card from your existing fields with no extra work per post.
For the full SEO picture beyond OG tags, the blog post SEO checklist walks through 20 checks worth running before each publish — from heading structure to internal linking to image alt text. And if you're setting up your XML sitemap alongside this, the XML sitemap guide for 2026 covers what still matters and what Google has mostly stopped caring about.
If you're evaluating CMS platforms for your blog, explore UnfoldCMS's SEO features — built-in OG rendering, Twitter cards, JSON-LD schema, and XML sitemaps are all handled automatically.
Author: Hamed Pakdaman — builder of UnfoldCMS, a Laravel-based CMS focused on developer experience and clean SEO defaults.
Free & Open Source
Own your CMS. No subscriptions.
Unfold CMS is free to download and self-host. Built on Laravel + React, full source code included.
Share this post:
