Does this generate tags compatible with Next.js and standard HTML?

Yes! The generated meta tags are standard W3C and Open Graph protocol tags compatible with any framework.

HomeToolsSocial Card Preview

SEO & Social

Open Graph & Social Media Card Previewer

Preview your webpage metadata across Google search results, Twitter large image cards, and Facebook feeds before publishing.

Open Graph & Social Media Card Previewer

Preview how your link appears on Google SERP, Twitter / X, Facebook, and generate production meta tags.

Page Metadata Configuration

Page Title50/60 chars

Meta Description136/160 chars

Canonical URL

Social Share Image (OG Image)

Site Name

Twitter Handle

DocSwift

https://docswift.xyz

DocSwift - 100% Private Client-Side Document Tools

Compress PDFs, convert HEIC images, analyze text, and inspect JWT tokens directly in your browser. Zero server uploads, maximum privacy.

Generated HTML Meta Tags

<!-- Primary Meta Tags -->
<title>DocSwift - 100% Private Client-Side Document Tools</title>
<meta name="title" content="DocSwift - 100% Private Client-Side Document Tools">
<meta name="description" content="Compress PDFs, convert HEIC images, analyze text, and inspect JWT tokens directly in your browser. Zero server uploads, maximum privacy.">

<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://docswift.xyz">
<meta property="og:title" content="DocSwift - 100% Private Client-Side Document Tools">
<meta property="og:description" content="Compress PDFs, convert HEIC images, analyze text, and inspect JWT tokens directly in your browser. Zero server uploads, maximum privacy.">
<meta property="og:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80">
<meta property="og:site_name" content="DocSwift">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://docswift.xyz">
<meta name="twitter:title" content="DocSwift - 100% Private Client-Side Document Tools">
<meta name="twitter:description" content="Compress PDFs, convert HEIC images, analyze text, and inspect JWT tokens directly in your browser. Zero server uploads, maximum privacy.">
<meta name="twitter:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80">
<meta name="twitter:creator" content="@docswift">

Google SERP Simulation

Twitter / X Card Mockup

Facebook & LinkedIn Card Preview

1-Click Meta Tag Generator

How to Use Open Graph & Social Media Card Previewer (Step-by-Step Guide)

No software installation required. Complete your task in 3 easy steps directly in your browser.

Enter Page Details

Fill in your page title, description, website URL, and social share image.

Inspect Social Previews

Switch tabs to see real-time mockups for Google, Twitter, and Facebook.

Copy <meta> Code

Copy generated Open Graph and Twitter card tags to paste in your HTML head.

How helpful was this tool?

Rated 4.9 / 5 by 3,420+ users worldwide

Share with Colleagues & Friends

Help others protect their document privacy

WhatsApp X / Twitter LinkedIn

Got Questions?

Frequently Asked Questions

1200x630 pixels (1.91:1 ratio) is the standard recommended size for optimal display across Twitter, Facebook, and LinkedIn.