DE | EN

Meta Tags Best Practices

The complete guide to HTML meta tags: Title, Description, Viewport, Robots, Canonical, Open Graph, and Twitter Cards. With character limits and examples.

What Are Meta Tags?

Meta tags are HTML elements in the <head> section of a page that provide search engines and social networks with information about the page content. They are not visible to visitors but significantly influence how your page appears in search results and shared links.

Title Tag

The title tag is the most important meta tag for SEO. It appears as the clickable heading in search results and in the browser tab.

Rules for Good Title Tags

  • Length: 50–60 characters. Google truncates at approximately 580 pixels width, which corresponds to 50–60 characters depending on character width.
  • Keyword up front: Place the main keyword as close to the beginning as possible.
  • Unique: Every page needs an individual title. Duplicate titles dilute SEO effectiveness.
  • Brand at the end: Add the brand name at the end, separated by "—" or "|".
  • Write compellingly: The title should motivate users to click. Use numbers, questions, or active verbs.
<title>Meta Tags Best Practices — The Complete Guide | PageScore</title>

Common mistakes: Keyword stuffing ("SEO SEO Guide SEO Tips"), overly generic titles ("Homepage"), missing titles.

Meta Description

The meta description does not directly affect ranking, but it is crucial for click-through rate (CTR) in search results. A good description can increase CTR by 5–10%.

Rules for Good Meta Descriptions

  • Length: 120–160 characters. Google shows approximately 155 characters on desktop and about 120 on mobile.
  • Call-to-action: Use active phrases like "Learn now," "Try for free," or "Here's how."
  • Include keywords: Search terms in the description are displayed in bold, which increases attention.
  • Unique: Every page needs an individual description.
  • Summarize content: Give a precise overview of what the page contains.
<meta name="description" content="The complete guide to HTML meta tags: Title, Description, Viewport, Open Graph, and more. With character limits, examples, and common mistakes.">

Viewport Tag

The viewport tag is essential for mobile rendering. Without it, the browser renders the page at desktop width and scales it down.

<meta name="viewport" content="width=device-width, initial-scale=1">

This tag should be present on every page. Avoid maximum-scale=1 or user-scalable=no, as these prevent zooming and harm accessibility.

Robots Tag

The robots tag controls how search engines should handle a page.

<!-- Default: Index and follow links -->
<meta name="robots" content="index, follow">

<!-- Do not index the page -->
<meta name="robots" content="noindex, follow">

<!-- No snippet in search results -->
<meta name="robots" content="index, nosnippet">

<!-- Limit snippet length -->
<meta name="robots" content="max-snippet:160, max-image-preview:large">
  • index/noindex: Should the page appear in search results?
  • follow/nofollow: Should links on the page be followed?
  • nosnippet: Do not show a text snippet in search results.
  • max-snippet: Maximum character count for the snippet.
  • max-image-preview: Maximum image size in the preview (none, standard, large).

Note for AI search: according to Google, noindex, nosnippet, max-snippet and data-nosnippet also apply to AI Overviews and AI Mode. Pages that forbid snippets cannot be quoted there. More in our GEO Check guide (German).

Canonical Tag

The canonical tag tells search engines the preferred URL version of a page. This is important when the same page is accessible under multiple URLs (with/without www, with/without trailing slash, with parameters).

<link rel="canonical" href="https://pagescore.de/meta-tags-guide">
  • Always use absolute URLs (with https://).
  • Every page should have exactly one canonical tag.
  • The canonical should point to itself (self-referencing).
  • For paginated content: each page points to itself, not to page 1.

Open Graph Tags

Open Graph tags determine how your page looks when shared on Facebook, LinkedIn, WhatsApp, or other platforms.

<meta property="og:title" content="Meta Tags Best Practices — PageScore">
<meta property="og:description" content="The complete guide to HTML meta tags with examples and best practices.">
<meta property="og:image" content="https://pagescore.de/images/meta-tags-guide-og.jpg">
<meta property="og:url" content="https://pagescore.de/meta-tags-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="PageScore">
<meta property="og:locale" content="en_US">

OG Image Recommendations

  • Size: 1200 x 630 pixels (aspect ratio 1.91:1).
  • Format: JPG or PNG, under 1 MB.
  • Content: Appealing, with readable text and clear branding.

Twitter Card Tags

Twitter (X) uses its own meta tags for displaying shared links. If no Twitter tags are present, most platforms fall back to Open Graph tags.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags Best Practices">
<meta name="twitter:description" content="The complete guide to HTML meta tags.">
<meta name="twitter:image" content="https://pagescore.de/images/meta-tags-guide-og.jpg">
  • summary: Small preview image on the left, text on the right.
  • summary_large_image: Large image above the text — preferred for articles.

Hreflang Tags

If your website is available in multiple languages, hreflang tags help search engines display the correct language version for each user.

<link rel="alternate" hreflang="de" href="https://pagescore.de/meta-tags-guide">
<link rel="alternate" hreflang="en" href="https://pagescore.de/en/meta-tags-guide">
<link rel="alternate" hreflang="x-default" href="https://pagescore.de/meta-tags-guide">

Meta Tags Checklist

  • ☑ Unique title tag (50–60 characters) on every page
  • ☑ Individual meta description (120–160 characters) on every page
  • ☑ Viewport tag for mobile
  • ☑ Canonical tag (self-referencing)
  • ☑ Robots tag correctly set
  • ☑ Open Graph tags for social sharing
  • ☑ Twitter Card tags
  • ☑ Hreflang tags for multilingual sites
  • ☑ Structured data (JSON-LD) for rich snippets

Check your website's meta tags automatically with PageScore — free and in seconds.