What are Open Graph meta tags?

Open Graph (OG) tags are snippets of code that control how URLs are displayed when shared on Facebook, LinkedIn, Discord, and messaging apps.

What is the optimal OG image size?

The industry standard is 1200 x 630 pixels (1.91:1 aspect ratio) under 5MB.

What is twitter:card summary_large_image?

It instructs X/Twitter to render your link with a prominent, full-width preview image above the title and description.

Where do I put these meta tags?

Paste them inside the ` ` section of your HTML document or in your Next.js metadata object.

Yes, 100% free with no registration.

Meta Tags & Social Previewer

Generate Open Graph and Twitter Card HTML meta tags and preview how links will display on social platforms.

100% free
Private in browser
No signup
No watermarks

Page Title38/60 recommended characters

Canonical Website URL

Meta Description104/160 recommended characters

Social Share Image (OG Image) URLRecommended dimensions: 1200x630 pixels

Social Share Card Live Preview

thetoolss.com

TheToolss - 400+ Free Online Web Tools

All free developer, design, text, image, and financial calculators. 100% client-side with zero tracking.

Generated HTML Meta Tags

<!-- Primary Meta Tags -->
<title>TheToolss - 400+ Free Online Web Tools</title>
<meta name="title" content="TheToolss - 400+ Free Online Web Tools" />
<meta name="description" content="All free developer, design, text, image, and financial calculators. 100% client-side with zero tracking." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://thetoolss.com" />
<meta property="og:title" content="TheToolss - 400+ Free Online Web Tools" />
<meta property="og:description" content="All free developer, design, text, image, and financial calculators. 100% client-side with zero tracking." />
<meta property="og:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://thetoolss.com" />
<meta property="twitter:title" content="TheToolss - 400+ Free Online Web Tools" />
<meta property="twitter:description" content="All free developer, design, text, image, and financial calculators. 100% client-side with zero tracking." />
<meta property="twitter:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop" />

Rate this tool

Be the first to rate — helps others and improves this page.

About Meta Tags & Social Previewer

Generate Open Graph and Twitter Card HTML meta tags and preview how links will display on social platforms. Use this free client-side tool on TheToolss with zero installation and complete privacy.

How to use Meta Tags & Social Previewer

Enter your page title, description, and canonical URL
Provide your 1200x630 social share image URL
Inspect the live preview card
Copy the generated HTML tags and paste into your website head section

Key features

Generates Facebook Open Graph and Twitter Card tags
Live social share card preview
Character length indicators for SEO best practices
One-click copy to clipboard

Frequently asked questions

What are Open Graph meta tags?: Open Graph (OG) tags are snippets of code that control how URLs are displayed when shared on Facebook, LinkedIn, Discord, and messaging apps.
What is the optimal OG image size?: The industry standard is 1200 x 630 pixels (1.91:1 aspect ratio) under 5MB.
What is twitter:card summary_large_image?: It instructs X/Twitter to render your link with a prominent, full-width preview image above the title and description.
Where do I put these meta tags?: Paste them inside the `<head>` section of your HTML document or in your Next.js metadata object.
Is it free to use?: Yes, 100% free with no registration.