|

SEO-Tipps für Frontend Developer

Als Frontend-Entwickler bist du mitverantwortlich für die SEO-Performance deiner Projekte. Damit deine Frontends noch interessanter für Suchmaschinen werden, wollen wir uns heute anschauen, was wichtig ist und worauf du achten solltest, wenn du wiederverwendbare Elemente für die Redakteure eines Content Management Systems baust.

Gewicht und Performance ⚖️

Mit dem Aufstreben des mobilen Webs und der Einführung des Mobile First Index hat Google in den letzten Jahren viele neue Rankingfaktoren eingeführt, die besonders für Frontend-Entwickler von Relevanz sind.

Über 50% der Suchanfragen werden mittlerweile über mobile Endgeräte getätigt, die nicht immer unbedingt in stabilen WLAN-Netzwerken unterwegs sind.

Suchmaschinenalgorithmen werden immer sensibler für Benutzerfreundlichkeit, wobei Seitengeschwindigkeit und Mobilitätsfreundlichkeit zwei der prominentesten Beispiele sind. Es liegt auf der Hand, dass Google nur Seiten empfehlen möchte, die von Usern auch gut und gerne genutzt werden können.

HD6N7-data-mobile-site-abandonment-three-second-load-download


Werden deine Bilder optimal für alle Viewports ausgegeben? 🖼️

Der Hauptteil des "Seitengewichts" einer durchschnittlichen Website besteht aus Bildern. Nutze Picture-Tags und denke mobile first, um die Seitenerfahrung für deine mobilen Nutzer und Bots zu verbessern.

Eine tolle Referenz dazu, ist das E-Book "Essential Image Optimisation" von Addy Osmani.

<picture>
 <!-- 100kb -->
 <source srcset="dogs-800.png" media="(min-width: 601px)">
 <!-- 60kb -->
 <source srcset="dogs-600.png" media="(min-width: 401px)">
 <!-- 20kb -->
 <img src="dogs-400.png" alt="Two playing dogs.">
</picture>

Zum Beispiel (MDN)


Bist du dir darüber im Klaren wie lange dein JavaScript zum Parsen benötigt? 🎡

JavaScript kann verdammt viel Zeit kosten, aber es ist nicht die Dateigröße, die die Leistung beeinträchtigt.

Die Analyse- und Ausführungszeiten können durch die Hardware eines Geräts stark variieren. Bei einem durchschnittlichen Telefon (Moto G) beträgt die Zeit für die syntaktische Analyse von 1 MB (unkomprimiertem) JavaScript etwa 1,3 - 1,4 Sekunden!

Damit verbringen mobile Nutzer etwa 15 - 20% der Zeit damit, auf das Parsen unseres JavaScript-Codes zu warten. Halte dein JavaScript deswegen möglichst klein.

DC8D2XbXUAItNNQ

Zur Quelle


Hast du deinen Renderbaum im Griff? 🌳

Nicht verwendetes CSS verlangsamt die Konstruktion des Renderbaums durch den Browser. Der Renderbaum ist wie der DOM-Baum, außer dass er die Styles für jeden möglichen Knoten enthält.

Um den Renderbaum zu konstruieren, muss ein Browser die gesamte DOM-Struktur durchlaufen und prüfen, welche CSS-Regeln für jeden Knoten gelten. Je mehr ungenutztes CSS vorhanden ist, desto mehr Zeit benötigt ein Browser möglicherweise, um die Stile für jeden Knoten zu berechnen.

Das CSS, das benötigt wird, um eine Seite zu laden, wird kritisches CSS genannt. Im Allgemeinen sollte das Laden einer Seite nur bei kritischem CSS blockiert werden. Eine tolle Anlaufstelle zum Thema "Critical CSS" findest du in den Google Web Platform Docs.

"Critical" von Addy Osmani automatisiert den Prozess der kritischen CSS Extraktion.

Markup optimieren 🧐

In Content Management Systemen können Redakteure ihre Seiten selbst zusammenbauen. Als Frontend-Developer müssen wir also besonders darauf achten, den Redakteuren Werkzeuge an die Hand zu geben, die trotz größtmöglicher Individualisierung, ein sauberes SEO-Gerüst ausliefern.


Benötigt diese Komponente wirklich Headline-Tags? 🔖

Die Headline-Tags <h1>,<h2>,<h3>,<h4>,<h5> und <h6> sollten nur zum Gliedern von Textstrukturen verwendet werden, nicht zum "Stylen" unterschiedlicher Komponenten. Bevor du also beginnst das Markup für eine Komponente auszuwählen, achte darauf welche Art von Informationen übermittelt werden sollen.

Ein klassischer Fehler ist es, wiederkehrende Teaser-Elemente mit Headline-Tags auszustatten. Auf visueller Ebene ist die Headline ein wichtiger visueller Leiter. Es hilft oft schon, sich einfache Helferklassen nach der Art .headline-big oder .headline-small zu bauen, die einfach auf <p> oder <span> Elemente angewandt werden.


Barrierefrei sein - für Nutzer und Bots 🤖

In unserer Artikelreihe zum Thema Barrierefreiheit in Webapplikationen, haben wir dir gezeigt, worauf du achten musst, um deine Seite für beeinträchtigte Personen zu optimieren. Diese Menschen greifen oft auf Hilfsmittel wie Screenreader oder Sprachassistenten zurück.

Grundsätzlich verarbeitet ein SEO-Bot das Frontend sehr ähnlich wie diese Assistenten! Für Google ist unser optimiertes Markup unerlässlich für die Anzeige von Bewertungssternen, Event-Daten oder Preisen in den Snippets der SERP.


Auszeichnung von Links und Bildern 📝

Auch ein Thema unserer Reihe zur Barrierefreiheit: Alt- und Title-Attribute an Links und Bildern. Für den Inhalt dieser Tags sind allerdings die Redakteure der Webseite verantwortlich - sorge also dafür, dass diese Inhalte auch gepflegt werden können!

<!-- Bei Links -->
<a href="example.com" title="Externer Link auf example.com" target="_blank">
    Hier klicken!
</a>
<!-- Bei Bildern -->
<img src="bitspeicher-logo.png" alt="Bitspeicher">
<!-- Beides -->
<a href="https://bitspeicher.blog/" title="Zur Startseite von bitspeicher.blog">
    <img src="bitspeicher-logo.png" alt="Bitspeicher">
</a>

Erweiterung des Markups durch Schema.org 🗃️

Schema.org (oft Schema genannt) ist ein semantisches Vokabular von Tags (oder Mikrodaten), die du zu deinem HTML hinzufügen kannst, um zu steuern, wie Suchmaschinen deine Seite in SERPs lesen und darstellen.

Schema.org ist das Ergebnis der Zusammenarbeit zwischen Google, Bing, Yandex und Yahoo, um Ihnen zu helfen, die Informationen bereitzustellen, die Ihre Suchmaschinen benötigen, um Ihre Inhalte zu verstehen und die besten Suchergebnisse zu bieten, die zu diesem Zeitpunkt möglich sind. Das Hinzufügen von Schema-Markup zu Ihrem HTML verbessert die Anzeige Ihrer Seite in SERPs, indem die Rich Snippets, die unter dem Seitentitel angezeigt werden, verbessert werden.

Hier kannst du mehr zu diesem Thema lesen.


Rich Snippets 🃏

Als Menschen können wir oft sehr gut erkennen in welchem Zusammenhang bestimmte Daten stehen. Als Beispiel soll hier die Einladung zu einem unserer Frontend-Meetups dienen:

<h3>Frontend Rhein-Neckar</h3>
<p>
    20. September 2018 - 19:00 Uhr<br>
    UEBERBIT GmbH<br>
    Rheinvorlandstraße 7<br>
    Mannheim<br>
    Anmeldung via Meetup
</p> 

Mit dem via Schema.org vorgeschlagenen Tags, kann ich mein Event für Suchmaschinen attraktiver gestalten!

<!-- als Event ItemType deklarieren -->
<div itemscope itemtype=”http://schema.org/Event”>
    
    <span itemprop=”name”>Frontend Rhein-Neckar</span>
    
    <meta itemprop=”startDate” content=”2018-09-20T19:00″>
    20. September 2018 - 19:00 Uhr
   
    <!-- als Place ItemType deklarieren -->
    <div itemprop=”location” 
         itemscope 
         itemtype=”http://schema.org/Place”>
        UEBERBIT GmbH
        
        <!-- als PostalAddress ItemType deklarieren -->
        <div itemprop=”address” 
             itemscope 
             itemtype=”http://schema.org/PostalAddress”>
            
            <span itemprop=”streetAddress”>Rheinvorlandstraße 7</span>
            <span itemprop=”addressLocality”>Mannheim</span>
            
        </div>
    </div>
    
    <!-- als JoinAction ItemType deklarieren -->
    <div itemprop=”join” 
         itemscope 
         itemtype=”http://schema.org/JoinAction”>
        
        Anmeldung via Meetup
    </div>
    
</div>

Dudurch entstehen Snippets wie diese:

Bildschirmfoto-2018-10-30-um-15.42.17

Mit der Einführung von Featured Snippets und Position 0 generiert Google auch intelligente Extra-Snippets wie hier:

Bildschirmfoto-2018-10-30-um-15.42.26


Wie immer versuchen wir diesen Artikel möglichst aktuell zu halten. Falls sich also mal etwas in der SEO-Welt für Frontend-Developer ändern sollte, geben wir dir über Twitter oder Facebook Bescheid!

Alternativ kannst du auch unseren RSS Feed abonnieren, um auf dem Laufenden zu bleiben.