HTML-Metadaten: Enthaltene Elemente und Best Practices
Veröffentlicht: 2021-01-08Elemente und Best Practices in HTML-Metadaten
Meta-Tags sind kurze Auszüge aus einem Code, der Suchmaschinen wichtige Informationen über Ihre Webseite mitteilt. Sie steuern auch, wie Webbrowser Besuchern angezeigt werden. Meta-Tags sind auf jeder Webseite vorhanden und Sie können sie nur im HTML-Code sehen. Hier ist eine Liste mit Meta-Tag-Beispielen für SEO.
- Meta-Beschreibung
- Meta-Roboter
- Meta-Titel
- Meta-Zeichensatz
- Meta-Refresh-Umleitung
- Meta-Ansichtsfenster
Meta-Titel
Der Seitentitel, der von Google und anderen Suchmaschinen in den Suchergebnissen angezeigt wird, ist der Metatitel. Ein HTML-Titel gibt den Benutzern einen schnellen Einblick in den Inhalt eines Ergebnisses und seine Relevanz für die Suchanfrage. Es ist normalerweise die grundlegende Form der Information, die bestimmt, auf welches Ergebnis geklickt wird. Die Verwendung qualitativ hochwertiger Titel auf Ihren Webseiten ist für SEO sehr wichtig. Hier ist ein Beispiel für einen Metatitel:

Empfohlene Vorgehensweise
- Verwenden Sie einen speziellen Titel-Tag für Ihre Seiten
- Die Titel sollten kurz und aussagekräftig sein
- Vermeiden Sie allgemeine und vage Titel
- Verwenden Sie Titel oder Groß-/Kleinschreibung
- Verwenden Sie keinen Click-Bait, sondern etwas Klickwürdiges
- Übereinstimmung mit der Suchabsicht
- Verwenden Sie maximal 60 Zeichen
- Fügen Sie bei Bedarf Ziel-Keywords hinzu
Titel-Tag-Fehler finden und beheben
Stellen Sie sicher, dass Ihr Titel-Tag weder zu lang noch zu kurz ist. Vermeiden Sie unnötig lange oder wortreiche Titel, während Sie sie prägnant und aussagekräftig halten. Stellen Sie sicher, dass jede Seite einen Titel-Tag hat. Vermeiden Sie mehrere HTML-Titel-Tags auf der Seite, da die Suchmaschinen möglicherweise einen irrelevanten Titel-Tag anzeigen, wenn mehrere Webseiten vorhanden sind. Doppelte Titel auf mehreren Seiten. Es ist sehr wichtig, dass jede Seite Ihrer Website einen eindeutigen und aussagekräftigen Titel hat.
Testen Sie die SEO und Leistung Ihrer Website in 60 Sekunden!
Gutes Website-Design ist entscheidend für das Besucherengagement und die Conversions, aber eine langsame Website oder Leistungsfehler können dazu führen, dass selbst die am besten gestaltete Website unterdurchschnittlich abschneidet. Diib ist eines der besten Website-Performance- und SEO-Monitoring-Tools der Welt. Diib nutzt die Kraft von Big Data, um Ihnen dabei zu helfen, Ihren Traffic und Ihre Rankings schnell und einfach zu steigern. Wie in Entrepreneur!
- Einfach zu bedienendes automatisiertes SEO-Tool
- Keyword- und Backlink-Überwachung + Ideen
- Gewährleistet Geschwindigkeit, Sicherheit, + Core Vitals-Tracking
- Schlägt intelligent Ideen zur Verbesserung der SEO vor
- Über 250.000.000 globale Mitglieder
- Eingebautes Benchmarking und Konkurrenzanalyse
Wird von über 250.000 Unternehmen und Organisationen verwendet:
Synchronisiert mit 
Meta-Beschreibung
Eine Meta-Beschreibung gibt eine kurze Beschreibung einer Webseite. Suchmaschinen verwenden es, um eine Webseite in den Suchergebnissen anzuzeigen. Es informiert und weckt das Interesse der Benutzer, indem es eine kurze und genaue Zusammenfassung des Inhalts einer bestimmten Seite verwendet. Eine Meta-Beschreibung gibt dem Benutzer die Gewissheit, dass er auf der richtigen Seite ist und genau das, wonach er sucht. Sie werden von Google jedoch nicht als direkter Rankingfaktor verwendet. Das folgende Bild zeigt eine Meta-Beschreibung:

Empfohlene Vorgehensweise
- Schreiben Sie für jede Seite eine eindeutige und verständliche Beschreibung
- Geben Sie eine genaue Zusammenfassung an
- Verwenden Sie keine allgemeinen Beschreibungen
- Verwenden Sie die Hauptschlüsselwörter angemessen in einem aussagekräftigen Satz
- Satzfall verwenden
- Verwenden Sie keinen Click-Bait, sondern schreiben Sie etwas Klickwürdiges
- Passen Sie den Zweck der Suche an
- Verwenden Sie maximal 160 Zeichen
Häufige Meta-Beschreibungsfehler
Die häufigsten Fehler beim Schreiben einer Meta-Beschreibung sind denen von Title-Tags fast ähnlich. Eine zu lange oder zu kurze Meta-Beschreibung. Die Länge einer Meta-Beschreibung ist in der Regel unbegrenzt. Um der Gerätebreite gerecht zu werden, werden die extrahierten Suchergebnisse in der Regel gekürzt. Ein weiterer Fehler ist, wenn einer Webseite eine Meta-Beschreibung komplett fehlt.
Stellen Sie sicher, dass Sie es auf Ihrer Website schreiben. Sie können auch eine Seite mit mehr als einer Meta-Beschreibung haben, dies kann jedoch die Suchmaschinen verwirren. Ähnliche Meta-Beschreibungen auf mehreren Seiten zu haben, ist ebenfalls ein häufiger Fehler. Stellen Sie sicher, dass jede Seite eine eigene eindeutige Beschreibung hat.
Meta-Roboter
Meta-Roboter ermöglichen es der Suchmaschine, Webseiten zu crawlen, und bieten auch Anweisungen dazu an. Die Präsenz Ihrer Website in den Suchergebnissen kann sich negativ auswirken, wenn Sie nicht die richtigen Attribute im Meta-Robots-Tag verwenden. Das Verständnis dieses Tags und seine effektive Verwendung werden sich stark auf Ihre SEO auswirken.
Die Indexwerte weisen die Bots an, die Seitenindizierung durchzuführen, während der noindex-Wert die Bots anweist, die Seitenindizierung nicht durchzuführen. Die Bots werden durch den folgenden Wert angewiesen, Links auf der Seite zu crawlen, um für sie zu bürgen, während der nofollow-Wert sie anweist, keine Links auf der Seite zu crawlen, um jegliche Billigung zu vermeiden.
Empfohlene Vorgehensweise
Verwenden Sie die Meta-Roboter-Tags nur, wenn Sie Google-Crawls auf einer Seite einschränken, und vermeiden Sie es, Seiten mit Meta-Roboter-Tags in Robotern zu blockieren.
Häufige Fehler bei Meta-Robotern
Zu den typischen Fehlern von Meta-Robotern gehören Roboter, die keine Indexseiten blockieren. Dies macht es für Google schwierig, das noindex-Robots-Tag zu sehen, und kann die URL weiter indexieren. Ein betrügerischer Meta-Noindex reduziert den organischen Datenverkehr der Seite, indem Google daran gehindert wird, sie zu indizieren. Rogue Meta Nofollow hindert Google daran, die Links der Seite zu crawlen, und verringert die Chancen, wichtige Inhalte zu entdecken und zu indizieren. Dies kann auch den PageRank-Fluss zu wichtigen Seiten verhindern.
Meta-Ansichtsfenster
Ein Meta-Viewport legt den sichtbaren Bereich der Webseite fest und gibt Anweisungen, wie die Seite vom Browser auf verschiedenen Bildschirmgrößen angezeigt wird. Dies ist wichtig, da für Mobilgeräte optimierte Webseiten in den mobilen Suchergebnissen von Google höher eingestuft werden.
Empfohlene Vorgehensweise
Es ist wichtig, dass Sie Meta Viewport auf allen Webseiten und mit dem Standard-Tag verwenden.
Meta-Zeichensatz
Dieses Tag bestimmt die Zeichencodierung für Ihre Seite oder weist den Browser einfach an, wie die Zeichen und der Text auf der Seite angezeigt werden sollen. Es gibt zwei gängige Zeichensätze, darunter UTF-8, das zum Codieren von Unicode verwendet wird, und ISO-8859-1, das zum Codieren des lateinischen Alphabets verwendet wird. Die Codierung mit dem falschen Zeichen führt dazu, dass der Browser falsch angezeigt wird.

Sie werden interessiert sein
Wie Sie Ihr Unternehmen erfolgreich skalieren
Website-Ladegeschwindigkeit: Tools zur Optimierung
Website Health Check: Tools und Tipps
Was bedeutet UX?
(Bildnachweis: Lernen Sie Web-Tutorials)
Probleme mit der Zeichenformatierung führen zu einer negativen Benutzererfahrung und Ihre Seiten können beschädigt aussehen. Andere Probleme, die dies verursachen kann, sind weniger Personen, die auf Ihre Seite verlinken, eine geringe Verweildauer, eine geringe Verweildauer auf der Seite, eine hohe Absprungrate und die Suchmaschine versteht Ihren Inhalt möglicherweise nicht.
Empfohlene Vorgehensweise
- Verwenden Sie auf allen Ihren Webseiten immer das Meta-Zeichensatz-Tag
- Verwenden Sie nach Möglichkeit Unicode/UTF-8
Es ist wichtig, alle Ihre Webseiten zu überprüfen, um sicherzustellen, dass sie die UTF-8-Codierung verwenden.
Meta-Aktualisierungsumleitung
Dieses Tag leitet den Benutzer nach einer bestimmten Zeit auf eine andere URL um. Google versteht und respektiert Meta-Refresh-Redirect-Tags, aber es ist am besten, sie nicht in SEO zu verwenden. Dies liegt daran, dass die meisten Browser sie nicht unterstützen und den Benutzer verwirren und gleichzeitig Sicherheitsbedenken aufwerfen können. Es nimmt auch Zeit in Anspruch, da Seiten analysiert werden müssen, bevor die Ziel-URL sichtbar ist. So sieht dieses Tag aus:

(Bildnachweis: HostPapa)
Empfohlene Vorgehensweise
- Verwenden Sie nur Meta-Refresh-Weiterleitungs-Tags, wenn dies erforderlich ist
Am besten vermeiden Sie die Verwendung von Meta-Refresh-Weiterleitungen, da dies eine schlechte Praxis ist. Wenn Sie sie auf Ihren Webseiten haben, können Sie nach Möglichkeit stattdessen 301- oder 302-Weiterleitungen verwenden.

Meta-Keywords
Meta-Keywords sind ein gutes Beispiel für Meta-Tags, das heutzutage häufig verwendet wird. Es ist nicht ratsam, das Meta-Keywords-Tag mit einer Liste von Ziel-Keywords hinzuzufügen, da Google keine Keywords mehr für Rankings verwendet. Dies liegt daran, dass viele Leute irrelevante Schlüsselwörter eingefügt haben, ohne dass die Benutzer diese Schlüsselwörter jemals gesehen haben. Google ignorierte das Keywords-Meta-Tag, da es häufig missbraucht wurde.
Bing verwendet jetzt das Schlüsselwort-Meta-Tag, um Spam zu signalisieren, sodass dies gegen Sie wirken könnte. Am besten entfernen Sie das Tag von Ihrer Website.
Metadaten sind Daten, die Informationen über andere Daten liefern. HTML-Metadaten fassen grundlegende Informationen zu Daten zusammen, die es einfacher machen, diese bestimmten Daten zu finden und mit ihnen zu arbeiten. Es kann manuell für mehr Genauigkeit oder automatisch erstellt werden, um grundlegendere Informationen bereitzustellen. Mata-Daten werden für Dokumentdateien, Bilder, Videos, Tabellenkalkulationen und Webseiten verwendet.
Was ist ein Meta-Tag-Generator?
Mit einem Meta-Tag-Generator können Sie die erforderlichen und nützlichsten HTML-Meta-Tags für SEO entwickeln.
Best Practices bei der Verwendung von HTML-Metadaten
Deklarieren Sie immer einen Doctype
Eine Doctype-Deklaration sollte das Erste in Ihren HTML-Meta-Tags für SEO sein. Es benachrichtigt den Browser über verwendete XHTML-Standards. Es ist ratsam, den strikten XHTML 1.0-Dokumenttyp zu verwenden, obwohl dies von einigen Entwicklern als schwierige Wahl angesehen wird. Es stellt sicher, dass Ihr Code streng den neuesten Standards entspricht.
Verwenden Sie aussagekräftige Titel-Tags
Titel-Tags machen die Webseite aussagekräftiger und suchfreundlicher.
Verwenden Sie eine beschreibende Liste von Meta-Tags
Eine Liste von Meta-Tags verleiht Ihrer Webseite mehr Bedeutung für Benutzeragenten wie Suchmaschinen-Spider. Es ist wichtig, dass die Beschreibung keine wiederholten Wörter und Sätze enthält, da die Suchmaschinen dies erkennen werden. Verwenden Sie einfache und unkomplizierte Beschreibungen, wenn Sie den Zweck Ihrer Webseite erklären.
Unterteilen Sie Ihr Layout mithilfe von Divs in größere Abschnitte
Wenn Sie ein Website-Design erstellen, sollten Sie im ersten Schritt die Webseite in Abschnitte unterteilen. Dies fördert einen sauberen und gut gemeinten Code und hilft Ihnen, Verwirrung und die übermäßige Verwendung von Divs beim Schreiben eines komplexen und langen Markups zu vermeiden.
Vermeiden Sie das Mischen von Inhalten und Präsentationen
Mischen Sie Ihren HTML-Inhalt nicht mit der visuellen Inhaltsdarstellung, die von CSS bereitgestellt wird. Es ist sehr wichtig, eine separate CSS-Datei für Ihre Stile zu erstellen, anstatt Inline-Stile in Ihrem HTML zu verwenden. Auf diese Weise können Sie und andere Entwickler, die am Code arbeiten, schnelle Änderungen vornehmen und sicherstellen, dass Ihre Inhalte für Benutzeragenten verständlicher sind.
CSS minimieren und vereinheitlichen
Typische Websites haben eine große CSS-Datei und wahrscheinlich andere Dinge wie browserspezifische Korrekturen und CSS-Reset. Wenn jede C-Datei eine HTTP-Anfrage stellt, verlangsamt sie die Ladezeiten der Website. Entfernen Sie nicht benötigte Zeichen wie Zeilenumbrüche, Leerzeichen und Tabulatoren aus Ihrem gesamten Code und vereinheitlichen Sie Dateien, die miteinander integriert werden können. Dies kann helfen, dieses Problem zu lösen und die Ladezeiten Ihrer Website zu verbessern.
JavaScript minimieren, vereinheitlichen und nach unten verschieben
Vermeiden Sie die Verwendung von Inline-JavaScript, sondern versuchen Sie stattdessen, Ihre JavaScript-Bibliotheken zu verkleinern und zu vereinheitlichen, um die Anzahl der HTTP-Anforderungen zu verringern, die zum Generieren einer Ihrer Seiten erforderlich sind. Sie können jedoch in den meisten Browsern keine parallelen Downloads durchführen, was bedeutet, dass der Browser während des Herunterladens von JavaScript nichts anderes herunterlädt, wodurch die Seite so aussieht, als würde sie langsam geladen.
Um dies zu vermeiden, können Sie Ihr JavaScript nach dem Laden Ihres CSS laden, indem Sie das JavaScript gegebenenfalls am Ende Ihres HTML-Dokuments platzieren, vorzugsweise vor dem Schließen des Body-Tags.
Verwenden Sie Überschriftenelemente mit Bedacht
Die Verwendung von h1- bis h6-Elementen zur Angabe der Inhaltsreihenfolge Ihres HTML macht Ihren Inhalt benutzerfreundlicher für Benutzeragenten, Suchmaschinen und Bildschirmlesesoftware. Wenn Sie Blogs verwenden, ist es am besten, das h1-Element für den Titel des Blogbeitrags zu verwenden, im Gegensatz zum Namen der Website, da es ideal für Suchmaschinen ist.
Verwenden Sie die richtigen HTML-Tags an der richtigen Stelle
Es ist wichtig, dass Sie die verfügbaren HTML-Tags kennen und wissen, wie sie genau verwendet werden, um Verwirrung zu vermeiden und eine relevante Inhaltsstruktur zu erstellen.
Wir hoffen, dass Sie diesen Artikel hilfreich fanden.
Wenn Sie mehr Interessantes über den Zustand Ihrer Website erfahren möchten, persönliche Empfehlungen und Benachrichtigungen erhalten möchten, scannen Sie Ihre Website von Diib. Es dauert nur 60 Sekunden.
Vermeiden Sie die übermäßige Verwendung von Divs
Einige Entwickler umschließen div-Tags mit anderen div-Tags, die über mehr div-Tags verfügen und zahlreiche divs erstellen. Das div wird als bedeutungsloses Element angesehen, das nur verwendet werden sollte, wenn keine anderen geeigneten Elemente gemäß den W3C-HTML-Spezifikationen verfügbar sind. Vermeiden Sie zahlreiche Divs, indem Sie sie verantwortungsbewusst und nur dann verwenden, wenn es notwendig ist.
Verwenden Sie eine ungeordnete Liste für die Navigation
Das Navigationselement ist in Kombination mit CSS ein sehr wesentlicher Faktor im Website-Design. Es hilft Ihren Navigationsmenüs, semantisch und schön zu sein. Hier sind zwei Möglichkeiten, dies zu tun:

(Bildnachweis: Studytonight)
Schließen Sie Ihre Tags
W3C-Spezifikationen verlangen, dass Sie alle Ihre Tags schließen. Andere Browser können Ihre Seiten korrekt anzeigen, obwohl das Nichtschließen Ihrer Tags nach normalen Standards ungültig ist.
Verwenden Sie Markup in Kleinbuchstaben
Markup in Kleinbuchstaben zu halten, ist eine gängige Praxis in der Branche. Die Großschreibung Ihres Markups wirkt sich auf die Lesbarkeit Ihres Codes aus, ändert jedoch nicht die Anzeige Ihrer Webseiten.
Verwenden Sie modulare IE-Fixes
Wenn Sie Probleme mit Ihren Seiten haben, können Sie bedingte Kommentare verwenden, um sich auf den Internet Explorer zu konzentrieren. Stellen Sie sicher, dass Sie die Fixes modular gestalten, um sicherzustellen, dass Ihre Arbeit zukunftssicher ist, sodass die ältere Version von IE keine Unterstützung erfordert.
Validieren Sie Ihren Code
Sie sollten die Validierung nicht als die endgültige Bewertung guter Arbeit gegen schlechte Arbeit betrachten. Eine Arbeit, die validiert, ist nicht unbedingt guter Code, und alternativ ist eine Arbeit, die nicht vollständig validiert, nicht unbedingt schlechter Code.
Sie können Autovalidierungsdienste als nützliche Debugger verwenden, um Renderfehler zu identifizieren. Überprüfen Sie Ihre Arbeit beim Schreiben von HTML häufig, um Probleme zu vermeiden, die nach Abschluss Ihrer Arbeit möglicherweise schwer zu identifizieren sind.
Schreiben Sie konsistent formatierten Code
Das Schreiben einer sauberen und gut gemeinten Codebasis unterstreicht Ihre Professionalität und erleichtert es Entwicklern, die möglicherweise an Ihrem Code arbeiten. Sie erhöhen auch die Lesbarkeit Ihrer Arbeit, wenn Sie von Anfang an ein richtig eingerücktes Markup schreiben. Zum Beispiel:

(Bildnachweis: html.com)
Vermeiden Sie übertriebene Kommentare
Der Zweck der Dokumentation Ihres Codes besteht darin, ihn verständlich zu machen, und das Kommentieren Ihres Codes ist für Programmiersprachen wie Java, PHP und C# sinnvoll und logisch. Markup ist jedoch sehr selbsterklärend und Sie müssen nicht jede Zeile in XHTML/HTML kommentieren. Die Überprüfung Ihrer Arbeit auf Semantik wird Ihnen helfen, wenn Sie viel in Ihrem HTML kommentieren, um den Prozess zu erklären.
Diib: Holen Sie sich Ihre HTML-Metadaten-Statistiken hier!
Die Verwendung dieser Elemente und die Befolgung der Richtlinien werden Ihnen bei Ihren SEO-Bemühungen helfen.
Elemente wie eine gute Meta-Beschreibung erhöhen Ihre Klickraten bei Suchanfragen, obwohl sie Ihr Ranking nicht verbessern. Meta-Tags werden jetzt in Social-Media-Plattformen wie Twitter und Facebook verwendet. Sie können Tags verwenden, um zu überprüfen, wie Ihre Daten auf Facebook geteilt werden. Durch die Partnerschaft mit Diib Digital erhalten Sie wichtige Kennzahlen zu Ihren Metadaten, damit Sie effektive Entscheidungen über den Zustand Ihrer Website treffen können.
Hier sind einige der Funktionen unseres Benutzer-Dashboards, von denen wir sicher sind, dass Sie sie lieben werden:
- Maßgeschneiderte Ziele zur Verbesserung der Website-Leistung
- Warnungen, die Sie über Ihre Domain Authority und andere technische SEO-Probleme informieren
- Defekte Seiten, auf denen Sie Backlinks haben (404-Checker)
- Keyword-, Backlink- und Indexierungs-Überwachungs- und Tracking-Tools
- Benutzererfahrung und mobile Geschwindigkeitsoptimierung
- Optimierung des Bildtitels
Klicken Sie hier für Ihren kostenlosen Scan oder rufen Sie einfach 800-303-3510 an, um mit einem unserer Wachstumsexperten zu sprechen.
