Liquid, JavaScript, Themes
Hallo Zusammen
Habe aktuell 35 Fehler in der Googel Search Console. Dies sind bei genauer Betrachtung jedoch nur 3 und beziehen sich auf die Mobile Seite.
-Text zu klein zum Lesen
-Anklickbare Elemente liegen zu nahe beieinander
-Darstellungsbereich nicht festgelegt
Wie kriege ich die Fehler weg ohne alles von Hand anzupassen? Müssten die Themes nicht für Mobile optimiert sein?
Gruss Simon
Solche Warnungen sind oft zu sehen, das beruhigende daran ist aber dass sie nur Warnungen sind und somit Empfehlungen von Google, anstatt richtige Fehlermeldungen.
Schieße doch mal deine Shop URL durch den Google mobile-friendly checker tool unten und lass uns wissen was die Ergebnisse sind:
Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Danke für deine Antwort. Google kennzeichnet die oben genannten Punkt als Fehler und nicht als Warnung. Bei Warnungen steht 0. Oder verstehe ich da etwas falsch?
Habe meine Domain mit dem Tool aus deinem Link geprüft. Dort erscheint "Die Seite ist für Mobilgeräte optimiert". Ich frage mich nun allerdings wieso Google dann diese Fehler ausgibt und welchen Einfluss diese auf das Suchergebnis haben.
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.
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:
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 <head> deines theme.liquid
ein:
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:
"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.
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.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hey Gabe
Wow, vielen Dank für die ausführliche Antwort und die Tipps. So wie du oben beschrieben hast, haben die Empfehlungen Einfluss auf das Suchergebnis bei Google und daher macht es aus meiner Sicht Sinn diese zu beheben. Oder wie siehtst du das Thema? Ich werde mal sehen wie weit ich selber komme.
Gruss
Ich denke dass wenn keine rote Flaggen im Mobile Test auftauchen dann ist alles in Ordnung. Man kann mehr Schaden anrichten wenn man die oben erwähnten Punkte ausführen möchte aber wenn du das mit einem Experten machst kann das auch gehen. Man muss bedenken, dass man sehr leicht Ziele anstreben kann und viel Zeit, Arbeit und Energie in Sachen investieren die letztendlich wenig Effekt und Einfluss auf den Erfolg des Shops haben. Wir sehen anekdotisch, dass ca. 50% der Händler solche Aktivitäten anstreben anstatt "Kern Business Aktivitäten" wenn du verstehst was ich meine. Man ist so überzeugt, dass man bestimmte Dinge fixen muss die letztendlich wenig für den gesamten Erfolg des Shops erzielen werden, oder eben nur kleine Teilerfolge, und dabei wichtigere Dinge vernachlässigt.
Stattdessen gibt es wertvollere Aktivitäten die man anstreben sollte die zum Gesamterfolg deines Shops führen werden. Hast du meine Tipps zu Sitelinks hier in den anderen Leitfäden schon gelesen? Sitelinks sind das was man auf Google erreichen möchte und das kann man mit ein paar Schritte machen, der Erfolg dauert aber etwas länger bis Google Sitelinks auf Google angezeigt werden.
Hier der Sachverhalt:
Wenn du dir Sorgen machst wegen SEO dann raten wir die SEO Einstellungen in den Produkten und Kategorien im Backend zu verwenden. Diese sind viel wichtiger für Google da Google nach "Structured Data" sucht wie Metabeschreibungen. Wenn du unsere Anleitung hier folgst wirst du eine tolle SEO auf Google garantieren. Dies kann aber bis 2-3 Wochen dauern bis alle Shopdaten gecrawlt hat.
Google crawlt eine Website automatisch, und der erste Crawl dauert normalerweise von 48 bis 72 Stunden. Das Gleiche gilt für einen Re-Crawl - wenn du Informationen aktualisierst, wird es ein paar Tage dauern, bis die Änderungen übernommen werden.
Wenn die Sitemap-URL korrekt ist, beachte bitte, dass die oben genannten Fehler bei jedem Unternehmen auftreten können und generell NICHT mit Shopify zusammenhängen sondern wie gesagt "Empfehlungen" sind. In den meisten Fällen beheben sich solche Meldungen auf Google Seite meist innerhalb weniger Tage oder Wochen von selbst. Du kannst die Shop URL jedoch mit dem Inspection Tool einreichen, um den Prozess zu beschleunigen und weitere Diskussionen zu diesem Thema findest du in den Google-Foren hier.
Wenn du möchtest, kannst du Google über die Google Search Console auffordern, deine Website erneut zu crawlen, wie man hier lesen kann. Es ist jedoch bekannt, dass Google nicht die gesamte Website indexiert. In der Google Dokumentation heißt es ausdrücklich: "Google crawlt nicht alle Seiten im Web, und wir indexieren nicht alle Seiten, die wir crawlen." Es ist völlig normal, dass nicht alle Seiten einer Website indexiert werden. Mehr darüber kannst du hier lesen.
Beim Crawlen sucht Google nach einer Reihe von Elementen:
Das macht man primär ganz unten im Produktstamm hier:
Apropos, auf MOZ.com gibt es einen interessanten Artikel über die neue, längere Zeichenbegrenzung, die Google eingeführt hat: Wie lang sollte deine Meta Description sein?
Auch wenn Google deine Website erfolgreich gecrawlt und indexiert hat, dauert es zwischen 4 Tagen und 6 Monaten, bis deine brandneue Website von Google gecrawlt und indexiert wird. Um besser zu verstehen, wie eine Website in Google gecrawlt wird, findest du hier einige Artikel, die du dir ansehen solltest:
Sitelinks sind das Beste!
Ich werde ein Schritt weiter gehen und dir das Thema "Sitelinks" zu herzen legen denn das kann dir helfen deine Google Suchergebnisse viel besser zu gestalten samt Links zu den wichtigsten Unterkategorien und Verzeichnisse deines Shops.
Ein Sitelink sieht also wie folgt aus:
Bzgl. "Google Sitelinks" - unten findest du mehr Infos dazu die ich auf Google gefunden habe. Siehe auch hier einen unserer Community Leitfäden dazu.
Der Sachverhalt
Wenn du also etwas über Google suchst, werden in einigen Suchergebnissen manchmal Sitelinks angeboten die zu den versch. Seiten oder Kategorien eines Shops verlinken, die dem Besucher helfen, schnell zu einem bestimmten Bereich der Website zu gelangen. Diese Links werden von Google nach eigenem Ermessen erstellt und mit dem Suchbegriff verknüpft. Man hat ein wenig Einfluss darauf, ob deine Website in den Google-Suchergebnissen mit Sitelinks verlinkt werden oder nicht, da dies von vielen Faktoren abhängt.
Wenn du mehr über Sitelinks und die Google-Richtlinien für Sitelinks wissen möchtest, siehe diesen Artikel von Google, der etwas ausführlicher ist und dir vielleicht zusätzliche Informationen bietet.
Ich habe auch diesen Blog-Beitrag von einer externen Quelle gefunden, der für dich vielleicht auch nützlich ist. Außerdem solltest du darauf achten, dass du die aktuellste Sitemap einreichst, damit Google deine Website crawlen kann.
Im grossen und ganzen muss dein Inhalt für den Nutzer nützlich sein und die Struktur deiner Website muss es dem Algorithmus ermöglichen, den Google Sitelink zu finden. Man sollte hier sicherstellen, dass lange Seiten mit mehreren Themen auf deiner Website gut strukturiert und in verschiedene logische Abschnitte unterteilt sind.
Zweitens solltest du sicherstellen, dass jeder Abschnitt deines Shops einen klaren Anker mit einem bedeutungsvollen und beschreibenden Namen hat (also nicht nur "Abschnitt 2.1″) und dass deine Seite eine Art "Inhaltsverzeichnis" enthält, das zu den einzelnen Ankern verlinkt. Die neuen In-Snippet-Links werden nur für relevante Suchanfragen angezeigt, du wirst sie also nicht ständig in den Ergebnissen sehen - nur wenn wir denken, dass ein Link zu einem Abschnitt für eine bestimmte Suchanfrage sehr nützlich wäre.
Es scheint auch, dass das Nutzerverhalten und die Qualität/Anzahl der internen und externen Links bei der Bewertung von Google Sitelink eine Rolle spielen. Es gibt ein Patent, das sich auf den Google-Algorithmus bezieht (ich glaube, es hat teilweise mit deiner Sitelink-Frage zu tun), hier der Link. Es scheint auch, dass das Nutzerverhalten und die Qualität/Anzahl der internen und externen Links bei der Bewertung von Google Sitelink eine Rolle spielen.
Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Erneut vielen Dank für deine Hilfe. Dann werde ich die Arbeit in der Search Console mal noch aufschieben. Die Sitelinks sind bereits im Einsatz. Was ist deiner Meiunung nach der wichtigste Punkt den man beachten sollte um bei Google gefunden zu werden?
Definitiv schauen, dass man alles hier in unseren Anleitungen gefolgt hat. Diese Anleitungen sind nach dem neuesten Stand der Technik und Dinge geschrieben worden.
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo Gabe habe mich nochmals mit der Search Console befasst und einige Seiten meines Shops auf die Optimierung für Mobilegeräte geprüft. Nun ist es so, dass nur die Startseite laut dem Tool optimiert. Prüfe ich die URL von Produktseiten oder Blogs erhalte ich die Meldung: Seite ist auf Mobilgeräten nicht nutzbar.
Das was ich bis jetzt mitbekommen habe, ist die Nutzung auf Mobilegeräten für Google äusserst wichtig. Daher meine Frage: Wie kann ich meinen Shop so gestalten, dass er auf den mobilen Geräten gut dargestellt wird?
Hey Simon! @bitundbohrer
Danke für die Meldung und hier müssen wir vorsichtig sein was die Tools outputten. Welches Tool ist das, das Mobile-friendly test von Google hier?
Ich kenne dein Shop bitundbohrer.ch noch von früher und habe es jetzt getestet und die folgenden Ergebnisse bekommen die eigentlich ganz gut sind:
ABER
Wenn ich in dein Shop auf meinem Galaxy S21 gehe sehe ich das Folgende, wo alles super klein ist und somit nicht richtig "responsive":
Alleine der "In den Warenkorb" Button ist so klein er ist kaum lesbar. Daher ist es so, dass dein Shop auf einem sog. "Legacy Theme" - das Adventure Theme - gebaut ist das nicht mehr unterstützt wird. Auf meinem S21 Chrome Browser ist das Rendering deiner Pages also leider suboptimal.
Wie wäre es denn zu überlegen dein tolles Shop auf eins unserer neuen 2.0 Themes umzuziehen, dass deine Handwerker Produkte so richtig hervorheben wird, Simon?
Gerne kann ich dir welche Themes aussuchen wo ich denke, die sind für dein Shop, das Branding, und deine Produkte so richtig am besten geeignet!
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hey Gabe
Danke für deine Rückmeldung. Bei dem Tool handelt es sich um das in deinem Link. Ja sende mir bitte deine Vorschläge. Wichtig ist für mich, dass die Funktionen und die Darstellung erhalten bleibt. Woran kann ich erkennen, dass es sich um 2.0 Themes handelt?
Gruss
Hey Simon! @bitundbohrer
Leider nein, das alte Venture Theme ist "legacy" leider. Aber ein neues Theme kannst du über eine gewisse Transitionsphase ohne grossen Stress und Kopfzerbrechen aufbauen während das alte Theme noch live bleibt. Siehe meinen kurzen Video dazu hier wie du das machen kannst:
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Würde es die Möglichkeit geben mein Theme auf 2.0 upzugraden?
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024