Eines meiner Lebens- und Geschäftsmottos lautet: „Wenn Google Ihnen sagt, dass Sie etwas tun sollen, sollten Sie es besser erledigen.“
Und wenn es um die Verwendung von HTML-Meta-Tags für SEO geht, sollte keiner von uns herumalbern.
Allerdings wissen Sie, wie es mit der Google-Suche ist. Die Algorithmen ändern sich ständig und was Google in einem Jahr für wichtig hält, bleibt im nächsten Jahr leicht auf der Strecke. Aus diesem Grund sind einige der Meta-Tags, auf die Sie möglicherweise stoßen, nichts anderes als veraltete Überbleibsel von Google gebraucht sich kümmern um.
Dieser Leitfaden hilft Ihnen dabei, sich auf die Meta-Tags zu konzentrieren, die Sie unbedingt verwenden müssen, und darauf, was Sie damit machen können.
Was sind HTML-Meta-Tags?
Der Kopf einer Webseite enthält viele Informationen über den dort gefundenen Inhalt. Hier finden Sie Ihre HTML-Meta-Tags sowie alle CSS- oder JavaScript-Links, die für die Seite gelten.
Hier ist ein Beispiel dafür, wie ein aktueller WebDesigner Depot-Beitrag über CSS-Bibliotheken aussieht:
Allein diesem Snippet können Sie einige wichtige Details zur Seite entnehmen:
- Der (Meta-)Titel
- Die Meta-Beschreibung
- Der Metainhaltstyp und das Ansichtsfenster
Dies sind alles Meta-Tags. Meistens werden sie in HTML als Name/Wert-Paar geschrieben. Zum Beispiel
Im Wesentlichen sind Meta-Tags nichts anderes als Daten über die Daten Ihrer Webseite. Sie werden nie auf der Seite angezeigt. Sie agieren lediglich im Hintergrund und warten darauf, dass Such-Bots den HTML-Code erkennen und ihn verwenden, um das Suchergebnis der Seite zu verbessern. Sie sind auch nützlich für Browser, RSS-Feeds und Social-Media-Plattformen, die diese Details an Benutzer weitergeben (und den Inhalt anzeigen).
Welche Meta-Tags müssen Sie verwenden?
Man könnte argumentieren, dass es sich lohnt, alle von Google und anderen Suchmaschinen erkannten Meta-Tags zu verwenden. Aber wie bei allem, was Sie im Bereich Webdesign und -entwicklung tun, sollten Sie Ihre Schlachten mit Bedacht auswählen.
Verbringen Sie also nicht Ihre Zeit damit, Ihre Webseiten mit allen möglichen Meta-Tags zu füllen, sondern machen Sie sich damit vertraut, welche verfügbar sind und welche davon sich lohnen, verwendet zu werden.
Titel
HTML-Beispiel
Was tut es?
Dies gibt den Namen der Seite an.
Brauchst du es wirklich?
Ja, dieser ist nicht verhandelbar, da er den Suchmaschinen mitteilt, wie die Seite heißt.
Dieses Tag ist praktisch, wenn Sie Ihren Titel auch speziell auf Suchergebnisse zuschneiden möchten. Nehmen wir also an, Sie haben einen Clickbait-Titel geschrieben, damit Besucher, die ihn auf der Website sehen, zum Klicken gezwungen werden. Etwas wie:
So verdienen Sie mit nichts anderem als Ihrem Laptop, Ihrem Reisepass und Ihrem besten Freund ein sechsstelliges Gehalt
Diese Titelzeichenfolge ist 98 Zeichen lang und wird von Google auf keinen Fall jemals vollständig angezeigt. Anstatt den Titel Ihrer Website neu zu schreiben, können Sie das Titel-Tag verwenden, um Google einen Titel zu geben, der seinen Standards besser entspricht, wie zum Beispiel:
Das sind 56 Zeichen, innerhalb der Titelbeschränkung von Google und funktioniert genauso gut wie das Original
Beschreibung
HTML-Beispiel
WWas macht das?
Dies ist eine kurze Zusammenfassung dessen, was auf der Seite zu finden ist. Bei der Suche ist dies die Seitenbeschreibung, die unter dem Seitentitel und der URL angezeigt wird.
Brauchst du es wirklich?
Ja, das ist ein weiterer wichtiger Meta-Tag.
Wenn Sie es Google überlassen, eine Beschreibung für die Seite zu erstellen, besteht diese höchstwahrscheinlich nur aus den ersten 160 Zeichen dessen, was dort gefunden wird. Und wenn Sie oben auf der Seite Werbung, Bild-Alternativtext oder irgendetwas anderes haben, was die Maschinen lesen können, bleiben Sie möglicherweise bei einer beschissenen Meta-Beschreibung hängen.
Nehmen Sie sich also die Zeit, eines zu verfassen.
Zeichensatz
HTML-Beispiel
Was tut es?
Dieses Meta-Tag definiert, welchen Zeichensatz der Browser zur Interpretation des Inhalts verwenden soll.
Brauchst du es wirklich?
UTF-8 ist weder der einzige Zeichensatz noch allgemein akzeptabel. Stellen Sie daher sicher, dass Sie mithilfe dieses Meta-Tags den Standardzeichensatz für Ihre Website definiert haben.
Wenn Sie sich nicht sicher sind, ob Ihre Website einen anderen Charakter benötigt, siehe diese Liste. Wenn die Website für ein internationales Publikum übersetzt werden soll, kann man mit Sicherheit sagen, dass Sie auf jeden Fall einen anderen Zeichensatz als UTF-8 verwenden müssen.
Hreflang
HTML-Beispiel
Was tut es?
Dieses Tag teilt Google mit, in welcher Sprache oder in welchem regionalen Dialekt der Inhalt der Seite verfasst ist, sodass er ihn den richtigen Nutzern anzeigen kann.
Brauchst du es wirklich?
Es gibt einige Gründe, dieses Meta-Tag zu verwenden:
- Wenn Sie eine internationale Website mit verschiedenen übersetzten Versionen erstellt haben;
- Wenn Sie den Inhalt in einem bestimmten Dialekt geschrieben haben, z de-uns vs. en-gb;
- Wenn Ihre Seite eine Mischung aus Sprachen oder Dialekten enthält und Sie möchten, dass jede davon erkannt wird.
Ansichtsfenster
HTML-Beispiel
Was tut es?
Es gibt Anweisungen dazu, wie Google Ihre Seite auf allen Geräten rendern soll, ist aber in dieser Mobile-First-Welt besonders wichtig.
Brauchst du es wirklich?
Ja. Das Viewport-Meta-Tag ist eines davon Google hat sich große Mühe gegeben, es zu erklären. Grundsätzlich gilt: Wenn Sie es nicht einbinden oder es falsch verwendet wird, kann es zu Beeinträchtigungen des Seherlebnisses für Benutzer auf Mobilgeräten kommen.
Aus diesem Grund empfiehlt Google, den Inhalt jedes Mal auf width=device-width, initial-scale=1 zu setzen. Wenn Sie versuchen, Variablen wie den Mindestmaßstab einzuführen, könnte dies das Erscheinungsbild Ihrer Website beeinträchtigen, da sie sich von etwas so Einfachem wie Hochformat in Querformat verwandelt.
Kanonischer Link
HTML-Beispiel
Was tut es?
Wenn Sie auf Ihrer Website doppelte Inhalte oder Seiten haben, die einander sehr ähnlich sind, teilt das kanonische Meta-Tag Google mit, welche Seite die Originalseite ist und auf welche Seite der Traffic gelenkt werden soll.
Brauchst du es wirklich?
Google nimmt es nicht gern, Inhalte zu duplizieren. Aber nehmen wir an, Ihr Artikel „5 Möglichkeiten, Ihre WordPress-Sicherheit heute zu verbessern“ ist eine Neufassung eines Beitrags mit dem Titel „7 Möglichkeiten, Ihre WordPress-Sicherheit zu verbessern“ aus dem Jahr 2015.
Anstatt sich von Google dafür bestrafen zu lassen, dass Ihre Website ähnliche Inhalte enthält (und somit versucht, für dasselbe doppelt zu ranken), verwenden Sie dieses Meta-Tag, um Google zu zeigen, wo sich das Original befindet.
Dies wäre auch praktisch, wenn Sie Ihre URL-Struktur geändert haben und sicherstellen möchten, dass der gesamte Datenverkehr über den aktuellsten Link geleitet wird.
Roboter
HTML-Beispiel
Oder:
Was tut es?
Die Robots-Meta-Tags teilen allen Such-Bots („Robots“) oder bestimmten Crawler-Bots („googlebot“, „bingbot“, „duckduckbot“ usw.) mit, wie eine Seite zu behandeln ist. Es hängt normalerweise damit zusammen, wie eine Seite indiziert werden soll.
Brauchst du es wirklich?
Standardmäßig indizieren und folgen Suchmaschinen den Links auf jeder Seite, die Sie auf Ihrer Website erstellen.
Es gibt einige Gründe, warum Sie die Suchmaschinen möglicherweise dazu verleiten, etwas anderes zu tun:
- noindex: Verwenden Sie diese Option, wenn Sie eine Seite aus der Suche ausblenden möchten. (Verlassen Sie sich aus Sicherheitsgründen nicht darauf, denken Sie daran: Es handelt sich nur um einen Vorschlag.)
- nofollow: Dies ist nützlich für Blogs, die Inhalte von Mitwirkenden akzeptieren, diese aber nicht überprüfen. Auf diese Weise werden Affiliate-Links, die auf der Seite platziert werden, von Google nicht verfolgt.
- nosnippet oder max-snippet: Dies steuert, wie Ihr Text, Ihr Bild oder Ihr Video-Snippet in der Suche angezeigt wird.
- noarchive: Wenn es ältere zwischengespeicherte Versionen einer Seite gibt, können Sie damit verhindern, dass Suchmaschinen diese anzeigen.
- nicht verfügbar_nach:[date]: Dies eignet sich gut für eine begrenzte Aktion, beispielsweise im Rahmen von Black Friday-Verkäufen. Während Sie möglicherweise von Oktober bis Dezember den Traffic auf die Seite lenken möchten, ist es sinnvoll, sie aus der Suche zu entfernen, sobald die Feiertage vorüber sind und die Angebote nicht mehr gültig sind.
Google-Site-Verifizierung
HTML-Beispiel
Was tut es?
Dies ist eine der Methoden, mit denen Sie die Inhaberschaft Ihrer Website bestätigen können Google Search Console.
Brauchst du es wirklich?
Sie benötigen dieses Meta-Tag nicht, wenn Sie eine der anderen Optionen gewählt haben. Sie können beispielsweise die Website-Inhaberschaft über Ihren Google Analytics-Tracking-Code oder durch die Aktualisierung Ihres DNS-Eintrags verifizieren. Wenn Sie möchten, können Sie einfach das HTML-Meta-Tag zu Ihrem Header hinzufügen.
Twitter-Karten und Open Graph (Social Media)
HTML-Beispiel
Was tut es?
Open Graph-Meta-Tags (wie das Snippet oben) teilen Facebook und LinkedIn mit, wie die Metadaten für eine Seite oder einen Beitrag angezeigt werden sollen, die auf diesen Social-Media-Plattformen geteilt werden.
Meta-Tags für Twitter-Karten tun dasselbe, mit Ausnahme von Twitter, und fragen normalerweise auch nach Ihrem Handle (@).
Brauchst du es wirklich?
Es kann helfen, ist aber alles andere als notwendig. Wenn ich die grundlegenden Metadaten (z. B. Titel, Meta-Beschreibung, vorgestelltes Bild) für eine Seite auf meiner Website eingebe, werden meiner Erfahrung nach genau diese angezeigt, wenn ich sie in sozialen Netzwerken bewerbe.
Einpacken
Dies ist keineswegs eine erschöpfende Liste aller vorhandenen Meta-Tags.
Beispielsweise könnten Sie auf Webseiten stoßen, die veraltete Meta-Tags enthalten, etwa diejenigen, die den Autor, das Urheberrecht oder die Bewertung angeben. Diese sind nicht mehr notwendig und Sie sollten Ihre Zeit nicht damit verschwenden.
Dabei handelt es sich um eine umfassende Liste der HTML-Meta-Tags, die Sie verwenden können sollen verwenden, wenn es relevant ist.
Konzentrieren Sie sich also darauf, den Suchmaschinen genau mitzuteilen, was sie zum Indexieren Ihrer Seite benötigen, und gleichzeitig zu verhindern, dass Ihre HTML-Dokumente mit unnötigen Tags überschwemmt werden.
