PageSpeed Optimierung – WordPress – XXL Guide für bessere Ladezeiten

Was ist PageSpeed Optimierung?

Kurz und knapp: Bei der PageSpeed Optimierung geht es darum, die Ladezeit einer Webseite zu verbessern.

Warum die PageSpeed Optimierung so wichtig ist

1. Bessere User Experience

Eine schnelle Seitenladezeit sorgt für eine bessere Nutzererfahrung (User Experience) von Besuchern mit Ihrer Webseite. Das reduziert die Absprungrate und vermeidet damit natürlich auch Umsatzeinbußen.

Tatsächlich verlieren Sie mehr als die Hälfte des Umsatzpotentials, wenn Ihre Webseite oder Ihr Onlineshop länger als drei Sekunden zum Laden benötigt. Denn laut einer Studie von KISSmetrics verlassen 40% der Besucher eine Webseite, wenn sie länger als drei Sekunden warten müssen. Die Zahl der Seitenabbrüche steigt dabei exponentiell zur Ladezeit an.

Auf mobilen Endgeräten sind Nutzer zwar insgesamt etwas geduldiger, doch auch hier geben die meisten an, eine Webseite nach etwa 6-10 Sekunden Wartezeit vorzeitig wieder zu verlassen.

2. Vorfahrt bei Google

Auch für Google ist der PageSpeed ein wichtiges Qualitätskriterium einer Webseite. Denn wenn viele Nutzer nach dem Klick auf ein Suchergebnis schon nach wenigen Sekunden wieder zur Suche zurückkehren, folgert Google daraus, dass die entsprechende Seite das Bedürfnis des Nutzers nicht erfüllen konnte. Kommt dies häufiger vor, sinkt die Relevanz der Webseite, was letztendlich zu einem Rankingverlust führt.

So erklärte der Suchmaschinenriese die Ladezeit einer Webseite bereits im April 2010 offiziell als Rankingfaktor:

Dies betraf hauptsächlich die Ladezeit einer Webseite auf Desktop PCs.

Durch die vermehrte mobile Internetnutzung, weitete Google im Juli 2018 schlussendlich den PageSpeed als Rankingfaktor offiziell auch auf die mobile Suche aus.

Vorteile der PageSpeed Optimierung im Überblick

  • Geringere Absprungrate
  • Zufriedenere Besucher
  • Mehr einzelne Seitenaufrufe pro Besucher
  • Mehr wiederkehrende Kunden und Stammleser
  • Verbesserte Conversion Rate und dadurch höhere Umsätze
  • Besseres Ranking bei Google

Wie kann ich die Ladezeit meiner Webseite messen?

Google selbst bietet Nutzern mit Google PageSpeed Insights ein kostenloses Tool, mit welchem sie die Ladezeit ihrer Webseite sowohl auf mobilen Geräten, als auch auf Desktop Anwendungen messen können.

Neben der Auswertung der Performance mit 100 als maximaler Punktzahl, listet Google hier zudem Maßnahmen auf, welche zur Verbesserung des PageSpeeds umgesetzt werden sollten.

Um Ihre Punktzahl zu ermitteln, tragen Sie einfach Ihre URL in das dafür vorgegebene Feld des Tools ein und klicken Sie anschließend auf “Analysieren“:

 

 

 

Nach wenigen Sekunden erhalten Sie Ihr Ergebnis:

 

 

Oben links können Sie dabei zwischen den beiden Reitern “Mobil” und “Desktop” wählen. Die Punktzahl und die Maßnahmen werden für beide Darstellungen individuell berechnet und ausgegeben. Bei der PageSpeed Optimierung sollten daher stets beide Ausrichtungen berücksichtigt werden. Die PageSpeed Optimierung für mobile Endgeräte kann andere Maßnahmen erfordern, als die Optimierung für Desktop PCs.

Um zu den Empfehlungen zu gelangen, scrollen Sie weiter nach unten:

 

Es macht nichts, wenn die Empfehlungen für Sie zunächst böhmische Dörfer sind. Selbst langjährig erfahrene Webentwickler und SEO Gurus stoßen bei dieser Aufschlüsselung oftmals an ihre Grenzen.

Deswegen möchten wir Sie in diesem Artikel Schritt für Schritt durch einzelne Optimierungsmaßnahmen führen und Ihnen deren Bedeutung näher bringen.

Wer gut englisch kann, kann sich natürlich auch gerne Google’s Vortrag zur Verwendung des PageSpeed Tools bei YouTube ansehen:

100 / 100 – ist die volle Punktzahl überhaupt erstrebenswert?

Das Google PageSpeed Insights Tool bringt Webseitenbetreiber ziemlich oft an den Rand der Verzweiflung. Denn die volle Punktzahl von 100 zu erreichen scheint oftmals schier unmöglich. Auch wenn man sich gefühlt Arme und Beine ausreißt, die Messwerte wollen einfach nicht in die Nähe der 100 klettern.

Dabei ist es tatsächlich unerheblich, ob eine Webseite nun 85 oder 100 Punkte erreicht. Zumindest in Bezug auf den mobilen PageSpeed ist laut Google Mitarbeiter Gary Illyes eine Punktzahl von 85 vollkommen ausreichend, wie er in folgendem Video bemerkt:

Natürlich sind die von PageSpeed Insights vorgeschlagenen Maßnahmen eine tolle Hilfestellung, um das Beste aus der Ladezeit herauszuholen. Es ist durchaus sinnvoll, diesen nachzugehen.

Letztendlich kommt es aber nicht darauf an, ob Sie bei PageSpeed Insights nun die volle Punktzahl erreichen, sondern ob Besucher die Webseite als schnell empfinden.

Doch was bedeutet “schnell” überhaupt aus Sicht des Nutzers?

In Wahrheit ist „schnell“ ein ziemlich relativer Ausdruck, der von verschiedenen Faktoren wie dem Endgerät oder der Internetverbindung abhängt.

Im offiziellen Google Guide spricht Mitarbeiter Philip Walton darüber, welche Metriken für Nutzer bei der subjektiven Beurteilung der Ladezeit eine Rolle spielen.

Die Performance einer Webseite wird meistens daran gemessen, wie lange diese benötigt, bis die Inhalte vollständig geladen sind.

Idealerweise sind die wesentlichen Elemente einer Webseite für den Besucher aber bereits sichtbar, während die restlichen, nicht sichtbaren, Inhalte noch im Hintergrund laden. So kann er mit der Webseite bereits interagieren, auch wenn diese in Wahrheit noch gar nicht vollständig aufgebaut ist. Der Besucher nimmt die Seite so dennoch als schnell wahr.

Laut Philip Walton beurteilen User die Ladezeit einer Webseite unbewusst nach folgenden Kriterien:

Sobald Besucher eine Webseite betreten, erwarten sie zunächst, dass sich überhaupt etwas tut. Dass zum Beispiel die Navigation erscheint oder Farben, Texte oder Bilder angezeigt werden.

Auf der nächsten Stufe erwarten Nutzer, dass sie bereits brauchbare Inhalte zu sehen bekommen. Daher sollten wichtige Elemente einer Webseite „Above the fold“ – also im sichtbaren Bereich des Nutzers – stets zuerst geladen werden. So kann er sich bereits in diesem Bereich nützliche Informationen beschaffen und bekommt gar nicht mit, dass eher unwichtige Inhalte sich im Hintergrund noch nach und nach aufbauen.

Auf der Stufe „Time to Interactive“ erwarten User nun, dass die Seite nicht nur visuell sichtbar ist, sondern dass sie auch bereit für Nutzerinteraktionen ist, wie zum Beispiel dem Klick auf einen Button.

Bei der PageSpeed Optimierung sollten Sie also nicht zu sehr der vollen Punktzahl hinterherjagen. Viel ausschlaggebender ist es, dass Ihre Webseite von Ihren Besuchern als schnell wahrgenommen wird, und nicht von irgendwelchen Tools.

1. Antwortzeit des Servers reduzieren

Ruft ein Nutzer Ihre Webseite auf, muss der Server, auf welchem Ihre Webseite sozusagen gespeichert ist, die angeforderten Daten als Antwort zurückgeben. Laut Google sollte die Antwortzeit hierbei unter 200ms liegen.

Wenn Sie Ihre Webseite über einen externen Anbieter wie Strato, 1&1 oder All Inkl hosten, haben Sie hierauf leider keinen direkten Einfluss.

Ist die Antwortzeit deutlich höher als die empfohlenen 200ms, bleibt Ihnen nur die Möglichkeit, einen höheren Tarif mit einer schnelleren Antwortzeit zu buchen. Alternativ kann es auch Sinn machen, direkt zu einem High Performance Hoster wie rackSPEED zu wechseln.

2. PageSpeed Optimierung mithilfe der Reduzierung von HTTP Requests

Das Grundgerüst einer Webseite besteht standardmäßig aus einer HTML Datei. Da Webseiten aber mit Farben, Slidern, Bildergalerien und coolen Animationen einfach ansprechender wirken, wird beim Aufruf einer Webseite nicht nur die HTML Datei geladen, sondern auch die mit ihr verknüpften Daten, die sich um die visuelle Gestaltung (CSS) und die Animationen (JavaScript) kümmern. Auch Bilder, die angezeigt werden sollen, werden über das HTML Dokument verlinkt und beim Seitenaufruf geladen.

All diese Dateien werden dabei über das Hypertext Transfer Protocol (HTTP) aufgerufen. Und je mehr coole Effekte eine Webseite enthält, desto mehr solcher Dateien müssen natürlich auch geladen werden.

Das Problem: Ein Browser kann nur 2 bis 8 solcher Requests gleichzeitig ausführen. Überschreitet die Anzahl der benötigten Dateien diese Obergrenze, kommen die restlichen Dateien in eine Warteschleife. Und eine Warteschleife sorgt natürlich auch für eine längere Ladezeit.

Anstatt also für jeden Effekt eine einzelne Datei mit dem HTML Dokument zu verknüpfen, sollten alle JavaScript Dateien in einer einzigen Datei zusammengefasst werden. Dasselbe gilt auch für die visuelle Gestaltung der Webseite mittels CSS.

Zum Glück gibt es für WordPress Nutzer hier Plugins, die diese Aufgabe automatisch übernehmen. Wir empfehlen:

WP Rocket (kostenpflichtig)

3. CSS, HTML und JavaScript Dateien reduzieren

Im vorherigen Punkt ging es darum, CSS und JavaScript Dateien jeweils in einer einzigen Datei zusammen zu fassen.

JavaScript und CSS Dateien bieten aber noch weiteres Optimierungspotenzial.

Jede dieser Dateien besteht oftmals aus tausenden Zeilen Code. Sehen wir uns dazu einmal den Ausschnitt aus einer JavaScript Datei an:

Alle Zeilen, die mit „//“ beginnen, sind Kommentare. Diese Kommentare sind nicht etwa an die Maschine gerichtet, die den Code letztendlich auslesen soll. Sie dienen dem Menschen, damit er den Code hinterher besser nachvollziehen kann. Die Maschine ignoriert diese Zeilen einfach.

Genauso verhält es sich mit Leerzeichen oder Umbrüchen. Sie dienen allein der besseren Lesbarkeit des Codes für den Menschen.

Jede Zeile Code benötigt allerdings Speicher. Bei wenigen Zeilen mag das nicht ausschlaggebend sein. Doch wie gesagt, bestehen die meisten Dateien aus tausenden Zeilen Code. Hier unnötige Kommentare und Leerzeichen zu entfernen, kann die Gesamtgröße des Dokumentes um mehrere KB verringern.

Zum Glück gibt es auch hier bei WordPress kostenlose Plugins, die diese Arbeit automatisch für Sie übernehmen. Wir empfehlen:

Autoptimize

4. PageSpeed Optimierung mithilfe der GZIP Komprimierung

Nachdem CSS, HTML und JavaScript Dateien im letzten Punkt von menschen- in maschinenlesbaren Code konvertiert wurden, hilft die GZIP Komprimierung dabei, die Datenpakete zu komprimieren, die vom Webserver an den Browser gesendet werden.

Hierfür werden die Datenpakete komprimiert versendet und vom Browser wieder entpackt.

Die GZIP Komprimierung ist bei modernen Hostinganbietern in der Regel bereits aktiviert.

Sollte dies bei Ihnen nicht standardmäßig der Fall sein, können Sie die GZIP Komprimierung aber auch manuell über die .htaccess Datei aktivieren. Ergänzen Sie die Datei dabei einfach um folgenden Code:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

5. Sichtbare Inhalte priorisieren / Blockiertes Rendering

Im ersten Teil dieses Guides sprachen wir bereits darüber, dass die gefühlte Ladezeit für den Besucher ausschlaggebender sein kann, als die tatsächliche Ladezeit.

Deswegen sollten die wichtigsten Inhalte „above the fold“ – also im sichtbaren Bereich der Webseite – zuerst geladen werden. So entsteht für den Nutzer der Eindruck, die Seite sei schon vollständig geladen, obwohl im Hintergrund unwichtigere Elemente noch nach und nach aufgebaut werden.

Bei der Ladereihenfolge sollten also diejenigen Inhalte und Funktionen priorisiert werden, die der User auf Ihrer Webseite zuerst zu sehen bekommt. Ist dies nicht der Fall, bemängelt Google PageSpeed Insights, dass gewisse JavaScript und CSS Dateien das Rendering blockieren.

Was bedeutet das nun konkret?

Nun, das Aussehen Ihrer Webseite wird durch diverse Angaben in der Stylesheet (CSS) Datei definiert. Wenn sich diese Datei nun in der Ladereihenfolge an letzter Position befindet, fällt der erste Eindruck Ihrer Webseite auf den Besucher nicht gerade schön aus. Damit er also von Anfang an z.B. die richtige Hintergrundfarbe zu sehen bekommt, sollten CSS Dateien stets priorisiert geladen werden. Um das zu erreichen, werden CSS Dateien üblicherweise direkt im Kopfbereich (head) der Webseite eingebunden.

Die Funktionalitäten und Animationen einer Webseite werden hingegen erst später vom Nutzer erwartet, sodass diese erst gegen Ende geladen werden sollten. Deswegen wird oftmals empfohlen, JavaScript Dateien in den Fußbereich (footer) – also am Ende einer Webseite – einzubinden.

WordPress Plugins wie das bereits vorgestellte „Autoptimize“ oder „WP Rocket“ regeln diesen Punkt automatisch bzw. bieten in den Einstellungen die entsprechenden Optionen an.

Alternative: Asynchrones Laden von JavaScript

Problematisch kann die Verlegung des JavaScript Codes in den Footer werden, wenn Sie zum Beispiel ganz oben auf Ihrer Seite eine animierte Slideshow eingebunden haben. Denn diese benötigt den Code direkt zu Beginn, um von Anfang an die Funktionalität zu gewährleisten.

Eine bessere Alternative stellt hier also das asynchrone Laden von JavaScript dar.

Beim asynchronen Laden wird der gesamte Code der Webseite von oben nach unten durchgegangen und die Bestandteile werden dann geladen, sobald sie in der HTML Datei benötigt werden. Im Gegensatz zum synchronen Laden wird aber nicht gewartet, bis eine Datei fertig geladen ist. Stattdessen werden die folgenden Zeilen weiter abgearbeitet, während die Datei im Hintergrund weiter lädt. Durch das asynchrone Laden wird somit verhindert, dass das Rendering wichtiger Elemente „above the fold“ durch JavaScript Dateien blockiert wird.

6. PageSpeed Optimierung durch Browser Caching

Beim Browser Caching profitieren vor allem wiederkehrende Besucher von einer schnelleren Ladezeit.

Beim ersten Besuch Ihrer Webseite wird ein Abbild von Elementen wie Bildern, JavaScript und CSS Dateien im Browser auf dem Gerät des Nutzers zwischengespeichert. Ruft er Ihre Webseite nun erneut auf, müssen die Inhalte nicht wieder geladen werden, sondern werden fertig gerendert direkt aus dem Speicher geholt.

Dadurch, dass die Webseite nicht bei jedem Seitenaufruf neu berechnet werden muss, kann die Ladezeit enorm verkürzt werden.

Der Einsatz von Browser Caching führt zu einer deutlichen Verbesserung der Punktzahl in PageSpeed Insights.

Für WordPress empfehlen wir die Installation eines der folgenden Plugins:

WP Rocket (kostenpflichtig)

WP Fastest Cache (kostenlos)

W3 Total Cache (kostenlos)

Alternative: Server Caching

Beim Server Cache werden die Daten nicht auf dem Gerät des Nutzers abgespeichert, sondern auf dem Server Ihrer Webseite. Hosten Sie Ihre Webseite über externe Anbieter wie Strato, 1&1 oder All Inkl, können Sie nachfragen, ob diese die Konfiguration eines Zwischenspeichers für Sie übernehmen. In diesem Fall können Sie vollständig auf die Installation von zusätzlichen Caching Plugins verzichten.

7. Unnötige Weiterleitungen vermeiden

301 Weiterleitungen erfolgen meist im Zuge eines Website Relaunches oder um Duplicate Content zu eliminieren.

Jede Weiterleitung verzögert jedoch die Ladezeit – wenn auch nur gering. Denn trifft ein Browser auf eine Weiterleitung, muss er zunächst die neue URL aufrufen, die das Ziel der Weiterleitung ist. Und bei jedem neuen Aufruf muss er entsprechend den HTTP Request abwarten.

Mit jeder zusätzlichen Weiterleitung kann die gesamte Ladezeit durchaus unnötig erhöht werden. Zudem folgt der Google Bot nur maximal drei Weiterleitungen. Eine hohe Anzahl an Redirects kann sich also auch negativ auf Ihr Google Ranking auswirken.

Haben Sie vor Kurzem also einen Relaunch durchgeführt, sollten Sie Ihre Webseite im Zweifel auf zu viele unnötige Redirects überprüfen.

8. Bad Requests vermeiden

Jede Verlinkung innerhalb eines HTML Dokuments löst einen Request seitens des Browsers aus. Haben Sie zu viele ungültige Verlinkungen auf Ihrer Webseite, werden Ressourcen und damit Ladezeit unnötig verschwendet. Trifft ein Browser auf eine Verlinkung, die kein gültiges Ziel aufweist, spricht man von einem Bad Request.

Bei einer kleinen Anzahl von Broken Links ist die Beeinträchtigung des PageSpeeds nur minimal. Dennoch sollten Sie mit kostenlosen Tools wie Brokenlinkcheck regelmäßig die Verlinkungen auf Ihrer Webseite überprüfen und ggf. korrigieren. Das hat nicht nur positive Effekte für die PageSpeed Optimierung, sondern vor allem auch für die User Experience Ihrer Website-Besucher.

9. Page Speed Optimierung durch regelmäßiges Aufräumen der Datenbank

Mit der Zeit füllt sich die Datenbank Ihrer Webseite mit unnötigen Einträgen. Beispielsweise können gelöschte Inhalte wie Bilder, Beiträge oder Kommentare den Umfang Ihrer Datenbank unnötig erhöhen.

Daher sollten Sie Ihre Datenbank regelmäßig bereinigen.

Für WordPress Nutzer bietet WP Rocket hier in den Optionen die entsprechende Möglichkeit. Klicken Sie im Menü des Plugins einfach auf „Datenbank“ und setzen Sie überall ein Häkchen.

 

 

Als kostenlose Alternative erfüllt WP Optimize denselben Zweck.

10. PageSpeed Optimierung durch Verkleinerung von Bilddateien

Bilder machen eine Webseite attraktiv und können sie visuell aufwerten. Doch gleichzeitig machen Bilder meistens auch den größten Teil der gesamten Datenmenge einer Webseite aus.

Eine der effektivsten Maßnahmen bei der PageSpeed Optimierung ist daher die Verkleinerung der Bilder auf Ihrer Webseite.

Idealerweise sollten Bilddateien bereits beim Hochladen in der richtigen Größe und im richtigen Format vorliegen. Denn durch eine nachträgliche Komprimierung – zum Beispiel mithilfe von Plugins – erreichen Sie nur selten dieselbe Einsparung.

Wenn ein Bild auf Ihrer Webseite also nur in der Größe 1000 Pixel dargestellt wird, sollten Sie das Bild schon vor dem Upload auf diese Größe zurechtschneiden. Am effektivsten funktioniert dies mit Programmen wie Photoshop.

Bildoptimierung mit Photoshop

In folgendem Beispiel haben wir ein Bild aus der Stockagentur Depositphotos heruntergeladen. Fahren wir mit der Maus über das Bild, sehen wir die Abmessungen (2000 x 1333) und die Größe (2,19 MB). Würden wir das Bild nun unbearbeitet auf die Webseite hochladen, würden wir die Ladezeit durch die extrem hohe Dateigröße unnötig in die Höhe treiben.

 

Stattdessen öffnen wir das Bild in Photoshop und schneiden es zunächst auf die tatsächlich benötigte Größe zurecht.

Hierzu klicken wir in Photoshop auf „Bild“ -> „Bildgröße“. Im sich öffnenden Fenster können wir nun die gewünschten neuen Abmessungen eintragen. Mit einem Klick auf „OK“ übernehmen wir die Änderungen.

 

 

Würden wir das Bild nun einfach so abspeichern, hätte es immer noch eine Größe von 480KB. Dies ist zwar wesentlich weniger, als vorher, aber für eine Webseite immer noch viel zu viel.

 

 

Um noch mehr einzusparen, sollten Sie das Bild für das Web optimiert abspeichern. Photoshop bietet hier unter “Datei” -> “Für Web speichern” genau diese Option.

Im sich öffnenden Fenster können Sie nun die Qualität und das Format des Bildes bestimmen. Links in der Vorschau sehen Sie direkt die Auswirkungen. Hier sieht man auch schon sehr gut, dass das Bild mithilfe dieser Option nur noch 97,15 KB groß ist – und das ganz ohne Qualitätsverlust:

 

 

Wenn wir auch mit einer mittleren Bildqualität leben können, können wir die Größe des Bildes sogar noch einmal um knapp die Hälfte auf 46,12 KB reduzieren:

 

 

Bildoptimierung in WordPress mithilfe von Plugins

Für WordPress Nutzer gibt es zahlreiche Plugins, die die automatische Bildkomprimierung übernehmen. Unsere Empfehlungen sind WP Smush It und Robin Image Optimizer.

Bei beiden Plugins können Sie in den jeweiligen Einstellungen automatisch alle vorhandenen Bilder gleichzeitig komprimieren lassen. Die Einsparung ist dabei oftmals enorm:

 

 

Außerdem sehen Sie in der Mediathek nun bei jedem einzelnen Bild einen Button mit der Aufschrift “Optimize“. Wenn Sie darauf klicken, wird das Bild komprimiert und Sie sehen die dadurch erreichte Einsparung. Sollten Sie mit der Komprimierung nicht zufrieden sein, zum Beispiel aufgrund eines zu starken Qualitätsverlustes, können Sie jederzeit durch einen Klick auf “Restore original” die Originaldatei wiederherstellen.

 

Das richtige Dateiformat für die PageSpeed Optimierung

Als Dateiformat für hochwertige Fotos sollten Sie stets JPEG wählen.

Nur, wenn Ihr Bild Transparenz enthält (z.B. bei einem Logo), empfiehlt sich die Auswahl des PNG 24 Formates, da JPEG keine Transparenz darstellen kann.

PNG 24 Dateien sind oft jedoch erheblich größer als JPEG Dateien desselben Bildes.

Für Grafiken ist darüber hinaus die Verwendung des Vektorformats SVG empfehlenswert. Dateien im SVG Format sind sehr klein, jedoch unendlich skalierbar. So können sie auch auf Retina Displays ohne Qualitätsverlust optimal dargestellt werden.

11. PageSpeed Optimierung durch Lazy Load

Vor allem bei bildlastigen Webseiten kann die Verwendung von Lazy Load erheblich die Ladezeit verbessern.

Ruft ein Nutzer eine Webseite auf, werden normalerweise alle Inhalte direkt geladen. Also auch Bilder im unteren Teil der Webseite, die er beim Einstieg noch gar nicht sieht. Insbesondere bei einer großen Anzahl von Bildern kann das zu langen Ladezeiten führen.

Mit der Verwendung eines Lazy Load Scripts werden Bilder erst dann geladen, wenn sie im Viewport des Besuchers auftauchen. Wenn der Nutzer also durch Scrollen oder die Vergrößerung des Bildschirms den entsprechenden Bereich erreicht. Scrollt er also gar nicht bis ganz nach unten, wird dementsprechend auch das Laden überflüssiger Bilder vermieden, die er sowieso nicht zu Gesicht bekommen würde.

Für die PageSpeed Optimierung für WordPress empfehlen wir hierfür folgendes kostenloses Plugin:

Crazy Lazy

12. PageSpeed Optimierung mithilfe der Nutzung eines Content Delivery Networks (CDN)

Ein Content Delivery Network ist ein Netz von Servern in verschiedenen Rechenzentren auf der ganzen Welt.

Bei der Nutzung eines CDN werden Ihre statischen Inhalte (z.B. JavaScript- und CSS Dateien, Bilder etc.) mithilfe eines Verteilungssystems von Ihrem Ausgangsserver auf diese sogenannten Replica Server übertragen. Ruft ein Nutzer nun Ihre Webseite auf, ermittelt ein Request Routing System, welcher der verfügbaren Replica Server sich am besten für die Beantwortung des Requests eignet. In der Regel erfolgt die Auslieferung der Daten von einem Replica Server, der geographisch in der Nähe des Nutzers liegt und über die geringste Auslastung verfügt. Dank der weltweit verstreuten Server profitieren Ihre Kunden so von schnelleren Ladezeiten und einer geringeren Bandbreitenauslastung. Durch die Weiterleitung der Requests an Replica Server wird zudem die Auslastung Ihres Ursprungsservers minimiert.

Die Verwendung eines CDN macht bei der PageSpeed Optimierung allerdings nur Sinn, wenn Ihre Webseite international ausgerichtet ist. Befindet sich Ihr Ursprungsserver in Deutschland und stammen auch die meisten Ihrer Webseiten-Besucher aus Deutschland, dann hat ein CDN kaum spürbare Auswirkungen auf die Ladezeit.

Liegt Ihr Ausgangsserver aber in Deutschland und versucht ein Nutzer zum Beispiel von Australien aus auf Ihre Webseite zuzugreifen, muss die Anfrage den ganzen Weg von Australien nach Deutschland und wieder zurück zurücklegen. Ohne ein CDN könnte dieser Aufruf durchaus über 10 Sekunden dauern. Bei der Verwendung eines CDN hingegen, würde der australische Besucher die Inhalte Ihrer Webseite bereits nach 1-2 Sekunden zu sehen bekommen, da die Daten von einem nahegelegenen Replica Server übermittelt werden würden.

Empfehlenswerte Anbieter für ein Content Delivery Network sind:

Amazon CloudFront

Google Cloud CDN

Akamai

13. PageSpeed Optimierung für WordPress – Unnötige Plugins deinstallieren

Die große Anzahl an kostenlosen Plugins für WordPress verleitet viele Seitenbetreiber dazu, ihre Webseite mit massenweise Plugins auszustatten. Doch jedes Plugin muss über das HTML Dokument verlinkt werden, was für einen zusätzlichen Request sorgt. Vor allem bei komplexen Plugins werden zudem oft haufenweise unnötige Extra-Funktionen geladen, die im Endeffekt gar nicht benötigt werden.

Im Zuge der PageSpeed Optimierung für Ihre WordPress Webseite sollten Sie sich also aller überflüssigen Plugins entledigen. Nur wirklich dringend benötigte Plugins können Sie beibehalten. Als grobe Zahl sollten normale Firmenpräsentationen maximal 10 Plugins installiert haben, bei Onlineshops können es bis zu 20 sein. Dies hängt allerdings von den jeweiligen Ansprüchen der Webseite und der Komplexität der verwendeten Plugins ab.

Read More

Mit User Centered Design zu einer besseren Usability & User Experience

Das User Centered Design (kurz: UCD; deutsch: nutzerzentrierte Gestaltung) ist ein Konzept im Webdesign, bei welchem der Nutzer und seine Bedürfnisse von Anfang an im Mittelpunkt stehen. So wird das gesamte Webdesign maßgeblich von den Erwartungen und dem Verständnis der User gesteuert. Das Ziel ist es, auf diese Weise die ganzheitliche Usability (=Bedienung) und User Experience (=Nutzererfahrung) auf einer Website positiv zu beeinflussen.

Indem die zukünftigen Nutzer von Beginn an systematisch mit in den Entwicklungsprozess eingebunden werden, bleiben Ihnen langfristig teure Fehlentwicklungen und Optimierungen erspart.

Sinn und Zweck des User Centered Designs

Eine Webseite kann nur dann erfolgreich sein, wenn sie die Erwartungen, Bedürfnisse und Ziele der zukünftigen Nutzer bestmöglich befriedigt. Fühlen sich Besucher auf Ihrer Website nicht wohl oder finden sich nur schwer zurecht, verlassen sie diese innerhalb weniger Sekunden wieder. Vielen Webseitenbetreibern ist gar nicht bewusst, wie viel potenzieller Umsatz aufgrund einer schlechten Website Usability liegen bleibt.

In solchen Fällen zaubern wir immer unseren Lieblingsspruch aus den Ärmeln. Vielleicht wirkt er etwas altertümlich. Aber er trifft es genau auf den Punkt:

“Der Köder muss dem Fisch schmecken, nicht dem Angler.”

Leider haben auch wir regelmäßig mit Kunden zu tun, die ihre Webseite nur nach ihrem eigenen subjektiven Geschmack beurteilen. Dass Geschmäcker unterschiedlich sind, möchte auch niemand abstreiten. Es gibt jedoch gewisse visuelle und strukturelle Regeln, die eingehalten werden müssen. Schließlich rufen die meisten Menschen tagtäglich die unterschiedlichsten Webseiten auf. Sei es unterwegs in der Bahn über das Smartphone oder gemütlich zu Hause vom Desktop-PC aus. Hier begegnen sie immer wieder vertrauten Gestaltungsmustern, die ihnen die intuitive Navigation durch die jeweiligen Seiten erleichtern.

Zum Beispiel wird in westlichen Kulturen ein Textfluss von links nach rechts erwartet. Größere Elemente (z.B. Schriften) sind bedeutender, als kleine. Das Unternehmenslogo befindet sich in der linken Ecke. Und das Wichtigste steht am Anfang einer Webseite.

Fallen Sie mit Ihrer Webseite hier aus dem Rahmen, sorgt das für Verwirrung und damit einhergehend für eine hohe Absprungrate.

Oder um es ganz unverblümt auszudrücken: Wir können Ihnen auf Wunsch eine knallpinke Webseite mit tausend blinkenden Glitzer-Animationen und lauter Techno-Musik im Hintergrund erstellen. Oder eine Webseite im Design aus der Internet-Steinzeit. Neukunden werden Sie damit nicht generieren, aber vielleicht macht sich ja ein eingerahmter Screenshot ganz schön im Wohnzimmer über der Couch 😉

Mit User Centered Design Besucher vom eigenen Angebot überzeugen

Das User Centered Design verfolgt den Ansatz, Ihre Webseite stattdessen aus den Augen Ihrer Zielgruppe zu betrachten. Es geht darum, Informationen verständlich und einfach zugänglich zu machen, sodass Besucher sich bei Ihnen gut beraten und aufgehoben fühlen. Das schafft Vertrauen in Ihre Marke und gleichzeitig auch in Ihre Kompetenz.

Und Kompetenz beweisen Sie nicht, indem Sie lauter Fachausdrücke auf Ihrer Webseite unterbringen, mit denen Laien nichts anzufangen wissen. Wenn Laien Ihre Produkte oder Dienstleistungen nicht verstehen, dann scheitert es schon an der zielgruppengerechten Kommunikation.

Nutzerzentrierte Gestaltung zielt vielmehr darauf ab, komplexe Sachverhalte einfach und verständlich zu übermitteln. Trockene oder komplexe Themen können beispielsweise mit inhaltsstützenden Grafiken anschaulich dargestellt werden. Auch der Einsatz von ansprechenden Bildern oder Videos kann dazu beitragen, Nutzer emotional aufzuladen und so eine persönliche Bindung zu Ihrem Unternehmen aufzubauen. Solange Nutzer einen Mehrwert in Ihrer Präsentation für sich gewinnen können, nehmen Sie Ihre Bedarfsgruppen schnell für sich ein.

Auch eine einwandfreie Technik, schnelle Ladezeiten und die Zugänglichkeit Ihrer Webseite über mobile Endgeräte wie Smartphones oder Tablets werden von Interessenten erwartet. Können Sie diese Erwartungshaltung nicht erfüllen, verschwinden Besucher über wenige Mausklicks schnell bei Ihrer Konkurrenz.

Die Vorteile von User Centered Design liegen damit auf der Hand:

  • Sie entwickeln ein besseres Gespür dafür, was Ihre Zielgruppe wirklich möchte
  • es entsteht eine stärkere Kundenbindung zu Ihrer Marke
  • die Zielgruppenakzeptanz wird gesteigert
  • Besucher werden besser in wiederkehrende Kunden konvertiert, was für steigenden Umsatz sorgt
  • Interessenten bauen schneller Vertrauen in Ihre Kompetenz auf
  • durch informative Inhalte und einen harmonischen Gesamtauftritt verweilen Nutzer länger auf Ihrer Webseite…
  • … wodurch letztendlich positive Synergieeffekte zu anderen Kanälen wie SEO entstehen
  • User Centered Design ist kosteneffizienter, da weniger Kosten für spätere Optimierungen anfallen
  • der gesamte Webauftritt wird von Anfang an optimal strukturiert, wodurch nachträgliche Korrekturen vermieden werden
Responsive Webdesign Beispiel

Der nutzerorientierte Gestaltungsprozess im Überblick

Die Steigerung der Usability und User Experience durch intuitive Benutzerführung erfordert eine gut durchdachte Herangehensweise. Das User Centered Design lässt sich dabei grob in vier Phasen einteilen:

Analyse des Nutzungskontextes

In der ersten Phase des UCD werden die individuellen Bedürfnisse, Probleme und Anforderungen Ihrer Zielgruppe definiert. Hierfür werden sogenannte Buyer Personas entwickelt, die Ihre idealen Kunden darstellen. Neben demografischen Eigenschaften wie Alter, Geschlecht, Hobbys oder Beruf, geht es vor allem um die Frage, welche ihrer alltäglichen Probleme Sie mit Ihrem Angebot lösen können.

Aber auch Kenntnisse der technischen Rahmenbedingungen werden in dieser Phase eingeholt. Nutzt Ihre Zielgruppe eher das Smartphone für die Informationsbeschaffung? Oder handelt es sich bei Ihrer Zielgruppe vielleicht um gesundheitlich eingeschränkte Menschen, die auf ein barrierefreies Webdesign angewiesen sind? Welche Art von persönlicher Ansprache bevorzugt Ihre Zielgruppe?

Definition der Anforderung

Basierend auf den Erkenntnissen der Nutzeranalysen werden Anforderungen definiert, die auf Ihrer Webseite umgesetzt werden sollen.

Konzeption und Entwurf

Die definierten Anforderungen werden in einem ersten Entwurf ausgearbeitet und zu einem interaktiven Prototypen entwickelt. Ziel ist es, zunächst eine nutzerfreundliche Informationsarchitektur zu entwickeln und sicherzustellen, dass das Konzept dem mentalen Modell der Nutzer entspricht und nicht die interne Sicht des Unternehmens widerspiegelt.

Evaluation und Feintuning

In der letzten Phase folgt die finale Überprüfung des ausgearbeiteten Konzepts. Um sicherzustellen, dass die Anforderungen der Nutzer auch tatsächlich erfüllt werden, wird zum Beispiel direktes Nutzerfeedback eingeholt. Aber auch andere Methoden des Usability-Testings kommen zum Einsatz. So können Schwachstellen des Konzeptes noch rechtzeitig ausfindig gemacht und behoben werden.

User Experience

Worauf es allgemein ankommt – Usability Checkliste

Grundsätzlich gibt es einige Usability Regeln, die von so gut wie jedem Nutzer beim Besuch einer Webseite erwartet werden. Schon allein die Nichterfüllung eines einzigen Punktes kann beim Besucher einen negativen Gesamteindruck hinterlassen.

Design

  • ästhetisches und aufgeräumtes Design
  • konsistente Farbgestaltung
  • Vertrauenssignale wie Kundenstimmen oder Referenzen

Struktur

  • klare Strukturen und intuitive Navigation
  • Einsatz von Breadcrumbs zur besseren Orientierung
  • Klarer Pfad zu Firmeninformationen
  • Zielführender Einsatz von Call-to-Actions

Technik

  • schnelle Ladezeiten unter 2 Sekunden
  • Einheitliche Darstellung über alle Endgeräte hinweg (Smartphone, Tablet, Desktop-PC)
  • Aussagekräftige und leicht verständliche URLs
  • Browserkompatibilität

Inhalte

  • gut lesbare Typographie und Schriftgrößen
  • Verständliche Ausdrucksweise und fehlerfreie Rechtschreibung
  • gut strukturierte Texte mit inhaltsstützenden Medien wie Grafiken oder Videos
  • informative und ansprechende Überschriften
  • Einsatz von Aufzählungen zur Auflockerung des Textes
  • Verlinkungen sind konsistent und klar als solche zu erkennen
  • Thema der Seite ist innerhalb von 5 Sekunden ersichtlich

Bedienung

  • Nutzerfreundliche und barrierefreie Kontaktformulare
  • Keine störenden oder aufdringlichen Pop Up Fenster
  • Nutzerfreundliche Suchfunktion
  • Anlegen einer individuellen 404 Fehlerseite
  • Verlinkung des Logos mit der Startseite

Read More

Google Penguin Update

Beim Google Penguin Update handelt es sich um eine permanente Änderung des Google Algorithmus. Erstmals durchgeführt wurde die Änderung am 24.04.2012.

Alle bisherigen Versionen des Penguin Updates im Überblick

  • Penguin 1.0: Algorithmus-Update am 24. April 2012
  • Penguin 1.1: Data Refresh am 22. Mai 2012
  • Penguin 1.2: Data Refresh am 5. Oktober 2012
  • Penguin 2.0: Algorithmus-Update am 23. Mai 2013
  • Penguin 2.1: Data Refresh am 4. Oktober 2013
  • Penguin 3.0: Data Refresh am 18. Oktober 2014
  • Penguin 4.0: Algorithmus-Update am 23.September 2016

Welches Ziel hat das Penguin Update?

Das Penguin Update dient insbesondere dazu, Webspam innerhalb der Suchergebnisse radikal einzudämmen. Daher ist das Penguin Update auch unter dem Namen „Webspam Update“ bekannt.

Vom Update betroffen waren weltweit insgesamt ca. 3% aller Webseiten, die unerlaubte Techniken einsetzten, um sich eine möglichst hohe Position in den Suchergebnissen zu „erschummeln“. Zu solchen Techniken, die gegen die Google Webmaster Richtlinien verstoßen, zählen beispielsweise Keyword Stuffing, Cloaking oder das Kaufen von Backlinks.

Da der Einsatz dieser Techniken einzig und allein dem Zweck dient, die eigene Position in den Suchergebnissen zu verbessern, bringen diese dem Nutzer selbst meistens keinen Mehrwert. Mit dem Google Penguin Update wird verhindert, dass solche Seiten zu Unrecht die Toppositionen in den Google Suchergebnissen belegen.

Webspam Formen im Überblick

Als Webspam klassifiziert Google unter anderem folgende Techniken:

  • Unnatürliche Backlinks: Dies können beispielsweise gekaufte oder getauschte Backlinks sein. Aber auch ein unnatürliches Wachstum der Backlinks wird von Google als Webspam eingestuft (wenn Sie bspw. mit einer neuen Domain direkt in den ersten 2 Wochen 5000 Backlinks bekommen).
  • Künstliche Verlinkung: Eine künstliche Verlinkung resultiert meist, wenn Backlinks hauptsächlich sogenannte Money Keywords als Linktext enthalten.
  • Black Hat SEO: Jegliche Methoden aus dem Black Hat SEO Bereich werden als Webspam gewertet. Hierzu gehören bspw. Keyword Stuffing, Cloaking, Doorway Pages oder Hidden Content.

Wie erkennen Sie, ob Ihre Website vom Penguin Update betroffen ist?

Ob Ihre Website vom Penguin Update betroffen ist, erkennen Sie wie schon beim Panda Update an einem Abfall der Sichtbarkeit in den Suchergebnissen. Durch die verschlechterten Rankings äußert sich dies oft auch in einem plötzlichen Trafficverlust.

Überprüfen können Sie die Sichtbarkeit Ihrer Website mit dem Sistrix Tool. Geht die Sichtbarkeit Ihrer Website über Wochen oder Monate hinweg gegen Null oder zumindest steil bergab, ist dies meist ein sicheres Indiz, dass Sie vom Penguin Update betroffen sind.

In einigen Fällen erhalten Webmaster aber auch direkt von Google über die Google Search Console eine Mitteilung über ein „unnatürliches Linkwachstum“. Navigieren Sie hierzu in der Google Search Console links über das Menü zu „Suchanfragen -> Manuelle Maßnahmen“. Im Idealfall sollten Sie keinerlei Mitteilung vorfinden.

penguin update

Sehen Sie hier aber die entsprechende Mitteilung, können Sie sich 100% sicher sein, dass Ihre Website vom Penguin Update betroffen ist.

Was können betroffene Webseiten tun?

Betroffene Webseiten sollten zunächst intensiv ihr Linkprofil überprüfen. Enthält das Linkprofil eine auffällig große Anzahl an schädlichen bzw. unnatürlichen Backlinks, sollten diese von den entsprechenden Seiten entfernt werden. Bei besonders vielen Backlinks kann dies jedoch sehr mühsam sein und nicht immer lassen sich Backlinks manuell entfernen.

In diesem Fall sollte über die Google Search Console eine Disavow-Datei eingereicht werden. In die Disavow-Datei werden alle Backlinks eingetragen, die von Google ignoriert und nicht in die Bewertung des Suchmaschinenrankings mit einbezogen werden sollen.

Unnatürliche Backlinks erkennen Sie an:

  • Eine übermäßig hohe Anzahl an Backlinks mit dem „dofollow“-Attribut im Verhältnis zu „nofollow“-Verlinkungen.
  • Eine übermäßig hohe Anzahl an Backlinks von ausländischen Webseiten bzw. Webseiten einer anderen Sprachversion als der Ihren.
  • Eine übermäßig hohe Anzahl an Backlinks von .edu oder .gov Domains.
  • Ein unnatürlich schnelles Linkwachstum innerhalb eines bestimmten Zeitraums.
  • Backlinks auf Seiten, von denen viele externe Links ausgehen. (FOTO)
  • Backlinks mit einer übermäßig hohen Anzahl an unnatürlichen Linktexten (z.B. Money Keywords wie „Webdesign“, „Steuerberater“ usw.).
  • Eine übermäßig hohe Anzahl an Profilbacklinks oder Backlinks aus Blogkommentaren.
  • Fast ausschließlich Backlinks von Seiten mit hoher Domain Authority.
  • Backlinks von Seiten, die nicht themenrelevant zur eigenen Seite sind.
  • Schlechte Position des Backlinks auf der verlinkenden Website, bspw. innerhalb der Sidebar oder dem Footer.
  • Backlinks von Expired Domains.
  • Backlinks von abgestraften Webseiten.

Read More

Google Panda Update

Das Google Panda Update beschreibt eine umfassende und permanente Änderung des Google Algorithmus. Erstmals ausgerollt wurde es weltweit am 12.08.2011.

Seinen Namen hat das Algorithmus-Update vom Google Ingenieur Navneet Panda.

Was macht das Google Panda Update?

Beim Panda Update handelt es sich um einen Filter, der regelmäßig auf alle Seiten innerhalb des Google-Index angewandt wird. Mit dem Filter soll erreicht werden, dass qualitativ minderwertige Webseiten in ihrer Sichtbarkeit bei Google herabgesetzt werden bzw. komplett aus den Suchmaschinenergebnissen genommen werden.

Hierfür nutzt Panda eine Berechnungsgrundlage für qualitativ hochwertige bzw. minderwertige Webseiten und deren Inhalte.

Folgende Faktoren sorgten für einen deutlichen Verlust an Sichtbarkeit für ca. 10% aller Webseiten nach Einführung des Panda Updates:

  • Wenige oder minderwertige Backlinks
  • Eine geringe Verweildauer von Besuchern auf der Website
  • Ein hohes Maß an doppelten Inhalten (Duplicate Content)
  • Wenig relevante bzw. wenige Inhalte (Thin Content)
  • Eine hohe Absprungrate
  • Zu viel Werbung auf der Website
  • Unnatürlich häufiges Vorkommen eines Keywords auf einer Seite (Keyword Stuffing)
  • Seiteninhalt und Seitentitel stimmen nicht mit der Suchanfrage überein

Was ist das Ziel des Google Panda Updates?

Das Ziel des Google Panda Updates ist, die Qualität der Suchergebnisse zu erhöhen. Suchende sollen demnach schneller und leichter an relevante Informationen gelangen als vor der Algorithmus-Änderung.

Wie äußert sich das Google Panda Update bei betroffenen Webseiten?

Vom Panda Update betroffene Webseiten verzeichneten kurz nach Veröffentlichung einen deutlichen Rückgang ihrer Rankings bei Google und damit einhergehend auch einen großen Trafficverlust. Betroffen war meist die gesamte Webseite und nicht nur etwa einzelne Unterseiten.

Am besten beobachten konnte man den Sichtbarkeitsverlust über das Tool SISTRIX. Hier konnte man den Absturz der Rankings hervorragend am Sichtbarkeitsindex ablesen. Ein gewaltiger und anhaltender Absturz guter Platzierungen war ein ziemlich sicheres Indiz dafür, dass die Website vom Panda Update betroffen ist.

Handlungsempfehlungen für betroffene Webseiten

Die Sichtbarkeit wieder zurück zu erlangen ist meist mit viel Aufwand verbunden. Ist die gesamte Website vom Panda Update betroffen, sollten die gesamten Inhalte der Seite, sowie die Usability insgesamt betrachtet und verbessert werden.

Read More

Click Through Rate

Die Click Through Rate (deutsch: Klickrate; Abkürzung: CTR) beschreibt das Verhältnis zwischen der Anzahl, wie häufig ein Ergebnis den Suchenden angezeigt wurde (Impressions) und der Anzahl, wie häufig die Suchenden tatsächlich auf das Ergebnis geklickt haben (Klicks).

Wie wird die Click Through Rate berechnet?

Die Formel zur Berechnung der CTR lautet:

(Anzahl der Klicks / Anzahl der Impressionen) x 100

Beispiel: Wird Ihre Website 100 mal bei Google gesehen und 3 Mal geklickt, ergibt sich eine Click Through Rate von 3%.

Die Click Through Rate in der organischen Suche

Angenommen, Ihre Website ist für das Keyword „Steuerberater Frankfurt“ auf dem 4. Platz bei Google. Gibt nun ein Nutzer „Steuerberater Frankfurt“ in die Suchleiste ein, wird ihm also Ihre Website neben 9 weiteren organischen Ergebnissen auf der ersten Seite angezeigt. Er sieht Ihre Seite also (Impression). Dass er sie sieht bedeutet aber nicht, dass er auch tatsächlich auf sie draufklickt. Vielleicht entscheidet er sich stattdessen für eins der 9 anderen Ergebnisse.

Wird Ihre Website nun häufig angezeigt, erhält aber wenige tatsächliche Klicks, fällt die Click Through Rate entsprechend niedrig aus.

Der Grund für eine schlechte Click Through Rate in der organischen Suche sind meistens Meta-Tags, also der kurze Auszug Ihrer Website, die auf den Suchenden einfach nicht ansprechend wirken. Insbesondere in der Meta-Description sollten Sie die Vorteilskommunikation anwenden und den User mit ansprechenden Argumenten dazu animieren, auf Ihr Suchergebnis zu klicken.

CTR Google

Zalando überzeugt Suchende mit einer hervorragenden Vorteilskommunikation.

Zudem muss beachtet werden, dass die Click-Through-Rate mit absteigender Google-Platzierung allgemein abnimmt. So hat der erste Platz eine durchschnittliche CTR von 18-27%. Die Click Through Rate des vierten Platzes liegt schon deutlicher darunter.

Wie hoch Ihre CTR für bestimmte Keywords ist, können Sie in der Google Search Console einsehen. Navigieren Sie hierzu links im Menü zu Suchanfragen -> Suchanalyse und setzen Sie ein Häkchen bei „Klicks“, „Impressionen“ und „Klickrate“. Schon erhalten Sie Ihre Angaben zur Click Through Rate Ihrer gesamten Website inkl. einzelner Keywords.

Click Through Rate

Die Click-Through-Rate in der bezahlten Suche (Google AdWords)

Wenn Sie Google AdWords Anzeigen schalten, beschreibt die Click Through Rate das Verhältnis der Anzahl, wie oft Ihre Anzeige geschaltet wird, zu der Anzahl, wie oft Nutzer tatsächlich darauf klicken.

Auch hier kann eine niedrige CTR ein Hinweis dafür sein, dass Ihr Anzeigentext nicht ansprechend genug ist. Möglich ist aber auch, dass Ihre Anzeige für Keywords geschaltet wird, die gar nicht relevant sind. Unterziehen Sie Ihre AdWords Anzeigen daher einer genauen Überprüfung und schließen Sie ggf. Keywords aus, für welche Ihre Anzeige nicht geschaltet werden soll.

Hier muss ebenfalls beachtet werden, dass nur 6,8% aller Klicks auf AdWords Anzeigen entfallen. Die restlichen User entscheiden sich lieber für ein Ergebnis aus der organischen Suche. D.h. bei Google AdWords ist es „normal“, dass Sie deutlich mehr Impressions als Klicks erhalten.

Die Click Through Rate bei Werbebannern

Bei Werbebannern ist eine niedrige Click Through Rate ebenfalls ein Signal dafür, dass sich Ihre anvisierte Zielgruppe von der Bannerwerbung nicht angesprochen fühlt. Wichtig ist hier, dass Sie Ihre Zielgruppe genau definieren und die Werbebanner gezielt nach ihr ausrichten.

Bei Werbebannern fällt die Click Through Rate jedoch generell deutlich schlechter aus als über andere Werbekanäle. So liegt die durchschnittliche CTR hier bei gerade einmal 0,02 – 0,10%. Bei 1000 Impressionen bedeutet das nur einen einzigen Klick durch einen User.

Durchschnittliche Höhe der Click Through Rate

Die Frage nach der durchschnittlichen Höhe der CTR lässt sich pauschal nicht beantworten. Dies hängt sehr stark vom eingesetzten Medium und der Art der vermittelten Inhalte ab. Entscheidend ist, wie erfolgreich Ihre Kampagne zur Erreichung Ihrer Ziele beiträgt. Haben Sie eine CTR von 2%, müssen Sie das also in Relation zum gesamten Kampagnenerfolg betrachten. Ist dieser zufriedenstellend, dann ist auch eine niedrige Click Through Rate nicht weiter besorgniserregend.

Eine hohe Click Through Rate bedeutet nicht automatisch mehr Verkaufserfolg

Nur, weil ein Nutzer sich von Ihrer Präsentation bei Google angesprochen fühlt und Ihre Website betritt, heißt das noch lange nicht, dass er in einen Kunden konvertiert. Eine hohe CTR ist nur dann profitabel, wenn auch die Conversion Rate entsprechend hoch ausfällt. Der Kunde also tatsächlich etwas kauft, Kontakt aufnimmt oder seine E-Mail-Adresse bspw. für die Newsletteranmeldung hinterlässt.

Klicken zwar viele Nutzer auf Ihre Website, verlassen diese aber bereits nach kurzer Zeit wieder ohne eine Conversion zu tätigen, sollten Sie aufhorchen. Wenn Sie zwar eine hohe Click Through Rate, aber eine niedrige Conversion Rate haben, können verschiedene Gründe dafür verantwortlich sein:

  • Sie haben in Ihrer Anzeige etwas versprochen, das Sie auf der Website nicht einhalten können
  • Ihre Website ist nicht nutzerfreundlich
  • Ihre Website ist nicht für mobile Geräte optimiert (Responsive Webdesign)
  • Ihre Website hat eine lange Ladezeit
  • Ihre Inhalte sind für den Besucher nicht relevant oder nicht nützlich genug
  • User finden sich auf Ihrer Seite nur schwer zurecht
  • Die Zielseite, auf die Nutzer nach dem Klick geführt werden, ist nicht optimal

Wenn Sie also eine AdWords Anzeige zum Thema „günstige rote Damenschuhe“ schalten, dann sollten Sie Nutzer beim Klick auf Ihre Anzeige auch direkt zu den versprochenen Schuhen führen. Ist stattdessen Ihre Startseite als Zielseite angegeben, kann das unter Umständen zu einer größeren Absprungrate führen, da der Besucher schlichtweg keine Lust hat nach dem gewünschten Schuh zu suchen.

Read More

Was ist responsive Webdesign?

Das responsive Webdesign beschreibt eine aktuelle Technik, die es ermöglicht, Webseiten so zu entwickeln, dass sie sich flexibel an die visuellen und haptischen Möglichkeiten des verwendeten Endgeräts und dessen Bildschirmgröße anpassen.

Übersetzt bedeutet der Begriff responsive Webdesign so viel wie „reagierendes Webdesign“.

Responsive Webdesign

Sinn und Zweck des responsiven Webdesigns

Die Art, wie Menschen das Internet heute nutzen, hat sich seit der Markteinführung von Smartphones und Tablets stark verändert. Bereits über die Hälfte aller Suchanfragen bei Google werden heute über mobile Endgeräte getätigt. Landen Nutzer auf einer nicht mobiloptimierten Website, verlassen sie diese meistens bereits nach wenigen Sekunden wieder. Einfach, weil die Bedienung zu umständlich ist und ähnliche Anbieter nur wenige Mausklicks entfernt sind. Viele Webseitenbetreiber unterschätzen nach wie vor, wie viele potentielle Kunden und damit Geschäftspotential an dieser Stelle verloren gehen.

Mit der Verbreitung mobiler Geräte wie Smartphones und Tablets steigt gleichzeitig der Anspruch der Nutzer an die Zugänglichkeit von Inhalten beziehungsweise an die intuitive Navigation auf Webseiten. Nutzer erwarten, dass sie jede Website von jedem beliebigen Ort und Endgerät aus aufrufen und intuitiv bedienen können. Nur, wenn Webseitenbetreiber in der Lage sind, diesen Anforderungen nachzukommen, können sie weiterhin von zufriedenen Kunden und hohen Kaufabschlussraten profitieren. Dies erzwingt allerdings ein Umdenken bei der Webseitengestaltung. Es reicht nicht mehr, ein Layout für eine einzige Bildschirmgröße anzupassen. Stattdessen muss ein Webdesign in der Lage sein, flexibel auf unterschiedliche Bildschirmgrößen und deren Verhalten zu reagieren:

Smartphones: 320px bis 480px
Tablets: 768px bis 1024px
Desktop-PCs: 1024px+

Unterschied von Smartphone Bildschirmen zu Desktop Bildschirmen:

  • Deutlich kleinerer Bildschirm, dadurch weniger Platz für die Darstellung
  • Hoch- und querformatig nutzbar (Portrait / Landscape)
  • Oft höhere Pixeldichte (Retina)
  • Bedienung über Touch, nicht mit einem Mauszeiger
  • Eventuell weniger verfügbares Datenvolumen, daher müssen Ladezeiten dringend optimiert werden
Responsive Webdesign Beispiel

Starres Grid Layout vs. flexibles Grid Layout

Was versteht man unter einem Grid Layout?

Jede Website basiert auf einem Gestaltungsraster, dem sogenannten Grid-Layout. Hierbei handelt es sich um ein unsichtbares System an Linien, an dem die verschiedenen Elemente einer Website ausgerichtet werden. Ein Webdesign, das auf einem solchen Layout basiert, wirkt meist aufgeräumter und harmonischer.

Mehrspaltige Inhalte auf einer Website sind beispielsweise ein häufig verwendeter Teil eines Grid Layouts.

Starres Grid Layout

Noch vor einigen Jahren konnte keiner ahnen, dass Webseiten in Zukunft von diversen unterschiedlichen Bildschirmgrößen aufgerufen werden. Es gab einige gängige Bildschirmgrößen, für welche Webseiten angepasst wurden. Schaut man sich eine solche veraltete Webseite heute auf einem Smartphone an, dann erkennt man sehr gut das starre Grid Layout, mit welcher sie entwickelt wurde. Auf dem Smartphone sieht die Webseite genauso aus, wie auf dem Desktop-PC. Allerdings bietet der deutlich kleinere Smartphone Bildschirm nicht genug Platz für das starre Layout, das nun sozusagen über die Bildschirmränder hinausragt.

Wollen wir alle Inhalte der Seite erfassen, müssen wir den Bildschirm hin und her bewegen und zoomen, um gewisse Bereiche lesen zu können. Auch das Menü der Seite ist – vor allem mit „Wurstfingern“ – auf einem kleinen Smartphone Bildschirm nur schwer zu bedienen. Mal eben schnell die Öffnungszeiten eines lokalen Geschäfts zu recherchieren kann hier schnell zur Geduldsprobe werden. Nutzer haben schlichtweg keine Lust, sich an Ihre Website anzupassen. Sie erwarten, dass sich die Website flexibel an ihre Bedürfnisse anpasst und nicht umgekehrt.

Nachteile eines starren Layouts im Überblick:

  • Nutzer müssen zoomen oder den Bildschirm hin und her schieben um alle Inhalte zu erfassen
  • Schaltflächen sind besonders bei dicken bzw. großen Fingern nicht immer leicht zu treffen
  • Schrift und Bilder haben oft nicht die optimale Größe und sind daher nicht immer gut zu erkennen
  • Anklickbare Elemente liegen möglicherweise zu dicht beieinander
  • Die umständliche Bedienung sorgt für eine schlechte User Experience und dadurch für stärkere Abbruchraten

Flexibles Grid Layout

Auch auf kleinen Bildschirmen eine gleichbleibende Nutzerfreundlichkeit zu gewährleisten, erfordert ein Umdenken bei der Webseitengestaltung insbesondere hinsichtlich des Gestaltungsrasters. Das Layout der Website muss sich flexibel an die Bildschirmgröße anpassen, statt wie bisher seine starre Form über alle Bildschirme hinweg zu behalten.

Bei einem flexiblen Layout wird auf feste Pixelangaben weitgehend verzichtet. Stattdessen werden heute eher relative Werte wie Prozentangaben verwendet. Denn wenn man bspw. die Breite eines Bildes mit 1920px fest definiert, wird es zwar auf einem großen Bildschirm optimal dargestellt. Auf einem kleinen Bildschirm mit einer Gesamtbreite von 480px würde das Bild jedoch um 1440px überstehen. Mit Prozentangaben kann man dieses Problem beim responsive Webdesign umgehen, da sich dann das Bild relativ entlang der Bildschirmgröße bzw. entlang der zur Verfügung stehenden Fläche ausrichtet.

Auch die Darstellung von Spalten muss sich flexibel an die Bildschirmgröße anpassen können. Auf einem großen Desktop-PC sehen vier Spalten nebeneinander noch gut aus. Auf einem kleineren Bildschirm werden die Spalten jedoch extrem schmal, sodass vor allem lange Wörter schnell überstehen.

Stattdessen sollten Breakpoints gesetzt werden, sodass die Spalten auf kleinen Bildschirmen untereinander dargestellt werden, statt nebeneinander. So sind die Inhalte innerhalb der Spalten für den Anwender deutlich einfacher zu erfassen. Hier arbeitet man ebenfalls mit relativen Prozentangaben statt mit festen Pixelwerten:

Weitere Gestaltungsregeln um aus einem starren Layout ein flexibles Layout zu machen:

  • Das Hauptmenü sollte auf kleinen Bildschirmen als sogenanntes Hamburgermenü dargestellt werden.
  • Im responsive Webdesign sollten Schriftgrößen, Zeilenhöhen etc. auf der Basis von Prozentangaben (%) oder anderen relativen Werten (z.B. em) definiert werden. So entspricht eine Schriftgröße von 16 Pixeln 100% oder 1em.
  • Bildgrößen sollten ebenfalls mit relativen Werten definiert werden.
  • Mehrspaltige Inhalte sollten auf kleinen Bildschirmen untereinander, statt nebeneinander dargestellt werden.
Responsive Grid

Wie funktioniert Responsive Webdesign? – Technische Umsetzung

Mithilfe von sogenannten Media Queries werden beim Aufruf einer Website zunächst verschiedene Daten abgefragt, wie:

  • Breite und Höhe des Bildschirms (Viewport)
  • Breite und Höhe des Geräts
  • Geräte-Orientierung (Landscape / Portrait)
  • Auflösung
  • usw.

Abhängig vom Ergebnis der Abfrage werden zuvor die mittels Media Queries festgelegten Gestaltungsregeln abgerufen und angewendet. Innerhalb dieser Gestaltungsregeln werden sogenannte Breakpoints gesetzt. Überschreitet die Geräteauflösung einen solchen Breakpoint, wird das Layout der Website dynamisch angepasst.

Simples Beispiel:

Wir wollen die Schriftgröße abhängig von der verwendeten Bildschirmgröße anpassen. Auf dem Smartphone soll sie etwas kleiner (18px) sein als auf einem Tablet (20px).

Mittels Media Queries lässt sich diese Anforderung problemlos lösen. Da Media Queries ein Teilgebiet der Stylesprache CSS sind, müssen wir die Gestaltungsregeln innerhalb einer Datei mit der Endung .css (z.B. style.css) eingeben. Üblicherweise werden Media Queries ganz am Ende der Datei definiert. Natürlich kann man Media Queries aber auch in einer separaten CSS-Datei auslagern, welche dann noch im Hauptdokument eingebunden werden muss.

In der Praxis sieht der zugehörige “Responsive Webdesign Code” so aus:

/* „Normale“ Style-Angaben ohne Media Queries, z.B. für die normale Desktop-Version */

p {
font-size: 22px;
}

/* Anpassung für Tablet */

@media screen and (min-width: 768px) and (max-width: 1024px) {

p {
font-size: 20px;
}

}

/* Anpassung für Smartphones */

@media screen and (min-width: 320px) and (max-width: 480px) {

p {
font-size: 18px;
}

}

Die Vorteile von responsive Webdesign

Wer sich eine Homepage erstellen lassen möchte, sollte stets beachten, dass ein responsive Webdesign kein “Nice to have”, sondern vielmehr ein “Must have” ist. Wer über seine Website neue Kunden generieren möchte, muss dementsprechend für eine einfache Bedienung über alle Endgeräte hinweg sorgen.

Vorteile des responsive Webdesign im Überblick:

  • Die Internutzung wird zunehmend mobil. Im Jahr 2018 nutzen XX% aller Menschen in Deutschland das Smartphone.
  • Seit April 2014 zählt ein responsive Webdesign bei Google als entscheidender Rankingfaktor. Nicht-mobiloptimierte Webseiten rutschen in den Suchergebnissen immer weiter nach hinten. Ein mobiloptimiertes Layout kann also einen deutlichen Vorsprung bei Google bedeuten.
  • Die Usability der Website wird ganzheitlich verbessert, was unabhängig vom verwendeten Endgerät für eine bessere Nutzererfahrung sorgt. So werden Absprungraten deutlich reduziert. Dadurch erhöht sich die Conversion Rate und damit auch der Unternehmensumsatz.
  • Mit responsive Webdesign bleiben Sie zukunftsfähig, egal, welche neuen Bildschirmgrößen den Markt erobern.
  • Nach Veröffentlichung der Website werden nachträglich veränderte Inhalte automatisch an alle Bildschirmgrößen angepasst und müssen nicht einzeln bearbeitet werden.

Was ist “Mobile First” und lohnt sich das?

Mit Mobile First ist ein Ansatz gemeint, bei dem durch responsives Webdesign die Website zuerst für den mobilen Zugriff konzipiert und optimiert wird. Um auch größere Displays zu berücksichtigen, wird die Website für diese anschließend entsprechend angepasst.

Dieses Konzept liegt der Annahme zugrunde, dass es wesentlich leichter ist, ein mobiles Layout auf einen Desktop-PC zu übertragen als umgekehrt. Das Mobile First Prinzip sorgt außerdem dafür, dass Inhalt und Struktur der Seite stärker bedacht werden. Beispielsweise wird vielen Unternehmen klar, dass gewisse Informationen überflüssig sind und weggelassen werden können. Mobile First unterstützt also auch dabei, wichtige Informationen von unwichtigen zu trennen und die Website nicht mit unnötigen Informationen zu überladen. Die Logik von “Mobile First”, dass man mit der Konzeption einer mobilen Website eine perfekte Desktop-Version sozusagen “gratis” dazu erhält, hat in den vergangenen Jahren einen enormen Hype auf den Mobile First Ansatz ausgelöst.

Auch wenn viele Webdesigner auf dieses Prinzip schwören, sind wir der Meinung, dass man “Mobile First” nicht bei jedem Kunden und jedem Projekt anwenden muss bzw. sollte. Es kann zwar durchaus Sinn machen, die mobile Version einer Seite nur auf die wichtigsten Elemente und Informationen herunterzubrechen. Dies genauso auf die Desktop-Version zu übertragen ist jedoch nicht zwingend die optimale Lösung. Denn während häufig die User Experience auf mobilen Endgeräten verbessert wird, kann die Nutzererfahrung auf Desktop PCs darunter leiden.

Bei jedem Projekt sollte man individuell entscheiden, ob “Mobile First” ein richtiger Ansatz sein kann und falls ja, welche konkreten Vorteile es mit sich bringt. Sinnvoller ist es, die unterschiedlichen Endgeräte und Nutzungssituationen einzeln und unabhängig voneinander zu betrachten. Es ist also nicht verkehrt, zuerst die Desktop-Version zu kreieren und anschließend um eher unnötige Informationen auf der mobilen Version zu reduzieren. Ein User, der zu Hause gemütlich vor dem PC sitzt, hat eventuell mehr Zeit sich Ihre Inhalte durchzulesen, als jemand, der von unterwegs nur schnell die wichtigsten Informationen nachlesen möchte.

Wie kann ich testen, ob mein Webdesign responsive ist?

Es gibt verschiedene kostenlose Online-Tools, mit welchen man testen kann, ob die eigene Website responsive ist. Am besten gefallen hat uns das Tool ami.responsivedesign.is

Online-Tools funktionieren aber nicht immer zuverlässig. Verschiedene Plugins beispielsweise bei WordPress definieren ihre responsiven Eigenschaften nicht unbedingt an der Pixelgröße des Bildschirms, sondern am verwendeten Endgerät selbst. Die Eigenschaften werden also nur übernommen, wenn das Gerät auch tatsächlich ein Smartphone ist.

Da Online-Tools aber meistens von einem Desktop-PC aufgerufen werden, greifen die speziell für das Smartphone definierten Eigenschaften hier nicht.

Deswegen empfehlen wir, Webseiten immer direkt von einem Smartphone oder Tablet aus zu überprüfen, um wirklich 100% sicher sein zu können.

Benötigen Sie Hilfe bei der Erstellung Ihres responsive Webdesign?

Gerne unterstützen wir Sie im Rahmen von Webdesign Frankfurt bei der Konzeption und Entwicklung Ihrer responsiven Website. Sprechen Sie uns einfach vollkommen unverbindlich an.

Read More

ALT-Attribut / ALT-Tag

Das ALT-Attribut (auch ALT-Tag genannt) wird dafür verwendet, um Bilder und Grafiken einer Website mit kurzen Worten zu beschreiben.

Das „ALT“ steht dabei als Abkürzung für „alternativer“ Text.

Sinn und Zweck des ALT-Attributs hinsichtlich SEO

Den Begriff „ALT-Attribut“ hört man meistens im Bereich der Suchmaschinenoptimierung.

Suchmaschinen können in der Regel nur Text auswerten und Bilder als solche nicht interpretieren. Google ist deshalb nicht in der Lage zu erkennen, was auf den Bildern einer Website abgebildet ist. Mithilfe des ALT-Attributs können wir unseren Bildern und Grafiken aber eine kurze Beschreibung mitgeben. Diese Beschreibung wird auch vom Googlebot und anderen Suchmaschinencrawlern registriert und hilft ihnen dabei zu erkennen, was auf einem Bild abgebildet ist. So kann die Suchmaschine den Inhalt eines Bildes besser verstehen und einem Thema zuordnen.

Die Angabe des ALT-Attributs wird von Google ebenfalls als Text ausgewertet und sollte daher im Idealfall auch das Hauptkeyword der Seite beinhalten. Jedoch sollten Sie jetzt nicht zwanghaft bei jedem Bild versuchen das Keyword unterzubringen, sondern nur dann, wenn es auch tatsächlich zum Motiv des Bildes passt. Eine grüne Kaffeetasse mit dem ALT-Attribut „Steuerberater Frankfurt“ auszuzeichnen wäre also suboptimal. Zudem kann es schnell passieren, dass Sie in den Bereich Keyword Stuffing rutschen, wenn Sie jedes Bild Ihrer Website mit Ihrem Hauptkeyword versehen.

Weitere Gründe für die Verwendung eines ALT-Attributs

Auch außerhalb der Suchmaschinenoptimierung gibt es viele Gründe, weswegen Sie Ihren Bildern ALT-Attribute vergeben sollten. Kann ein Bild oder eine Grafik bspw. aufgrund technischer Probleme oder langer Ladezeiten auf einer Website nicht angezeigt werden, erscheint stattdessen der im ALT-Attribut hinterlegte Text. So können sich Nutzer dennoch vorstellen, welche Bilder auf der Website eigentlich dargestellt werden sollten. Zudem gibt es einige Internetuser, die die Darstellung von Bilddateien auf einer Website bewusst blockieren oder die über einen Browser surfen, der rein textbasiert ist und Bilder daher allgemein nicht darstellen kann.

Gleichzeitig trägt das ALT-Attribut auch zur Barrierefreiheit und damit zur Usability einer Internetseite bei. Sehbehinderte Menschen sind beispielsweise auf Screenreader angewiesen, die ihnen die Inhalte einer Seite vorlesen. Ähnlich wie Suchmaschinen können auch Screenreader Bilder als solche nicht interpretieren und daher nicht vorlesen. Ist jedoch ein ALT-Attribut hinterlegt, können Screenreader diesen lesen und dem Nutzer mitteilen.

Wie kann man ein ALT-Attribut einbinden?

HTML

Der Code für das ALT-Attribut wird als HTML-Element im Quellcode für eine Bilddatei hinterlegt. Sobald wir also die Quelle für ein Bild angeben, können wir gleichzeitig auch das ALT-Attribut mit angeben. In der Praxis sieht das dann so aus:

<img src=“bilddatei.jpg“ alt=“Beschreibung des Bildes“>

WordPress

In CMS-Systemen wie WordPress kann das ALT-Attribut auch ohne HTML-Kenntnisse eingebunden werden. Hierfür müssen Sie einfach auf das gewünschte Bild in der Mediathek klicken. Rechts sehen Sie dann bereits das Feld mit der Bezeichnung „Alternativtext“. Hier können Sie dann einfach das ALT-Attribut eintragen. Nach der Eingabe müssen Sie nichts mehr anklicken – das System speichert das ALT-Attribut automatisch.

alt Attribut

Wie sieht das optimale ALT-Attribut aus?

Das ALT-Attribut sollte das dargestellte Bild möglichst präzise und in kurzen Worten beschreiben. Auf ganze Sätze sollten Sie aber verzichten. Falls möglich und zum Motiv passend, sollte das Hauptkeyword der jeweiligen Seite im ALT-Attribut enthalten sein.

Unterschied zwischen ALT-Tag und TITLE-Tag

Neben dem ALT-Attribut können Bilder auch mit einem TITLE-Tag versehen werden. Vielen Webmastern ist nicht ganz klar, wo genau der Unterschied zwischen beiden Attributen liegt.

Der Title-Tag wird dem User angezeigt, sobald dieser mit dem Mauszeiger über ein Bild fährt.

Bilder SEO Title

Der hauptsächliche Unterschied der beiden Attribute liegt demnach darin, dass das Title-Attribut für den Nutzer sichtbar ist, während das ALT-Attribut meistens unsichtbar bleibt (außer, das Bild kann nicht angezeigt werden). Auch das Title-Attribut wird von Google zur Auswertung des Bildinhalts herangezogen und liefert dem Nutzer weitere Informationen zu dem Bild. Grundsätzlich gelten für das Title-Attribut dieselben Regeln wie für das ALT-Attribut: Das Bild sollte kurz beschrieben werden und dem User evtl. weitere kurze Informationen dazu bieten. Wenn Sie sich nicht sicher sind, was Sie beim Title-Attribut angeben sollen oder Ihnen die Ideen fehlen, können Sie auch einfach den Text aus dem ALT-Attribut kopieren. Wird das Title-Attribut bei einem Bild nicht angegeben, wird nämlich ohnehin der ALT-Tag angezeigt, wenn ein User mit der Maus darüberfährt.

Und so wird das Title-Attribut eingebunden:

HTML

Das Title-Attribut wird in einem HTML-Dokument an derselben Stelle eingebunden wie das ALT-Attribut, nämlich in derselben Klammer wie die Angabe der Bildquelle:

<img src=“bilddatei.jpg“ alt=“Beschreibung des Bildes“ title=“Titel des Bildes“>

WordPress

Auch in WordPress können Sie das Title-Attribut des Bildes dort eingeben, wo Sie auch das ALT-Attribut vergeben konnten. Das Feld für den Titel findet sich fast direkt darüber:

title Tag

Read More

Deeplink

Von einem Deeplink spricht man meistens, wenn eine “fremde” Website eine Unterseite Ihrer Domain verlinkt. Verlinkt sie hingegen auf Ihre Startseite, handelt es sich schlichtweg um einen Startseitenlink (oder auch „Surfacelink“).

Die Bezeichnung Deeplink kommt aus dem englischsprachigen Raum und leitet sich von dem Wort „Deep“ ab, was auf deutsch übersetzt „tief“ heißt. Übersetzt heißt ein Deeplink dementsprechend „tiefe Verlinkung“ und führt den User somit tief in eine Website hinein.

Bedeutung von Deeplinks für SEO

Für die Suchmaschinenoptimierung und speziell für den Aufbau von starken Backlinks sind Deeplinks ein wichtiger Bestandteil. Verlinkungen auf eine Unterseite Ihrer Domain werden von Suchmaschinen in der Regel etwas stärker gewichtet als Startseitenlinks, da Unterseiten ein Thema meistens ausführlicher behandeln und die Empfehlung dadurch konkreter und themenspezifischer ist. Somit steigt auch die Relevanz Ihrer Website für ein bestimmtes Thema.

Beim Backlinkaufbau sollten Sie also stets darauf achten, nicht nur Startseitenlinks zu bekommen, sondern auch viele Deeplinks. Sie sollten jedoch nicht zu extremes oder einseitiges Deeplinking fordern, da ein unausgeglichenes Verhältnis von Deeplinks zu Startseitenlinks von Google im schlimmsten Fall als Suchmaschinenmanipulation gewertet und abgestraft werden kann. Das Verhältnis sollte stets bei mindestens 50:50 liegen.

Beispiel für einen Deeplink: www.ihredomain.de/unterseite_1
Beispiel für einen Startseitenlink: www.ihredomain.de

Vorteile von Deeplinks für den Nutzer

Deeplinks sind nicht nur für SEO bedeutsam, sondern sie bieten auch Nutzern einen großen Vorteil und erhöhen die Usability. Nutzer gelangen über Deeplinks nämlich direkt zu den Informationen, die für sie von Interesse sind und müssen nicht erst danach suchen. Beispielsweise können sich Nutzer so den Umweg über die Startseite sparen.

Deeplinks in der internen Verlinkung

Natürlich können Sie auch innerhalb Ihrer eigenen Website Deeplinks zu Unterseiten setzen. Wikipedia beispielsweise verlinkt in jedem Artikel auf relevante weitere Informationen zu einem bestimmten Thema. Diese interne Verlinkung kann Google dabei helfen, die Inhalte und das Thema Ihrer Website vollständig zu erfassen und zu erkennen, in welcher Beziehung sich die Artikel bzw. Seiteninhalte zueinander befinden.

Wenn Sie bspw. von der Startseite aus einen Deeplink zu einer Unterseite setzen, wird zudem der Link Juice der Startseite auch auf die Unterseiten übertragen.

Read More

Thin Content

Mit Thin Content (deutsch: „dünner Inhalt“) werden Webseiteninhalte bezeichnet, die für den Nutzer kaum relevante Informationen und damit keinen Mehrwert bieten.

Erstmals wurde die Bezeichnung über die 2011 geleakten Quality Rater Guidelines bekannt.

Hintergrund und Bedeutung von Thin Content für SEO

Spätestens seit Einführung des Google Panda Updates bemüht sich Google aktiv darum, dass vor allem solche Inhalte ganz oben in den Suchergebnissen gelistet werden, die den Erwartungen der User entsprechen. Dazu zählen insbesondere Inhalte, die lesefreundlich sind, ein Thema vollständig abdecken und dem Besucher nützliche Informationen zu dessen Suchanfrage bieten.

Bei Thin Content ist all dies nicht gegeben. Deswegen werden Webseiten mit dünnen Inhalten von der Suchmaschine im Ranking herabgestuft. Webseitenbetreiber, die über Google Neukunden generieren möchten, kommen also nicht umhin, sich für die Erstellung Ihrer SEO Texte Mühe zu geben.

Beispiele für Thin Content

  • Automatisch generierte Inhalte, z.B. RSS-Feeds oder automatisiert erstellte Texte (Article Spinning)
  • Duplicate Content und kopierte Texte
  • Doorway Pages
  • Zu wenig relevanter Inhalt, z.B. Seiten, auf denen so gut wie gar kein Text existiert oder Text, der inhaltlich sehr schwach ist

Gibt es eine Mindestwortanzahl?

In SEO-Kreisen hört man immer wieder von einer Mindestanzahl von 300 Wörtern, wenn man mit seinen Inhalten bei Google ranken möchte. Dies ist jedoch keine allgemeingültig festgelegte Regel und nicht jeder Inhalt mit weniger als 300 Wörtern zählt damit automatisch als Thin Content.

Es kommt immer auf das jeweilige Thema und die Konkurrenz zu diesem Thema an. Wenn ein Mitbewerber mit einem hochwertigen Text, der aus 2000 Wörtern besteht, auf Platz 1 steht, dann müssen Sie diesen Text an seinem Informationsgehalt und Mehrwert für den User übertreffen. Mit 300 Wörtern ist dies kaum machbar. Was wiederum aber nicht bedeutet, dass Sie zwangsläufig mehr Wörter als Ihr Mitbewerber schreiben sollten. Wenn Sie im Vergleich zu Ihrem Mitbewerber lediglich 1500 Wörter benötigen, um einen noch relevanteren Content zu erstellen, kann dies reichen, um ihn in den Suchergebnissen zu überholen.

Vergessen Sie also diese „300-Wörter-Regel“. Schreiben Sie Ihren Text so, dass er der anvisierten Zielgruppe die Informationen bietet, die diese gerade benötigt. Ob Sie dafür 1000 Wörter oder 3000 Wörter brauchen, ist vollkommen irrelevant.

Read More

Organische Suche (SERPs)

Wenn wir bei Google einen Suchbegriff eingeben, erhalten wir in den meisten Fällen zwei Arten von Suchergebnissen. Einmal die bezahlten Google AdWords Anzeigen und in der Regel direkt darunter die unbezahlten Suchergebnisse, die nicht durch gezielte Werbeschaltungen beeinflusst werden können. Diese unbezahlten Ergebnisse werden als organisches Suchergebnis bezeichnet.

Organische Suchergebnisse werden oft auch Search Engine Result Pages, kurz SERPs, genannt.

organische suche

Beeinflussung der Positionierung in der organischen Suche

Im Gegensatz zu den Google AdWords Anzeigen (Paid Search) ist die Position einer Website in den SERPs nicht käuflich.

Stattdessen wird die Reihenfolge der organischen Suchergebnisse vom Google Algorithmus festgelegt. Gibt ein User eine Suchanfrage bei Google ein, vergleicht die Suchmaschine die eingegebenen Begriffe mit den verfügbaren Webseiten aus dem Suchmaschinenindex. Thematisch passende Webseiten werden herausgefiltert und anhand über 200 verschiedenen Rankingfaktoren absteigend nach ihrer Relevanz sortiert und ausgegeben. So entsteht das Ranking der Webseiten innerhalb der SERPs.

Das Ranking der eigenen Website in der organischen Suche lässt sich mittels Suchmaschinenoptimierung verbessern. Hierfür wird die Website inhaltlich und technisch so aufbereitet, dass sie möglichst viele der über 200 Rankingfaktoren erfüllt. Zu diesen Faktoren gehören unter anderem:

  • Hochwertige und informative Inhalte (SEO Texte)
  • Relevanz der Webseiteninhalte zum eingegeben Suchbegriff
  • Ein starkes Linkprofil
  • Ein responsive Webdesign
  • Schnelle Ladezeiten
  • Eine Optimale URL-Struktur
  • HTTPS Verschlüsselung
  • Interne Verlinkung
  • Anreicherung des Contents durch Medien wie Bilder, Grafiken oder Videos
  • Ansprechende Meta-Tags
  • Und viele mehr

Organische Suche vs. bezahlte Suche

Je nach Konkurrenzsituation des Keywords kann es sehr lange dauern und aufwändig sein, bis man seine Zielposition in den SERPs durch Suchmaschinenoptimierung erreicht. Deswegen ist das Schalten von bezahlten Google AdWords Anzeigen für viele Unternehmer vor allem in der Anfangsphase meist attraktiver, da hier die Website bei ausreichend Budget direkt ganz oben in den Suchergebnissen geschaltet wird. Allerdings eben auch nur so lange, wie man bereit ist, für die Anzeigen zu bezahlen. Ist das Budget verbraucht, verschwindet die Anzeige auch wieder.

Im Gegensatz dazu ist zwar die Optimierung für die organische Suche kosten- und zeitintensiver. Ist aber die Wunschposition einmal erreicht und verfügt die Website allgemein über nützliche und wertvolle Inhalte, lässt sich die erreichte Position in den SERPs auch mit deutlich weniger Aufwand halten.

Zudem ermittelte der Google Analytics Experte Avinash Kaushik einst, dass rund 86 Prozent der Suchenden die organischen Suchergebnisse bevorzugen. Mit einer Top Platzierung in den SERPs können Webseitenbetreiber also wesentlich mehr Traffic erzielen als über bezahlte Anzeigen.

Read More
Show Buttons
Hide Buttons