SEO für Entwickler

SEO, SEA und SEM sind drei Akronyme, die im digitalen Marketing verwendet werden. SEM steht für Search Engine Marketing (Suchmaschinenmarketing) und umfasst alle Marketingaktivitäten, deren Zweck es ist, ein Unternehmen oder eine Organisation in den Ergebnisseiten von Suchmaschinen (SERPs) sichtbarer zu machen. SEM ist in zwei Zweige unterteilt: SEA (Search Engine Advertising) und SEO (Search Engine Optimization).

SEA steht für Search Engine Advertising und befasst sich mit bezahlten Anzeigen, die auf SERPs angezeigt werden. Im Falle von Google werden bezahlte Anzeigen oben und unten in den SERPs eingeblendet, wobei der Begriff „Anzeige“ zur Unterscheidung von den anderen Suchergebnissen verwendet wird. SEO hingegen steht für Search Engine Optimization (Suchmaschinenoptimierung) und umfasst alle Marketingaktivitäten, deren Ziel es ist, die Position einer Website oder Webseite in den organischen Suchergebnissen zu verbessern. Organische Suchergebnisse sind Ergebnisse, die in SERPS angezeigt werden und nicht als „Anzeige“ gekennzeichnet sind. Das Hauptziel von SEO ist es, sehr einfach gesagt, in den organischen Suchergebnissen der verschiedenen Suchmaschinen in den Top Rankingpositionen platziert zu sein. Dabei solltest Du darauf achten, dass die Darstellung des in den Suchmaschinen erscheinenden Suchergebnisses (Snippets), die Nutzer zu einem Klick auf Dein Ergebnis, also Deine Webseite, motivieren. Ob eine Website in den organischen Suchergebnissen einen hohen oder niedrigen Rang einnimmt, hängt ebenfalls von einer Reihe von Faktoren ab, die traditionell als „Ranking-Faktoren“ bezeichnet werden. Beim Ranking nützlicher Seiten werden über 200 Rankingfaktoren von Google herangezogen, um die Relevanz von Webinhalten genauer zu bestimmen.

Der PageRank beschreibt eine Bewertungsmethode, wie Webseiten über Verlinkungen Vertrauen an andere Webseiten weitergeben können. Da diese Vertrauensberechnung über Verlinkungen verbreitet wird, hat sich auch der Begriff Linkjuice eingebürgert. Der PageRank ist ein sehr wichtiger Faktor, wenn es um SEO-Optimierung geht.

Bestimmt hast Du schon von Onpage-SEO und Offpage-SEO gehört. Das sind die zwei größten Bereiche, denen alle Optimierungen untergeordnet werden können. Die Namen lassen wenig Platz für Interpretationen:

• Onpage-Optimierungen: alle Maßnahmen, die die Seite selbst betreffen, also alles was sich auf der Seite abspielt.
• Offpage-Optimierungen: Maßnahmen außerhalb der Seite, die sich mit der Popularität einer Webseite befassen.

Da Onpage-SEO sämtliche Maßnahmen umfasst, die an der Website selbst erfolgen, beinhaltet sie eine Vielzahl verschiedener Themen. Wir wollen uns auf technische Maßnahmen konzentrieren, wie zum Beispiel:

• HTML und Tags Optimierung
  • Aspekte der Crawling-Steuerung (z.B. Canonical-Tags und Meta-Robot-Tags)
• die interne Linkstruktur der Website
  • Umgang mit 404-Seiten und Weiterleitungen
  • URL-Strukturen
• Pagespeed
• Mobile Nutzerfreundlichkeit (Stichwort Mobile First)

HTML und Tags optimieren

Einige HTML Tags wirken sich erheblich auf die Positionierung von Websites in den Suchergebnissen aus. Die wichtigsten befinden sich in der Header Sektion, wie zum Beispiel den Title Tag und die Beschreibung, auch „meta description“ genannt. Im Body sind es, unter anderem, die Überschriften-Tags (H1, H2, H3 usw.) oder Tags die zur Textformatierung dienen, zum Beispiel die Listen für bessere Lesbarkeit.

Generelle Richtlinien:

• Standard-konformes HTML verwenden.
• HTML und CSS fehlerfrei, effizient und gut gegliedert anwenden, und mit W3C Markup Validation Service checken.
• Möglichst viel echter Inhalt im Verhältnis zu möglichst wenig Quellcode.
• Auf veraltete Frames-Technologien verzichten.

Title

Das Title Tag zählt zu den HTML-Tags einer Website, auf deren Grundlage Google und andere Suchmaschinen eine Website bewerten. Das Title Tag ist ein HTML-Element, das den Titel jeder Webseite angibt. Es wird auf der Suchergebnisseite (SERP) als anklickbarer Link angezeigt. Seine Verwendung erfüllt zwei Aufgaben:

• Es trägt zur Suchmaschinenoptimierung bei.
• Es informiert die Leser über die Seiteninhalte.

Hier eine Checkliste, um den Title Tag immer optimal zu formulieren:

• Ein Keyword verwenden, das für die jeweilige Seite relevant ist.
• Der Titel sollte 55 bis 60 Zeichen lang sein, aber auf keinen Fall länger als 65 Zeichen, da dies die Höchstzahl ist, die Google bei den einzelnen Suchergebnissen anzeigt.
• Der Satz sollte am besten mit dem Keyword der höchsten Relevanz beginnen.
• Jede Seite des Portals sollte über einen einzigartigen Title verfügen.
• Der Title Tag wird im Header gesetzt.

Meta Description

Die Meta-Beschreibung erläutert eindeutig den Seiteninhalt, solange sich die Nutzer noch auf der Seite der Google-Suchergebnisse befinden. Das heißt, sie trägt dazu bei, dem Nutzer zu signalisieren, dass er auf der jeweiligen Seite Antworten auf seine Suchanfrage findet.

Das Meta-Tag description ist ein HTML-Attribut, das in die Header-Tags einer Website eingefügt wird.

<head>
    <title>Titel der Webseite</title>
    <meta name="description" content="Beschreibung der Webseite" />
    [...]
</head>

Im Wesentlichen handelt es sich um eine Vorschau des Textes, der zu jedem Suchergebnis angezeigt wird. Die Meta Description sollte keinesfalls ausgelassen werden.

Hier die wichtigsten Eigenschaften einer korrekten Meta Description:

• Die Meta Description sollte zwischen 135 und 150 Zeichen lang sein, darüber hinaus wird sämtlicher Text abgeschnitten.
• Die Beschreibung sollte präzise sein und, sofern möglich, zu einer Aktion auffordern.
• Die Meta Description sollte mindestens das Hauptkeyword enthalten, nicht nur, weil es in den Suchergebnissen von Google hervorgehoben wird, sondern weil die Suchmaschine anhand dieses Keywords die Relevanz des Textes im Verhältnis zum Title Tag bewertet.
• Die Meta Description kann 2 bis 3 Keywords enthalten,
• Keyword am Anfang der ersten 80 Zeichen und optimalerweise noch einmal innerhalb der zweiten 70 Zeichen.

Eine gute Meta Description sollte einzigartig sein.

Überschriften-Tags

Die Überschriften-Tags hingegen kommunizieren der Suchmaschine, wie die Inhalte einer Seite hierarchisch gegliedert sind. Die wichtigste Information wird mit dem Tag H1 klassifiziert und muss das Haupt-Keyword enthalten, gefolgt vom H2-Tag mit Subtitel usw. Man sollte besonders auf die Verwendung von H1 und H2 achten.

Wichtig ist es dabei sich an die Hierarchie von H1 zu H6 zu halten. In H1 kommt logischerweise die wichtigste Überschrift, in H6 die am wenigsten wichtige. Man sollte keine Stufe überspringen (zum Beispiel H3 verwenden in einem H1-Block). Ausschlaggebend ist es hier zu beachten, dass man nur so viele Ebenen verwendet, wie es für das entsprechende Element Sinn macht. In der Praxis reicht in der Regel H3 als letzte Ebene völlig aus.

Eine H1-Überschrift sollte pro Seite nur genau ein Mal vorkommen.

Jede Überschrift sollte

• Keyword(s) verwenden (minimum 1 bis 3),
• konsistent zu Title Tag und Meta Description sein,
• kurz sein.

Bilder

Google benutzt auch den Datei-Name von Bildern um festzustellen, was genau im Bild gezeigt wird. Also ein Optimierung des Namens ist empfehlenswert.

Bei Benutzung von Bilder und Grafiken sollte man auf zwei Attribute vom Img-Tag achten:

• alt
• title

alt

alt ist die Kurzform für Alternativtext. Das alt-Attribut soll in maschinenlesbaren und menschlich verstehbaren Text beschreiben, was auf dem Bild zu erkennen ist.

<img src="/media/images/desk-monitor-macbook.jpg" width="400" height="250" alt="Schreibtisch mit Monitor und Macbook" />

Hier einige Best Practise Tipps für das alt-Attribut:

• Das alt-Attribut sollte beschreiben, was sich auf dem Bild befindet.
• Die Beschreibung sollte stichwortartig passieren, keine langen Absätze.
• Keywords sollten nicht untergebracht werden, wenn das Bild das Keyword nicht her gibt oder wenn dadurch das alt-Attribut zu lang wird.
• 3 bis 10 Wörter Länge ist eine gute Wahl (40-80 Zeichen nicht überschreiten).
• alt-Attribute sollten einzigartig sein.

title

Ähnlich wie der alt-Attribut, ist der title-Attribut für die Suchmaschinenoptimierung wichtig, damit Google den Inhalt der Seite und des Bildes besser erfassen und genauer indexieren kann. Da kann man sich an den Richtlinien für den Title-Tag halten.

<img src="/media/images/desk-monitor-macbook.jpg" width="400" height="250" alt="Schreibtisch mit Monitor und Macbook" title="A desk with monitor and Macbook" />

Caption Tag

Da der umliegende Text für das Bilder-SEO besonders wertvoll für das Bilderanking ist, empfiehlt sich in manchen Fällen, das Bild mit einem Untertitel auszustatten.

<caption>Schreibtisch mit Monitor und Macbook</caption>

Im Caption Tag wird normalerweise entweder der alt– oder der title-Text vom img Tag verwendet. Falls ein längerer Text gewünscht ist, musst Du aber versuchen, die gleichen Keywords zu verwenden.

Linkstruktur

Eine saubere Informationsarchitektur und eine flache Hierarchie der Website, wirkt sich definitiv positiv auf SEO-Ergebnisse aus. Also die Struktur der internen Links sollte an SEO Bedürfnisse angepasst sein. Praktisch gesehen heißt das:

• Jeden Inhalt mit maximal 3-4 Klicks erreichbar machen.
• Inhalte für Suchmaschinen freigeben wenn nötig: also noindex nur für Seiten die nicht in Suchmaschinen erscheinen müssen (wie Zwischensteps oder Checkout-Seiten usw.).

Webseiten, denen Google vertraut, können dieses Vertrauen durch die gesetzten Links, auch interne Links, an andere Unterseiten weitergeben. Bei der Berechnung des PageRank gibt jede Seite einen Teil des Vertrauens, das sie selber durch externe und interne Links gesammelt hat, über jeden regulären Link weiter. Wenn man 5 Links auf einer Unterseite habe, dann gibt jeder Link 1/5 des Vertrauens der Seite weiter (minus einen Dämpfungs-Faktor). Um das zu steuern bzw. verhindern, wurde das früher mit Nofollow-Attributen realisiert, um so gezielt Seiten auszuschließen. Heute nutzt man andere Methoden, um den Linkjuice zu steuern, wie zum Beispiel JavaScript, entsprechende Einträge in der .htaccess-Datei, Anweisungen in der robots.txt Datei oder auch mit Hilfe von Frames.

Interne Links können sich überall auf der Seite befinden, aber Links in Hauptmenüs geben mehr Linkjuice als Links in Untermenüs, also mehr als drei Unterebenen in Menüs sollte man vermeiden.

404 Seiten sollten nie auftauchen: alle Seiten, die von eine Seite verlinkt werden, die zu einer 404 Seite führt, bekommen so überhaupt kein Linkjuice. Zum Beispiel:

<a href=”seite-1/“>Seite 1</a>
<a href=”seite-2/“>Seite 2</a>
<a href=”seite-3/“>Seite 3</a>

Falls Seite 2 zu eine 404 Seite führen sollte, würden auch Seite 1 und Seite 3 kein Linkjuice bekommen.

Text

Folgende Hinweise sollte man beachten:

• Der Linktext (auch Ankertext genannt) muss semantisch sauber sein – das betrifft von allem die korrekte Umwandlung von Sonderzeichen/Umlauten.
• Er sollte nicht zu lang sein, also bis maximal 80 Zeichen sollten genügen.
• Und auch nicht zu kurz sein, da längere Linktexte doch mehr Linkjuice als kurze Linktexte erhalten.
• Textlinks erhalten mehr Linkjuice als grafische Link-Elemente.
• Links sind am Anfang des Text.
• Links sind klar und deutlich formatiert (die Farbe ist – anders als bei normalen Text und Links – möglichst unterstrichen).

URL

Hier einige Tipps:

• Eine URL muss semantisch korrekt sprechen, damit sie auf die Suchmaschinen wirken kann.
• Die URLs sollten so simpel und kurz wie möglich sein.
• Die Empfehlung für die Länge sind derzeit rund 100 Zeichen und maximal 3 Keywords.
• Die URLs sollten mit Keywords geschrieben werden.
• Sie sollte keine Sonderzeichen enthalten.
• Die Verwendung von Bindestrichen (–) anstelle von Unterstrichen (_) in URLs als Trenner sind empfehlenswert.
• Bitte nur Kleinschreibung und
• keine Füllwörter verwenden.
• Sitzungs-IDs in URLs sind zu vermeiden, man sollte stattdessen Cookies verwenden.
• URLs sollten statisch sein.
• Bitte bei internen Verlinkungen hinten den Backslash anhängen.

span, p, div und freier Text

Die Texte der einzelnen Webseite sollten einzigartig sein. Falls man den selben Text auf mehrere Seiten anzeigt, sollte man rel=”canonical” verwenden.

Beispiel:

Seite “Wiederholung”

<head>
    <link rel=”canonical” href=”http://www.mydomain.com/original/” />
</head>

Textabschnitten sollen einfach und grammatikalisch korrekt sein. Man sollte Schachtelsätze, Einschübe und Passivsätze vermeiden. Der Leser sollte direkt angesprochen werden durch die Verwendung einer identifizierenden Sprache mit „wir“ und „uns“.

Ein Text sollte mindestens 350 Wörter lang sein. Texte mit ~2000 Wörtern werden mit höherer Wahrscheinlichkeit auf Platz 1 in den SERPs angezeigt. Zu lange Texte sollte man aber trennen bzw. auf mehrere Seiten teilen und durch rel="next" und rel="prev" verlinken.

Beispiel:

Seite 1

<head>
    <link rel=”next” href=”seite-2/“ />
</head>

Seite 2

<head>
    <link rel=”next” href=”seite-3/“ />
    <link rel=”prev” href=”seite-1/“ />
</head>

Seite 3

<head>
    <link rel=”prev” href=”seite-2/“ />
</head>

Man sollte auf die Formatierung von Absätzen durch Hervorhebung wichtiger Textstellen achten. Dafür sollte man fett, kursiv, unterstrichen, durchstrichen und Farben benutzen. Die Suchmaschinen interpretieren diese Texte als wichtiger und stufen solche Texte höher ein. Auch die Schriftgröße kann ein entscheidender Faktor sein.

Passende Keywords sollten in Texte eingebaut werden. 3% bis 5% der Wörter eines Textes sollten Keywords sein.

noindex und nofollow

Manchmal wollen wir eine Seite nicht in den Suchergebnisse zeigen. Optimieren in SEO ist also nicht immer on-top von SERPs zu landen, sondern auch in SERPs zu landen, wenn es sinnvoll ist.

noindex

Das Attribut rel="noindex" teilt Google unsere Absicht mit, die Seite nicht indizieren zu wollen, auch wenn Google nicht unbedingt unseren Richtlinien folgen muss. Auf diese Weise wird die Seite für Suchmaschinen nicht mehr vorhanden sein.

Um das noindex-Attribut einzufügen, müssen wir diesen HTML-Code eingeben:

<meta name=”robots” content=”noindex”>

Die Gründe, die dazu führen können, dass wir eine Seite nicht indizieren möchten, können unterschiedlich sein:

• doppelter Inhalt
• nicht relevante Seite
• oder von geringem Wert (weniger als 300 Wörter)
• Checkout-Seiten
• Folgeschritte

nofollow

Das Attribut rel="nofollow" verhält sich anders als der noindex, der, wie wir gesehen haben, zum Deindizieren einer Seite verwendet wird.

Das Nofollow weist Google an, den auf einer bestimmten Seite enthaltenen Links nicht zu folgen und sie nicht in Bezug auf die Positionierung zu gewichten, indem der Website, die die Links erhält, ein Wert zugewiesen wird.

Um nofollow auf alle Links auf einer bestimmten Seite anzuwenden, müssen wir diese HTML-Codezeichenfolge hinzufügen:

<meta name=”robots” content=”nofollow”>

Wenn wir es stattdessen nur auf einen Link auf der Seite anwenden möchten, tun wir Folgendes:

<a href=”URL” rel=”nofollow”>Text</a>

Falls gewünscht, können wir beide Metadaten anwenden: Das heißt, wir signalisieren Suchmaschinen, die Seite nicht zu indizieren und die darin enthaltenen Links nicht zu berücksichtigen. In diesem Fall lautet die Zeichenfolge wie folgt:

<meta name=”robots” content=”noindex, nofollow”>

Rich Snippets und strukturierte Daten

Ein Snippet ist die kurze Textvorschau, die Google für jedes Suchergebnis aus dem Title- und (meistens) Description-Tag generiert und anzeigt. Ein Rich-Snippet sorgt für zusätzliche, nach bestimmten Vorgaben strukturierte Daten, um nicht nur rein textliche Informationen in den Suchergebnissen zu zeigen. Im Fall unserer Suchmaschine werden strukturierte Daten benutzt, um Metadaten anzuzeigen und das Regelwerk, das ihrer Verwendung zugrunde liegt, ist ein Vokabular namens schema.org. Mit schema.org kann man Elementtypen mithilfe eines Vokabulars auszeichnen, das Google, Microsoft und Yahoo! verstehen. Außerdem bietet Google ein Test-Tool für strukturierte Daten, mit dem man sein Rich Snippet überprüfen und in einer Vorschau der Suchergebnisse ansehen kann.

Was sind strukturierte Daten?

Bei strukturierten Daten handelt es sich demnach um Metainformationen, die in den HTML-Code der Seiten eingefügt werden müssen, um zusätzliche Daten bereitzustellen, die von der Suchmaschine zur Klassifizierung und zum besseren Verständnis ihres Inhalts verwendet werden.

Diese Daten werden als „strukturiert“ bezeichnet, weil sie, wie bereits erwähnt, nach einem Schema organisiert sind, und zwar nach dem Schema.org-Vokabular, das es ermöglicht, Entitäten und Beziehungen zu definieren, indem die Inhalte in Daten umgewandelt werden.

Was ist Schema.org?

Bleiben wir noch einen Moment bei Schema.org. Wie bereits erwähnt, handelt es sich um ein Vokabular von strukturierten Daten (Markups), das Entitäten, Aktionen und Beziehungen im Internet definiert.

Das Vokabular von Schema.org umfasst verschiedene Formate zur Strukturierung von Daten über alle Arten von Personen, Orten und Dingen im Web: Die vollständige Liste der Elemente, die die Schema-Markups definieren können, ist auf der Website von Schema.org zugänglich.

Wie man strukturierte Daten eingibt

Die von Schema.org definierten Markups können im HTML-Code der Seiten in drei verschiedenen Sprachen implementiert werden:

• RDFa
• Mikro-Daten
• JSON-LD

Das von Google empfohlene und zugleich am häufigsten verwendete Format ist JSON-LD, bei dem die Strukturierung mittels JavaScript Notation am Anfang der Seite erfolgt und völlig unabhängig vom vorhandenen Inhalt ist.

Pagespeed

Pagespeed und Performance sollte man immer optimieren, nicht nur aus SEO-Gründen. Die Performance einer Website ist ein bekannter Ranking-Faktor von Suchmaschinen. Daher solltest Du auch diese aus SEO-Gründen optimieren. Es ist ratsam, die Pagespeed so weit zu optimieren, dass eine Seite nicht länger als 2 bis 3 Sekunden zum Laden benötigt.

Maßnahmen zur Optmierung der Pagespeed

Hier haben wir einige Tipps zusammengestellt, mit denen der Pagespeed signifikant optimiert werden kann:

• Bilder komprimieren
• AMP verwenden: AMP steht für Accelerated Mobile Pages und ist ein Standard für Websites, die auf mobilen Endgeräten genutzt werden. Vereinfacht gesagt, wird bei AMP der HTML-Code um Informationen reduziert, die für Mobilgeräte irrelevant sind.
• HTTP-Anfragen reduzieren
• External CSS benutzen
• CSS und JavaScript-Dateien reduzieren
• JavaScript am Ende des Quellcodes laden
• CSS-Sprites benutzen. CSS-Sprites sind CSS-Dateien, die aus mehreren einzelnen Bildern bestehen. In CSS-Sprites können z. B. mehrere Icons oder alle Hintergrundbilder auf einer Seite zusammengefasst werden.
• serverseitiges Caching
• Prefetching und Prerendering nutzen

Strategie Mobile First verfolgen

Der Google Algorithmus hat begonnen (und das wird von nun an die Norm sein), zuerst die mobile Version der Seite zu betrachten, um das Ranking auf dem SERP zu bestimmen.

Achtung, Mobile First bedeutet nicht, dass nur die Smartphone- und Tablet-Version der Website gelesen wird, dies ist jedoch die bevorzugte Wahl. Hat deine Website keine mobile Version oder ist sie nicht responsive? Google wird sie weiterhin berücksichtigen, dies könnte jedoch zu negativen Platzierungen führen.

Mobile First technisch

Google stellt eine Best Practices für die Mobile First-Indexierung Seite für Entwickler zu Verfügung. Aus technischer Sicht, sollten folgende Hinweise für Web-Entwickler eine gute Basis sein:

• Du solltest auf der mobilen Website und der Website für Computer dieselben Meta-Robots-Tags verwenden (insbesondere noindex oder nofollow).
• Verwende für Hauptinhalte kein Lazy Loading nach Nutzerinteraktion.
• Verwende auf der mobilen Website dieselben Überschriften (H1 – H6) wie auf der Website für Computer.
• Deine mobile Website und deine Website für Computer sollten dieselben strukturierten Daten haben.
• Der Status der Fehlerseite sollte sowohl auf der Website für Computer als auch auf der mobilen Website identisch sein.
• Vergewissere dich, dass die mobile Version keine Fragment-URLs enthält (der Fragmentteil der URL steht an ihrem Ende und beginnt mit #).

Fazit

Für uns Entwickler gibt es also viele Maßnahmen, um eine Seite auf SEO/SEA zu optimieren. Einige sind sehr schnell umgesetzt und der Aufwand ist sehr gering, zum Beispiel die Link-Optimierung. Andere sollten als Best Practice gesehen werden und Teil unseres Entwickleralltags werden – etwa immer alle Attribute vom img-Tag zu benutzen. Weitere Maßnahmen sind komplexer und erfordern Zeit, wie die strukturierten Daten oder die Pagespeed-Optimierung. Bei anderen sind wir normalerweise nicht unabhängig, etwa bei den Texten, die angezeigt werden, aber wir können dabei unterstützen und noch einen letzten Check machen. Es ist also nicht falsch zu sagen: Ein wichtiger Teil der Optimierung für Suchmaschinen liegt doch in den Händen von uns Entwicklern!

---

Über den Autor