<meta>-Tags in <head> stellen Metadaten über die Seite bereit — Zeichenkodierung, Viewport-Verhalten, SEO-Beschreibungen und Social-Sharing-Vorschauen. Sie werden nicht gerendert, aber von Browsern, Suchmaschinen und sozialen Plattformen gelesen.
charset stellt sicher, dass Text (besonders non-ASCII) korrekt dekodiert wird. Platziere es zuerst.viewport ist das, was eine Seite auf Mobilgeräten responsiv macht — ohne sie rendern Telefone mit einer gefälschten Breite von 980px und zoomen heraus, was dein responsives CSS bricht.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> und description sind das, was in Google-Ergebnissen angezeigt wird, daher treiben sie Klickraten. canonical teilt Suchmaschinen die autoritative URL mit.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Diese steuern die Karte, die erscheint, wenn dein Link auf Facebook, LinkedIn, Slack, X usw. geteilt wird — ohne sie erhältst du eine hässliche oder leere Vorschau.
charset und viewport sind nicht verhandelbar für korrektes Rendering und Mobile Responsiveness; title/description/canonical treiben SEO voran; Open Graph-Tags steuern, wie deine Links beim Teilen aussehen.
Zusammen bilden sie die Metadaten-Schicht, die eine Seite korrekt rendern, ranken und gut teilen lässt.