Meta-Tags: So optimieren Sie Ihren Quellcode richtig
Meta-Tags liefern Suchmaschinenbots und Webbrowsern zusätzliche Informationen zu einer Seite. Platzieren Sie die Meta-Tags im Head-Bereich Ihrer Website, damit Suchmaschinen und Browser die Angaben auswerten können. Nicht unterstützte Meta-Tags werden dabei ignoriert.
Wo finde ich die Meta-Tags?
Sie finden die Meta-Tags einer Website direkt im HTML-Quelltext: Rufen Sie die gewünschte Website auf. Klicken Sie mit der rechten Maustaste auf eine freie Stelle der Seite und wählen Sie „Seitenquelltext anzeigen“ (oder drücken Sie Strg + U). Dann sehen Sie den HTML-Quellcode. Suchen Sie dort nach dem <head>-Bereich. Innerhalb dieses Abschnitts befinden sich die Meta-Tags (<meta ..>), die wichtige Informationen für Suchmaschinen und Browser beinhalten.
Meta-Tags für Suchmaschinen
Meta-Tags für Suchmaschinen steuern, wie Bots oder Crawler eine Seite indexieren und in den Suchergebnissen anzeigen. Außerdem liefern sie wichtige Informationen über den Seiteninhalt.
- <meta name=“description“ content=“Hier steht eine prägnante Zusammenfassung der Seite (ca. 150-160 Zeichen) mit den wichtigsten Keywords.“>
Die Meta-Description liefert eine kurze Zusammenfassung des Seiteninhalts und kann von Google als Vorschautext in den Suchergebnissen verwendet werden. Ein aussagekräftiger Text mit relevanten Begriffen und einer passenden Handlungsaufforderung erhöht dabei die Klickrate.
Beachten Sie: Google entscheidet selbst, ob Ihre Meta-Description oder ein Textabschnitt der Seite in den SERPs erscheint. Eine Länge von 140 bis 160 Zeichen gilt als optimal. Achten Sie darauf, dass die Beschreibung den Inhalt der jeweiligen Seite präzise und verständlich zusammenfasst. - <meta name=“robots“ content=“noindex, follow“>
Das Robots-Meta-Tag gibt Suchmaschinen Anweisungen zur Indexierung einer Seite (index, noindex) und zum Umgang mit den darin enthaltenen Links (follow, nofollow). - <meta name=“google“ content=“notranslate“>
Weist Google an, in den Suchergebnissen keine Übersetzung der Seite anzubieten. Das ist sinnvoll, um fehlerhafte automatische Übersetzungen bei bereits existierenden professionellen Sprachversionen zu verhindern.
Meta-Tags für Webbrowser
Meta-Tags für Webbrowser geben Anweisungen zur korrekten Darstellung und Verarbeitung einer Website. Sie beeinflussen beispielsweise die mobile Darstellung oder die verwendeten
Zeichensätze.
- <meta charset=“UTF-8″>
Legen Sie die Zeichenkodierung Ihrer Website fest, um Darstellungsfehler bei Umlauten oder Sonderzeichen zu vermeiden. Nutzen Sie mit UTF-8 die Standardangabe. - <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
Durch dieses Meta-Tag passt sich die Darstellung Ihrer Website an die Bildschirmbreite des verwendeten Endgeräts an (besonders wichtig für Smartphones). - <meta name=“theme-color“ content=“#1a1a2e“>
Bestimmt für unterstützte Browser eine Farbe für Teile der Browseroberfläche. Auf Smartphones wirkt diese Angabe beispielsweise für die Adressleiste.
Link-Relation-Tags
Bei den Link-Relation-Tags handelt es sich technisch gesehen nicht um Meta-Tags, da sie nicht mit <meta> beginnen. Sie befinden sich im Head-Bereich der Seite und sind für die technische Optimierung wichtig.
- <link rel=“canonical“ href=“https://www.ihre-seite.de“/>
Teilen Sie Suchmaschinen mit, welche URL Sie als bevorzugte Version einer Seite betrachten. Ein selbstreferenzierendes Canonical-Tag gilt als sinnvoller SEO-Standard: Jede indexierbare Seite verweist auf ihre eigene kanonische URL. Canonical-Tags helfen Crawlern dabei, verschiedene URL-Varianten mit identischen oder sehr ähnlichen Inhalten einer einzigen Haupt-URL zuzuordnen. - <link rel=“preload“ href=“https://ihre-seite.de/style.css“ as=“style“ />
Mit preload fordern Sie wichtige Ressourcen frühzeitig vom Browser an. So laden Sie beispielsweise für die korrekte Darstellung des sichtbaren Bereichs benötigte Dateien.
Nutzen Sie preload nur für tatsächlich wichtige Dateien. Zu viele Preloads können das Laden anderer wichtiger Ressourcen beeinträchtigen. Beachten Sie: Sie müssen die CSS-Datei direkt danach noch als normales Stylesheet ohne preload einbinden, um eine fehlerfreie Darstellung zu gewährleisten. - <link rel=“preconnect“ href=“https://www.ihre-seite.de“ />
Mit preconnect bereitet der Browser frühzeitig eine Verbindung zu einem externen Server vor. Dadurch reduziert sich die Wartezeit beim Laden, falls externe Dateien angefragt werden.
Obsolete Meta-Tags
Suchmaschinen und Browser ignorieren veraltete (obsolete) Meta-Tags. Die Tags haben keinerlei positiven Effekt mehr. Entfernen Sie nicht mehr benötigte Meta-Tags: So halten Sie Ihren Quellcode übersichtlich und reduzieren die Verarbeitungszeit.
Im Folgenden finden Sie eine Auswahl überflüssiger Meta-Tags:
- <meta name=“keywords“ content=“Beispiel, Keyword, Suche“>
Suchmaschinen ignorieren das Meta-Keywords-Tag seit über 15 Jahren. Vor dieser Zeit nutzten Webmaster das Tag für Hunderte Begriffe (Keyword-Stuffing), um die Suchergebnisse zu manipulieren. - <meta name=“revisit-after“ content=“7 days“>
Die Angabe soll bestimmten, nach welchem Zeitraum ein Crawler die Seite erneut besuchen soll. Moderne Suchmaschinen entscheiden allerdings selbst, wann und wie häufig sie eine URL erneut crawlen. Dieses Meta-Tag ist somit wirkungslos. Die Crawling-Frequenz hängt von der Autorität der Website, der Aktualität der Inhalte und externen Verlinkungen ab. - <meta name=“language“ content=“de“>
Verzichten Sie auf diese veraltete Variante: Deklarieren Sie die Sprache im öffnenden HTML-Tag (<html lang=“de“>) und befolgen Sie so den offiziellen W3C-Standard. - <meta name=“geo.position“ content=“52.36; 9.72 „>
Geo-Meta-Tags spielen für Local SEO keine Rolle mehr. Suchmaschinen ermitteln heutzutage lokale Suchergebnisse über präzisere Signale wie IP-Adressen und strukturierte Daten. Nutzen Sie strukturierte Daten im JSON-LD-Format zur Übermittlung Ihres genauen Standorts:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Place",
"geo": {
"@type": "GeoCoordinates",
"latitude": 52.36,
"longitude": 9.72
},
"address": {
"@type": "PostalAddress",
"streetAddress": "Blumenauer Str. 1",
"postalCode": "30449",
"addressLocality": "Hannover",
"addressCountry": "DE"
}
}
</script>
- <meta http-equiv=“expires“ content=“Thu, 31 Dec 2026 23:59:59 GMT“>
Meta-Tags mit http-equiv bilden HTTP-Header nach. Steuern Sie Ihr Browser-Caching besser über echte HTTP-Header. Moderne Browser achten primär auf den Header: Weisen Sie den Browser daher über das Apache-Modul mod_headers an, einen festen Sekundenwert als maximale Cache-Dauer (max-age) zu setzen.
<IfModule mod_headers.c>
# 1 Jahr Cache-Dauer für statische Ressourcen (Bilder, CSS, JS)
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
# 1 Woche Cache-Dauer für HTML-Dokumente
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
</IfModule>
Durch das Caching über HTTP-Header laden wiederkehrende Besucher statische Dateien direkt aus ihrem lokalen Browser-Speicher, statt sie erneut vom Server anzufordern. Die Anzahl der HTTP-Anfragen sinkt, die Website baut sich erheblich schneller auf.
Fazit
Meta-Tags sind das Fundament einer technisch optimierten Website. Entfernen Sie veraltete Tags aus dem Quellcode, steuern Sie die fehlerfreie Darstellung im Browser und unterstützen Sie die Suchmaschinen bei der korrekten Indexierung. Nutzen Sie neben den Meta-Tags auch JSON-LD oder serverseitiges Caching zur Verbesserung Ihrer SEO-Performance.
Anzeige
Über Marcel Sarman
IT-AbteilungMarcel Sarman betreut die ABAKUS Website und entwickelt sie weiter. Er ist unser Experte für HTML5, CSS3 und WordPress und schreibt Beiträge für unsere Seite.
Alle Artikel von: Marcel Sarman
