All tools

Open Graph Tag Builder

Build OG tags and preview the link card.

Preview (Twitter card)
OG

example.com

Hello World

Built a small thing. Here's what it does and why.

<head> tags
<title>Hello World</title>
<meta name="description" content="Built a small thing. Here's what it does and why." />

<!-- Open Graph -->
<meta property="og:title" content="Hello World" />
<meta property="og:description" content="Built a small thing. Here's what it does and why." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/post" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Example" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Hello World" />
<meta name="twitter:description" content="Built a small thing. Here's what it does and why." />
<meta name="twitter:image" content="https://example.com/og.png" />
<meta name="twitter:site" content="@example" />

Open Graph tags control how your link looks on Slack, Discord, LinkedIn, Twitter, and Facebook. The image should be exactly 1200×630 px for best results. Test your live URL in opengraph.xyz or the Twitter card validator.

About

Type title, description, image. The tool generates the &lt;head&gt; tags for Open Graph and Twitter cards plus a live preview of how the link will look when shared.

How to use

  1. Fill in title, description, image.
  2. Copy the head tags.

FAQ

What size should the OG image be?+

1200×630 px is the universal sweet spot. Smaller and Twitter / LinkedIn show a small thumbnail. Larger gets cropped.