SEO & HTML-Tags: So optimiert ihr euren Quellcode für Google
Dank Content-Management-Systemen (CMS) müssen Website-Betreiber kaum noch auf Quellcode-Ebene arbeiten, wenn sie Webseiten-Inhalte erstellen oder bearbeiten. Dennoch solltet ihr prüfen, ob das HTML eurer Website für Google optimiert ist. Hier kommen einige Tipps und Fallstricke, die ihr beachten solltet.
|
| Dieses Bild erstellte das KI-Tool Craiyon anhand des Prompts "html code". |
Was versteht die Informatik unter dem Begriff "Tag"? Wikipedia,
übernehmen Sie:
"Ein Tag (ausgesprochen [tæg]; aus englisch tag entlehnt, für Etikett, [...])
[...] ist eine Auszeichnung eines Datenbestandes mit zusätzlichen
Informationen. [...] In [...] HTML, bezeichnet Tags die Auszeichnungsmarkierungen [...] für
Elemente in den Dokumenten.
<Elementname> – ein Starttag [...] für den Beginn
</Elementname> – ein Endtag [...] für das Ende einer Auszeichnung"
Soweit die Wikipedia-Definition. Meine obige Einleitung dieses
Blog-Beitrages sieht auf Code-Ebene wie folgt aus. Hier seht ihr die
Elementnamen <p> als Starttag und </p> als Endtag (für eine
größere Ansicht bitte in das Bild klicken):
 |
| <p>-Tags im Quellcode. |
Um es übersichtlicher zu halten, nenne ich im Folgenden nur das
Starttag. Jedes Tag braucht aber natürlich auch immer das entsprechende
Endtag. Schauen wir uns einige aus SEO-Sicht relevante HTML-Tags an:
<p>: Das Paragraph-Element
Das <p>-Tag definiert in HTML einzelne Absätze. Google achtet auf <p>-Tags, um zu verstehen, in welche Sinnabschnitte euer Text unterteilt ist.
Diese Tags befinden sich im Quellcode eurer Seiten und sind für User unsichtbar. Am Beispiel meines Blogs habe ich sie mithilfe des Browser-Add-ons "Web Developer" für euch visualisiert (für eine größere Ansicht bitte in das Bild klicken):
|
| <p>-Tags einer Webseite. |
Heißt für eure redaktionelle Arbeit: Nutzt Absätze (Enter-Taste), um eure Texte bestmöglich inhaltlich zu gliedern. Auch aus Usability-Sicht gilt: Lieber zu viele Absätze als zu wenige, da das Lesen am Bildschirm für das menschliche Auge deutlich anstrengender ist als auf Papier. Folge: Wir scannen Bildschirm-Texte eher, als dass wir sie gründlich lesen. Absätze sind leichter erfassbar als durchgängige "Text-Wände".
Bitte beachten: Ein <p>-Tag sollte stets einen Sinnabschnitt umfassen. Wollt ihr innerhalb eines Sinnabschnittes einen optischen Absatz machen, so solltet ihr das <br>-Tag (Shift + Enter-Taste) für einen Zeilenumbruch ("line break") nutzen.
Außerdem wichtig: Am schlüssigsten sind <p>-Tags für Google, wenn
sie mit Heading-Tags einhergehen (Überschriften-Formatierungen, die den
jeweiligen Sinnabschnitt passend betiteln). Zu denen kommen wir jetzt:
<h1> bis <h6>: Die Heading-Tags
Heading-Tags klassifizieren die Überschriften eurer Texte. Sie sind aus SEO-Sicht sehr relevant, um Keywords zu platzieren.
<h1> ist die wichtigste Headline-Klasse, gefolgt von (hierarchisch
abgestuft) <h2> bis <h6>.
Auch Heading-Tags sind für
eure Besucher*innen unsichtbar. Am Beispiel meines Blogs habe ich ein
<h1>-Tag mithilfe des Browser-Add-ons "Web Developer" sichtbar
gemacht:
|
| <h1>-Tag in einer Überschrift. |
<h1> solltet ihr nur einmal auf einer Seite setzen, auch wenn Google laut offizieller Aussage die Häufigkeit entspannt sieht.
Nutzt Heading-Tags, um kombiniert mit <p>-Tags (siehe oben) Google zu verdeutlichen, aus welchen Sinnabschnitten eure Webseiten-Texte bestehen.
Gängige CMS arbeiten mit Heading-Tags, die in Schriftgröße und -art vorformatiert sind. Das Erscheinungsbild eines Heading-Tags ist jedoch unabhängig von seiner HTML-Elementklasse veränderbar. Über die Gestaltungssprache CSS könnt ihr die Optik anpassen, ohne dass sich dadurch die Heading-Tag-Klasse ändert. Auf Code-Ebene sähe das zum Beispiel so aus:
<html>
<head>
<style>
h1 {
font-size: 16pt;
line-height: 12pt;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 1px;
margin-top: 1px;
}
</style>
</head>
<body>
<h1>Das ist eine H1-Überschrift</h1>
</body>
</html>
➤ Über die Attribute ...
- font-size (Schriftgröße),
- line-height (Zeilenhöhe),
- font-family (Schriftart),
- margin-bottom (unterer Außenabstand)
- und margin-top (oberer Außenabstand)
<ul>, <ol>, <li>: Die Aufzählungs-Formate
Google achtet sehr auf Aufzählungen innerhalb eines Textes. Es gewichtet den dort präsentierten Inhalt höher als im Fließtext. Auch hier treffen sich SEO und Usability: Aufzählungspunkte machen es Usern leichter, den Inhalt einer Webseite zu erfassen.
Es gibt zwei HTML-Aufzählungsformate, die ihr nutzen könnt:
➤ Das <ul>-Tag ("unordered list") erstellt eine unsortierte Liste mit Aufzählungspunkten, aber ohne Zahlen. Ein Beispiel aus einem meiner Blog-Beiträge:
|
| HTML-Tag <ul>: Beispiel einer "unordered list". |
➤ Das <ol>-Tag ("ordered list") erstellt eine sortierte Liste mit Zahlen. Auch hierzu ein Beispiel aus einem meiner Blog-Beiträge:
|
|
HTML-Tag <ol>: Beispiel einer "ordered list". |
Bitte beachten: <ul> und <ol> sind aus SEO-Sicht gleichwertig.
<strong>, <b>, <i>, <u>: Die Textformatierungs-Tags
Mittels Textformatierungs-Tags könnt ihr (bzw. euer CMS) Wörter und Textstellen hervorheben:
Die Tags <strong> und <b> ("bold") fetten Textstellen. Aus SEO-Sicht sind beide Varianten gleichwertig.
Das <i>-Tag ("italic") setzt Texte kursiv.
Das <u>-Tag ("underline") unterstreicht Wörter. Hier aus Usability-Sicht bitte beachten: Unterstrichene Wörter interpretieren User*innen als klickbaren Link (und sind entsprechend irritiert, wenn das unterstrichene Wort nicht klickbar ist).
Es stellt sich die Frage: Warum werden solche optischen
Hervorhebungen über die textbasierte Auszeichnungssprache HTML umgesetzt und
nicht über die Gestaltungssprache CSS?
Tatsächlich ließe sich
zum Beispiel eine Text-Fettung auch über ein
CSS-Element verwirklichen, was auf Code-Ebene wie folgt aussehen
würde:
<style>
.fett {
font-weight: bold;
}
</style>
</head>
<body>
<p>
Dies ist ein mittels CSS <span
class="fett">gefetteter Text</span>.
</p>
In der reinen HTML-Variante sieht der Code dagegen so aus:
<p>Dies ist ein mittels HTML <b>gefetteter
Text</b>.</p>
Beide Varianten produzieren optisch dasselbe Ergebnis: "Dies ist ein [...] gefetteter Text."
Von der erstgenannten CSS-Variante ist aus SEO-Sicht jedoch abzuraten:
Suchmaschinen wie Google indexieren CSS-Textformatierungen nicht.
<a>-Tags für Links
Google achtet auf <a>-Tags ("anchor") für Links und liest diese aus,
weshalb ihr Verlinkungen stets textbasiert gestalten solltet und niemals als
Bild. Ein Beispiel:
|
| Beispiel eines textbasierten <a>-Tags für Verlinkungen. |
Das gilt auch für die Navigations-Punkte: Diese sollten stets textbasierte Links sein, da Google sie als verlinkte Bilder textlich nicht erfassen kann.
Weiterer Tipp: Nutzt für die Navigation das HTML5-Tag <nav>, um der
Suchmaschine zu verdeutlichen, was auf einer Webseite die Navigation ist und
wo der Haupt-Inhalt beginnt.
HTML-Elemente & SEO: Ein Check lohnt sich
Soweit ein Überblick zur SEO-Bedeutung gängiger HTML-Elemente. Prüft mit eurem/r Web-Entwickler*in, ob euer Online-Auftritt diesbezüglich im grünen Bereich ist.
Wie für alle technischen SEO-Aspekte gilt auch für die Tag-Optimierung: Je leichter es Google fällt, eure Inhalte zu "verstehen", desto wahrscheinlicher werden gute Rankings in der unbezahlten Suche. Es lohnt sich sicherzustellen, dass euer Quellcode für die Suchmaschine optimiert ist.
Link-Tipp:
Kommentare