Weiter zum Hauptinhalt

So fügst du deinem Website‑Head Metatags hinzu: Metadaten in HTML

Metadaten sind das Erfolgsgeheimnis bei der Website‑SEO. In diesem Leitfaden erfährst du, wie Metatags in HTML korrekt eingefügt werden.

Metatags, auch Metadaten genannt, sind HTML-Snippets, mit denen in der Webentwicklung der Inhalt einer Webseite beschrieben wird. Metatags erscheinen nicht auf den Seiten, sondern befinden sich im Quellcode der Website (dem sogenannten HTML-Code), der wiederum im Website-Head zu finden ist. Diese Tags beschreiben die Seite für Suchmaschinen und helfen ihnen somit, zu bestimmen, worum es auf der Seite geht, und Suchmaschinenbenutzer*innen die relevantesten Seiten bereitzustellen.

Metatags werden in HTML am Anfang der Seite verwendet, sodass sie nur für Suchmaschinen und diejenigen sichtbar sind, die wissen, wie man den Quellcode der Website aufruft. Metadaten informieren Suchmaschinen über die Daten auf einer Website, damit deine Inhalte in beliebten Suchmaschinen wie Google gut abschneiden. Wenn man nicht weiß, wie man Website-Metadaten oder Code-HTML erstellt, kann es leider ziemlich schwierig sein, Metatags hinzuzufügen.

Was ist das HTML-Head-Tag?

Das HTML-Head-Tag ist der Container für Metadaten. Es befindet sich zwischen dem HTML-<html>Tag und den Haupttext<body>-Tags. Hier fügst du alle deine Metatags in HTML ein, um den Titel, die Stile, Skripts und andere Informationen festzulegen. Dieser Bereich der Seite wird nicht im Webbrowser angezeigt. Stattdessen bestimmen Suchmaschinen anhand der Informationen, worum es auf einer Seite geht, einschließlich Titel, Inhalt, Keywords und mehr. Browser verwenden Informationen im Head, um die Website korrekt zu rendern. Im Gegensatz zum Head wird der Hauptteil auf der Seite angezeigt, wenn sie in einen Browser geladen wird, sodass er keine Metadaten enthalten sollte.

Wo ist der HTML-Head?

Der HTML-Head befindet sich zwischen dem HTML-Tag und dem Hauptteil-Tag. Er ist normalerweise viel kleiner als das Hauptteil-Tag, da es hauptsächlich dafür da ist, Metadaten aufzunehmen. Du kannst den HTML-Head deiner einzelnen Webseiten mithilfe der Entwicklertools in deinem Webbrowser finden.

Was sind Website-Metadaten?

Metatags dienen in HTML als wichtige Informationen für Suchmaschinen. Sie werden verwendet, um HTML-Elemente zu beschreiben und Suchmaschinen über den Inhalt einer Website zu informieren. Zu den Website-Metadaten gehören Seitentitel, Beschreibungen, Keywords und mehr, um Suchmaschinen beim Erfassen und Ranken von Webseiten zu unterstützen. Suchmaschinen interpretieren die Daten und Informationen auf Webseiten, um herauszufinden, wie relevant sie für die Suchanfrage von Benutzer*innen sind. Keywords im Haupttext und in Backlinks zur Seite spielen wichtige Rollen, aber Metadaten erklären den allgemeinen Zweck einer Seite, damit sie nach Keywords gerankt werden kann.

Metatags können SEO-Ergebnisse verbessern, indem sie Suchmaschinen helfen, den Zweck einer Seite zu verstehen. Allerdings sind nicht alle Metatags auf die SEO ausgelegt.

Du hast mehrere Möglichkeiten, dem Head einer Website Metadaten hinzufügen. Zunächst benötigst du Zugriff auf den Head-Bereich der HTML-Datei. Du kannst sie herunterladen und mit einem Texteditor bearbeiten oder eine neue Datei erstellen. Du kannst die Datei auch dem Dateimanager von cPanel hinzufügen oder dort bearbeiten. Sobald dir die HTML-Datei vorliegt, suche oben nach dem Head-Bereich. Je nachdem, wie die Seite erstellt wurde, hast du möglicherweise bereits ein Titel-Tag und andere Arten von Metatags.

Wenn du kein/-e Websiteentwickler*in bist, kannst du möglicherweise ein WordPress-Plug-in wie SEOPress oder Yoast verwenden, um deinen Webseiten ganz leicht Metatags hinzuzufügen.

Titel-Tag

Das Title-Tag ist das, was auf Suchmaschinen-Ergebnisseiten (SERPs) als Titel deiner Website angezeigt wird. Jede Seite deiner Website sollte einen eindeutigen Titel haben. Der Titel ist nicht mit dem H1-Tag aus dem Hauptteil der Seite zu verwechseln und kann als Titel für den Inhalt der Seite dienen. Titel-Tags sollten etwa 50 bis 60 Zeichen lang sein, damit Suchmaschinen sie nicht kürzen.

Du kannst den Titel zu einer Webseite hinzufügen, indem du im Quellcode das <title>-Tag findest und die Wörter eingibst. Wenn du dein Titel-Tag eingefügt hast, sollte es so aussehen:

<title> Hier kommt der Titel hin</title>

Titel-Tags sind wichtig, weil sie Suchmaschinen helfen, zu bestimmen, worum es auf einer Website geht und ob sie deine Seite bei einer bestimmten Suche aufführen sollen oder nicht. Titel-Tags werden auch in Browserregisterkarten angezeigt, um dir die Navigation in deinem Browser zu erleichtern.

Effektive Titel-Tags sollten deine Ziel-Keywords verwenden, um Suchmaschinen beim Ranking der Seite zu unterstützen. Sie müssen jedoch auch Benutzerinnen dazu bewegen, deine Artikel oder Webseiten anzuklicken. Keywords mit hoher Priorität sollten so nah wie möglich am Anfang des Titels erscheinen, da dir nicht viel Platz zur Verfügung steht. Darüber hinaus sollte jede Seite einen eindeutigen Titel haben, um Suchmaschinen und ihre Benutzerinnen nicht zu verwirren.

Metabeschreibungs-Tag

Eine Metabeschreibung ist die kurze Zusammenfassung, die auf SERPs unter dem Titel erscheint. Alle deine Seiten sollten eindeutige und genaue Beschreibungen der Inhalte haben. Eine Metabeschreibung sollte zwischen 150 und 160 Zeichen lang sein, damit sie in den Suchergebnissen nicht gekürzt wird. Leider darfst du nicht immer mitreden, wie deine Metabeschreibung aussieht. Selbst wenn du sie selbst schreibst, können Suchmaschinen immer noch entscheiden, dass die bereitgestellten Informationen irrelevant sind, und deine Metabeschreibungen neu schreiben oder den falschen Inhalt von der Seite anzeigen.

Um das Metabeschreibungs-Tag zu deiner Webseite hinzuzufügen, suche den <meta name=" description" content= "Content goes here." >-Abschnitt des HTML-Codes.

Eine Metabeschreibung ist für Suchmaschinen und Benutzerinnen eine wichtige Information. Mit einer effektiven Metabeschreibung kannst du mehr Klicks auf deiner Website erreichen, da sie klarmacht, was Benutzerinnen auf ihr erwarten können.

Wenn du Ziel-Keywords in deine Metabeschreibung einfügst, finden Benutzerinnen deine Inhalte eher und Suchmaschinen finden leichter heraus, worum es auf der Seite geht. Du kannst auch den Zweck der Seite erklären und angeben, was Kundinnen erwartet, wenn sie sie anklicken. Du kannst mit deinen Metabeschreibungen außerdem A/B-Tests durchführen, um zu sehen, welche Versionen häufiger angeklickt wird, mit welchen dein Ranking besser ist und du letztendlich mehr Websitetraffic generierst. Sieh dir diese Beispiele für Metabeschreibungen an und finde heraus, wie du eine effektive Beschreibung verfasst.

Meta-Robot-Tag

Das Meta-Robot-Tag zeigt Suchmaschinen, wie sie deine Website erfassen sollen, und sagt ihnen, welche Seiten du ranken möchtest und welche nicht. Diese Tags haben viele Zwecke, daher musst du sie korrekt verwenden, wenn du bestimmte Seiten ranken und andere ignorieren möchtest.

Robot-Tags sagen Suchmaschinen, ob sie eine Seite indexieren oder ihr folgen sollen, indem sie sie als „INDEX“ (Indexieren) und „FOLLOW“ (Folgen) oder „NOINDEX“ (Nicht indexieren) und „NOFOLLOW“ (Nicht folgen) kennzeichnen. Wenn du eine Seite als „INDEX“ kennzeichnest, sagst du Suchmaschinen, dass sie in SERPs angezeigt werden soll. Wenn du ihnen dagegen mit FOLLOW sagst, dass sie einer Seite folgen sollen, bedeutet das, dass du PageRank an eine bestimmte Seite weiterleiten möchtest. Bei einem NOFOLLOW-Tag folgt die Suchmaschine der Seite nicht, sodass sie kein Seitenranking auf eine andere Art von Webseite übertragen kann. Diese Seiten können immer noch im Google-Index erscheinen, wenn eine andere Website ohne Verwendung des NOFOLLOW-Tags zu ihnen verlinkt. Andere Suchmaschinen haben möglicherweise abweichende Regeln für diese Robot-Tags.

Robot-Tags können ungefähr so aussehen:

<meta name= “robots” content=noindex, nofollow”>
<meta name= “robots” content=noindex, follow”>
<meta name= “robots” content=index, nofollow”>

Welche Tags du verwendest, hängt letztendlich von deinen Zielen für eine bestimmte Seite ab. Die erste Zeile in unserem Beispiel weist Suchmaschinen an, die Seite und die Links innerhalb der Seite zu ignorieren, was sie letztendlich für den Referral-Traffic nutzlos macht. Das zweite Beispiel weist Suchmaschinen an, die Seite zu ignorieren, aber allen Hyperlinks auf dieser Seite zu folgen. Das dritte Beispiel weist Suchmaschinen an, die Seite zu indexieren, den Hyperlinks auf der Seite, die zu anderen Seiten führen können, aber nicht zu folgen.

Jede deiner Seiten sollte ein Meta-Robot-Tag, aber nur ein Tag pro Seite haben. Du solltest nicht alle drei Optionen auf einer einzigen Seite verwenden.

Open-Graph-Tag

Open-Graph-Tags werden zum Teilen von Nachrichten auf sozialen Medienplattformen wie Facebook verwendet. Wenn du Informationen aus einem Blog wie dem gezeigten Bild und einem Snippet weitergeben möchtest, verwendest du das Open-Graph-Tag. Diese Tags informieren soziale Medienplattformen effektiv darüber, welche Art Informationen du anzeigen möchtest, wenn du einen Link von deiner Website teilst.

Wahrscheinlich hast du bereits einige Open-Graph-Tags in Aktion erlebt. Jedes Mal, wenn du einen Link von einer Website in den sozialen Medien teilst, wird automatisch eine Vorschau generiert. Diese Vorschau wird über das Open-Graph-Tag erstellt. Du kannst zwischen vielen Open-Graph-Tags wählen, aber im Head-HTML werden sie so angezeigt:

<meta property=”og:xx”>

Unter anderem kannst du Folgendes in ein Open-Graph-Tag einfügen:
<meta property=”og:title”>
<meta property=”og:description”>
<meta property=”og:type”>
<meta property=”og:image”>
<meta property=”og:url”>
<meta property=”og:site_name”>

Der Titel definiert die Webseite und ihr Thema. Du kannst für den Open-Graph-Titel den Metatitel wählen oder ihn je nach deiner Zielgruppe in den sozialen Medien ändern. Die Beschreibung funktioniert dagegen ähnlich wie eine Metabeschreibung, während der Typ die Art des Inhalts festlegt. Der Typ könnte sich beispielsweise auf ein Lied, eine PDF-Datei oder ein Bild beziehen.

Darüber hinaus sagt das Open-Graph-Tag sozialen Medienplattformen, welches Bild du von der Website abrufen möchtest und als Bild des Beitrags dienen soll. Die URL ist die URL der Seite, die du teilst. Wenn du den Namen deiner Website anzeigen möchtest, kannst du das mit dem Tag für den Websitenamen tun, aber es ist für Benutzer*innen sozialer Medien normalerweise keine wichtige Eigenschaft.

Meta-Keyword-Tag

Mit dem Meta-Keyword-Tag wird beschrieben, für welche Keywords du ein Ranking durchführen möchtest. Die meisten Suchmaschinen ignorieren dieses Tag jedoch, sodass es jedes Jahr veraltet. Wenn du das Meta-Keyword-Tag missbräuchlich verwendest, darfst du zur Strafe eventuell kein Ranking für deine Ziel-Keywords durchführen. Werden sie korrekt verwendet, kann dieses Tag Suchmaschinen sagen, worum es bei deinen Inhalten geht, indem es wichtige Keywords auf deiner Seite hervorhebt. Leider verwendet Google das Meta-Keyword-Tag nicht, andere Suchmaschinen aber vielleicht schon. Daher lohnt es sich, zu überlegen, ob du deine SEO mithilfe anderer Suchmaschinen als Google verbessern möchtest.

Zumindest kann dir das Meta-Keyword-Tag helfen, nachzuverfolgen, welche Keywords du auf verschiedenen Website-Seiten anvisierst. Das Tag sieht so aus:
<meta name+" keywords" content=" keywords go here"/>

Da die führenden Suchmaschinen das Meta-Keyword-Tag nicht mehr als Rankingfaktor verwenden, musst du keine Zeit mehr damit verschwenden oder mehr Code hinzufügen, der deine Website eventuell verlangsamt. Du kannst es stattdessen überspringen und dich auf Metatags konzentrieren, die helfen können, Rankings und Benutzererfahrung zu verbessern.

Weitere HTML-Metatags

Es gibt viele andere Arten von Metatags, die du im Head oder im Hauptteil einer Website verwenden kannst, darunter:

  • Canonical Tag: Das Canonical Tag wird verwendet, um anzugeben, ob dies die Originalversion einer Webseite ist. So wissen Suchmaschinen, dass es sich bei einer Version um die Hauptseite handelt und die anderen nicht indexiert werden sollten. Dies kann verhindern, dass du dir selbst mit Rankings Konkurrenz machst und dass doppelte Inhalte zu einem Problem werden.
  • Tag für Alternativtext: Das Alt-Text-Tag hilft Suchmaschinen, Bilder mithilfe von Text zu lesen, da sie nicht erkennen können, wie ein Bild aussieht. Wenn du Alt-Text schreibst, verwende immer relevante Beschreibungen ohne Keyword-Stuffing. Alt-Text ist auch für Screenreader wichtig, um die Barrierefreiheit der Website zu verbessern. Er muss daher für die Benutzer*innen Sinn machen.
  • Header-Tags: Header-Tags werden verwendet, um die Schriftgröße zu ändern und Inhalte zu strukturieren. Diese Tags reichen von H1 (dem größten) bis H6 (dem kleinsten) und können Leser*innen helfen, Inhalte zu überfliegen.
  • Language-Tags: Das Language-Metatag sagt Suchmaschinen, in welcher Sprache der Inhalt verfasst ist, und gibt das Land an, um die Suchergebnisse basierend auf Sprache und Standort zu verbessern.
  • Author-Tags: Author-Tags geben den Autor bzw. die Autorin des Inhalts an, was helfen kann, Googles Anforderungen an Expertise, Zuverlässigkeit und Vertrauenswürdigkeit (Expertise, Authoritativeness, Trustworthiness, EAT) für das Ranking von Inhalten zu erfüllen.
  • Veröffentlichungsdatum: Das Veröffentlichungsdatum kann in Blogs verwendet werden, damit Benutzer*innen besser beurteilen können, wie relevant und aktuell die Informationen sind. Erfahre mehr über Metadaten für Blogposts.
  • Stil Das Style-Tag enthält CSS-Code, der festlegt, wie die HTML-Elemente in Browsern angezeigt werden sollen.

Du musst die Vor- und Nachteile der einzelnen Tags abwägen, wenn du überlegst, welche du verwenden willst. Mehr Code auf deiner Website kann sich negativ auf die Ladegeschwindigkeit auswirken und verhindern, dass deine Website so schnell wie möglich lädt. Die Seitengeschwindigkeit legt fest, wie lange eine Seite deiner Website zum Laden braucht. Je länger das Laden einer Seite dauert, desto wahrscheinlicher brechen Benutzerinnen wieder ab, sodass du letztendlich deinen Webtraffic und eine Verkaufschance verlierst. Bei der Beurteilung deiner Seitengeschwindigkeit musst du sowohl Desktops als auch Mobilgeräte berücksichtigen. Benutzerinnen, die eine Website über ein Mobilgerät besuchen, haben noch weniger Geduld. Daher sollte die Geschwindigkeit deiner mobilen Seite oberste Priorität haben, damit Benutzer*innen nicht das Interesse an den Inhalten deiner Seite verlieren.

Die Seitengeschwindigkeit ist auch ein wichtiger Rankingfaktor, da sie die Benutzerfreundlichkeit verbessert. Je schneller eine Webseite lädt, desto wahrscheinlicher ist es, dass Benutzerinnen eine gute Erfahrung machen, sodass Suchmaschinen Benutzerinnen bessere Ergebnisse liefern können. Die Seitengeschwindigkeit wirkt sich auch auf deinen Umsatz aus. Eine Seite muss schnell laden, damit deine potenziellen Kund*innen auf der Website aktiv bleiben, sodass sie vor dem Konvertieren alles Notwendige in Erfahrung bringen können.

Metatags sind zwar auch für Suchmaschinen unerlässlich, es ist aber immer am besten, darauf zu achten, welche du am dringendsten brauchst. Wir haben besprochen, welche Metatags auf deiner Website am wichtigsten sind, um die SEO zu verbessern, aber es kann sich auf die Seitengeschwindigkeit und unmittelbar auf deine Rankings auswirken, wenn du deiner Website noch weiteren Code hinzufügst.

Warum du dem Website-Head HTML-Metadaten hinzufügen solltest

Metadaten können nur im Website-Head verwendet werden. Wenn du sie in den Hauptteil der Seite einfügst, erscheinen sie beim Rendern im Browser, was letztendlich die Benutzererfahrung beeinträchtigt und verhindert, dass Suchmaschinen deine Webseiten mithilfe der Daten effektiv einstufen können. Wenn dein Markup ungültig ist, stellen Browser deine Seiten möglicherweise nicht korrekt dar. Verwende Tags deshalb nur im Head, wo sie hingehören, da dies der einzige Ort ist, wo Suchmaschinen nach ihnen suchen.

Websitemetadaten – ein paar letzte Anmerkungen

Metadaten können deine SEO einen riesigen Schritt voranbringen, da du mit ihnen deine eigenen Titel und Beschreibungen verfassen und Suchmaschinen sagen kannst, wie sie mit deiner Website interagieren und sie verstehen sollen. Für alle, die keine Websiteentwickler*innen sind, ist die Arbeit mit HTML-Code aber unter Umständen schwierig. Glücklicherweise ist das nicht deine einzige Option. Wenn du eine WordPress-Website hast, erleichtern dir SEO-Plug-ins das Hinzufügen von Tags. Auch die Marketingdienste von Mailchimp sind eine Option. Wenn du mit Mailchimp eine Website erstellst, kannst du deine eigenen Metatags für deine Website schreiben, einschließlich Metatitel und Metabeschreibungen, damit du in Suchmaschinen gut abschneidest und mehr Websitetraffic erhältst.

Artikel teilen