Typing in a section switches it on. Empty fields inherit — the inherited value shows as placeholder.
Characters0 / 60
Browser tab and clickable headline in search results.
Characters0 / 160
Snippet text in search results. Not a ranking factor, but affects the click-through rate.
Absolute URL of the preferred version. Open Graph and JSON-LD use it when their URL is empty.
<meta charset="utf-8"> is always written — HTML requires UTF-8.Language versions (hreflang)
One row per language version, including this page itself. Codes like
de, en-GB, x-default.Empty = canonical URL.
Characters0 / 95
Empty = page title.
Characters0 / 200
Empty = meta description.
1200×630 px recommended (min. 600×315), JPG/PNG/WebP, ≤ 8 MB, absolute URL.
Characters0 / 420
Article
Times are written with the UTC offset of your browser's time zone.
X falls back to
og:title, og:description and og:image.Characters0 / 70
Characters0 / 200
Large: 2:1 (e.g. 1200×600), summary: 1:1 (min. 144×144).
Characters0 / 420
Characters0 / 30
frame-ancestors, report-uri/report-to and sandbox only work in the HTTP header.Works as
<meta name="referrer"> and as header. HTTP header only — browsers ignore these in <meta>:
Modern equivalent: CSP
frame-ancestors.preconnectOpens the connection (DNS + TCP + TLS) early. Only for a few critical origins.
dns-prefetchOnly resolves DNS — cheap, for less important third-party origins.
preloadFetches a resource of this page early. Fonts and fetch requests get
crossorigin automatically.modulepreloadPreloads and parses a JavaScript module.
prefetchLow-priority fetch for the next navigation.
Paste the code — or the whole tag, the code is taken from it.
Empty = canonical URL.
Empty = page title. Articles write it as
headline.Empty = meta description.
Empty = og:image.
Times are written with the UTC offset of your browser's time zone.
Relative values are resolved against the URL.
Times are written with the UTC offset of your browser's time zone.
sameAs (profiles elsewhere)
Opening hours
Format:
Mo-Fr 09:00-17:00, Sa 10:00-14:00.Questions
Breadcrumb items
From the home page to this page. Only the last item may omit its URL.
Google search result
Page Title
Page description
Google cuts by pixel width (about 600 px title, 920 px description on desktop) and may rewrite both.
Open Graph card
example.com
Open Graph Title
Open Graph description.
Appearance varies by platform (Facebook, LinkedIn, WhatsApp, Signal …).
X card
Card Title
Card description.
X no longer offers a card validator — paste the URL into a new post to see the card before publishing.
JSON-LD
Switch on Structured Data in the Generator tab and choose a type.
Test at Google Rich Results Test or the Schema Markup Validator.
Priority Guide
| Priority | Tag / Group | Why It Matters |
|---|---|---|
| Must have | <title>, charset, viewport |
Fundamental for browsers and search engines. |
| Must have | Meta description | Often used as search snippet, affects the click-through rate. |
| Important | Canonical URL, hreflang | Avoid duplicate content; point each language version to the others. |
| Important | Open Graph (incl. og:image) |
Controls how links look on Facebook, LinkedIn, WhatsApp, Signal, Slack … and X. |
| Important | Favicon, apple-touch-icon | Shown in tabs, bookmarks, search results and on home screens. |
| Recommended | JSON-LD structured data | Enables rich results (breadcrumbs, products, events, recipes, site name). |
| Recommended | twitter:card |
One tag is enough — X reads the rest from Open Graph. |
| Recommended | Security headers | Best sent by the server (nginx/Apache tabs); a <meta> CSP is the fallback. |
| Optional | Resource hints, verification, authorship | Useful in specific situations. |
Do
- Write a unique title and description for every page.
- Use absolute URLs for canonical, hreflang,
og:urlandog:image. - Use 1200×630 px images and state width and height.
- Put
charsetfirst and a<meta>CSP before scripts and styles — it only covers what follows. - Include the page itself in its hreflang list, and link back from every language version.
- Write dates with time zone (
2026-11-01T19:00:00+01:00). - Test after deploying — crawlers cache previews (Facebook: “Scrape Again”).
Don't
- Don't put
X-Frame-OptionsorPermissions-Policyin<meta>— browsers ignore them there. - Don't combine
noindexwith a canonical URL — the signals contradict. - Don't block zooming (
maximum-scale=1,user-scalable=no). - Don't write
index, follow— it is the default. - Don't bother with
keywords,revisit-after,classificationorX-UA-Compatible— nobody reads them any more. - Don't preload fonts without
crossorigin— they are downloaded twice. - Don't expect FAQ rich results — Google limits them to government and health sites since 2023.
Length guidelines
| Field | Recommended | Cut off at |
|---|---|---|
<title> | 50–60 chars | ~600 px |
| Meta description | 120–160 chars | ~920 px (desktop) |
og:title | ≤ 95 chars | platform-dependent |
og:description | ≤ 200 chars | platform-dependent |
twitter:title | ≤ 70 chars | ~70 chars |
| Image alt texts (X) | ≤ 420 chars | 420 chars |
| Home screen title | ≤ 12 chars | device-dependent |
Testing Tools
- Google Rich Results Test — which rich results the JSON-LD qualifies for
- Schema Markup Validator — every schema.org type, not only Google's
- Facebook Sharing Debugger — Open Graph, refresh the cache
- LinkedIn Post Inspector — LinkedIn preview, refresh the cache
- SecurityHeaders.com — HTTP security headers
- SEO Analyzer — checks the tags of a live page
Essential
| Tag | Value / Format | Description |
|---|---|---|
<meta charset> | utf-8 | Within the first 1024 bytes. HTML only allows UTF-8. |
<meta name="viewport"> | width=device-width, initial-scale=1 | Required for responsive pages. Do not block zooming. |
<title> | Text, 50–60 chars | Browser tab and search result headline. |
<meta name="description"> | Text, 120–160 chars | Search result snippet (Google may choose other text). |
<link rel="canonical"> | Absolute URL | Preferred URL among duplicates. |
<meta name="robots"> | noindex, nofollow, noarchive, nosnippet, noimageindex, max-snippet:n, max-image-preview:large | Crawler directives. Default is index, follow. |
<link rel="alternate" hreflang> | BCP 47 code + absolute URL | Language/region versions. Reciprocal, self-referencing, optional x-default. |
Open Graph
| Property | Value / Format | Description |
|---|---|---|
og:type | website, article, … | Type of content. |
og:url | Absolute URL | Canonical URL of the page. |
og:title | Text, ≤ 95 chars | Title in link previews. |
og:description | Text, ≤ 200 chars | Description in link previews. |
og:image | Absolute URL | Preview image, 1200×630 px recommended. |
og:image:width / :height | Pixels | Lets the image render on the first share. |
og:image:alt | Text | Alt text for the image. |
og:site_name | Text | Name of the website. |
og:locale | en_US, de_DE, … | Language_TERRITORY of the content. |
article:published_time / modified_time | ISO 8601 with offset | Publication and update time. |
article:author | Profile URL | Author of the article. |
article:section / article:tag | Text (one tag per element) | Category and keywords. |
X (Twitter) Card
| Name | Value / Format | Description |
|---|---|---|
twitter:card | summary_large_image, summary | Card layout — the only tag X needs when Open Graph exists. |
twitter:site / twitter:creator | @handle | Account of the website / author. |
twitter:title | Text, ≤ 70 chars | Fallback: og:title. |
twitter:description | Text, ≤ 200 chars | Fallback: og:description. |
twitter:image | Absolute URL | Fallback: og:image. |
twitter:image:alt | Text, ≤ 420 chars | Alt text for the image. |
Icons, Mobile & App
| Tag | Value / Format | Description |
|---|---|---|
<link rel="icon" sizes="32x32"> | /favicon.ico | Classic favicon, also for legacy browsers. |
<link rel="icon" type="image/svg+xml"> | SVG | Scalable icon; can adapt to dark mode via CSS media query. |
<link rel="apple-touch-icon"> | PNG, 180×180 | iOS home screen and many link previews. |
<link rel="manifest"> | JSON | Web app manifest (name, icons, display mode). |
theme-color | Color, optional media | Browser UI color; one per color scheme possible. |
color-scheme | light dark | Which schemes the page supports — form controls and scrollbars follow it. |
mobile-web-app-capable | yes | Standalone mode; apple-mobile-web-app-capable is the older iOS name. |
format-detection | telephone=no, date=no, … | Turns off Safari's automatic linking. |
Security: meta tag or HTTP header?
| Policy | In <meta> |
Description |
|---|---|---|
Content-Security-Policy | Yes, except frame-ancestors, report-uri, report-to, sandbox | Restricts what the page may load and execute. Only covers content after the tag. |
Referrer-Policy | Yes (name="referrer") | How much of the URL is sent as Referer. |
X-Frame-Options | No — ignored | Clickjacking protection. Modern: CSP frame-ancestors (header). |
Permissions-Policy | No — ignored | Turns off browser features (camera, geolocation …). |
X-Content-Type-Options | No — ignored | nosniff stops MIME type guessing. |
Resource Hints
| rel | Value | Description |
|---|---|---|
preconnect | Origin | DNS + TCP + TLS early. Add crossorigin for fonts/CORS requests. |
dns-prefetch | Origin | Only the DNS lookup. |
preload | URL + as (font, image, script, style, fetch, track) | High-priority fetch for this page. Fonts need crossorigin. |
modulepreload | URL | Fetches and parses an ES module. |
prefetch | URL | Low priority, for the next navigation. |
Verification Tags
| name | Service |
|---|---|
google-site-verification | Google Search Console |
msvalidate.01 | Bing Webmaster Tools |
p:domain_verify | |
yandex-verification | Yandex Webmaster |
facebook-domain-verification | Meta Business (Facebook, Instagram) |
JSON-LD Structured Data
| @type | Google requires | Rich result |
|---|---|---|
WebSite | name, url (home page) | Site name above the search result. |
Article / BlogPosting | — (recommended: headline, image, datePublished, author) | Better title, image and date in results. |
Organization | — (recommended: name, url, logo, address) | Logo and details in the knowledge panel. |
LocalBusiness | name, address | Business details, opening hours. |
Product | name + offers, review or aggregateRating | Price and availability. |
Event | name, startDate, location (with address) | Event listing. |
Recipe | name, image | Recipe card with image and times. |
BreadcrumbList | itemListElement (position, name, item) | Breadcrumb trail instead of the URL. |
FAQPage | mainEntity (question + answer) | Since 2023 only for well-known government and health sites. |
Person, WebPage | — | No own rich result; describes the entity. |
JSON-LD can go into
<head> or <body>. The generator writes < inside values as <, so a value containing </script> cannot end the block.
Full vocabulary: schema.org.