Die folgenden Angaben habe ich per einer schnellen Google Suche gefunden und sind ohne Gewähr:
Die Meldung sieht wie ein Fehler aus aber lass uns Fehlertypen aus einer gruendlichen Perspektive analysieren. Sehr grob gesagt, gibt es eine Taxonomie der Fehler auf 2-3 Haupt-Levels, wie z. B. Fehler Level 3 bis Fehler Level 1.
- Level 3 (niedrigste Stufe), wie z. B. “Hinweis” (kann Teilprozesse beeinflussen aber die wichtigsten Prozesse sind größtenteils nicht beeinflusst) - also handelt es sich hier eher um einer “Empfehlung” z. B. mehr auf User Experience Level.
- Level 2 - “Warnung” - Manche Teilprozesse sind beeinflusst aber das System funktioniert im grossen und ganzen. Hier handelt es sich um eine stärkere “Empfehlung” da ansonsten bestimmte Teilprozesse nicht funktionieren wie potentielle Fehlermeldungen bei manchen User Klicks.
- Level 3 - “Systemfehler” - Sowohl Teil- als auch ganze Systemprozesse können nicht fortfahren und somit handelt es sich hier um einen “System Showstopper”.
Die 3 Fehlermeldungen
Bei den folgenden “Fehler” geht es im grossen und ganzen um Level drei wie oben proforma beschrieben da es sich um eher “Visuelle” Sachverhalte handelt, sprich, mehr um Dinge die die “User Experience” eher negativ beeinflussen kann als Systemprozesse die unterbrochen werden:
- Text zu klein zum Lesen
- Anklickbare Elemente liegen zu nahe beieinander
- Darstellungsbereich nicht festgelegt
Somit sind das im grossen und ganzen “Empfehlungen” von Google wie du die User Experience verbessern kannst auf Mobile.
Warum bekommst du die Fehler in der GSC wenn der Mobile-friendly Test dir ein grünes Licht gibt?
Es gibt auf Mobile verschiedene Browser (wie Chrome, Samsung Internet, und Safari) wo Dinge unterschiedlich gerendert werden. Auf manchen Browser ist dein Shop “mobile-friendly” und auf andere Browser gibt es kleine Warnungen. Wenn du das ganze verbessern möchtest dann verlangt das einen Eingriff in das Theme Code deines Shops und das würde ich zuerst in einer Theme-Kopie Testumgebung zusammen mit einem Experten testen.
Das Mobile Viewport Tag setzen
Die 3 Meldungen können verursacht werden, wenn du keinen mobilen Viewport-Tag im theme.liquid hast. Daher kannst du den mobilen Viewport einrichten. Dazu fügst du den folgenden Code in den deines theme.liquid ein:
- <meta name=“viewport” content="width=device-width, initial-scale=1″>
Der obige Code sagt den Browsern, dass sie die Breite des Viewports an die Breite des Geräts des Nutzers angepasst werden soll. So können die Besucher deiner Website alle Elemente in der Größe anzeigen, die für das von ihnen verwendete Gerät am besten geeignet ist. Das macht deine Website natürlich mobilfreundlich und behebt hoffentlich die 3 Fehler auf.
Schauen wir uns 2 der Fehler einzeln an:
- “Clickable elements too close together”
“Anklickbare Elemente zu nah beieinander” ist eine häufige Meldung in der GSC da Google dein Shopify Shop manchmal und fälschlicherweise als “not responsive” einstuft was ja gar nicht der Fall sei. Diese Meldung tritt meist bei Websites auf, die also nicht responsive sind. Alle Shopify Themes (auch die alten “Vintage” Themes) sind 100% Responsive.
Das folgende kannst du selber testen auf deinem Handy indem du zwei Handys nebeneinander auf dem Tisch hast mit deinem Shop offen auf einem der installierten Browser (oder mehrere versch. Browser auf dem einen Handy) - wie z. B. das Shop mit Safari, Samsung Browser, und mit Chrome oder Edge offen. Da wirst du dann die UI-Rendering Unterschiede “across Browser” sehen, sprich, zwischen den versch. Browser. Die meisten User sind sich dessen bewusst und sind mittlerweile zu Edge oder Chrome bereits gewechselt.
Bei diesem Fehler ist es oft so, dass die Größe des Touch-Ziels (touch-target) mindestens 48px betragen sollte was auf Safari oder Samsung Browser oft nicht der Fall ist. Somit sollte man zusätzliches Padding verwenden, um die Touch-Zielgröße auf 48 Pixel zu erhöhen aber das verlangt viel Coding im CSS (dass die UX auf andere Browser dann wiederum verschlechtern kann).
Das kannst du in der Chrome Developer Console (Inspect Tool) auch selber inspizieren:
Du kannst auch auf Chrome eine “Responsive Web Design Tester” Extension einrichten die dir dann sagt wie dein Shop auf versch. Browser rendert.
- “Text zu klein zum Lesen” (text too small to read)
Hier handelt es sich um einen fehlenden Max-Width Attribute laut der Internet Literatur (sollte man auch vorsichtig sein was man im Internet liest). Der folgende Code kann im css hinzugefügt werden aber , wie gesagt, zuerst in einer Testumgebung testen → bitte bei weitere Fragen einen Experten konsultieren:
img {
max-width: 100%;
display: block;
}
Durch das Hinzufügen des Codes wird sichergestellt, dass das Bild nicht größer als die Bildschirmgröße wird. Du solltest jedoch nicht die Breiten- und Höhenattribute jedes einzelnen Bildes ändern. Jedes einzelne Bild auf der Seite sollte seine eigenen Attribute für Breite und Höhe haben. In der Developer Console wirst du die Schriftgröße sehen, die mindestens 22px betragen sollte.
Sobald du alle Änderungen vorgenommen hast, klicke in der Search Console auf “Validate Fix”.
Jetzt startet Google erneut den Validierungsprozess, um zu sehen, ob das Problem “Text zu klein zum Lesen” auf deiner Website behoben ist. Wenn keine Fehler gefunden werden, wird die Validierung als bestanden erklärt.
Der Fehler “Text zu klein zum Lesen” kann das Nutzererlebnis also beeinträchtigen. Google liebt Websites, die eine gute UX bieten. Daher solltest du weiterhin in deine Search Console schauen, um solche Probleme zu finden. Fehler wie diese sollten so schnell wie möglich behoben werden. Das hilft deiner Seite, in den organischen Suchergebnissen weiter oben zu ranken.
Also handelt es sich hier wie gesagt um eine “Empfehlung”. Bitte nicht vergessen, dass die Shopify Themes alle auf Google und SEO bestens optimiert sind.
Wenn du diese Fehler trotzdem aufheben möchtest in der GSC, dann bitte einen Experten anheuern. Gerne kann ich welche empfehlen. Zum letzten Fehler (“Display area not defined”) habe ich leider keine relevanten Infos auf Google Search gefunden.