OGPreview.io

Meta tag generator: SEO, Open Graph & Twitter tags

Fill in the fields and watch the cards update. Copy the tags as plain HTML, Next.js metadata or Nuxt useSeoMeta.

Aim for 40–60 characters34
Aim for 110–160 characters100

No image yet? Make one in the OG image generator.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How we cut our deploy time in half</title>
<meta name="description" content="Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy." />
<link rel="canonical" href="https://example.com/blog/faster-deploys" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/blog/faster-deploys" />
<meta property="og:title" content="How we cut our deploy time in half" />
<meta property="og:description" content="Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy." />
<meta property="og:site_name" content="Example Engineering" />
<meta property="og:locale" content="en_US" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How we cut our deploy time in half" />
<meta name="twitter:description" content="Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy." />

Rewrite the share copy with AI

Get three title + description pairs sized for social cards, written from what's on the page. Nothing is sent until you press the button.

Live previews

With no image URL, platforms show a text-only card, exactly as below.

Facebook
EXAMPLE.COM
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.
X (Twitter)
example.com
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.
LinkedIn
How we cut our deploy time in half
example.com
Slack
Example Engineering
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.
Discord
Example Engineering
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.
WhatsApp
Google search
Example Engineeringhttps://example.com/blog/faster-deploys
How we cut our deploy time in half
Five changes to our CI pipeline that took builds from 14 minutes to 6, with the config you can copy.

What each generated tag does

  • og:title / og:description: the headline and summary on every card. Keep the title shorter than your SEO title; social cards are narrow.
  • og:image with :width, :height and :alt: the picture, its declared size (so Facebook can render it on the first share) and a text alternative.
  • og:url and rel="canonical": the one address that shares and search signals should count toward.
  • twitter:card: the only X tag without an og: fallback. It decides between the large-image and small-thumbnail layouts.
  • theme-color: the coloured bar on Discord embeds and the browser toolbar tint on Android.

After you deploy, run the page through the OG checker to confirm the tags made it into the server-rendered HTML.

Frequently asked questions

Which meta tags do I actually need?

For a good card everywhere: og:title, og:description, og:image (absolute URL, 1200×630), og:url, og:type and twitter:card. Add og:image:alt for accessibility and og:site_name for Slack, Discord and Facebook. The generator outputs exactly this set plus the classic <title> and meta description.

Do I need separate twitter: tags?

Only twitter:card is required, because X falls back to og: tags for title, description and image. The generator adds twitter:title, twitter:description and twitter:image anyway, which keeps older parsers happy and costs nothing.

Where do I paste the code?

Plain HTML goes inside <head>. In Next.js (App Router) export the metadata object from page.tsx or layout.tsx. In Nuxt call useSeoMeta in the page component. All three render the tags on the server, which is what crawlers need.

Do meta tags still work?

Yes, the ones that matter. Google uses the title tag and often the meta description for results, robots tags control indexing, and Open Graph / Twitter tags decide every social preview. The keywords meta tag is the one that no longer does anything: Google has ignored it for ranking since at least 2009.

Can you give an example of a meta tag?

<meta name="description" content="Five CI changes that took builds from 14 to 6 minutes."> is a meta description. <meta property="og:image" content="https://example.com/og.png"> is an Open Graph tag that sets the share image.

How do I generate meta tags?

Type your title, description, page URL and image URL into the form above. The tool writes the full set of SEO, Open Graph and Twitter tags as you type; copy it as HTML, Next.js metadata or Nuxt useSeoMeta and paste it into your page head.

Does the generator save what I type?

Your draft is saved in this browser only (localStorage) so it survives a reload. Nothing is sent to our server unless you press the AI button. Use “Clear form” to delete it.