Skip to content
All designer tools

Meta & OG Builder

The tags that get you indexed, and the card your link turns into

45/60
112/155

Keep this tag set. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in

Search result

acme.com
Acme — Ship your next idea before the weekend

Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand.

Link card

1200 × 630 — og:image
acme.com
Acme — Ship your next idea before the weekend
Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand.

Approximate. Every platform truncates at a different width — the counters tell you whether you are comfortably inside.

tsxapp/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL("https://acme.com"),
  title: "Acme — Ship your next idea before the weekend",
  description: "Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand.",
  alternates: { canonical: '/' },
  openGraph: {
    type: 'website',
    siteName: "Acme",
    title: "Acme — Ship your next idea before the weekend",
    description: "Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand.",
    url: "https://acme.com",
    images: [{ url: "https://acme.com/og.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    site: "@acme",
    title: "Acme — Ship your next idea before the weekend",
    description: "Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand.",
    images: ["https://acme.com/og.png"],
  },
}
htmlRaw tags
<title>Acme — Ship your next idea before the weekend</title>
<meta name="description" content="Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand." />
<link rel="canonical" href="https://acme.com" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Acme" />
<meta property="og:title" content="Acme — Ship your next idea before the weekend" />
<meta property="og:description" content="Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand." />
<meta property="og:url" content="https://acme.com" />
<meta property="og:image" content="https://acme.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@acme" />
<meta name="twitter:title" content="Acme — Ship your next idea before the weekend" />
<meta name="twitter:description" content="Everything you need to launch: auth, billing, analytics and a dashboard your customers will actually understand." />
<meta name="twitter:image" content="https://acme.com/og.png" />

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

More designer tools

All 36 run in the tab — no account, no upload.See all