Skip to content
Swizztool

Open Graph (OG) Meta Generator

Generate and test Open Graph meta tags client-side. Live social previews for Twitter Large Card, Facebook Feed, LinkedIn Post, and Discord Embed with ready-to-copy HTML & Next.js metadata code.

Open Graph Metadata

X / Twitter Card Preview
Swizztool - High Performance Client-Side Utilities
www.swizztool.com

Swizztool - High Performance Client-Side Utilities

77 free browser tools for text editing, media manipulation, code inspection, and social media mockups. 100% in-browser with zero latency.

<!-- Primary Meta Tags -->
<title>Swizztool - High Performance Client-Side Utilities</title>
<meta name="title" content="Swizztool - High Performance Client-Side Utilities" />
<meta name="description" content="77 free browser tools for text editing, media manipulation, code inspection, and social media mockups. 100% in-browser with zero latency." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.swizztool.com" />
<meta property="og:title" content="Swizztool - High Performance Client-Side Utilities" />
<meta property="og:description" content="77 free browser tools for text editing, media manipulation, code inspection, and social media mockups. 100% in-browser with zero latency." />
<meta property="og:image" content="https://www.swizztool.com/images/hero-banner.jpg" />
<meta property="og:site_name" content="Swizztool" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.swizztool.com" />
<meta property="twitter:title" content="Swizztool - High Performance Client-Side Utilities" />
<meta property="twitter:description" content="77 free browser tools for text editing, media manipulation, code inspection, and social media mockups. 100% in-browser with zero latency." />
<meta property="twitter:image" content="https://www.swizztool.com/images/hero-banner.jpg" />

How to use Open Graph (OG) Meta Generator

  1. Enter Page Title, Description, Image URL, Site Name, and Target URL.
  2. Switch tabs to preview how your link will render on Twitter, Facebook, LinkedIn, and Discord.
  3. Copy HTML `<meta>` tags or Next.js `metadata` object code.

About Open Graph (OG) Meta Generator

Write Open Graph tags that control how your links look when shared. Enter a title, description, image, site name, and URL, preview the result as it appears on X, Facebook, LinkedIn, and Discord, and copy the HTML meta tags or Next.js metadata code.

Related tools: Instagram Filters, Fake Instagram Post Generator, Fake Instagram Story Generator, Fake Instagram DM Generator

What Open Graph tags do

When someone shares a link, social networks and chat apps read the page's Open Graph tags to build the preview card. Without them, platforms guess, often picking the wrong image or no image at all.

Keep titles under about 60 characters and descriptions under about 155 so they are not cut off. Use a 1200 × 630 image (1.91:1) for a large, sharp preview on every platform.

After adding the tags

Platforms cache previews, so a link shared before you changed the tags may keep the old card. Facebook's Sharing Debugger and LinkedIn's Post Inspector let you refresh a cached preview.

The image URL must be public and absolute (starting with https://); platforms cannot load images that require a login or sit on localhost.

Common uses

Launching a page
Make a new page look good the first time it is shared.
Fixing broken previews
Replace a missing or wrong preview image.
Next.js sites
Copy a ready metadata object into your page.
Marketing campaigns
Control how campaign links appear in social posts.

Questions about Open Graph (OG) Meta Generator

What image aspect ratio is best for Open Graph?
A resolution of 1200x630 pixels (1.91:1 aspect ratio) is recommended for optimal rendering across Twitter, Facebook, LinkedIn, and messaging apps.
Where do I put the meta tags?
Inside the <head> of your page's HTML. In Next.js, export the metadata object from the page or layout instead.
Why is my preview not updating?
Platforms cache previews. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to fetch the page again.
What is the difference between Open Graph and Twitter Cards?
X reads its own twitter: tags first and falls back to Open Graph. Including both gives the most reliable result.
Are my details sent anywhere?
No. Previews and code are generated in your browser.

More tools like Open Graph (OG) Meta Generator

Comments

Questions, ideas, or a bug in Open Graph (OG) Meta Generator? Let us know.