Open Graph and Twitter Card meta tags: what to put in <head>

Published: 2026-09-05

Which basic SEO, Open Graph, and Twitter Card tags belong in your HTML head, how overrides and images work, and a local paste-ready workflow before you deploy.

When someone shares your URL in Slack, LinkedIn, Discord, or X (Twitter), the preview title, description, and image usually come from meta tags in <head>—not from whatever happens to sit in the first paragraph of the page. Search engines also read a smaller set of those tags (title, description, canonical, robots). Getting the head snippet right once avoids broken previews and duplicate-content confusion later.

This guide covers basic SEO tags, Open Graph (og:*), and Twitter Cards, plus image sizing and validation habits. Draft the HTML locally so launch copy and unreleased URLs never need to leave your machine—see Why “local only” matters for developer tools. Meta tags sit alongside robots.txt and sitemaps: crawl guidance, URL lists, and share/search presentation are separate layers.

Three layers in one `<head>` snippet

Layer	Typical tags	Who cares most
Basic SEO	`<title>`, `description`, `canonical`, `robots`, optional `keywords` / `author` / `theme-color`	Search engines, browsers
Open Graph	`og:title`, `og:description`, `og:url`, `og:type`, `og:image`, `og:site_name`, `og:locale`	Facebook, LinkedIn, Slack, many link unfurlers
Twitter Card	`twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`, `twitter:site`, `twitter:creator`	X and tools that still read Twitter Card names

You do not always need every field. A solid minimum for a public marketing page is: title, description, canonical URL, og:type, og:image (absolute HTTPS), and twitter:card (usually summary_large_image). Leave Open Graph / Twitter title and description blank in a generator when they should match the page title and meta description—tools can fall back so you do not maintain three copies of the same string.

<title>Acme — Ship faster with local tooling</title>
<meta name="description" content="Privacy-first utilities that run in your browser.">
<link rel="canonical" href="https://example.com/">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:title" content="Acme — Ship faster with local tooling">
<meta property="og:description" content="Privacy-first utilities that run in your browser.">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og-home.jpg">
<meta property="og:site_name" content="Acme">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Acme — Ship faster with local tooling">
<meta name="twitter:description" content="Privacy-first utilities that run in your browser.">
<meta name="twitter:image" content="https://example.com/og-home.jpg">
<meta name="twitter:site" content="@acme">

Open Graph uses property="og:…". Twitter Cards traditionally use name="twitter:…". Many platforms also fall back to og:* when Twitter-specific tags are missing; still emit twitter:card so X knows which layout to use.

Basic SEO: title, description, canonical, robots

<title> is the browser tab label and a primary search result title signal. Keep it specific to the page (product or article name + brand), usually under ~60 characters for clean SERP display—engines may rewrite it anyway.

meta name="description" is the candidate snippet under the title in search results. Aim for one or two clear sentences (~150–160 characters as a soft target). Keyword stuffing helps less than an honest summary of what the visitor gets.

link rel="canonical" should be the preferred absolute HTTPS URL for this content. Use it when the same page is reachable via query params, trailing-slash variants, or AMP mirrors. Point at the URL you want indexed and shared—not a staging host.

meta name="robots" (e.g. index, follow or noindex, nofollow) steers indexing of this HTML document. It complements robots.txt; Disallow in robots.txt is about fetch paths, while noindex is about indexing after fetch. Staging pages often want noindex.

Optional extras:

keywords — largely ignored by major engines; harmless if your CMS still emits it, not worth inventing for SEO.
author — human credit; not a ranking lever.
theme-color — browser chrome tint on mobile; UX, not SEO.

Open Graph fields that actually matter

Tag	Role
og:title	Preview headline (override when the social title should differ from `<title>`)
og:description	Preview body text
og:url	Canonical share URL for this object (usually same as `link rel="canonical"`)
og:type	Object kind: `website`, `article`, `product`, `profile`, `book`, …
og:image	Absolute image URL used in the card
og:site_name	Brand or site name shown beside the preview
og:locale	Locale hint such as `en_US` (underscore form is common for OG)

og:type should match the page kind. Landing and home pages use website; posts and docs use article; commerce detail pages may use product. Presets that set type + a large-image card save time, but always replace placeholder URLs with production HTTPS links before ship.

og:image must be an absolute URL (https://…). Relative paths (/og.png) fail for many scrapers. Prefer a dedicated share asset (often 1200×630 px for large cards) rather than a tiny logo—small images look cropped or ignored.

Twitter Cards without duplicating everything

Tag	Role
twitter:card	Layout: `summary`, `summary_large_image`, `app`, or `player`
twitter:title / twitter:description	Optional overrides; else fall back to OG then basic SEO
twitter:image	Optional; often the same file as `og:image`
twitter:site	Site or brand handle (`@acme`)
twitter:creator	Author handle for articles (`@jane`)

For most marketing and blog pages, summary_large_image is the right default: one strong image plus title and description. Use summary when you only have a square icon or want a compact card. app and player are for app-store and media embeds—skip them unless you are wiring those experiences.

If title, description, and image are identical across layers, fill the basic fields (and og:image / twitter:card) once and leave Twitter/OG title overrides empty. That keeps the snippet maintainable when copy changes.

Images, caching, and validation

Social platforms cache previews aggressively. After you change og:image or title text:

Confirm the image URL returns 200, Content-Type is an image type, and the file is large enough for the card layout.
Redeploy so production HTML actually contains the new tags.
Re-scrape with Facebook Sharing Debugger, LinkedIn Post Inspector, and X Card Validator (names change over time; the habit stays the same).

Recommended habits for share images:

Absolute HTTPS only; no auth walls or cookies required to fetch the image.
Roughly 1.91:1 for large cards (~1200×630); keep important text inside a safe center crop.
One intentional asset per template (home, blog, product)—do not reuse a busy screenshot with unreadably small UI chrome.

Meta tags do not replace structured data (JSON-LD) for rich results, or hreflang for language/region alternates. Use each for its job.

A safe local drafting workflow

Pick a preset that matches the page (landing → website, blog → article, product → product) and summary_large_image when you have a wide share image.
Fill title, description, canonical URL, and og:image; set og:site_name and twitter:site if you have a brand handle.
Leave OG/Twitter title and description blank unless the social preview should differ from the page title/snippet.
Copy the HTML into your framework’s <head> (or metadata API), using absolute production URLs—not localhost.
After deploy, validate with platform debuggers and fix cache misses by re-scraping.

Building tags in-tab keeps draft headlines and unreleased product names on your device. For the privacy model behind local generators, see Why “local only” matters for developer tools.

Try it locally in your browser

Use the meta tags generator to:

Start from Landing page, Blog post, or Product page presets (og:type + card defaults).
Fill basic SEO, Open Graph, and Twitter fields; overrides fall back to title, description, and og:image when blank.
Toggle which layers to emit, then copy a paste-ready <head> snippet—generation runs only in this tab; nothing is uploaded to LocalTools.

Review absolute image URLs and dimensions before launch. Platforms cache previews; plan a debugger pass after every material change.

Three layers in one <head> snippet