SEO Tutorial - Website für Suchmaschinen optimieren

Suchmaschinenoptimierung (SEO)

Die Abkürzung SEO steht für Search-Engine-Optimization und wird im Zusammenhang mit der Suchmaschinen Optimierung von Websites verwendet.
Mittlerweile gibt es über 1 Milliarde Websites weltweit. Damit die Suchmaschinen den Suchenden die richtigen und qualitativ besten Ergebnisse auf ihre Suche liefern können, wird jede Website von sogenannten Webcrawler (auch Searchbot oder Robot genannt) durchsucht und analysiert.
Anhand dieser Analyse wird jede Seite der Website für die Suchmaschine (z.B. Google) indexiert und entsprechend nach Inhalt und Qualität abhängig von diversen Kriterien für Suchanfragen kategorisiert und bewertet.
Damit die eigene Website in den Suchergebnissen richtig dargestellt und möglichst in den vorderen Rängen platziert wird, sind untenstehende Suchmaschinenoptimierungs-Punkt (SEO) zu beachten und empfehlenswert:

Sprache

Damit die Suchmaschinen den textlichen Inhalt der Website der richtigen Sprachregion zuordnen können und eine deutschsprachige Website auch bei deutschsprachigen Suchergebnissen präsentiert wird, sollte die Angabe der Website-Sprache in jedem HTML-Dokument ganz zu Beginn im HTML-Tag definiert werden.

Codierung

Damit die Suchmaschinen wissen in welcher Codierung (Code-Sprache) die Website programmiert, muss sich die Angabe der Seitencodierung im Header der Website befinden.
Anhand der Codierung kann die Website von den Suchmaschinen richtig gelesen und interpretiert werden.

Keywords

Keywords, sprich Schlüsselwörter waren vor allem früher sehr wichtig.
Heute sollte aber unbedingt auf zu viele Keywords in den Meta-Daten einer Website verzichtet werden und sich stattdessen auf die wichtigsten Schlüsselwörter beschränken.
Viele Suchmaschinen ordnen diesem Tag heutzutage sowieso lediglich eine sehr geringe Bedeutung zu. Eine lange Liste mit Keywords ist völlig unsinnig, da der Content für Suchmaschinen zu "schwammig" wird und nicht mehr klar definiert werden kann. Zudem werden zu viele Keywords von Suchmaschinen auch als Keyword-Spamming gewertet.
Keywords müssen sich im Header-Bereich einer Website befinden und werden durch ein Komma getrennt.

Website Description

Die Description beschreibt den Websiteinhalt. Der Website-Descriptioninhalt wird zudem auch für die Darstellung in Suchergebnissen verwendet, sollte max. 150 Zeichen betragen und befindet sich ebenfalls im HTML-Header.

Überschriften

Überschriften wie <h1>, <h2> oder <h3> sollten kurz und aussagekräftig sein und die wichtigsten Keywords beinhalten. Fünf bis sieben Wörter sind dafür ideal.
Jede Seite sollte genau eine <h1> Überschrift haben – nicht zwei, nicht drei, nicht null.
Untertitel wie die Überschriften <h2> oder<h3> dürfen mehrfach verwendet werden.

Bilder Description

Da Suchmaschinen (noch) keine Bilder inhaltlich interpretieren können, sind sie auf die Hilfe der Bild-Beschreibung mittels Alt-Attribut (Alt-Tag) angewiesen.
Mit dem Alt-Attribut wird das Bild und dessen Inhalt mit Worten kurz beschrieben.


Der Inhalt soll dabei in wenigen Worten (ca. 3 bis 5) und empfohlen mit maximal 150 Zeichen beschrieben werden.
Die Beschreibung des Bild Inhaltes mit dem Alt-Attribut hilft Crawlern oder Suchmaschinenbots (z.B. dem Googlebot) das Bild besser zu verstehen und können so die gesamte Seite besser bewerten.
Der Inhalt des Alt-Attributs erscheint ebenfalls alternativ zum Bild auf der Website, wenn das entsprechende Bild aus technischen Gründen nicht geladen beziehungsweise angezeigt werden kann.
Ein zusätzlicher Vorteil bei der Verwendung von Alt-Attributen besteht darin, dass Bildschirmlese-Programme sehbehinderten Websitebesuchern den alt-Text vorlesen und so barrierefreies Surfen ermöglichen.

sauberer Code

Damit Suchmaschinen die Website und deren Inhalt richtig interpretieren und ihr eine gute Indexierung ermöglichen können, sollte der Website Code möglichst keine Fehler aufweisen.
HTML-Code kann durch sogenannte HTML Markup Validation Service beispielsweise von W3C überprüft werden.
CSS-Code kann ebenfalls durch sogenannte CSS Markup Validation Service auch hier von W3C überprüft werden.

Code minimieren

Mit sogennanten Compressor-Tools (Kompressions-Tools) lässt sich z.B. HTML-, CSS-, PHP- oder JavaScript-Code minimieren und die File-Grösse stark reduzieren.
Dank solchen Compressor-Tools werden beispielsweise überflüssige Leerzeichen, Tabulatoren oder Zeilenumbrüche entfernt. Zusätzlich werden oft verschiedene längere Code-Schreibweisen in eine kürzere Schreibweise optimiert und dadurch stark komprimiert (z.B. CSS-Farbcodierung #000000 zu #000).
Da sich die Filegrösse stark auf die Seitenladegeschwindigkeit (vorallem bei mobilen Endgeräten) auswirkt und eines der grössten Kriterien für das Suchmaschinen-Ranking ist, sollte der Code, wenn möglich komprimiert auf den Server geladen werden.
Folgend eine Liste mit guten und gratis verwendbaren Code-Compressoren:

• HTML: htmlcompressor.com
• CSS: csscompressor.com
• PHP: php-minify.com
• JavaScript: javascript-minifier.com

Diverse weitere Code-Compressor-Tools lassen sich gut über Google finden.

Lazy Loading

Lazy Loading (faules Laden) ist eine bewährte und häufig eingesetzte Methode, um die Ladegeschwindigkeit von Websites zu erhöhen. Durch das schnellere Laden gewinnt die Website wichtige Indexierungspunke bei Suchmaschinen.
Lazy Loading bezeichnet ganz allgemein eine Technik in der Software-Entwicklung um Daten erst bei Bedarf nachzuladen.
Im Zusammenhang mit Websites geht es darum, beispielsweise Bilder erst dann vom Server zu laden, wenn diese im sichtbaren Bereich der Anzeige des Endgerätes sind. Dadurch wird die Ladezeit von Websites stark reduziert.
Als gutes Lazy Loading Video Tutorial dient das YouTube Video Lazy Load (Nachladen von Bildern beim Scrollen) – Webdesign-Tutorial.

Zusätzlich zu der Anwendung von Lazy Loading sollt für Schriftarten die CSS-Eigenschaft font-display verwendet werden.
Mit font-display wird definiert welche Schriftart für die Anzeige auf dem Endgerät verwendet wird, in Abhängigkeit davon wie schnell die Webfont (Schriftart) von der Website geladen werden kann.
Da bei Webfonts die Schriftart immer erst vom Endgerät heruntergeladen werden muss bevor das Gerät den Text anzeigen kann braucht die Website entsprechend lange bis sie geladen ist.
Durch die CSS-Eigenschaft font-display wird das laden bei einer langsamen Internetverbindung z.B. bei einem Mobile Gerät nach einer Weile unterbrochen und durch eine Standartschrift ersetzt, damit der Webseitbesucher nicht zu lange warten muss.

font-display Eigenschaften

• auto: Der Browser bestimmt das Verhalten selbst. Der Standardwert ist meist block.
• block: Text wird zunächst für eine recht lange Zeitspanne nicht sichtbar dargestellt, danach in einer Alternativ-Schriftart und wenn die Schriftart zur Verfügung steht (egal wie lange es dauert), wird der Text in der gewünschten Schriftart dargestellt.
• swap: Weist den Browser an, den Text mithilfe der Fallback-Schriftart anzuzeigen, bis die benutzerdefinierte Schriftart vollständig heruntergeladen wurde.
• fallback: Wenn die Schriftart nicht innerhalb von 0,1 s heruntergeladen werden kann, wird das Element dauerhaft in einer Alternativ-Schriftart dargestellt. Der Download wird jedoch im Hintergrund fortgesetzt und falls der Download bis zum nächsten Seitenwechsel abgeschlossen ist wird die Alternativschriftart durch die richtige Schriftart ersetz.
• optional: Das Element wird nur dann mit der Schriftart dargestellt, wenn die Schriftart bereits im Cache zur Verfügung steht.

JavaScripte

JavaScripte sollten wenn möglich immer ganz am Ende des Website-Codes eingebunden werden.
Falls das nicht möglich ist, sollten sie zumindest asynchron oder parallel (durch Befehle wie async oder defer) angefordert werden.
So können zuerst visuelle Objekte wie Seitenlayouts, Styles, Texte sowie Bilder geladen werden.
Diese machen etwa 90 bis 95 Prozent des gesamten visuellen Inhalts auf der Seite aus. Nach und nach wird JavaScript im Hintergrund geladen. Im Ergebnis erhält der Benutzer den Eindruck, dass alle Inhalte gleichzeitig geladen wurden, da ihm die visuellen Elemente umgehend angezeigt werden.

AMP

AMP steht für (Accelerated Mobile Pages)
Aktuell werden solche Seiten vor allem auf mobilen Endgeräten im sogenannten Googe-Caroussel hauptsächlich für News verwendet und angezeigt.
AMP optimierte Seiten werden auf mobilen Geräten wie Smartphone oder Tablett in Google mit einem "Blitz"-Symbol hervorgehoben und mit einem besseren mobile Ranking belohnt.
Einen detaillierten und guten Bericht zur Umsetzung findet sich auf bjoernbeth.ch/blick-jetzt-auf-google-amp/.

strukturierte Daten / Data Highlighter

Sogenannte Rich Snippets sind Ausschnitte, welche in den Suchergebnissen angezeigt werden.
Rich Snippets können für folgende Daten erstellt werden:

• Organisationen / Unternehmen
• Links zu sozialen Netzwerken wie Facebook oder YouTube
• Website Logo (Offizielles Logo für Suchmaschinen)
• Personen
• Produkte
• Artikel
• Events
• Softwareprogramme
• Filme
• TV-Folgen
• Buchrezessionen
• Restaurants

Mit diesem Rich Snippets Schema-Generator können die Daten für die eigene Website sehr einfach generiert werden. Der Rich Snippets Code ist immer im Head-Bereich der Website einzubinden.


Um die Daten auf Korrektheit zu überprüfen kann das Structured Data Testing Tool von Google verwendet werden.

Mit dem "Data Highlighter"-Tool von Google Webmaster kann die Darstellung in den Google-Suchergebnissen definiert werden.

Links zu sozialen Netzwerken

Im obigen Abschnitt "strukturierte Daten" haben wir uns die Rich Snippets schon angeschaut. Nun wird aber nochmals speziell auf die Links zu sozialen Netzwerken eingegangen, da diese in der heutigen Zeit von Social Media immer wichtiger werden.
Über schema.org können für Suchmaschinen soziale Netzwerke wie Facebook, Instagram oder YouTube, welche mit der Website verknüpft werden sollen definiert werden.


Dieser Code ist im Head-Bereich der Website einzubinden.

Die Daten können mit dem Testing Tool von Google überprüft werden. Dazu einfach die zu überprüfende URL eingeben.

Google Webmaster Tool

Die Website sollte unbedingt mit in die Search Console von Google eingetragen werden.
Hierfür ist zwar ein Google Account notwendig aber es zahlt sich alle mal aus, da Google mit dem Webmaster Tool (Search Console) eine sehr Hilfreiche Übersicht für Website Suchmaschinen Optimierungen mit diversen Statistiken und automatischen Überprüfungen bietet.

PageSpeed Tool

Mit dem PageSpeed Tool von Google kann die Ladegeschwindigkeit der Website untersucht werden.
Die Websiteladegeschwindigkeit wird in Zukunft für die Indexierung durch Suchmaschinen ein immer wichtigeres Kriterium werden.
Webseites mit kürzeren Ladezeiten und optimierten Bildern und Code (z.B. durch Komprimierung) werden in den Suchergebnissen eher vorne angezeigt und erzielen somit mehr Seitenbesucher.

mobil Optimierung

Da immer mehr Internet User auf einem Mobilgeräte, wie Handy oder Tablet surfen, ist es für die Websitebesucher wichtig, dass die Website auch für kleinere Bildschirme optimiert und leserlich dargestellt wird.
Deshalb ist die mobil Freundlichkeit ein immer grösser gewichtetes Ranking-Kriterium von Suchmaschinen wie Google.
Bei Google kann die Optimierung für Mobilgeräte durch das Tool Test My Site geprüft werden.

Sitemap

Eine Sitemap enthält eine Link-Sammlung von jeder einzelnen Seite der eigenen Website und ist mit dem Inhaltsverzeichnis eines Buches zu vergleichen.
Durch eine Sitemap kann die Website bei Suchmaschinen besser Indexiert werden und wird so besser in den Suchergebnissen dargestellt.
Diese wird meistens im Hauptverzeichnis auf dem Server unter sitemap.xml (sitemap.xml.gz gezippt) für Suchmaschinen abgespeichert. Dringendst empfohlen ist, die Sitemap in der Google Search Console unter dem Menüpunkt Sitemap hinzuzufügen (Anmeldung erfolgt über Google Account).

1. Mit dem XML-Sitemaps.com Generator die Sitemap automatisch erstellen lassen
   (bis 500 Seiten gratis).
   
   
   
2. Die automatisch erstellte "sitemap.xml"-Seite herunterladen und in das Hauptverzeichnis (Root) der eigenen Website hochladen.
   
   
3. Sitemap in den Google Webmastertool überprüfen/ hinzufügen.

Natürlich kann eine Sitemap auch selbst erstellt werden.


Dabei ist die Angabe von Datum, Changefreq (wie oft wird die Seite geändert: von always über weekly bis hin zu never) und die Priorität (0.00 bis 1, wobei 1 der höchsten Prio entspricht) optional.
Eine eigen erstellte Sitemap kann z.B. unter XML Sitemap Checker auf die Korrektheit überprüft werden.

SSL-Zertifikat

Mit einem SSL gesicherten Zertifikat wird die Website von Google und anderen Suchmaschinen mit einem besseren Ranking belohnt, weil dadurch dazu beitragen wird das Internet im Gesamten sicherer zu machen.
Website mit einem SSL-Zertifikat werden auch im Browser als sicher gekennzeichnet.
Ob eine Website ein SSL-Zertifikat hat oder nicht lässt sich ganz einfach am Beginn der URL ablesen. Bei einem https in am Anfang einer URL ist ein SSL Zertifikat vorhanden bei einer http eben nicht.

mehr sprachige Website

Bei mehrsprachigen Websites sollten die verschiedenen Sprachen klar getrennt werden und nicht miteinander gemischt auf einer Seite vorkommen. Das kann z.B. anhand von Variablen gesteuert werden.

Folgende Möglichkeiten sind empfehlenswert:

• Es wird für jede Sprache die entsprechende Länderdomain, z.B. meinefirma.de für Deutsch, meinefirma.fr für Französisch, meinefirma.it für Italienisch, etc. registriert und verwendet
  Diese Lösung ist empfehlenswert, wenn Kunden oder sogar Niederlassungen in den jeweiligen Ländern vorhanden sind und wird für grössere Firmen empfohlen.
• Mit Unterverzeichnissen kann für jede Sprache ein separates Verzeichnis wie meinewebsite.com/de oder meinewebsite.com/en verwendet werden und so der Inhalt optimal getrennt werden.
• Für Webseiten, welche nur aus wenigen Seiten bestehen kann auch die HTML-Seite in der jeweiligen Sprache benannt werden z.B. kontakt.html (de), contact.html (en), coordonnees.html (fr) oder contatti.html (it).
• Nicht zu empfehlen sind dynamische links wie blumentopfphp?lang=en da hier die Url für einen Fremdsprachigen nicht sehr aussagekräftig ist und Suchmaschienen damit eher Mühe haben.

Natürlich muss dazu der gesamte Inhalt vollständig übersetzt sein.
Hier eine kleine Checkliste:

• Bildbeschreibungen, Alt-Texte von Bildern (titel Tag etc.)
• Seitentitel (h1, h2 etc.)
• Verzeichnis- und Seitennamen
• Ankertexte
• Meta-Description und Meta-Keywords

Eine englischsprachige Seite mit deutschen Seitentiteln oder Metaangaben hat nur geringe Chancen, bei Google gefunden zu werden. Bei mehrsprachigen Websites besteht die Optimierung also hauptsächlich darin, alle suchmaschinenrelevanten Textstellen konsequent zu übersetzen.

Zudem sollte die Sprache der Seite klar gekennzeichnet werden:

• Das Attribut "lang": Damit kann der Inhalt eines HTML-Elements mit der verwendeten Sprache gekennzeichnet werden. Gillt die Sprache für eine komplette Seite kann folgender Code <html lang="en">...</html> in den Head-Bereich der Website eingefügt werden
• Meta-Angaben: Folgende Meta-Angabe kennzeichnet den Dateiinhalt als englisch: <meta name="Content-Language" content="en">
• HTTP-Header: Die Sprache sollte unbedingt auch per HTTP-Header übermittelt werden. PHP-Beispiel: header('Content-language: en')<

Language Negotiation (Sprachvereinbarung)
Über HTTP-Header kann man die im Webbrowser eingestellte bevorzugte Sprache des Besuchers erkennen und automatisch die passende Sprachversion der entsprechenden Seite anzeigen.
Mehr Informationen dazu sind z.B. auf w3.org zu finden.

HTML Seite (Website) für Suchmaschinen blockieren

Soll eine gewisse HTML-Seite z.B. die AGB-Seite nicht in den Suchergebnissen von Google (und den meisten anderen Suchanbietern) angezeigt werden wird diese durch untenstehenden Code mithilfe von Meta-Tags blockiert.

robots.txt Datei

Mit der "robots.txt" (wichtig: muss klein geschrieben sein!) Datei im Hauptverzeichnis der Website, kann den meisten Suchmaschinen angegeben werden welche Seiten blockiert werden sollen.
Hier ein kleines Beispiel in welchem die agb.php und impressum.php für die Durchsuchung von Suchmaschinen blockiert werden.


Diese robots.txt Datei kann über das Webmastertool von Google geprüft werden.