What are Open Graph tags?

Open Graph is a set of meta tags, created by Facebook, that describe a page for link previews: og:title, og:description, og:image, og:url and a few more. Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage and many other apps read them when someone shares your link.

Do I need both Open Graph and Twitter card tags?

X falls back to Open Graph for the title, description and image, so you only need twitter:card to choose the layout, plus twitter:site and twitter:creator if you want your handles attached. The generator adds the twitter:title, twitter:description and twitter:image tags anyway, so every client gets the same text.

Which og:type should I use?

Use website for home pages, landing pages and most other pages, and article for blog posts and news, which also unlocks published time, author, section and tag fields. Product, profile and video are for product pages, people's profile pages and video pages.

Why do the URLs need to be absolute?

Apps read your tags from their own servers, so a relative path like /images/share.jpg has nothing to resolve against reliably. Always use the full address with https:// and your domain for og:url and og:image.

How do I use the Next.js output?

With the Pages Router, paste the block into the page component (import Head from next/head). With the App Router, export the metadata object from page.js or layout.js. Next.js turns it into the same meta tags. Dynamic pages can return the same shape from generateMetadata.

Is my data sent anywhere?

The form and the generated code stay in your browser. Only the Import from URL button sends a request, through our server, to read the public page you enter.

Open Graph Meta Tag Generator

Create Open Graph and Twitter card tags with live Facebook, X and LinkedIn previews. Copy them as HTML, a Next.js Head block or an App Router metadata object, or import a live page to start.

100% free
No sign-up
Runs in your browser

Title

0 characters. Aim for under 60.

Description

0 characters. Aim for 100 to 160.

Page URL

Image URL

1200 x 630 px JPG or PNG, full https:// URL.

Image alt text

Image width

Image height

Site name

Type

Locale

Twitter card

X @site

Your brand's handle.

X @creator

The author's handle.

Facebook

example.com

Missing title

X (Twitter)

Large image card

No image

From example.com

Missing title

example.com

Suggestions

Add a title. It's the headline of every preview.
Add a description. Facebook, Slack and Discord show it under the title.
Add the page URL (og:url).
Add an image URL. Without og:image most apps show a text-only card.

Also include the title, meta description and canonical tags

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">

What the generator writes

A complete set of share tags has three parts: the Open Graph tags most apps read, the Twitter card tags X uses to choose a layout, and the basic title, description and canonical tags search engines use. The generator writes all three, escapes quotes and special characters, and skips any field you leave empty.

Good defaults

Keep titles under 60 characters and descriptions between 100 and 160.
Use a 1200 x 630 pixel JPG or PNG and give its width, height and alt text.
Set og:url to the page's canonical URL so shares are counted against one address.
Use summary_large_image for X unless your image is a square logo.

After you publish

Paste the tags into the <head> of the page, deploy, and test the live URL with a link preview checker. Platforms cache previews, so if an old version still shows, re-scrape the page in Facebook's Sharing Debugger or LinkedIn's Post Inspector.

How it works

How to use it

Step 1
Fill in the page details
Enter the title, description, page URL and share image, or import them from a page that's already live and edit from there.
Step 2
Check the previews
The Facebook, X and LinkedIn cards update as you type, and the tool warns you about long titles, relative URLs and other common mistakes.
Step 3
Copy the code
Copy plain HTML meta tags, a Next.js <Head> block or a Next.js App Router metadata object and paste it into your page.

FAQs

Frequently asked questions

Answers to common questions about the Open Graph Meta Tag Generator.

: Open Graph is a set of meta tags, created by Facebook, that describe a page for link previews: og:title, og:description, og:image, og:url and a few more. Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage and many other apps read them when someone shares your link.
: X falls back to Open Graph for the title, description and image, so you only need twitter:card to choose the layout, plus twitter:site and twitter:creator if you want your handles attached. The generator adds the twitter:title, twitter:description and twitter:image tags anyway, so every client gets the same text.
: Use website for home pages, landing pages and most other pages, and article for blog posts and news, which also unlocks published time, author, section and tag fields. Product, profile and video are for product pages, people's profile pages and video pages.
: Apps read your tags from their own servers, so a relative path like /images/share.jpg has nothing to resolve against reliably. Always use the full address with https:// and your domain for og:url and og:image.
: With the Pages Router, paste the <Head> block into the page component (import Head from next/head). With the App Router, export the metadata object from page.js or layout.js. Next.js turns it into the same meta tags. Dynamic pages can return the same shape from generateMetadata.
: The form and the generated code stay in your browser. Only the Import from URL button sends a request, through our server, to read the public page you enter.

More free tools

Try another tool

View all free tools →

Make every share start a conversation

Hypello replies to Instagram comments with a DM, sends the link people ask for and lets AI agents collect leads around the clock. Start free with 1,000 DMs a month.

Get Started For Free View Pricing →