How do you add Open Graph tags to your site?

Put the tags inside the head of the HTML your server sends, not into the DOM after the page loads. Every stack below has a way to do that; pick yours, paste the block, then scan the page to confirm a scraper can actually see it.

Step 1 — write the five values

Before touching code, decide the headline (under 60 characters), the description (under 155), the page address, the image URL and the type. Everything else is mechanical.

Plain HTML

html

<meta property="og:title" content="Your headline" />
<meta property="og:description" content="One or two sentences." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<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 name="twitter:card" content="summary_large_image" />

React with TanStack Router / Start

tsx

export const Route = createFileRoute("/pricing")({
  head: () => ({
    meta: [
      { title: "Pricing — Acme" },
      { name: "description", content: "Plans from free to team." },
      { property: "og:title", content: "Pricing — Acme" },
      { property: "og:description", content: "Plans from free to team." },
      { property: "og:type", content: "website" },
      { property: "og:image", content: "https://acme.com/og/pricing.png" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [{ rel: "canonical", href: "https://acme.com/pricing" }],
  }),
  component: Pricing,
});

Next.js (App Router)

tsx

export const metadata = {
  title: "Pricing — Acme",
  description: "Plans from free to team.",
  openGraph: {
    title: "Pricing — Acme",
    description: "Plans from free to team.",
    url: "https://acme.com/pricing",
    type: "website",
    images: [{ url: "https://acme.com/og/pricing.png", width: 1200, height: 630 }],
  },
  twitter: { card: "summary_large_image" },
};

WordPress

Most SEO plugins (Yoast, Rank Math, SEOPress) add Open Graph tags. Turn the social section on — it is often off by default.
Set a site-wide fallback image so pages without their own still get a card.
Without a plugin, add the tags in your theme's header.php inside <head>, using the post's own title and featured image.

Webflow, Shopify, Squarespace

Webflow: Page settings → Open Graph. Leave 'same as SEO title' off when you want a different headline on social.
Shopify: theme.liquid already emits Open Graph in most themes. Set the product or page featured image; that becomes og:image.
Squarespace: Settings → Social Sharing for the fallback image; per-page overrides live in each page's SEO panel.

Last step — verify from outside

Open the page, view source, and confirm the tags are in the HTML that arrived — not just in the inspector, which shows the DOM after JavaScript has run. Then scan the address here to see the rendered cards.

If the tags appear in the inspector but not in view-source, your framework is adding them client-side and scrapers will not see them.

Sources

The Open Graph protocol

Keep going

Now check it on your own site.

Scan a site Generate images