Aufbau und Auszeichnung der HTML-Templates einer Webseite haben Einfluss auf die Suchmaschinenoptimierung. Gut und schlank strukturierter HTML-Quellcode führt nicht nur zu kürzeren Ladezeiten beim Aufbau einer Seite, sondern kann Webcrawlern dabei helfen, Struktur und Inhalt einer Seite leichter zu verarbeiten und besser zu verstehen.
Ein gerne bemühtes Beispiel für die formale Strukturierung von Inhalten im HTML-Quelltext sind Überschriften, die sogenannten „Headings“. Die HTML-Auszeichnungen h1 bis h6 für Überschriften stellen neben den Absätzen die einfachsten Gliederungsmöglichkeiten für Texte dar. Durch die Verwendung der verschiedenen Überschriftengrade lässt sich ein Text sauber strukturieren und Bestandteile eines Textes gemäß Ihrer Bedeutung unterschiedlich gewichten.
So sollte darauf geachtet werden, dass wichtige Überschriften als h1 und h2 ausgezeichnet werden. Auf der anderen Seite bedeutet dies auch, dass für unwichtige Inhalte die beiden Überschriftenangaben h1 und h2 nicht verwendet werden sollten.
Natürlich bietet es sich auch an, den Quellcode schlank und fehlerfrei zu halten. Der Quellcode muss nicht vollständig W3C-konform sein. Trotzdem macht es Sinn, die Webseite auf grobe Fehler über den Markup Validation Service des W3C zu prüfen. Mittlerweile kommen jedoch auch die meisten Suchmaschinenbetreiber mit fehlerhaften und stark verschachtelten Seiten problemlos zurecht.
Besser Text als Bild
Damit alle Bestandteile der Webseite verarbeitet werden können, sollte bei der Darstellung von Inhalten weitestgehend auf die Verwendung von Grafiken verzichtet werden. Texte und Navigation sollten auf jeden Fall auf Text-Basis dargestellt werden. Wenn hierfür ausgefallenere Schriftarten abseits der Standard-Fonts gewünscht sind, bieten die kostenlosen Google Fonts eine gute Möglichkeit, hier trotzdem nicht auf die Darstellung in Textform zu verzichten.
Bilder und Grafiken sollten immer über einen aussagekräftigen alternativer Beschreibungstext für Bilder, auch alt-Text genannt, verfügen. Dieser wird im HTML-Quelltext als Attribut des Image-Tags ausgegeben. Ohne alt-Text fällt es Suchmaschinen schwer, den Inhalt eines Bildes korrekt zu erkennen. Als Faustregel für die Gestaltung eines alt-Textes gilt hier: Erklären Sie einem Mitmenschen kurz und prägnant den Inhalt des Bildes.
Meta-Angaben
Ähnlich der robots-Meta-Anweisung noindex gibt es weitere Meta-Angaben, die eine Auswirkung auf die Suchmaschinenoptimierung und das Verhalten der Webcrawler haben. Über diese Angaben ist es auch möglich, nur bestimmte Webcrawler anzusprechen und hierdurch beispielsweise nur Google die Indexierung einer Seite zu verbieten.
<meta name="googlebot" content="index" />
Mit dieser Meta-Angabe erlauben Sie der Suchmaschine Google ausdrücklich, den Inhalt der Seite im Index aufzunehmen. Diese Angabe ist nicht zwingend erforderlich, da die meisten Suchmaschinen die Seite sowieso indexieren, wenn dies nicht explizit verboten ist.
<meta name="robots" content="nofollow" />
Diese Meta-Angabe verbietet allen Suchmaschinen, Links auf einer Seite zu folgen. Die Angabe bezieht sich sowohl auf externe wie auf interne Links. Die Seite, auf der das Tag enthalten ist, wäre jedoch trotzdem im Index zu finden, außer die Seite wurde über die robots.txt gesperrt.
<meta name="robots" content="noindex, nofollow" />
Mit dieser Angabe verbieten Sie der Suchmaschine, Links auf einer Seite weiter zu folgen und die Seite im Index zu führen. Diese Angabe macht dann Sinn, wenn die URL der Seite selbst sowie die verweisenden Seiten nur temporär zur Verfügung stehen.
<meta name="robots" content="noarchive" />
Damit verbieten Sie der Suchmaschine, eine Kopie der Seite im Cache anzubieten. Wird diese Auswahl nicht getroffen, kann z.B. über die Google-Suchergebnisseite eine Kopie der Webseite betrachtet werden. Aktuell funktioniert dies über einen Klick auf das kleine grüne Dreieck neben der URL auf der Google-Suchergebnisseite und einen Klick auf „Im Cache“. Auch wird hierdurch verhindert, dass Dienste wie archive.org eine Kopie anlegen.
Die identischen Werte können auch bei der Verwendung des X-Robots-Tag im HTTP Header verwendet werden. Neben den genannten Beispielen gibt es weitere Meta-Angaben, die zur Verfügung stehen und verwendet werden können.
In Zusammenhang mit der Suchmaschinenoptimierung wird häufig das Meta-Tag „keyword“ angesprochen. Auf dieses Meta-Tag kann für die Suchmaschinen Google, Bing und Yahoo! heute verzichtet werden, da die übergebenen Keywords nicht wirklich beachtet werden. Natürlich gibt es andere Gründe das Meta-Tag „keyword“ trotzdem zu verwenden, zum Beispiel für die Nutzung bei Boomark-Verzeichnissen oder anderen Diensten, die auf diese Information noch zurückgreifen. Weitere relevante Meta-Angaben werden im Verlauf dieser Artikelreihe vorgestellt und erläutert.
Detaillierte Informationen Informationen zu Meta-Tags im Allgemeinen finden sich auch auf den Webmaster-Support-Seiten bei Google. Eine Übersicht der aller möglichen robots-Anweisungen hat das Team von Matt Cutts hier zur Verfügung gestellt.
Seitenbeschreibung und Seitentitel
Sowohl der Seitentitel (title) als auch die Seitenbeschreibung (description) werden in der Regel. auf der Ergebnisseite der Suchmaschinen ausgegeben. Beide Angaben sind daher nicht nur für die Suchmaschinenoptimierung wichtig, sondern auch der Nutzer profitiert von einem aussagekräftigem Seitentitel und einer erklärenden Seitenbeschreibung. Daher sollte dieses Thema aus technischer Perspektive immer berücksichtigt werden. Beide Angaben finden sich im HTML-Head eines HTML-Dokumentes.
Über das verwendete CMS sollte die Möglichkeit bestehen, den Seitentitel und die Seitenbeschreibung für jede Seite individuell anzupassen. Wird kein CMS verwendet, sollte die Technik-Abteilung oder auch der technische Dienstleiter eine alternative Möglichkeit anbieten, diese beiden Seitenbestandteile zu editieren und optimiert auszuliefern.
Die Darstellung des Seitentitel ist bei den meisten Suchmaschinen auf ca. 65 Zeichen und die Darstellung der Seitenbeschreibung auf ca. 160 Zeichen begrenzt. Werden keine zusätzlichen Angaben hinterlegt, verwendet unter anderem auch Facebook diese Informationen und zeigt dieses an, wenn ein Link geteilt wird.
Beispiel eines Seitentitels
<title>Der Seitentitel befindet sich im HTML-Head</title>
Beispiel einer Seitenbeschreibung
<meta name="description" content="Die Seitenbeschreibung befindet sich ebenfalls im HTML-Head und sollte ca. 160 Zeichen haben." />
Auszeichnungen mit schema.org
Mit schema.org gibt es eine zusätzliche Möglichkeit zur Auszeichnung von Meta-Daten. Die verschiedenen Suchmaschinenanbieter zeigen diese zusätzlichen Informationen, wie den Autor des Artikels oder die Anzahl an Bewertungen, auf der Suchergebnisseite an. Die Auszeichnung wird von Google, Yahoo! und Bing unterstützt und bietet Webseitenbetreibern eine Vielzahl an Möglichkeiten zur Auszeichnung von zusätzlichen Informationen.
Damit die zusätzlichen Daten erfasst werden können, ist eine Anpassung des HTML-Codes erforderlich. Außerdem dürfen die Seiten nicht über die robots.txt ausgeschlossen werden und auch sonst nicht von der Indexierung ausgenommen sein.
Über die Auszeichnung mit schema.org lässt sich z.B. die Brotkrumen-Navigation einer Webseite kennzeichnen. Hierdurch können auf der Suchergebnisseite von Google statt der URL die einzelnen Ebenen der Brotkrumen-Navigation angezeigt werden. Darüber hinaus lassen sich z.B. Produktinformation (inkl. Verfügbarkeit und Preis), Kontaktdaten oder das Logo eines Unternehmens auszeichnen. Das Schema wird permanent erweitert.
Die Möglichkeiten der Auszeichnung sind auf schema.org/docs/ umfangreich dokumentiert. Auch Google bietet eine Übersicht der möglichen Auszeichnungen an.
In diesem Zusammenhang sollte erwähnt werden, dass nicht automatisch alle Daten in den Suchergebnissen angezeigt werden. Bei einigen Angaben dauert es in der Regel einige Tage bis Wochen – andere stehen bislang nur ausgewählten Seiten zur Verfügung. Hierdurch soll ein Missbrauch verhindert werden.
Um zu prüfen, ob die Auszeichnung richtig vorgenommen wurde, bietet Google das Werkzeug „Test-Tool für strukturierte Daten“ an. Neben URLs lässt sich hier auch der HTML-Code vor der Implementierung in der Seite überprüfen. Die vorherige Überprüfung sollte auf jeden Fall vorgenommen werden, um sicher zu sein, dass der Aufbau den Anforderungen entspricht.
Über das Test-Tool wird ebenfalls eine Vorschau des Suchschnipsels (Snippets) für die Google-Suche angezeigt. So kann man sich im Vorfeld bereits einen Überblick über die Darstellung verschaffen. Über die Google Webmaster Tools, auf die im Rahmen dieser Artikelreihe ebenfalls später eingegangen wird, besteht außerdem die Möglichkeit, die Verwendung des Markups auf der eigenen Webseite auszuwerten.
Beispiel einer Brotkrumennavigation
<div itemprop="breadcrumb">
<a href="category/books.html">Books</a>
<a href="category/books-literature.html">Literature and Fiction</a>
<a href="category/books-classics">Classics</a>
</div>
Beispiel einer Logo-Einbindung
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Home</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>
nofollow in Verweisen
Über das rel=“nofollow“-Attribut für Links besteht die Möglichkeit, auch einzelne Links als nofollow zu kennzeichnen. Anders als bei der robots-Meta Angabe bezieht sich diese Angabe nicht auf die gesamte Seite, sondern auf den jeweiligen Link, bei dem das Attribut verwendet wird.
Das Attribut sollte vorrangig für nicht vertrauenswürdige Links genutzt werden. Dies kommt insbesondere dann zum Tragen, wenn Nutzer auf der Webseite Kommentare hinterlassen können. Ein prominentes Beispiel für die Nutzung dieser Möglichkeit ist Wikipedia. Hier sind externe Links in aller Regel als nofollow gekennzeichnet. Auch die Links in Kommentaren bei WordPress werden automatisch als nofollow gekennzeichnet.
Weiterer Vorteil dieses Attributs ist, dass sich über die Angabe rel=“nofollow“ eine gewisse Priorisierung der Crawling-Ressourcen festlegen lässt. So kann ein Link zum Login-Bereich einer Seite als nofollow kennzeichnet werden. Tendenziell empfiehlt Google jedoch, auf den Einsatz der Angabe für interne Links zu verzichten.
Beispiel eines nofollow-Links
<a href="http://beispiel.de/" rel="nofollow">Beispiel</a>
hreflang und Sprachangaben
Über das hreflang-Attribut kann die Sprache und die Region einer Webseite angegeben werden, für welche sie relevant ist. Dies ist besonders hilfreich, wenn die Webseite in verschiedenen Sprachen oder für bestimmte Regionen zur Verfügung steht. Ebenfalls lässt sich über die hreflang-Angabe das Pendant zur aktuellen Seite in einer anderen Sprache referenzieren.
Hilfreich ist die Angabe zum Beispiel, wenn für den deutschen, österreichischen und Schweizer Markt unterschiedliche Bereiche auf einer Webseite bereitgehalten werden. Ähnliches gilt für verschiedene englischsprachige Angebote für Regionen wie Irland, Kanada, Großbritannien und Australien.
Bei der Verwendung der Angabe hreflang wird auch ungewollter Duplicate Content vermieden, der ansonsten durch die identische Sprache erzeugt werden könnte. Als Duplicate Content werden Inhalte bezeichnet, die in gleicher Ausführung über unterschiedliche URLs erreichbar sind. Duplicate Content kann zu einer schlechteren Positionierung in den Suchergebnissen führen und sollte daher vermieden werden.
Die Angabe wird derzeit von Google unterstützt. Für die Suchmaschinen Bing und Yahoo! sollte zusätzlich noch die Angabe http-equiv="content-language" verwendet werden.
Beispiele einer hreflang-Angabe
<link rel=”alternate” href=”http://domain.com/en-ie” hreflang=”en-ie”/>
<link rel=”alternate” href=”http://domain.com/en-ca” hreflang=”en-ca”/>
<link rel=”alternate” href=”http://domain.com/en-au” hreflang=”en-au”/>
<link rel=”alternate” href=”http://domain.com/en” hreflang=”en”/>
Beispiel content-language
<meta http-equiv="content-language" content="en">
canonical-Attribut
Das canonical-Attribut wurde zur Vermeidung von doppelten Inhalten (Duplicate Content) eingeführt. Über das canonical-Attribut wird eine autorisierte Version der Seite festgelegt. Lässt es sich nicht auf andere Art und Weise vermeiden, einen Inhalt unter mehreren URLs anzubieten, sollte das canonical-Attribut verwendet werden um die unterschiedlichen URLs zu einem Inhalt zusammenzuführen.
Wichtig ist hierbei, dass auch das canonical-Attribut ausgelesen werden kann und nicht über die robots.txt blockiert ist. Grundsätzlich spricht nichts dagegen, das canonical-Attribut auf allen Seiten zu verwenden, vorausgesetzt, es wird immer richtig verwendet. Hierdurch lassen sich in der Praxis ungewollte Doppelungen der URLs im Index vermeiden.
Das canonical-Attribut sollte allerdings nur dann verwendet werden, wenn die Funktionsweise richtig verstanden wurde und die fehlerhafte Implementierung weitestgehend ausgeschlossen werden kann. Der fehlerhafte Einsatz dieses Elements kann ungewollte negative Effekte haben. Das Canonical wird von Google, Yahoo! und Bing unterstützt. Weitere Details zur Verwendung des canonical-Attributs hat Google in den Webmaster-Tools zusammengestellt.
Beispiel für den Aufbau des canonical-Attributs
<link rel="canonical" href="https://www.tecchannel.de/" />
Beispiel zur Verwendung des canonical-Attributs
www.domain.de/artikel/artikeltitle.html
www.domain.de/artikel/artikeltitle.html
?ref=rss
Im Beispiel wird ein Tracking-Parameter (ref=rss) angedeutet. Dieses führt zu einer zusätzlichen URL mit gleichem Inhalt und erzeugt somit Duplicate Content. Daher sollte im Beispiel auf der Seite domain.de/artikel/artikeltitle.html?ref=rss das canonical-Attribut auf die Seite domain.de/artikel/artikeltitle.html verweisen.
Mehrseitige Inhalte
Über die Meta-Angabe „prev“ und „next“ lässt sich bei mehrseitigen Inhalten ein Zusammenhang festlegen. Dies ist z.B. bei mehrseitigen Übersichtsseiten und Artikeln wie diesem sinnvoll.
Beispiel Seite 1
<link rel="next"
href="http://www.domain.de/artikel.html&seite=2" />
Beispiel Seite 2
<link rel="prev" href="http://www.domain.de/artikel.html&seite=1" />
<link rel="next" href="http://www.domain.de/artikel.html&seite=3" />
HTML5
Mit HTML5, an dessen Entwicklung Google nicht unwesentlich beteiligt ist, steht eine neue Markup-Sprache zur Verfügung, über die sich bestimmte Seitenbereiche klar kennzeichnen lassen. So lassen sich beispielsweise Header, Footer, Navigation und Content eindeutig auszeichnen. Auch lässt sich über die Auszeichnungen der Zusammenhang von einzelnen Elementen besser als unter HTML4 darstellen.
Die reine Auszeichnung in HTML5 wird nicht automatisch zu einem besseren Ranking der Seite führen. Gerade bei großen und umfangreichen Seiten wird eine zielgerichtete Ausrichtung aber dazu führen, dass der Seitenaufbau besser nachvollzogen werden kann und somit die relevanten Inhalte besser extrahiert werden können.
Eine finale Version von HTML5 wird für das Jahr 2014 anvisiert. Für wen ein Redesign oder ein Relaunch der Webseite ansteht, der sollte sich mit den Möglichkeiten von HTML5 genauer auseinandersetzen und die mögliche Verwendung prüfen. Da viele Auszeichnungen bereits jetzt von den aktuellen Browsern unterstützt werden, lassen sich Elemente wie article, footer und nav bereits jetzt problemlos einsetzen.
Wer genau wissen will, welche HTML5 Funktionen von seinem Browser unterstützt werden, kann auf html5test.com einen Test der einzelnen Funktionen durchführen. Wer auf Nummer sicher gehen will und auch für ältere Browser-Versionen eine einwandfreie Darstellung bereitstellen möchte, hat die Möglichkeit, mit einem Fallback zu arbeiten. Im Zweifel sollte sich im Vorfeld über die Web-Analytics-Software ein Überblick über die verwendeten Browser verschafft werden.
Technische No-Gos
Um eine gute Darstellung in den Suchergebnissen zu erreichen, sollten bestimmte Technologien nur mit Vorsicht eingesetzt werden. So führen iFrames häufig dazu, dass nach einem Klick in den Suchergebnissen nur der eigentliche iFrame geladen wird, nicht jedoch das ganze Frameset. Hierdurch fehlen dann wichtige Element wie die Navigation oder der Footer-Bereich einer Webseite. Potenziellen Kunden oder Partnern wird so die Kontaktaufnahme erschwert.
Auch die Verwendung von reinen Flash-Seiten führt bei der Darstellungen in Suchmaschinen oftmals zu Problemen. Suchmaschinen wie Google verfügen mittlerweile zwar über Technologien, die das Auslesen von Inhalten in Flash ermöglichen, trotzdem führt die Verwendung von reinen Flash-basierten Webseiten immer wieder zu Problemen. So haben die einzelnen Unterseiten oftmals keine direkte Adresse und können somit nicht in den Index aufgenommen werden. Außerdem sind die Inhalte oftmals nicht als Text hinterlegt und können hierdurch nicht gelesen werden.
Technologien wie JavaScript und AJAX können ebenfalls dazu führen, dass Webseiten nicht ohne Probleme gecrawlt und indexiert werden können. Auch wenn die großen Suchmaschinenanbieter mittlerweile in der Lage sind, JavaScript zu rendern, führt die umfangreiche Verwendung dieser Technologien in der Praxis immer wieder zu Problemen.
Kann die Webseite ohne JavaScript nicht richtig genutzt werden, stellt dies die Crawler der Suchmaschinen vor Schwierigkeiten. Gerade per AJAX nachgeladene Inhalte stellen heute häufig eine Hürde da. Wer auf solche Funktionen nicht verzichten kann, sollte sicherstellen, dass die Suchmaschine die Inhalte trotzdem lesen kann. So sollten Inhalte die grafisch nachgeladen werden, permanent im Quellcode enthalten sein.
Lesen Sie im nächsten Teil des Workshops, welche Punkte bei URL und Domain zu beachten sind, um Webseiten für Suchmaschinen zu optimieren. (shu)
Hier finden Sie den ersten Teil unserer Workshop-Reihe: Das kann die IT zum SEO-Erfolg beitragen