• Tipp: Dein Blog lädt zu langsam? Teil 2 – Render Blocking CSS

    Nachdem wir uns im ersten Teil schon mit CSS Optimierung befasst haben, möchten wir ein wenig tiefer in das Thema Ladezeiten Optimierung vordringen und klären was genau „Render Blocking CSS Files“ eigentlich sind. Generell steht das Thema natürlich im Context zum Spannungsfeld der optimalen Darstellung vs. Ladezeit. Am schönsten ist es jedes noch so kleine Detail dem Browser vorzugeben hinsichtlich der Darstellungsregeln, aber genau darin kann, bei nicht optimaler Umsetzung, auch ein Problem liegen.

    Was genau versteht man darunter wenn von „render blocking css Files“ gesprochen wird?

    „Render blocking CSS Files“ verzögern generell die Anzeige deiner Webseite. Es werden damit die Dateien bezeichnet, die den Browser davon abhalten bzw. verlangsamen mit dem Rendering (Anzeigen) der Web Seite zu beginnen. Denn generell muss jeder Browser zu erst die „Formvorgaben“ (CSS Styles) laden um dann mit der Darstellung zu beginnen.

    Wer findet es schon gut auf das Laden einer Seite zu warten? Niemanden den wir kennen. Und auch wenn die Gründe unterschiedlich sein können, gibt es einige einfache Tipps wie man mit dem Thema umgehen kann. Und genau darum soll es im heutigen Teil „Render Blocking CSS“ gehen. Wir werden ganz praktisch einige Lösungen aufzeigen bzw. Tipps geben, wie man mit solchen „aufhaltenden“ Dateien umgehen kann. Generell unterscheiden wir in diesem Beitrag 3 Szenarien auf Basis der folgenden CSS Grundregeln:

    • Jedes einzelnde CSS Datei muss erst geladen werden und verzögert damit das Darstellen der Web Seite
    • Je größer die CSS Datei ist, um so länger dauert das Laden und damit das Darstellen der Seite
    • Je mehr CSS Dateien für eine Web Seite geladen werden müssen, um so langsmer wird die Web Seite dargestellt

    Generell sind lange Wartezeiten beim Aufrufen von Web Seiten nie schön, aber es kann auch einen ernsteren Hintergrund haben: Ist die User Experience auf einer Seite dauerhaft schlecht, werden sich die Nutzer von der Seite verabschieden. Niemand hat Lust auf die Darstellung zu warten, weder am stationären Rechner noch auf mobilen Endgeräten. Und da Nutzerzahlen nicht zu letzt eine wesentliches Erfolgskriterien für online Kanäle sind, ganz egal ob es sich um Web Seiten, Blogs oder Web Shops handelt, solltet Ihr ein gesteigertes Interesse haben, Eure Seite so optimal wie möglich zu gestalten. Daher anbei die 3 Basis Tipps rund um die Dateien welche für die Darstellung der Web Seiten im Browser sorgen.

    Was kann ich tun um „render blocking css Files“ auf meinen Seiten zu eliminieren? 3 Tipps ….
    1. Sorge für den optimalen Aufruf der CSS Dateien
    2. Verringere die Anzahl der verwendeten CSS Dateien so weit wie möglich in den für die Web Seiten Anzeige relevanten Teilen deines Codes
    3. Versuche generell die Anzahl an CSS Dateien und Code so gering wie möglich zu halten.

    Im folgenden Teil werden wir nun auf die einzelnen Teile eingehen, teilweise auch etwas tiefer. Orientierung bietet dabei die Hinweise welche Google zur Verfügung stellt.

    1. Wie sorge ich Für den optimalen Aufruf der CSS Dateien?

    CSS Dateien können auf viele unterschiedliche Arten von Deiner Web Seite abgerufen werden. Einige Möglichkeiten sind nicht optimal in Hinsicht auf die Ladezeiten. Anbei 2 zu vermeidende Szenarien:

    • Verwende auf keinen Fall „@import“ zum Einbinden von um Stilregeln anderer Stylesheets zu importieren
    • Das nicht Kennzeichnen von CSS Dateien kann Browser zu unnötigen Vorgängen verleiten.

    @import

    Warum soll @import nicht verwendet werden? Die Aufrufmethodik verlangsamt das Laden der CSS Dateien und verzögert damit die Darstellung der Web Seite. Jeder kann sehr einfach überprüfen ob dieses Problem auf die eigene Web Seite zu trifft und das ggf. einfach beheben. Zur Analyse gibt es eine Reihe von frei verfügbaren Geschwindigkeitsoptimierungstools im Internet. Die Tools die wir uns angesehen haben erfüllen alle den entsprechenden Zweck, von daher sollte jeder selbst entscheiden welches er verwenden möchte.

    Sind die Dateien identifiziert (@import url(„style.css“)) einfach durch andere CSS Calls ersetzen bzw. in das eingene CSS File integrieren. Sollte eine Intgration in das eigene CSS File nicht möglich oder gewünscht sein, könnte ihr die externen CSS Dateien auch mit folgenden html code „ersetzen“: <link rel=“stylesheet“ href=“style.css“>. Jetzt muss man nur noch „style.css“ mit dem Namen und der Adresse der eigenen CSS Datei ergänzen.

    Korrekte Kennzeichnung der CSS Dateien

    Wenn die CSS Dateinen nicht ordenungsgemäß beschrieben sind, wird der Browser zuerst versuchen alle CSS Dateien zu laden und dann mit der Darstellung beginnen. Das kann zu Verzögerungen im Aufbau der Seite führen. Um herauszufinden ob die CSS Dateien optimal für den Browser beschrieben sind, muss man nur in den Code schauen.

    Ein typisches CSS File wird wie folgt aufgerufen: <link href=“style.css“ rel=“stylesheet“>. Der Code sagt nun aus, „hier ist ein Link“ und „der Link führt zu meinem CSS“. Das führt dazu, dass der Browser alle CSS Dateien laden wird, bevor er mit der Darstellung der Web Seite anfangen wird. Das Problem dabei ist: es gibt auch Darstellungsregeln die in einem CSS File enthalten sein können, die der Browser zur Online Darstellung gar nicht benötigt, z.B. die Darstellungsvorgaben fürs drucken der Seite: <link href=“print.css“ rel=“stylesheet“ media=“print“>. Dieser Code sagt nun aus: „hier ist ein Link“, „der Llink führt zu meinem CSS“ und „dieser Teil des CSS ist nur fürs Drucken der Seite“. Ziel muss es nun sein, dass der Browser erkennt, dass er dieses Darstellungsvorgaben nicht laden muss um mit der Darstellung der Web Seite zu beginnen. Moderne Browser werden das verstehen und es wird kaum Einfluss auf die Ladezeit haben, da der Browser die Download Reihenfolge anpassen wird. Daneben gibt es auch Darstellungsregeln die nur unter bestimmten Umständen benötigt werden – z.B. hinsichtlich der Breite einer Seite (<link href=“other.css“ rel=“stylesheet“ media=“(min-width: 40em)“>). Auch hier werden die heutigen Browser selbstständig beurteilen können ob sie das File zur Darstellung der Web Seite benötigen oder nicht. Im Idealfall sorgt die Thematik also nicht unbedingt für Verzögerungen, aber es gibt eben auch Ausnahmen. Diese zu beheben ist kein Problem und da es sich dabei um die Grundlage für den Browser handelt, ist das absolut sinnvoll.

    Folgt man diesen 2 einfachen Schritten ist das erste mögliche Thema rund um das als „render blocking CSS“ beschrieben Dilemma behoben.

     

    2. Verwende so wenig wie möglich CSS files Im Darstellungskritischen Teil

    Der Darstellungskritische Teil einer Seite bezeichnet die Files die der Browser unbedingt vor dem Anzeigen der Web Seite laden muss. Wenn die Kennzeichnung sauber ist, sind schon einige Files aus dem unbedingt zu ladenden File Sammelsurium verschwunden bzw. werden nicht beachtet hinsichtlich der Darstellung. Es gibt aber noch ein paar weitere Möglichkeiten Ladezeiten zu optimieren.

    Wie bereits mehrfach ausgeführt gilt der Grundsatz: jede CSS Datei die entfernt werden kann (oder nicht geladen werden muss) wird einen postiven Einfluss auf die Ladezeit der Web Seite / Blog haben.

    Im Wesentlichen gibt es 2 mögliche Ansätze um das zu erreichen

    • Füge die CSS Dateien deiner Web Seite zusammen
    • Das direkte Festlegen von Formaten („Inline CSS“)
    Führe css Dateien zusammen

    Führe Deine CSS Dateien in einer Datei zusammen – oder in mehreren falls auf Grund der Größe notwending.

    Eine Web Seite hat typischerweise eine große CSS Datei und mehrere „unterstützende“ CSS Dateien. Dafür gibt es viele Gründe, z.B. um die Gestaltungsrichtlinien der Web Seite von denen der Widgets und Plugins zu trennen. Die Widgets und Plugins werden dann seperat geladen und das ist auch sinnvoll.

    Statische Web Seiten haben häufig auch mehere CSS Dateien. Viele Web Designer haben das entsprechend aus Gründen der Übersichtlichkeit und Handhabbarkeit so angelegt. Allerdings führt dieser eigentlich positive Ansatz zu einigen Performance Problemen.

    Aber Performance Probleme sind in der Regel nicht ganz so relevant ehrlicherweise, die Ladezeiten halten sich normalerweise in Grenzen. Wichtig wird das Thema z.B. dann, wenn Du z.B. Adsense nutzt. Schnelleres Anzeigen und Laden bringt im Zweifelsfall mehr Geld durch schnellere Darstellung der gesamten Seite. Daneben ist die Nutzer Erfahrung durchaus auch ein kritischer Faktor um Nutzer zu mehrmaligen Besuchen zu ermutigen – oder diese nicht davon abzuhalten.

    Praxis Tipp: Wie füge ich CSS Datein zusammen?

    Um ehrlich zu sein, ganz einfach: Kopiere den Code in einer File und füge diesen in eine andere Datei ein. So einfach ist es in Wahrheit. Sobald Du Deine Dateien zusammengeführt hast, musst Du nur noch die alten Dateien löschen. Das wars und wenn jetzt noch die Lade-Reihenfolge stimmt steht einer optimalen Performance nix mehr im Weg.

    Direktes Festlegen von Formatvorgaben („Inline CSS files“)

    Darunter verstehen wir die Integration der CSS Datei im html – das kann in bestimmten Fällen sehr helfen.

    Durch die Verwendung von sog. html style tags, ist es möglich die Darstellungsvorgaben in der html Datei zu integrieren im Gegensatz dazu diese in einem externen CSS Datei abzulegen.

    Praxis Tipp: Wie lege ich Formatvorgaben direkt fest?

    Um eine CSS Datei in einer html Datei zu integrieren kopierst Du den CSS Code einfach und fügst diesen in Deine html Datei ein. Zu beachten sind dabei 2 wesentliche Puntke: zum einen sollte die Designvorgaben deiner CSS Datei nicht zu umfangreich um das html File nicht zu sehr auf zu blasen und zum anderen dass hinterher alle CSS Dateien entfernt werden müssen.

    Optimalerweise integrierst Du das CSS im Header der html Datei und verwendest dazu style tags.

    <style>
    …. füge deine CSS Vorhaben hier ein …..
    </style>

    Das ist schon wieder alles – wirklich auch kein Hexenwerk.

     

    3. Verwende so wenig CSS Dateien wie möglich

    Einfach gesagt und trotzdem nicht so einfach umgesetzt. Zum einen da wir es halt individuell und „schön“ haben möchten und zum anderen, da einfach viele Frameworks ungenützte CSS Dateien mit laden. Beispiele sind z.B. WordPress Themes die anpassbar sind, da werden alle Möglichkeiten quasi vorab mit integriert. Und die nicht benötigten CSS Dateien werden dann mit geladen, ob benötigt oder nicht. Ein anderes häufig auftretendes Beispiel ist bei der Verwendung von Bootstrap zu erkennen. Auch hier wird der Flexibilität wegen (weswegen wir ja Bootstrap verwenden) möglichst viele Design Vorgaben mitgeladen. Und zu guter Letzt ist es auch wahr, dass in der Vergangenheit einfach niemand darauf so richtig  geachtet hat.

    Aber was auch immer der Grund sein mag, am besten findest Du einen Weg um das oder die CSS Dateien deiner Seite so klein wie möglich. Es ergibt keinen Sinn Dateien mit zu laden die nicht benötigt werden.

    Praxis Tipp: Was kann ich tun um die Anzahl meiner CSS Dateien so klein wie möglich zu halten?

    Solltest Du deine CSS Dateien selber geschrieben haben, optimiere es unter den o.a. Aspekten.

    Solltest Du ein Theme oder Design gekauft haben – was wahrscheinlich auf die Mehrzahl zutrifft – und das Thema Ladezeit Dich umtreiben, sprich mit dem Entwickler, Designer und forder ein CSS optimiertes Theme an.

    Am besten und warhrscheinlich praktischten ist es aber gleich in der Planung das Thema als Vorgabe mit aufzunehmen. Ob in der Auswahl eine Themes oder zur Beauftragung eines Dienstleister – macht eine entsprechende Vorgabe, dann seit Ihr auf der sicheren Seite.

     

     

  • Werbung auf dem Blog – negative Einflüsse fürs Ranking?

    Heute möchten wir Euch zum Thema gekennzeichneter Beiträge auf eurem Blog und mögliche Auswirkungen auf euer Google Ranking informieren. Wie ihr wisst ist es in jeder Zusammenarbeit mit t5 content Pflicht alle Beiträge als Werbung zu kennzeichenen, mehr dazu findet ihr auch hier. Dazu empfiehlt es sich auch noch einmal den Praxistipp zum Thema Kennzeichnung von Links mit „rel=nofollow“ zu lesen. Dies ist auch in diesem Beitrag ein ganz ein wesentlicher Punkt. Für alle die nicht ganz sicher sind führen wir das Thema noch einmal ein wenig ausführlicher aus und bringen auch einzelne Beispiele was „ok“ ist und was nicht.

    Ganz generell steht in den englisch sprachigen Google Webmaster guidelines dazu folgendes: „Make a reasonable effort to ensure that advertisement links on your pages do not affect search engine rankings. For example, use robots.txt or rel=“nofollow“ to prevent advertisement links from being followed by a crawler.“

    Im Wesentlichen sagt google also: Du kannst soviel Werbung auf deinem Blog schalten wie Du magst, es darf nur keine Auswirkung auf dein Ranking haben, also im Wesentlichen den googlebot zu unzulässigen Schlussfolgerungen verleiten. Google geht davon aus, dass jeder Webmaster selbst unterscheiden kann, den Unterschied zwischen „schlechten“ und „guten“ Links kennt. Wer nun nicht ganz sicher ist, kann entwederein kostenloses Google Guideline Analysetool verwenden und die eigene Seite analysieren lassen oder folgende Beispiele auf Übereinstimmungen prüfen.

    Die häufigsten Fragen und Szenarios haben wir versucht hier abzubilden – solltet Ihr darüber hinaus häufige Fälle kennen, ergänzen wir diese gerne.

    BeispielFragen rund um Werbungsnetzwerke

    Generell gilt. Blendet Ihr Werbung ein die von einem Suchmaschinen Netzwerk kommt, seit ihr mit hoher Wahrscheinlichkeit auf der sicheren Seite.

    Frage: Ich nutze Google Adsense, ist das ok?

    Ja, Google Adsense hat keinen Einfluß auf das Ranking deiner Seite. Wenn Du ausschließlich Google Adsense Anzeigen nutzt musst Du nur dem vorgegebenen Ablauf folgen und keine weiteren Änderungen am Code vornehmen.

    Frage: Ich nutze doubleclick, ist das ok?

    Ja, doubleclick hat keinen Einfluß auf das Ranking deiner Seite. Wenn Du ausschließlich doubleclick Anzeigen nutzt musst Du nur dem vorgegebenen Ablauf folgen und keine weiteren Änderungen am Code vornehmen.

    Frage: Ich nutze Bing / Yahoo, ist das ok?

    Ja, Bing / Yahoo hat keinen Einfluß auf das Ranking deiner Seite. Wenn Du ausschließlich Bing / Yahoo Anzeigen nutzt musst Du nur dem vorgegebenen Ablauf folgen und keine weiteren Änderungen am Code vornehmen.

    BeispielFragen rund um sonstige Werbemöglichkeiten

    Frage: Ich binde Anzeigen von einer Firma direkt auf meiner Web Seite/ Blog ein, ist das ok?

    In diesem Fall musst Du die Links als „rel=nofollow“ kennzeichnen. Die 2. etwas kompliziertere Methodik ist, dass die Links über einen geblockten Folder in der robots.txt geleitet werden, auch das ist dann i.O.

    Frage: Ein Kunde hat mich per eMail angesprochen und bietet mir an, jeden Monat mir etwas zu bezahlen wenn ich ich einen Link auf seine Web Seite setze. Ist das ok?

    Das ist nur dann für Google ok wenn der angezeigte Link keinen Einfluß auf das Google Ranking hat. D.h. der Link muss als „rel=nofollow“ gekennzeichnet sein oder über einen in der robots.txt geblockten redirect gehen.

    Frage: Ich nutzt Affliate Anzeigen / Werbung oder Linke auf meiner Web Seite/ Blog, ist das ok?

    Affliate Anzeigen/ Werbung sind Werbung und dürfen daher keinen Einfluss auf das Ranking haben. Das bedeutet das alle diese Links als „rel=nofollow“ gekennzeichnet oder über einen in der robots.txt geblockten redirect gehen müssen.

    Frage: ich kaufe oder verkaufe Platz für Pressemitteilungen auf meiner Seite, ist das ok?

    Wenn Du dafür Geld oder eine andere Gegenleistung erhälst, ist es Werbung. Das bedeutet das alle diese Links als „rel=nofollow“ gekennzeichnet oder über einen in der robots.txt geblockten redirect gehen müssen.

    Warum muss ich das eigenlich machen?

    Ganz einfach: wenn sich nicht daran gehalten wird hat das ganze einen negativen Einfluss auf dein Ranking bei Google. Und das hat unweigerlich Einfluss auf den Erfolg deiner Web Seite/ deines Blogs. Hintergrund hierfür ist der immer noch vorhandene Glauben dass es viele Links sich positiv auf das Ranking der eigenen Web Seite auswirken. Im Prinzip ist das auch richtig. Allerdings ist die Gewichtung des Faktor eingehende Links stark rückläufig auf der einen Seite. Und zum Zweiten werden die Suchmaschinen immer besser in der Identifizierung von Link Farmen.

    Dieser Ansatz kann auch kurzfristig funktionieren, aber wird nicht von Dauer erfolgreich sein. Und abgestraft wird nicht nur die Link-empfangende Seite sondern auch der Verlinker. Sofern sich Google getäuscht fühlt.

  • Erste SEO Schritte leichtgemacht

    SEO Optimierung ist mehr als nur die Auffindbarkeit in der Google Suche, auch wenn es häufig nicht den Anschein hat. Natürlich ist die Auffindbarkeit (Google Seite 1 Ranking) ein ganz wesentlicher Punkt um sich mit dem Thema zu beschäftigen, aber daneben spielen bereits auch inhaltiche Aspekte eine Rolle und deren Bedeutung nimmt zu.

    Vereinfacht gesagt gibt es im Thema SEO Optimierung 2 wesentliche Aspekte zu beachten. Zum einen die technischen Grundlagen nach denen z.B. der Googlebot arbeitet, zum anderen aber auch zunehmend inhaltliche Punke. Die teschnischen Grundlagen sollten auf jeden Fall immer umgesetzt werden, einmal gemacht ist das mehr ein bisschen Fleißarbeit als wirklich „technische“ Arbeit. Und die Arbeit lohnt sich – guter Inhalt muss ja auch gefunden werden. Am einfachsten ist es sich gleich von Anfang an beim Verfassen eines Beitrags auf die grundlegenden Punkte zu achten.

    Technische SEO Optimierung

    Vorab: Hierfür gibt es viele SEO Tools, kostenfreie und kostenpflichtige, in Blog Frameworks integrierte oder eigenständige. Manche Tools analysieren ganze Web Seiten/ Blogs, mache zielen auf einzelne Artikel ab. Eine Empfehlung ist auf Grund der unterschiedlichen Anforderungen kaum möglich. Allerdings reicht der Funktionsumfang der kostenlosen Tools um die grundlegenden technischen Punkte zu optimieren.

    Beispielsweise werten die Tools Fragen aus wie z.B. die Länge des Titel Tag, die Meta Description, die Keywort Dichte der Seite, und Verlinkungen und bewerten diese. Für die Bewertung ist es dabei letztlich uninteressant ob es sich um eine ganze Web Seite oder nur einen Beitrag handelt – die Kriterien sind sehr ähnlich.  Es empfiehlt sich aber trotzdem sowohl die Web Seite als ganzes als auch jeden einzlenen Beitrag einer technischen Bewertung zu unterziehen. Es ist dabei nicht notwendig alle aufgeführten Punkte dem Tool nach „optimal“ umzusetzen, aber es empfiehlt sich schon die machbaren auch entsprechend anzupassen.

    Gliederung, Satzlänge, Anzahl Worte, Keyword Dichte, Lesbarkeit, Absatzlänge – das sind Kriterien der Beitragsanalyse. Natürlich kann ich diese Kriterien schon beim Verfassen berücksichtigen. Die eigentliche Frage ist häufig: formuliere ich weden den SEO Kriterien anders und wie erhalte ich dabei meinen eigenen Schreibstil. Unsere Erfahrung ist, dass es mit ein bisschen Übung deutlich einfacher wird. Ein bisschen anpassen muss man sich aber schon. Aber keine Angst davor, wir sind auch noch niemandem begegnet der aus dem Stand optimal geschriebene, authentische Texte verfasst hat.

    Was ist mit Facebook und co.?

    Geschlossene Plattformen wie Facebook haben keine SEO Relevanz per se und werden, außer bei gezielter Suche, auch normalerweise in den Suchergebnissen nicht angezeigt. Einzelne Elemente haben aber ähnliche Wirkung bzw. zielen auf das gleiche Ziel ab: Relevante Inhalte auffindbar zu machen. Keywords, #Tags usw. dienen letzentlich auch der Auffindbarkeit bzw. Strukturierung von Inhalten. Allerdings werden auf den Plattformen stärker auch andere Faktoren hinsichtlich der Relevanz gewichtet wie z.B. Verlinkungen, Aufrufe, etc..

    Fazit

    SEO Optimierung ist sicherlich mehr als Keyword Dichte und Meta Daten Anpassung. Es ist sicher auch ein bisschen Arbeit damit verbunden aber es lohnt sich. Auch wenn die Ergebnisse nicht direkt im Google Ranking ablesbar sind. SEO Optimierung ist ein Prozeß der sich in verschiedene Teile aufsplitten lässt und zumindest die technische Optimierung sollte unbedingt umgesetzt werden. Ob man seinen Schreibstil dabei komplett umstellt oder lieber sich selber treu bleibt ist jedem selbst überlassen. Am Ende wird sich auch immer Qualität in den Beiträgen durchsetzen und Eure Follower werden Eure Beiträge lesen egal ob ein Analyse Tool den Beitrag nun als optimal oder verbesserungswürdig anzeigt. Wenn Ihr aber mehr Menschen erreichen wollte, dann müsst Ihr gefunden werden. Und dabei hilft Euch SEO ganz sicher.

  • Praxistipp: rel=amphtml und rel=canonical?

    Immer wieder kommen werden Fragen nach Link Bezeichnungen aufgeworfen. Die geläufigste Link Bezeichnung ist sicherlich rel=nofollow über die wir bereits früher in einem kurzen Praxistipp geschrieben haben.

    Die Link Kennzeichnung als rel=nofollow ist also in allen unseren vergebenen Aufträgen zwingend gefordert. Es gibt aber weitere Bezeichnungen von denen wir Euch heute 2 interessante vorstellen möchten.

    Was bedeutet die Link Bezeichnung rel=amphtml und wofür wird es verwendet?

    Am einfachsten ist es wie immer an einem praktischen Beispiel zu erklären:  <link rel=“amphtml“ href=“https://www.t5content.de/amp-page.html”>

    diese Linkbezeichnung sagt folgendes aus. Es gibt eine AMP Version der hinterlegten Web Seite (im Beispiel „https://www.t5content.de/). Unter dem angegebenen Link ist die AMP Seite für Google auffindbar.

    AMP?

    AMP ist die Abkürzung für „accelerated mobile pages“ und zeigt Suchmaschinen wie Google an, dass eine Web Seite in einer für Mobilgeräte optimierten Spezifikation vorliegt. Die Beschreibung geht dabei auf ein Open Source Projekt zurück. Das Kernziel ist mobile Web Seiten, die in der Performance und Darstellung optimiert sind, auf mobilen Geräten anzuzeigen anstatt die nicht optimierten komplett zu laden. Die speziellen AMP Seiten werden auch vom Googlebot indiziert und schließlich im Google Index abgelegt.

    Was geschieht nun? Ruft man von einem mobilen Endgerät eine Web Seite auf die mit rel=amphtml versehen ist, wird das aufrufende mobile Endgerät auf die AMP Seite geleitet.

    rel=canonical: wieder zurück

    Da nun ja 2 Web Seiten des gleichen Inhaltes vorliegen müssen auch die AMP Seiten mit entsprechenden „Wegweisern“ versehen werden, falls ein Nutzer nicht mit einem mobilen Endgerät zugreift. Die rel=canonical dient unter anderem genau dazu: AMP Seiten bzw. deren mobil optimierten Code können mit dem Verweis auf die ursprüngliche Web Seite verweisen, d.h. Anfragen werden zur entsprechenden Web Seite geleitet.In unserem Beispiel würden wir in den Code der Seite https://www.t5content.de/amp-page.html über die im Header eingebaute Linkkennzeichnung <link rel=canonical href=https://www.t5content.de> auf die „nicht AMP“ Version verweisen.

    … und einiges mehr

    Darüber hinaus lässt rel=canonical auch in anderen Szenarien einsetzen, z.B. um trotz unterschiedlicher URL Variationen auf eine richtige Seite zu verweisen. Auch hierzu ein kurzes Beispiel. Unsere Homepage/ Anwendung unter https://www.t5content.de ist theoretisch auch unter verschiedenen anderen Schreibweisen zu erreichen. Anmerkung: wir haben nicht alle tatsächlich belegt. Ob über http://www.t5ontent.de, https://www.t5content.de/index.html, https://t5content.de und viele mehr wäre unsere Seite zu erreichen. Was bedeutet das? Verlinken andere Nutzer zu unserer Seite, können Sie theoretisch jeder einen anderen Link verwenden. Dann hätten wir auf jeder Seite aber jeweils nur einen Link und würden uns in der Relevanz selbst unwichtiger darstellen als notwendig. Durch den Einsatz von rel=canonical im Header der „Unterseiten“ kann ich genau diesen Effekt umgehen, ebenso einsetzbar bei dynamischen URLs in denen z.B. am Ende sich eine Farbwahl einfügt um die passende Seite anzuzeigen.

    und dynamische Links?

    Setze ich bei dynamischen URLs rel=canonical ein, ist trotz der Erweiterung der URL der Inhalt der Seite aus Sicht der Search Engines immer gleich, d.h. die Relevanz der Hauptseite steigt.   Zusammenfassend kann man fest stellen: Die korrekte Kennzeichnung von Links kann für die Sichtweise von Suchmaschinen einen großen Unterschied machen hinsichtlich der Bewertung z.B. zur Relevanz auf Grund der Beurteilung der Verlinkung.

  • Das Mysterium Googlebot – kann ich ihn kontrollieren?

    Im nächsten Teil möchten wir etwa mehr über die Möglichkeiten, die der Googlebot, die robot.txt und die sitemaps.xml zur Optimierung bieten, schreiben.

    Nach dem wir uns im ersten Teil mit den Grundlagen zur Optimierung von Webseiten befasst haben, möchten wir heute ein bisschen tiefer in die Thematik um Googlebot, robots.txt und xml sitemaps eintauchen.

    Zuerst möchte ich mich dem Googlebot zuwenden und auf die Frage eingehen, ob es eine Möglichkeit gibt um ihn zu kontrollieren bzw. zu beeinflussen?

    Und ja, es gibt definitiv einige Möglichkeiten um den Googlebot zu kontrollieren. Die einfachste und erste Anlaufstelle ist:

    • Verwende eine robots.txt in der der für den Googlebot zugängliche und indexierbare Inhalt detailliert beschrieben ist.
    • Eine andere Möglichkeit ist es, für den Googlebot Instruktionen in den Metadaten deiner Webseite und / oder im Header zu hinterlegen.
    • Sitemaps dienen auch dazu, es dem Googlebot einfach zu machen deine Seite korrekt zu erfassen
    • Und zu guter Letzt gibt es durch die Verwendung der Google Search Konsole einige Möglichkeiten.

    Im Folgenden möchte ich auf die einzelnen Punkte eingehen.

    DEN GOOGLEBOT KONTROLLIEREN?

    Aber sicher: Er befolgt genau die in der robots.txt hinterlegten Regeln zum Durchsuchen deiner Webseite.

    Anbei weitere Möglichkeiten den Googlebot zu kontrollieren:

    • Schreibe Anweisungen für den Bot in die Metadaten deiner Webseite
    • Hinterlegte Anweisungen für den Bot im Header Deiner Seite
    • Erstelle eine Sitemap deiner Seite
    • Nutze die Google Search Konsole

    Am häufigsten wird die robots.txt file genutzt um dem Googlebot Informationen zukommen zu lassen.

    Daher die nächste Frage: was ist eine robots.txt File eigentlich genau?

    Die robots.txt File gibt vor, wie Suchmaschinen durch ihre Bots mit deiner Webseite interagieren. Die robots.txt File gibt so zu sagen die Regeln vor. Das geschieht in Form einer Auflistung von Seiten und Inhalten, die der Bot durchsuchen soll und die sich in der robots.txt befindet.

    Häufig wird die robots.txt File bei der Erstellung eines Blogs und / oder Webseite automatisch mit angelegt. Normalerweise reichen die dort standardmäßig hinterlegten Daten auch als Einstellung aus. Solltest du aber mehr über die robots.txt File wissen wollen, empfehlen wir dir die Google Webseiten zu diesem Thema – natürlich auf Deutsch.

    Informationenrobots.txt file

    Spezifikationen: robots.txt Spezifikationen

    Weitere Spezifikationen: Robots-Meta-Tags und X-Robots-Tag-http-Header

    Sitemaps und Googlebots

    Ganz generell gesprochen sind die Sitemaps Landkarten deiner Webseite, d.h. der Googlebot (und auch andere Suchmaschinen Bots) erfährt aus der Sitemap wie deine Seite aufgebaut ist und unterstützt den Bot dabei die Webseite möglichst gut zu verstehen. Die Sitemap ist besonders sinnvoll wenn:

    • Sehr große Webseiten vorliegen
    • Deine Seite über große Archive mit Inhalten verfügt die vielleicht nicht mehr optimal verlinkt sind
    • Deine Seite neu ist und nur wenige Weblinks auf sie verweisen
    • Auf deiner Seite „rich media content“ gezeigt wird, diese in Google News angezeigt werden soll oder wenn du Anmerkungen in der Webseite nutzt die allerdings dann Sitempas kompatibel sein müssen

    Mit Sitemaps können viele weitere Punkte genutzt werden, aber im Bezug auf den Googlebot, dient die Sitemap nur als Auflistung von URLs und andere Daten, die ihm an die Hand gegeben werden während er die Seite scannt.

    Google hat eine sehr gute Beschreibung online wie Sitemaps erstellt und eingereicht werden können.

    Googlebot und die Google Search Konsole

    In der Google Search Konsole kannst Du auch bestimmte Einstellungen vornehmen. So kannst Du in der Google Search Konsole die Häufigkeit mit der der Googlebot deine Webseite durchsucht kannst Du die Häufigkeit in der Search Konsole z.B. einstellen.

    In der Google Hilfe wird das schrittweise Vorgehen detailliert beschrieben.

    Daneben kannst Du in der Search Konsole auch sehen welche Daten der Googlebot in deiner rotobts.txt findet, Fehler bei Durchsuchen der WebSeite anzeigen lassen und ganz generell ein Verständnis entwickeln wie Google Deine Webseite sieht.

    Wie viele Googlebots gibt es eigentlich?

    Es gibt in Summe 9 unterschiedliche Google webcrawlers. Da nicht alle für uns relevant sind anbei nur eine kurze Auflistung:

    Google:

    • Smartphone
    • Mobile (Feature phone)
    • Web Search
    • Adsense
    • Mobile Adsense
    • Adsbot (landing page quality check)

    Googlebot:

    • Images
    • Video
    • News

    Eine Übersicht und detaillierte Erklärung zu den einzelnen Bots findest Du bei Google!

  • Optimierte Nutzerfreundlichkeit deines Blogs mit Google’s „Test My Site“

    Nutzerfreundlichkeit ist bei jedem Blogger kontinuierlich ein Thema und darunter fallen zahlreiche Aspekte. Heute möchten wir ein neues, kostenloses Tool von Google vorstellen, mit dem du nach bestimmten Kriterien deine Webseite oder deinen Blog hinsichtlich der Ladezeiten, sprich der Geschwindigkeit, und auch hinsichtlich der Nutzbarkeit auf Mobilgeräten analysieren lassen kannst.

    Gerade die Nutzerfreundlichkeit auf mobilen Endgeräten wird immer wichtiger. Zwar stellen dies häufig die verwendeten Blogsoftware-Lösungen zur Verfügung, aber nicht immer fehlerfrei oder in optimaler Qualität. Da aber immer mehr Leser mobil auf Blogs zugreifen, ist das sicherlich ein ganz spannendes und nützliches Thema.

    Über das kostenloses Webtool von Google kann jede Webseite und jeder Blog nach vorgegebenen Kriterien analysiert werden.

    Google analysiert dabei die folgenden 3 Kategorien:

    1)    Mobile Friendliness

    2)    Seitenladezeiten für Mobile Devices

    3)    Seitenladezeiten für Desktops

    Das Ergebnis jeder Kategorie wird dann mit einem übergeordneten Wert angegeben – im optimalen Fall sind das 100/100. Je geringer der Wert ausfällt, umso mehr Ansatzpunkte gibt es bezüglich deines Blogs zu optimieren.

    Das Besondere an dem Tool ist aber nicht nur die Bewertung, es besteht außerdem die Möglichkeit, sich einzelne Verbesserungsvorschläge anzusehen oder sich einen kostenlosen Report mit den Ergebnissen zusenden zu lassen.

    Google’s „Test My Site“

    Dies ist ein beispielhafter Auszug aus dem Report hinsichtlich der Mobile Friendliness von unserem eigenen Blog, dem man diverse Punkte sowie deren Satus entnehmen kann.
    In unserem Fall können wir nun die angebotene Hilfe in Anspruch nehmen und werden dazu auf eine Seite geleitet,  in der uns sogar auf Deutsch unter dem Titel „Optimale Größe von Links oder Schaltflächen auf Mobilgeräten einhalten“ genaue Hinweise dazu geliefert werden, wie wir das erkannte Problem beheben können.

    Genauso verhält es sich mit Angaben hinsichtlich der Ladezeiten einer Seite. Die Unterscheidung in Mobile und Desktop Ladezeiten liefert dabei natürlich unterschiedliche Werte, obwohl die bewerteten Kriterien gleich sind. Auch in dieser Auswertung werden Hinweise dazu gegeben, an welchen Stellen sich die Seite optimieren lässt und auf die entsprechenden Hilfen verwiesen.