Characters:
0 / 60
Used in browser tabs and as the clickable headline in search results.
Characters:
0 / 160
Displayed in search result snippets. Not a ranking factor, but affects click-through rate.
Points to the preferred URL of this page to avoid duplicate content issues.
Controls what search engines can index and follow.
Characters:
0 / 95
Characters:
0 / 200
Recommended: 1200×630 px, min. 600×315 px, ≤ 8 MB, JPG/PNG.
Characters:
0 / 420
Article Fields
Characters:
0 / 70
Characters:
0 / 200
Recommended: 1200×628 px for large; 120×120 px for summary.
Characters:
0 / 420
Browser UI color on mobile Chrome/Edge.
Characters:
0 / 30
Recommended: 180×180 px PNG for iPhone/iPad.
⚠ CSP via
<meta> is limited — HTTP headers are more effective.Google SERP Preview
Page Title Here
Page description text will appear here in the search result snippet...
Google may rewrite titles and descriptions. This is an approximation only.
Open Graph Card
example.com
Open Graph Title
Open Graph description text.
Appearance varies by platform (Facebook, LinkedIn, WhatsApp).
Twitter / X Card
Twitter Card Title
Twitter card description.
Card type: summary_large_image
Validate at Twitter Card Validator.
JSON-LD Preview
Enable and configure Structured Data (JSON-LD) in the Generator tab to see a preview here.
Test at Google Rich Results Test.
Priority Guide
| Priority | Tag / Group | Why It Matters |
|---|---|---|
| Must Have | <title>, charset, viewport |
Fundamental for browsers and search engines. |
| Must Have | meta description |
Displayed in search snippets, affects CTR. |
| Important | Open Graph tags | Controls appearance when shared on social media. |
| Important | Twitter Card tags | Required for rich Twitter/X link previews. |
| Important | Canonical URL | Prevents duplicate content issues with search engines. |
| Recommended | JSON-LD Structured Data | Enables rich results (stars, FAQ, breadcrumbs) in Google. |
| Recommended | Security Headers (CSP, Referrer) | Protects against XSS and information leakage. |
| Optional | Performance hints, verification, authorship | Useful in specific contexts. |
Do
- Keep
<title>between 50–60 characters. - Write unique titles and descriptions for every page.
- Include a canonical URL to prevent duplicate content.
- Use 1200×630 px images for best OG display.
- Add JSON-LD structured data to improve rich results.
- Place all meta tags inside
<head>. - Use absolute URLs for og:image and canonical.
- Test your tags with validation tools after deploying.
Don't
- Don't duplicate titles or descriptions across pages.
- Don't use keyword stuffing in meta description.
- Don't rely on CSP
<meta>as your only security — use HTTP headers too. - Don't set both index and noindex simultaneously.
- Don't use relative URLs for og:image.
- Don't add noindex to pages you want in search results.
- Don't block crawlers with nofollow on important internal links.
- Don't exceed the recommended character limits.
Character Limits
| Field | Recommended | Hard limit |
|---|---|---|
<title> | 50–60 | ~70 (truncated) |
| Meta description | 120–160 | ~160 (truncated) |
| og:title | ≤ 95 | depends on platform |
| og:description | ≤ 200 | depends on platform |
| twitter:title | ≤ 70 | ~70 |
| twitter:description | ≤ 200 | ~200 |
| og:image:alt | ≤ 420 | 420 |
Testing Tools
- Google Rich Results Test — validate JSON-LD structured data
- Twitter Card Validator — preview Twitter cards
- Facebook Sharing Debugger — validate OG tags
- OGP.me — Open Graph Protocol specification
- SecurityHeaders.com — check HTTP security headers
Essential
| Tag | Attribute | Value / Format | Description |
|---|---|---|---|
<meta> |
charset |
UTF-8 |
Character encoding. Always use UTF-8. |
<meta> |
name="viewport" |
width=device-width, initial-scale=1 |
Required for mobile-responsive pages. |
<title> |
— | String, 50–60 chars | Browser tab title and SERP headline. |
<meta> |
name="description" |
String, 120–160 chars | Search result snippet text. |
<link> |
rel="canonical" |
Absolute URL | Preferred URL to avoid duplicate content. |
<meta> |
name="robots" |
index, follow etc. |
Controls crawler behavior. |
Open Graph
| Property | Value / Format | Description |
|---|---|---|
og:type | website, article, … | Type of content. |
og:url | Absolute URL | Canonical URL of the page. |
og:title | String, ≤ 95 chars | Title shown in social cards. |
og:description | String, ≤ 200 chars | Description shown in social cards. |
og:image | Absolute URL, JPG/PNG | Image for social previews. Recommended: 1200×630 px. |
og:image:width | Number (px) | Image width. |
og:image:height | Number (px) | Image height. |
og:image:alt | String, ≤ 420 chars | Alt text for the image (accessibility). |
og:site_name | String | Name of the website. |
og:locale | en_US, de_DE, … | Locale of the content. |
article:published_time | ISO 8601 datetime | When article was published. |
article:modified_time | ISO 8601 datetime | When article was last modified. |
article:author | URL or name | Author of the article. |
article:section | String | Category / section name. |
article:tag | String (one per tag) | Keyword tags (one per meta tag). |
Twitter / X Card
| Name | Value / Format | Description |
|---|---|---|
twitter:card | summary_large_image, summary, … | Card display format. |
twitter:site | @handle | Twitter handle of the website. |
twitter:creator | @handle | Twitter handle of the content creator. |
twitter:title | String, ≤ 70 chars | Card title (fallback: og:title). |
twitter:description | String, ≤ 200 chars | Card description (fallback: og:description). |
twitter:image | Absolute URL | Card image (fallback: og:image). |
twitter:image:alt | String, ≤ 420 chars | Alt text for the image. |
Security Headers (via <meta>)
| http-equiv | Value / Format | Description |
|---|---|---|
Content-Security-Policy | CSP string | Restricts resources the browser can load. Limited via <meta> — prefer HTTP header. |
X-Frame-Options | DENY, SAMEORIGIN | Prevents clickjacking attacks. |
Permissions-Policy | camera=(), microphone=() | Controls access to browser features. |
name="referrer" |
Controls Referer header behavior. | |
Performance & Resource Hints
| rel | Value | Description |
|---|---|---|
dns-prefetch | Origin URL | Resolves DNS early for third-party domains. |
preconnect | Origin URL | Establishes TCP+TLS connection early. |
preload | Resource URL + as + type | Tells browser to fetch resource early (fonts, scripts, styles). |
prefetch | URL | Hints browser to fetch resource for next navigation. |
Verification Tags
| name | Service | Description |
|---|---|---|
google-site-verification | Google Search Console | Domain ownership verification for GSC. |
msvalidate.01 | Bing Webmaster Tools | Domain ownership verification for Bing. |
p:domain_verify | Pinterest domain verification. | |
yandex-verification | Yandex Webmaster | Yandex domain verification. |
facebook-domain-verification | Facebook domain verification for Business Manager. |
JSON-LD Structured Data
| @type | Common Properties | Rich Result |
|---|---|---|
WebPage | url, name, description | Standard page. |
Article | headline, author, datePublished | Article with author info. |
Organization | name, url, logo, telephone | Knowledge panel. |
Person | name, url, jobTitle | Author/creator profile. |
Product | name, offers (price), brand | Product price in search. |
FAQPage | mainEntity (Q&A pairs) | Expandable FAQ in SERP. |
BreadcrumbList | itemListElement (position, name) | Breadcrumb in SERP URL. |
LocalBusiness | name, address, telephone, openingHours | Local pack listing. |
Event | name, startDate, location | Event listing. |
Tip: JSON-LD structured data is the preferred method by Google. Place it inside
<script type="application/ld+json"> tags anywhere in <head> or <body>.
See the full specification at schema.org.