OG Meta Tags Guide: Fix Link Previews & Boost Clicks (2025)

Have you ever shared a link on Facebook or LinkedIn, only to see a broken image, the wrong title, or no preview at all?

That's an OG meta tag problem. When your link previews look bad, people scroll past. When they look professional--with the right image, title, and description--your click-through rates improve, trust goes up, and more people engage with your content.

OG meta tags (Open Graph tags) are tiny snippets of code you add to your website's HTML. They tell social platforms exactly what to show when someone shares your page. Without them, platforms guess--and they often get it wrong.

In this guide, you'll learn which OG tags you actually need, how to choose the right image sizes, how to test your previews, and how to use ToolPoint's free OG Meta Generator to create perfect tags in seconds.

What are OG meta tags (Open Graph) in plain English?

Open Graph meta tags are lines of HTML code that describe your webpage to social platforms. When someone shares your link on Facebook, LinkedIn, Slack, or WhatsApp, these platforms read your OG tags to build a preview card.

Without OG tags, platforms pick random images, use incomplete titles, or show nothing at all. With proper OG tags, you control exactly what people see--which means better engagement and more clicks.

The Open Graph protocol was created by Facebook (now Meta) in 2010. Today, almost every major platform uses it: LinkedIn, Pinterest, Discord, iMessage, and more.

Think of OG tags as instructions you give to social platforms: "When someone shares this page, show this image, this title, and this description."

The 4 OG tags you MUST have (and why)

These four tags are required for proper link previews:

1. og:title

The headline that appears in the preview. Keep it under 60 characters so it doesn't get cut off.

<meta property="og:title" content="Your Page Title Here" />

2. og:type

Tells platforms what kind of content this is. Use website for most pages, article for blog posts.

<meta property="og:type" content="website" />

3. og:image

The preview image URL. This must be an absolute HTTPS URL, not a relative path.

<meta property="og:image" content="https://example.com/tools/images/preview.jpg" />

4. og:url

The canonical URL of the page. Should match your actual page URL.

<meta property="og:url" content="https://example.com/page" />

Recommended optional tags

These aren't required, but they improve your previews:

Tag	Purpose	Example
og:description	Short summary (under 200 chars)	A quick overview of what the page offers
og:site_name	Your brand/site name	ToolPoint
og:locale	Language and region	en_US
og:image:alt	Accessibility text for image	Photo of person using laptop
og:image:width	Image width in pixels	1200
og:image:height	Image height in pixels	630

og:description
og:site_name
og:locale
og:image:alt
og:image:width
og:image:height

Adding these tags makes your previews more complete and accessible. You can generate all of them quickly with ToolPoint's Meta Tag Generator.

Table 1: Required vs Optional OG Tags

Tag	Status	Why it matters
og:title	Required	Controls headline in preview
og:type	Required	Tells platform content type
og:image	Required	The preview image people see
og:url	Required	Canonical link to your page
og:description	Optional	Adds context below title
og:site_name	Optional	Shows your brand name
og:locale	Optional	Language/region targeting
og:image:alt	Optional	Accessibility + context
og:image:width	Optional	Helps platforms render faster
og:image:height	Optional	Prevents layout shift

og:title
og:type
og:image
og:url
og:description
og:site_name
og:locale
og:image:alt
og:image:width
og:image:height

Open Graph vs Twitter/X Cards: do you need both?

Short answer: Yes, add both for best results.

Most platforms (Facebook, LinkedIn, Slack, WhatsApp, iMessage) read Open Graph tags. Twitter/X primarily uses its own twitter:* tags, but it will fall back to OG tags if Twitter Card tags are missing.

Fallback behavior

If you only add OG tags, Twitter/X will use them--but you lose control over card type and some formatting options. If you add both OG and Twitter Card tags, X uses the Twitter tags and ignores OG.

Best practice

Add both sets of tags. It's a few extra lines of code, but you get full control over how your links look on every platform.

For most pages, use summary_large_image as your Twitter Card type. This shows a big image preview, which gets more engagement than the smaller summary card.

Open Graph tags (complete example)

Paste this in your <head> section and update the content values:

<!-- Open Graph meta tags -->
<meta property="og:title" content="Your Page Title - Clear and Descriptive" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:image" content="https://example.com/tools/images/preview-image.jpg" />
<meta property="og:description" content="A brief description of what this page offers. Keep it under 200 characters for best results." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:alt" content="Descriptive text of what the image shows" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter/X Card tags (complete example)

Add these right after your Open Graph tags:

<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title - Clear and Descriptive" />
<meta name="twitter:description" content="A brief description of what this page offers. Keep it under 200 characters." />
<meta name="twitter:image" content="https://example.com/tools/images/preview-image.jpg" />
<meta name="twitter:image:alt" content="Descriptive text of what the image shows" />

Note: Twitter/X accepts JPG, PNG, WEBP, and GIF formats. Avoid SVG for twitter:image--it won't display properly.

You can generate both sets of tags instantly using ToolPoint's OG Meta Generator, which includes Twitter Card tags automatically.

Platform image specs: pick an image that won't get cropped

Different platforms crop images differently. Here's a safe-default table based on current platform behavior. Always verify platform limits before publishing, as specs can change.

Table 2: Platform Preview Image Specs (Safe Defaults)

Platform	Recommended ratio	Safe recommended size	File notes
Meta/Facebook	1.91:1	1200x630px	Keep under 8MB; use JPG or PNG
LinkedIn	1.91:1	1200x627px	Avoid images under 200px wide
X (Twitter)	2:1 or 1.91:1	1200x600px or 1200x630px	Use summary_large_image; under 5MB; no SVG
Pinterest	2:3 (portrait)	1000x1500px	Taller images perform better
WhatsApp	1.91:1	1200x630px	Follows OG tags; keep file size reasonable
Slack	1.91:1	1200x630px	Follows OG tags
Discord	1.91:1	1200x630px	Follows OG tags

2:1 or 1.91:1
2:3 (portrait)

Safe universal default: Use
1200x630px (1.91:1 ratio) for most pages. This works well across Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, and Discord.

If your image file is too large, it can slow down your page. Use ToolPoint's Image Resizer to compress and resize images before uploading.

How to use ToolPoint's OG Meta Generator (step-by-step)

ToolPoint's OG Meta Generator creates complete OG and Twitter Card tags in under 2 minutes. Here's how:

Step 1: Open the tool

Go to https://toolpoint.site/tools/seo/og-meta-generator

Step 2: Add title, description, URL, and image URL

Fill in the basic fields:

Title: Your page headline (under 60 characters)

Description: Brief summary (under 200 characters)

URL: Your page's full URL (e.g., https://example.com/page)

Image URL: Absolute HTTPS link to your preview image

Step 3: Choose og:type

Select website for most pages or article for blog posts.

Step 4: Add site_name and locale if needed

Optional fields:

Site name: Your brand or website name

Locale: Language code (e.g., en_US)

Step 5: Generate tags

Click the generate button. The tool creates both Open Graph and Twitter Card tags.

Step 6: Copy into your <head>section

Copy the generated code and paste it between your <head> and </head> tags in your HTML.

Step 7: Publish your page

Save and publish your changes.

Step 8: Test previews

Use platform-specific testing tools (see Testing section below) to verify your previews look correct.

Step 9: Re-test after updates

If you change your image or title later, re-test. Platforms cache previews, so you may need to manually refresh them.

Pro tips for perfect OG tags

Use absolute HTTPS image URLs: Always include the full URL (https://example.com/tools/image.jpg), not a relative path (/tools/image.jpg).
Use a dedicated OG image per important page: Generic images get ignored. Create custom preview images for key landing pages and blog posts.
Keep title and description readable, not keyword-stuffed: Write for humans first. Your preview should be clear and compelling.
Add og:image:alt for accessibility: Helps screen readers and provides fallback context if the image doesn't load.
Add og:url that matches your canonical URL: Should match the URL you set in your Canonical URL Generator to avoid duplicate content issues.
Avoid blocking crawlers from fetching images: Check your robots.txt file. If you block social crawlers from accessing your images folder, previews will break.
Don't use SVG for twitter:image: Twitter/X doesn't support SVG in Card images. Use JPG, PNG, WEBP, or GIF instead.
Keep images compressed so pages remain fast: Large image files slow down page speed. Run a Page Speed Test after adding OG images to check performance.

Testing and troubleshooting

Platforms cache link previews for performance. If you update your OG tags and the preview doesn't change, it's likely a caching issue.

How to test your OG tags

Facebook/Meta: Use Facebook Sharing Debugger

LinkedIn: Use LinkedIn Post Inspector

Twitter/X: Use Twitter Card Validator

Each tool shows what the platform sees and lets you manually refresh the cached preview.

Table 3: Common Issues Fix

Issue	What you see	Likely cause	Fix
Wrong image appears	Random or old image in preview	Missing og:image or incorrect URL	Add og:image with absolute HTTPS URL; verify image is publicly accessible
Old preview persists	Updated tags but preview hasn't changed	Platform cached old version	Use platform debugger tools to manually refresh cache
No image appears	Preview shows title/description but no image	Image blocked by robots.txt or wrong format	Check robots.txt; ensure image is JPG, PNG, WEBP, or GIF; verify HTTPS
Cropped image	Important parts of image cut off	Wrong aspect ratio for platform	Resize image to 1200x630px (1.91:1) using Image Resizer
Multiple images picked randomly	Platform shows different images each time	Multiple og:image tags or no explicit og:image	Keep only one og:image tag per page
Wrong URL or title	Preview shows incorrect page info	og:url or og:title missing or wrong	Verify og:url matches canonical URL; update og:title

og:url or og:title missing or wrong

Workflow B: Fix ugly previews on an existing page

Goal: You shared a page and noticed the preview looks broken--fix it fast.

Checklist:

Test current preview using Facebook Sharing Debugger
Note what's wrong (missing image, wrong title, etc.)
Create or find a suitable OG image (1200x630px)
Compress with Image Resizer if needed
Open OG Meta Generator
Generate correct OG tags
Add tags to your page's <head> section
Verify og:url matches your Canonical URL
Publish changes
Use Facebook Sharing Debugger to force a refresh (click "Scrape Again")
Test on Twitter Card Validator
Re-share the link

Tools used: OG Meta Generator, Image Resizer, Canonical URL Generator

Workflow C: Create a reusable OG image system

Goal: Build a template system so you can quickly create OG images for every new page.

Checklist:

Design a branded OG image template (1200x630px) with your logo and color scheme
Leave space for dynamic text (page title)
Save template as a reusable file
For each new page, add the page title to the template
Export as JPG or PNG
Use Image Resizer to compress
Upload to your server in a consistent folder (e.g., /tools/images/og/)
Use OG Meta Generator to create tags for the page
Paste tags into page <head> section
Add complementary tags using Meta Tag Generator
Test and publish

Bonus tip: Use a design tool like Canva or Figma to create templates, or preview how posts will look using Facebook Post Preview.

Tools used: OG Meta Generator, Image Resizer, Meta Tag Generator, Facebook Post Preview

FAQ

No, Open Graph tags don't directly impact Google rankings. They're for social platforms, not search engines. However, they indirectly help SEO by improving click-through rates from social shares, which can drive more traffic and engagement--signals Google does care about.

Use 1200x630px (1.91:1 ratio) as a safe default. This works well on Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, and Discord. Keep the file size under 500KB to avoid slowing down your page.

Social platforms cache previews for performance. When you update OG tags, you need to manually refresh the cache using platform debugger tools: Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter Card Validator. Click "Scrape Again" or "Refresh" to force an update.

Twitter/X will fall back to OG tags if Twitter Card tags are missing, but you get better control by adding both. Use twitter:card with summary_large_image for big, engaging previews. It's only a few extra lines of code.

Yes! Set og:image for Facebook/LinkedIn and twitter:image for Twitter/X. This lets you optimize images for each platform's preferred dimensions.

The page <title> tag appears in browser tabs and search results. The og:title tag appears in social media previews. They can be the same, but you might want to adjust og:title to be more compelling for social sharing.

Use platform-specific testing tools: Facebook Sharing Debugger for Facebook, LinkedIn Post Inspector for LinkedIn, and Twitter Card Validator for Twitter/X. These tools show exactly what each platform sees and let you refresh cached previews.

Create one branded fallback image (1200x630px) with your logo and tagline. Use it for pages that don't need custom images. It's better than letting platforms pick random images from your content.

Conclusion

OG meta tags are one of the easiest wins for improving how your content performs on social media. When your link previews look professional--with the right image, title, and description--you'll see better click-through rates, more engagement, and higher trust.

The four required tags (og:title, og:type, og:image, og:url) take less than 5 minutes to add. With ToolPoint's free OG Meta Generator, you can generate perfect tags in seconds--no coding knowledge required.

Start with your most important pages: homepage, top blog posts, and landing pages. Test your previews using platform debugger tools. Then expand to the rest of your site.

Ready to fix your link previews?

Use ToolPoint's OG Meta Generator to create tags now
Explore more tools in our SEO category
Bookmark ToolPoint for more practical guides

Your first perfect social preview is just a few clicks away.