Wirklich wahres Wingmen SEO Wissen f├╝r wache Webmarketer #72
Wingmen Online Marketing GmbH Logo
Nora Tiedemann
Nora Tiedemann
Trainee
­čľ╝´ŞĆ Im Spooktober wird es bildlich

Sind die Chefs erst aus dem Haus, tanzen die Wingm├Ąuse.... oder wie ging der Spruch doch gleich (kommt das noch jemandem bekannt vor?)? So oder so ├Ąhnlich k├Ânnte es diese Woche bei uns Wingmenschen lauten, doch wie sollte es anders sein, hat uns dieses SEO wieder fest im Griff.

Deshalb berichten wir Dir diese Woche unter anderem von Bildern (ohne Bilder):

  • Anita besch├Ąftigt sich mit Bildern in Discover Snippets
  • Caro denkt ├╝ber das optimale Bildformat nach
  • Andreas hingegen berichtet von den neuesten Neuigkeiten in Bezug auf (normale) Snippets und erw├Ąhnt dabei Subdomains oder Subfolder nicht
  • Das macht aber daf├╝r Andreas (der andere)
  • Und Behrend hat auf Twitter gelesen das Facebook offline war

Wir w├╝nschen Flo und Johan eine wundervoll erholsame Zeit und Dir viel Spa├č beim Lesen!

Was wir gelesen haben
Anita B├Âhm
Anita B├Âhm
Consultant
Gro├čes Foto bei Discover? Kleiner Hack!

Bist Du mit Deinen Inhalten auch bei Google Discover unterwegs? Dann hast Du Dich sicherlich auch schon mal gefragt, ob Deine Inhalte dort mit einem gro├čen Bild pr├Ąsentiert werden. Denn die Gr├Â├če des Bildes hat, so Google, einen Einfluss auf die Klickrate - mindestens eine Steigerung um 3% ist durch die gro├čen gegen├╝ber der kleinen Bilder drin.

David Esteve hat in diesem Twitter Thread einmal sehr anschaulich beschrieben, wie Du Dir das selbst genau anschauen kannst mit Hilfe einiger Kniffe ├╝berpr├╝fen, welche Darstellung Deine Ergebnisse haben.

Was nun aber, wenn man nicht nur einzelne, sondern mehrere URLs pr├╝fen m├Âchte? Es ist m├Âglich die Google URLs vorzubereiten und ├╝ber einen List Mode Crawl mit dem Screaming Frog abzufragen.

Mit einem Custom Extract kann man sich so die Bildgr├Â├če rausziehen. Bei kleinen Bildern sind height und width jeweils 92px. Bei gro├čen Bildern ist height mit 210px und width mit 375px angegeben. Zus├Ątzlich sollte man Screenshots erstellen zu lassen. Damit kann man dann die Ergebnisse im Zweifel noch einmal abgleichen. Der Crawl muss zwar vorsichtig konfiguriert werden und mit angezogener Bremse laufen, damit man nicht in ein Captcha l├Ąuft. Aber man spart sich die Klickarbeit.

F├╝r den Fall, dass bei Dir kleine Bilder angezeigt werden, solltest Du unbedingt nochmal einen Blick in die Ausgabe #64 dieses Newsletters werfen. Da befasst sich Andreas mit dem Thema max-image-preview:large basierend auf dieser Case Study von Google.

Vielleicht ist Dir das bisher durchgerutscht und Du hast das noch nicht implementiert?

Dabei nicht vergessen:

Und nat├╝rlich gilt: Entscheidend ist, was auf dem Bild zu sehen ist. Ein langweiliges Bild wird auch als gr├Â├čeres Bild nur einen geringeren CTR-Boost verursachen. In Ausgabe #30 gibt es neben dieser ├╝brigens auch noch jede Menge weiterer Hinweise und Empfehlungen rund um Discover, die Johan aus dem SEO Meetup Hamburg mit Teresa Wolf f├╝r Dich zusammengetragen hat. Das gibt es, wenn Du lieber selbst nachschauen magst, auch als Video im SEO Meetup Hamburg YT Channel.

Caro Wendt
Caro Wendt
Trainee
Was ist denn jetzt eigentlich das optimale Bildformat?

Wenn Du Deine Webseite auf Core Web Vitals optimierst, kommst Du um das Thema Bildoptimierung meist nicht drum herum. Denn die Ladegeschwindigkeit h├Ąngt oft (auch) von der Bildgr├Â├če, der Anzahl an Bilder, dem Bilder-Layout und der Ladereihenfolge ab. Wusstest Du, dass Bilder tats├Ąchlich rund 42% des Largest Contentful Paints (LCP) ausmachen?

Nun steht uns eine ganze Menge an Bildformaten zur Auswahl. Welches das richtige Bildformat ist, h├Ąngt ganz von Deinen Anforderungen ab. Der Artikel ├╝ber moderne Bildformate AVIF und WEBP von Addy Osmani (Google Chrome) hilft bei dieser Fragestellung ganz gut weiter. Schauen wir einmal genauer rein:

Bildformate unterscheiden sich grunds├Ątzlich in dem Bild-Codec, der ein Bild auf eine bestimmte Art und Weise bei der Komprimierung kodiert und beim Rendern dekodiert. Hier die wichtigsten Parameter, die Du Dir grunds├Ątzlich anschauen solltest, wenn Du das passende Bildformat f├╝r Dich bestimmen m├Âchtest:

  • Kompression: Je nach Bild-Codec kann eine gewisse Kompression erreicht werden, welche die Verkleinerung der Bildgr├Â├če f├╝r eine schnellere ├ťbertragung der Daten bestimmt (beeinflusst den LCP also direkt).

  • Qualit├Ąt: Pr├╝fe, ob der Qualit├Ątsverlust durch die Bildkompression akzeptabel ist!

  • Dekodierungsgeschwindigkeit: Starke Komprimierungen k├Ânnen zu h├Âherem Aufwand bei Dekodierung und somit langsameren Rendering des Bildes f├╝hren.

  • Kodierungsgeschwindigkeit: Die Bilder m├╝ssen auch erstmal komprimiert werden. AVIF ist beispielsweise bekannt daf├╝r, dass das Erstellen der Dateien teilweise mehrere Minuten pro Bild braucht.

Dazu gibt es spezielle Anforderungen, welche die Auswahl des passenden Bildformats beeinflussen, wie zum Beispiel

  • die Unterst├╝tzung des CDNs und Browsers,

  • verwendete Deckkraft-Stufen,

  • High Dynamic Range (HDR-) Bildgebung,

  • genutzter Farbraum,

  • Bildvorschauen

und viele weitere.

Die seit langer Zeit etablierten Bildformate JPEG und PNG werden je nach ben├Âtigtem Bildtyp h├Ąufig verwendet. Die Vor- und Nachteile im ├ťberblick:

  • JPEG: geringe Komprimierung, m├Âglicher Datenverlust bei der Komprimierung, keine moderne Features, aber schnelle Dekodierung.

  • PNG: geringe Komprimierung, aber daf├╝r kein Datenverlust.

F├╝r bessere Komprimierungen und spezielleren Anforderungen gibt es moderne Bildformate wie AVIF und WEBP. Beide Bildformate bieten sich f├╝r Stand- und Animationsbilder an und k├Ânnen Bilder mit und ohne Datenverlust deutlich st├Ąrker komprimieren als JPEG und PNG.┬á

Ob WEBP oder AVIF bei der Komprimierung Deines Bildes ohne Datenverlust besser ist, solltest Du am besten manuell checken, wenn Du auf Nummer sicher gehen m├Âchtest. Du kennst bestimmt das Tool Squoosh, welches Dir dabei hilft, ein Bild in unterschiedlichen Bildformaten optisch direkt zu vergleichen.

Addy Osmani hat mehrere Vergleiche unterschiedlicher Formate anschaulich zusammengestellt - die Bilder sehen optisch meist im AVIF am besten aus. Aber Achtung: W├Ąhrend WEBP von so gut wie allen Browsern unterst├╝tzt wird, gibt es bei AVIF mit Safari und Edge noch zwei klaffende L├╝cken.

Um sicherzustellen, dass Dein Bild von jedem Browser, in dem es geladen wird, auch gerendert werden kann, gibt es drei M├Âglichkeiten, den Browser entscheiden zu lassen, das passende Bildformat zu nutzen:

  • Das <picture>-Element erlaubt es Dir, das Bild in mehreren Formaten in Deiner pr├Ąferierten Reihenfolge zur Verf├╝gung zu stellen und der Browser wird das erste unterst├╝tzte Bildformat ausw├Ąhlen.

  • Mit einer Content-Negotiation im Hypertext Transfer Protocol kann ein angefragtes Bildformat zwischen Browser und Server abgestimmt werden. Ein Browser hat hierf├╝r die unterst├╝tzten Bildformate im Accept Request Header hinterlegt.

  • Beim srcset-Attribut in einem <img>- oder <picture>-Element bietet es sich an, die modernen Bildformate einzusetzen und dazu ein althergebrachtes Bildformat in voller Aufl├Âsung als Fallback im src-Attribut. Damit verlieren Nutzer veralteter Browser aber nat├╝rlich doppelt...

Wenn Du besondere Anforderungen mit Special Effects oder Ähnlichem an Deine Bilder hast, dann solltest du Dich auf jeden Fall WEBP oder AVIF nutzen. Je nach Bild kann ein anderes Bildformat am Geeignetsten sein - bleib also auf der Hut!

Welche Bildformate nutzt Du am meisten? Und nutzt Du eher das <picture> Element, Content-Negotiation mit Accept Request Header oder l├Ąsst Du IE11-Nutzer auf das Fallback-JPEG warten?

Apropos Bilder - hast Du auch schon davon geh├Ârt, dass Google wohl aktuell ├╝berlegt, Instagram und TikTok zu indexieren? Das k├Ânnte dann dazu f├╝hren, dass Kurzvideos und Bilder von diesen beiden Plattformen dann in der Google-Suche angezeigt werden k├Ânnten, wie man es aktuell schon von Tweets gewohnt ist. Genaueres dazu ist noch nicht weiter festgelegt, die Gespr├Ąche laufen... Wir sind also gespannt!

Behrend von H├╝lsen
Behrend von H├╝lsen
Consultant
Wie furchtbar kann ein Montag sein?

Die technische Infrastruktur von Facebook (Anmerkung der Redaktion: Letzte Woche): Ja!

Wenn Du selbst in Facebook, Instagram und WhatsApp unterwegs bist, hast Du sicherlich direkt vom Ausfall dieser Plattformen mitbekommen: Am 04. Oktober 2021 waren sie alle ├╝ber mehrere Stunden nicht erreichbar. Solltest Du diese Anwendungen nicht nutzen, hast Du Dich aber vielleicht trotzdem gefragt, wieso auf Twitter gerade die H├Âlle los ist oder sich die Menschen in Deinem Umfeld gerade merkw├╝rdig verhalten.

John Mu nimmt den Zwischenfall zum Anlass, bei Twitter einmal ganz genau zu erkl├Ąren, was seitens Google passiert, wenn eine Seite ausf├Ąllt.

Zun├Ąchst einmal wird die Seite bei Netzwerk / DNS bedingter Unerreichbarkeit genauso behandelt wie ein 5xx HTTP Server Fehler:

  • Das Crawling wird reduziert

  • Die URL bleibt indexiert

  • Die Rankings bleiben bestehen.

Nat├╝rlich nur, wenn dieser tempor├Ąre Zustand der Unerreichbarkeit nicht zu lange anh├Ąlt. Nach 1 bis 2 Tagen hat Google dann auch genug und schmei├čt die Seite aus dem Index. Einen negativen Effekt auf das Ranking gibt es dabei laut John nicht. Aber:

but if those URLs aren't indexed, they can't rank either

Tja. Schade. ┬»\_(Ńâä)_/┬»

Wenn die Seite dann wieder erreichbar ist, wird sie wieder in den Index aufgenommen, bekommt ihre Rankings wieder und die Crawl-Frequenz wird auch wieder hoch gedreht.

Solltest Du mal einen guten Grund daf├╝r haben, Deine Website kurzzeitig abzuschalten, hat John noch einen Lesetipp f├╝r Dich: How to pause your business online in Google Search.

tl;dr: serving a 503 HTTP error is ideal for short outages

Falls Du Dich fragst, was denn bei Facebook & Co nun eigentlich los war (nachdem es ja eine Reihe wildester Spekulationen gegeben hatte): Hier geht es zu einem kurzen Statement von Facebook.

Wichtiges Take Away am Rande: Es ist super, wenn man nur 1 System hat und alles verbunden ist. Aber als das kaputt war, stand Facebook mit einer Keycard vor einem verschlossenen Serverraum, wie Harry Belafonte vor seinem Eimer...

Du fragst Dich jetzt, wie Du Dich und Deine Website vor solchen Dingen sch├╝tzen kannst? Oder zumindest sofort mitbekommst, wenn doch was schief gelaufen ist? Dann schau mal in unseren Artikel zum Thema Website Monitoring. Da erkl├Ąren wir Dir genau, warum so eine "Versicherung" f├╝r Deine Website sinnvoll ist und was Du damit alles absichern kannst.

PS: Aus dem gegebenen Anlass sich Tim Bray gedanken ├╝ber einen Server-GAU bei AWS gemacht

Andreas Schalay
Andreas Schalay
Consultant
Google ver├Âffentlicht neue Snippet-Guidelines

Am 08.10.2021 hat Google zwei Guidelines ver├Âffentlicht, die die Snippet-Problematik ausf├╝hrlich erl├Ąutern:

Guideline zum title link

Guideline zum Snippet

Fun-Fact: F├╝r Google ist Snippet nur der untere Teil des Suchergebnisses, also das, was viele SEOs Description oder Beschreibung nennen w├╝rden. Laut der neuen Doku besteht jedes Suchergebnis aus einem ÔÇ×title link" und einem ÔÇ×snippet".

title link

Screenshot eines einzelnen Google Suchergebnisses bei dem der Blaue Title markiert ist, den Google als Title Link definiert

snippet

Screenshot eines einzelnen Google Suchergebnisses die Description Markiert ist, der Teil den Google selbst als das Snippet definiert.

Au├čerdem ist es jetzt dokumentiert, dass Title & Meta Description Tags nur als Empfehlungen f├╝r Google gelten.

In den Dokumentationen gibt es konkrete Anweisungen, wie die Title & Meta Description auszusehen haben, damit Google sie ├╝bernimmt, also macht es auf jeden Fall Sinn, diese Guidelines durchzulesen. Unter anderem nennt Google die Stellen im Code, die als Quelle f├╝r den ÔÇ×title link" verwendet werden k├Ânnen:

  • Title Tag

  • Die visuell-gr├Â├čte ├ťberschrift

  • H-├ťberschriften

  • Andere gr├Â├čere Text-Elemente

  • Normaler Text auf der Seite

  • Linktext auf der Seite

  • Linktext auf einer verlinkenden Seite (das war neu f├╝r mich).

Andreas R├Âne
Andreas R├Âne
Consultant
Subdomain vs. Unterverzeichnis und warum Admins so gerne die Subdomain w├Ąhlen

Wer kennt die Frage nicht: Ist für einen Blog oder Onlineshop eine Subdomain wie blog.domain.tld oder ein Unterverzeichnis wie domain.tld/blog/ besser, um mit den Inhalten zu ranken? 

Wenn man nun den Administrator seines Vertrauens fragt, wird dieser am liebsten die L├Âsung mit der Subdomain w├Ąhlen. Aber warum ist das eigentlich so? Damit Du Deinen Administrator das n├Ąchste Mal besser verstehen kannst, kommen hier die Gr├╝nde f├╝r seine Entscheidung:

Der Aufwand beide Systeme zu administrieren wird erheblich vereinfacht

Die Website oder der Online-Shop, auf dem nun noch der zus├Ątzliche Blog installiert werden soll, nutzt selber bestimmte Software in bestimmten Versionsst├Ąnden. Kommt nun eine weitere Software, wie ein Blogsystem, auf dem gleichen Server dazu, so bringt dies weitere Anforderungen an den Server mit sich. Zu Beginn mag dies noch funktionieren aber es erschwert die Updates der Softwares auf dem Server erheblich: Mit jedem Update des Shops muss auch der Blog und umgekehrt kompatibel mit den Updates sein. Dazu kommen die Tests nach einem Update, die auch immer f├╝r beide Systeme durchgef├╝hrt werden m├╝ssen.

Der Provider oder das System Deiner Website/Deines Online-Shops unterst├╝tzt eine Installation eines Blogs nicht als Unterverzeichnis

In solch einem Fall ist es technisch notwendig, dass der Blog bei einem anderen Provider oder auf einem anderen Server gehostet wird. Hier ist der Blog dann auf jeden Fall physikalisch von der Website bzw. dem Shop getrennt und muss ├╝ber zwei getrennte IP- Adressen angesteuert werden. Dies l├Ąsst sich technisch kaum mit einem Unterverzeichnis regeln, denn in solch einem Fall ben├Âtigen wir eine Subdomain mit einem Eintrag zur IP- Adresse des Servers, auf dem der Blog gehostet wird.

Ausnahmen best├Ątigen die Regel

Sicherlich gibt es hier auch wieder technische L├Âsungen, um in solch einem Konstrukt einen den Blog ├╝ber ein Unterverzeichnis "erreichbar" zu machen. Doch schnell st├Â├čt man bei solchen L├Âsungen oft auf neue Herausforderungen. Wie werden die internen Links korrekt umgeschrieben? Wie sehen die Canonicals innerhalb des Blogs aus? Zus├Ątzlich dr├╝cken wir unserem Administrator die Aufgabe aufs Auge, sich um ein Proxy-Server zu k├╝mmern, der die Inhalte auf unserem Blog-Server abruft und als Unterverzeichnis ├╝ber unseren alten Server erreichbar macht.

Fazit

Den Blog von einem anderen Shop-System oder CMS zu trennen, erleichtert die Arbeit Deines Administrators erheblich: So kann er beide Systeme getrennt warten ohne auf Wechselwirkungen achten oder komplizierte Proxy-Systeme warten zu m├╝ssen. Laut John M├╝ller aus dem Jahr 2017 kommt Google mit beiden Version gleichgut zurecht.

"Google Websearch kommt mit der Verwendung von Subdomains oder Unterverzeichnissen gut zurecht. Wenn du ├änderungen an der URL-Struktur einer Website vornimmst, dauert es in der Regel etwas l├Ąnger, bis sie sich in der Suche niederschl├Ągt, daher empfehle ich, ein Setup zu w├Ąhlen, das du l├Ąnger beibehalten kannst." John M├╝ller beantwortet die Frage charmant in seinem YouTube-Channel

Trotzdem glauben viele SEOs, dass die Integration in eine Subdomain Vorteile bringt. Wir haben diese Vorteile nur aus einer Migration (ohne weitere Anpassungen) nicht nachweisen k├Ânnen und grunds├Ątzlich braucht jede URL-Anpassung gute Argumente.

Wir SEOs sind gefordert, zu belegen, warum wir es den Administratoren schwerer machen. Das sollten wir klar und strukturiert machen k├Ânnen, um uns dann weiter auf die wirklich gro├čen Hebel zu konzentrieren.

 
Fragen? Immer gerne fragen!
Wir sind f├╝r Dich da.
Schreib uns gern jederzeit
eine E-Mail an kontakt@wngmn.de oder
ruf uns einfach kurz an: +49 40 22868040

Bis bald,
Deine Wingmen
Anckelmannsplatz 1, 20537 Hamburg, Germany
Wingmen Online Marketing GmbH Logo