02 og:* · twitter:* · article:*

Open Graph tag generator

Describe the page once and copy the tags in the form your site needs: plain HTML for any template, a metadata export for the Next.js App Router, or JSON for a CMS or a script.

Page

og:type

Locale

Title

Description

Page URL

Site name

Image

Image URL (absolute)

Width

Height

Alt text

X (Twitter)

twitter:card

twitter:site

twitter:creator

Also write twitter:title, twitter:description and twitter:image (optional: X falls back to the og: tags)

Options Include <title>, the meta description and the canonical link

<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

import type { Metadata } from "next";

export const metadata: Metadata = {
	openGraph: { type: "website", locale: "en_US" },
	twitter: { card: "summary_large_image" },
};

{
  "meta": [
    {
      "property": "og:type",
      "content": "website"
    },
    {
      "property": "og:locale",
      "content": "en_US"
    },
    {
      "name": "twitter:card",
      "content": "summary_large_image"
    }
  ]
}

og:image

EXAMPLE.COM

Your page title appears here

A one- or two-sentence description of the page, written for people deciding whether to click.

01Facebook1.91:1

og:image

Your page title appears here

From example.com

02X (Twitter)2:1 · 1:1

How to use it

Fill in the title, description, page URL and an absolute image URL; everything else is optional. The output updates as you type, with every value escaped for its format, so quotes and ampersands in a title cannot break your markup.

og:type: website for most pages; article adds published and modified times, author, section and tags.
Width and height let Facebook show the image on the first share, before its crawler has measured it. Leave them at 1200 × 630 only if that is the real size.
twitter:card: summary_large_image gives the big image; summary a square thumbnail.

Paste the HTML into the <head> of the page, export the Next.js object from layout.tsx or page.tsx, then paste the finished page into the social card preview to see it on nine platforms.

Frequently asked questions

Should I use property or name for Open Graph tags?

The Open Graph protocol uses property, and X documents name for twitter: tags. That is what this generator writes; most crawlers accept either.

Does the image URL have to be absolute?

Yes. Write the full https:// address. Some crawlers resolve relative paths, but the protocol does not require them to, and many do not.

What happens to the published time I pick?

It is converted from your local time zone to UTC and written in ISO 8601, for example 2026-10-28T08:30:00.000Z.