You share your newest blog post on LinkedIn. Instead of a preview with a clean image, your headline, and a tight description, you get a broken image icon, the URL as a title, and no description. The link gets two clicks instead of two hundred.
That's what missing or broken Open Graph (OG) meta tags look like in the wild. The fix is technically small, just a handful of HTML tags in your page's <head>, but the impact on social click-through rates is significant.
This guide walks through writing OG meta tags that actually earn the click: which ones are required, how to write each one so it converts, how to design an og:image that stops the scroll, and how to test everything before you publish.
What are OG meta tags (quick refresher)
OG meta tags, short for Open Graph meta tags, are HTML tags that tell social platforms how your page should look when someone shares it. Facebook introduced the Open Graph protocol in 2010, and LinkedIn, Pinterest, Slack, Discord, iMessage, and most other platforms now read the same tags.
Without OG tags, platforms guess. They scrape whatever image they find, pull the first headline, and improvise a description. Sometimes the result is okay. Often it isn't. With OG tags, you control the preview.
The tags live in the <head> section of your HTML, each one in this format:
<meta property="og:title" content="Your page title" />
That's the whole structure. The complexity is in writing content that earns the click.
The 4 required OG meta tags
The Open Graph protocol defines four required tags. Every page you want shareable needs all four. Skip one and platforms will either show a broken preview or fall back to guessing.
og:title
The headline that appears in the preview card. It's the single most important element for click-through.
<meta property="og:title" content="How to Write OG Meta Tags That Earn the Click" />
Often this matches your <title> tag, but it doesn't have to. Your <title> tag is for SEO (Google's results page). Your og:title is for social. The social version can be punchier, more curiosity-driven, less keyword-loaded.
og:type
What kind of content this is. The two values you'll use 99% of the time are website (any general page) and article (blog posts, news, editorial).
<meta property="og:type" content="article" />
When you set og:type to article, you unlock additional metadata tags like article:author, article:published_time, and article:section. More on those below.
og:image
The preview image. This is the visual that determines whether someone stops scrolling. Recommended size: 1200x630 pixels, under 8MB.
<meta property="og:image" content="https://yoursite.com/path-to-your-image.jpg" />
This is where most pages lose. A generic stock photo, a low-res screenshot, or a cropped logo will not earn the click. Designing a high-impact og:image is its own discipline (we cover it below).
og:url
The canonical URL of the page. This tells platforms which URL to credit when the link is shared, especially important if you have multiple versions of the same page (tracking parameters, A/B variants).
<meta property="og:url" content="https://yoursite.com/the-post-slug" />
Always use the clean canonical URL, not the URL with UTM parameters.
How to write OG meta tags step by step
1. Add the tags to the <head> of every page
OG tags live inside the <head> section of your HTML, anywhere between <head> and </head>. They have to be present on the rendered HTML, not just injected by JavaScript after page load, because most social scrapers don't execute JavaScript.
If your site is server-rendered (Next.js, Astro, WordPress with a properly configured theme, Rails, etc.), this is straightforward. If your site is purely client-side rendered (single-page React app with no SSR), you'll need to add server-side rendering for the OG tags to be readable. Frameworks like Next.js handle this for you out of the box.
2. Write og:title content that earns the click
Your og:title has about 60 characters before social platforms truncate it. Use them.
What works:
- Specific over vague: "How to Write OG Meta Tags in 6 Steps" beats "OG Meta Tags Explained"
- Numbers when relevant: "4 OG Tags Every Page Needs" performs better than "OG Tags You Need"
- A curiosity gap or benefit: "Why Your Links Look Broken on LinkedIn" beats "OG Tag Best Practices"
- No clickbait: if the headline overpromises, the bounce rate kills you
The og:title doesn't need to match your <title> tag. Optimize the <title> for search intent and og:title for the scroll.
3. Craft an og:description that closes the loop
The og:description gets 2 to 4 lines below the og:title in most preview cards. Around 150 to 200 characters before truncation.
<meta property="og:description" content="Learn how to write OG meta tags that earn the click. The 4 required tags, what to do with og:image, and how to test before publishing." />
What to include:
- A single sentence summarizing what the reader will get
- A reason to click (a specific benefit, a number, a curiosity hook)
- Action verbs and active voice
What to avoid:
- Stuffing keywords (this is for humans, not search engines)
- Repeating the og:title verbatim
- Cliff-hangers that feel manipulative
4. Design a high-impact og:image
An og:image makes or breaks the preview. The visual is the first thing the eye lands on, often before the title.
Specs:
- Size: 1200x630 pixels (1.91:1 aspect ratio)
- File size: under 8MB, ideally under 1MB for fast loading
- Format: JPEG (smaller file) or PNG (sharper for text-heavy designs)
- Safe zone: keep critical content within the center 1080x540 area, because some platforms crop
What works in og:images:
- The article headline rendered as bold typography over a branded background
- A clear product screenshot or hero visual with a tagline
- High contrast, no busy backgrounds, type readable at thumbnail size
- Consistent template across your site (builds brand recognition over time)
What doesn't work:
- A logo by itself (no context, no hook)
- A generic stock photo with no overlay
- A screenshot of the page itself (looks lazy)
- Type smaller than 36pt at the source resolution (unreadable when scaled down)
For more on the visual side, our guide to Open Graph image sizes for social media breaks down the exact specs for every platform.
Designing a custom og:image for every post used to mean either templating in Figma or hand-designing each one. AI design tools shortcut this. Krumzi generates a custom 1200x630 og:image from a short prompt, on-brand, fully editable, in seconds. For a 50-post blog, that's the difference between 50 hours of design work and 50 minutes.
5. Set og:url to the canonical URL
Always use the clean URL with no query parameters, no UTM tags, no anchor fragments.
<meta property="og:url" content="https://yoursite.com/blog/og-meta-tags" />
If you serve the same page at multiple URLs (with and without trailing slash, with and without www, with tracking parameters), pick one and use it consistently in og:url. This consolidates social signals to a single canonical version.
6. Add platform-specific tags (Twitter Cards, Article tags)
The four required OG tags cover the basics. To squeeze more out of specific platforms, add these.
Twitter Card tags (for X/Twitter):
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />
Without these, X falls back to OG tags but may use a smaller card layout. Setting summary_large_image gives you the full-width preview most marketers want.
Article tags (when og:type is article):
<meta property="article:author" content="Jane Doe" />
<meta property="article:published_time" content="2026-05-20T10:00:00Z" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="open graph" />
These are picked up by Facebook, LinkedIn, and other platforms for richer previews.
A complete OG meta tag example you can copy
Drop this into the <head> of any blog post and replace the values:
<!-- Open Graph -->
<meta property="og:title" content="How to Write OG Meta Tags That Earn the Click" />
<meta property="og:description" content="Learn how to write OG meta tags. The 4 required tags, copy-paste examples, og:image specs, and how to test before publishing." />
<meta property="og:image" content="https://yoursite.com/og/og-meta-tags.jpg" />
<meta property="og:url" content="https://yoursite.com/blog/how-to-write-og-meta-tags" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="How to Write OG Meta Tags That Earn the Click" />
<meta name="twitter:description" content="The 4 required tags, copy-paste examples, og:image specs, and how to test." />
<meta name="twitter:image" content="https://yoursite.com/og/og-meta-tags.jpg" />
<!-- Article -->
<meta property="article:author" content="Author Name" />
<meta property="article:published_time" content="2026-05-20T10:00:00Z" />
How to test your OG tags before publishing
Never ship OG tags without testing them. Here are the three tools every marketer and developer should bookmark:
- Meta's Sharing Debugger: paste your URL, see the Facebook/Instagram preview. Forces a re-scrape if you've updated tags after the platform cached them.
- X/Twitter Card Validator: now part of the X developer portal, shows how your link appears on X.
- LinkedIn Post Inspector: paste your URL, see the LinkedIn preview. Also forces a cache refresh.
Run all three before announcing a launch or sharing a high-stakes post. A 30-second test prevents a broken preview going to 10,000 people.
Common OG meta tag mistakes that kill click-through
- Forgetting og:image entirely. The single biggest CTR killer. A preview with no image gets a tiny fraction of the clicks.
- Using a low-resolution og:image. Anything under 600x315 may not render at all on some platforms.
- Setting og:url with tracking parameters. Use the clean canonical URL.
- Different content in
<title>and og:title. Sometimes intentional, but if it's accidental, the social preview will look mismatched. - Caching old previews. When you update tags, platforms cache the old version. Use the debuggers above to force a refresh.
- Injecting tags only via client-side JavaScript. Most scrapers don't execute JS. Tags must be in the server-rendered HTML.
How OG tags fit into a broader SEO strategy
OG tags don't directly affect Google rankings. They do indirectly drive social shares, which generate traffic and brand signals that Google sees. A page that gets shared widely on LinkedIn and X usually earns more backlinks, more direct traffic, and more brand searches, all of which feed back into search performance.
If you're thinking holistically about how visuals drive social traffic, our guide on driving website traffic with video content on social media covers the broader picture.
Frequently Asked Questions
Are OG meta tags required for SEO?
Not directly. Google doesn't use OG tags as a ranking signal. They do indirectly help SEO by driving social shares and traffic, which generate the kinds of brand signals Google rewards. Practically speaking, every modern website should have them.
What happens if I don't set OG tags?
Social platforms will guess. They'll scrape whatever image they find on the page (often a logo or the first content image), use the <title> tag for the headline, and pull the meta description for the description. Sometimes it works. Often the result is a broken or unflattering preview that depresses click-through rates by 30 to 70% compared to a properly tagged page.
Can I have different OG tags for Facebook and Twitter?
Yes. Twitter has its own card protocol (twitter:title, twitter:description, twitter:image), and platforms will use those over OG tags when present. This is useful when you want to optimize copy or imagery for a specific audience. If you set only OG tags, X falls back to those.
How often should I update my OG tags?
Update them whenever the page content changes meaningfully: a major rewrite, a new headline, a new featured image, a date refresh. After updating, run the page through Facebook's Sharing Debugger and LinkedIn's Post Inspector to force a cache refresh so platforms pick up the new tags.
Get started
Good OG tags are the cheapest CTR boost in marketing. A 30-minute audit of your site can lift social click-through rates by double digits.
The four-tag minimum (og:title, og:type, og:image, og:url) is the floor. The og:image is the ceiling. If you want the design half of that handled fast, Krumzi generates a custom 1200x630 og:image from a short prompt, on-brand, editable, ready to drop into your <head>.
Facebook
X
LinkedIn
