⌘ K
og:type · og:title · og:image · live · local

Build Open Graph meta tags

Compose og:title / og:description / og:image / og:url for Facebook, LinkedIn and other crawlers. Includes a live preview. Runs in your browser.

Open Graph Generator
Type
website
og:type
Title
My page
7 chars
Image
set
og:image
Output
367 B
7 tags
og:type:
input · fields
og:title
og:description
og:url
og:image
og:site_name
og:locale
Live preview
example.com
My page
Short description.
output · og:* tags
<meta property="og:type" content="website">
<meta property="og:title" content="My page">
<meta property="og:description" content="Short description.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
Quick Start

How to build Open Graph tags

Open Graph tells social networks how to render link previews. The big four — title, description, image, url — drive the card layout.

  1. 01

    Pick og:type

    The Open Graph protocol classifies pages by og:type. website is the catch-all default; article unlocks extra properties like article:published_time and article:author; video.other, music.song, book, and profile describe richer media types.

    Pick the value that best matches the page’s primary entity — Facebook, LinkedIn, and most other crawlers use it to choose a card layout and an embed surface.

    OG protocolog:typearticlewebsitecard layout
    input · og:typewebsite · primary
    og:type website
    1 property · setogp.me spec
  2. 02

    Title and description

    Set og:title to the page’s primary headline and og:description to a one-line summary. These usually mirror your HTML <title> and <meta description>, but you can override them — for example, to A/B test social copy independent of SEO copy.

    Keep the title under ~70 characters and the description under ~200 so cards don’t truncate awkwardly across Facebook, LinkedIn, Slack, and Discord renderers.

    og:titleog:descriptionsocial copycard previewtruncation
    props · og:title7 chars
    My page
    2 properties · livepreview ready
  3. 03

    Image and URL

    Set og:image to an absolute HTTPS URL of a 1.91:1 image (1200×630 px recommended) — Facebook downscales smaller images and rejects sub-200-px assets. og:url should be the canonical link so re-scrapes resolve to a single record.

    Pair with og:site_name for brand attribution and og:locale (BCP 47 like en_US) so localised sites get the right language hint.

    og:image1.91:1 · 1200×630og:urlog:site_nameog:locale
    media · og:image1200 × 630 · 1.91:1
    og:image set
1200 × 630 · HTTPS
    3 properties · readyFacebook spec
  4. 04

    Copy into <head>

    Paste the generated og:* tags inside your document <head> next to your other meta tags. Use Facebook’s Sharing Debugger and LinkedIn’s Post Inspector to re-scrape and verify the card after deploy.

    For Twitter’s twitter:* properties, see the Twitter Card Generator — Twitter falls back to OG but renders best with its own tag set alongside.

    clipboard<head>Sharing DebuggerPost InspectorTwitter Card
    export · clipboardog tag block
    Copied
    ready to ship0 outbound
Pro tips

Web-spec details that bite later

Idempotency saves retries

POST/PUT/DELETE should be safely retried. Use idempotency keys and return the same response on duplicate requests.

Match RFC 9110 status codes

Don’t invent codes. 422 for validation errors, 409 for conflicts, 429 for rate limits. Standard codes work with off-the-shelf clients.

Set <code>Cache-Control</code> deliberately

Default browser caching is conservative. Use max-age + stale-while-revalidate for hot endpoints.

Validate Open Graph in dev

OG tags break silently. Use a previewer like OG Generator + Facebook’s debugger before launch.

CORS is a server concern

The browser sends the preflight; the server decides. Wildcard origins disable credentials — be explicit.

MIME drives behaviour

Servers must send the right Content-Type. Browsers sniff but the spec says they shouldn’t — be explicit to avoid surprises.

Related toolsTwitter CardMeta TagsStructured DataCanonical URLSitemapWeb Manifest
Use Cases

When to set Open Graph

Social sharing, link previews, marketing pages.

Marketing pages

Drive click-through with attractive social cards. Bundled from IANA registries at build time — no live network call, no rate limit, no leaked queries. The MIME, TLD, and status-code tables are baked in so the tool works offline once loaded.

spec-compliant

Blog posts

Use type=article and pair with structured data. Output is canonical per the relevant RFC (9110 for HTTP, 5322 for headers, 3986 for URLs), so spec-compliant parsers accept it as-is. Cross-browser and cross-library behaviour stays consistent.

offline

Product pages

Show product image and price clearly in shares. Pairs with the curl-to-fetch converter for end-to-end test stubs — copy the curl from DevTools, paste, get an idiomatic fetch() body. Drop into Playwright/Vitest fixtures without manual translation.

IANA-backed

Newsletters

Email clients increasingly read OG for previews. Catches common pitfalls (uppercase header names, smart quotes inside Content-Type, missing ;charset=utf-8) before they bite production. Validation flags rather than auto-corrects so you stay in control.

RFC-aligned

Slack / chat

Modern chat apps unfurl shared links via OG. Validation runs as you type — copy only when the output is shaped correctly. The output drops directly into nginx, Apache, or CDN configs without re-formatting or re-quoting.

production-grade

Localised sites

Use og:locale to hint preferred language. Same input plus same options always produces identical canonical output, so the tool is safe to embed in CI scripts that diff against expected configs.

i18n
FAQ

Frequently asked questions

1200×630 (1.91:1) is the recommended size. Smaller works but Facebook may upscale or crop.
Yes — many crawlers fall back to it instead of <link rel="canonical">.
Twitter reads OG as a fallback but prefers its own twitter:* tags. Pair them for best results.
Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to re-scrape the page.
No. Tag generation runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!