Liquid, JavaScript, Themes
Hallo,
ich benutze das Theme "Dawn" von Shopify. Derzeit besitzt mein Logo die h1 Überschrift auf der Startseite. Kann man dies ändern auf eine Text-Überschrift im Banner?
H1 wird im header.liquid definiert..
Vielen Dank!
Grüße
@Danielhu leider wird mir nicht ganz klar, wonach du fragst.
Wenn du kein Logo hochlädst, wird dein Shopname mit dem h1-Attribut dargestellt, das ist korrekt.
Wenn du ein Logo verwendest, befindet es ebenfalls in einem h1-Container.
Aber was meinst du mit der Änderung in eine Text-Überschrift? Kannst du den Begriff "Text-Überschrift" (h1-h6-Tags sind ja für Überschriften) in diesem Kontext und den Zweck deiner Änderung näher erläutern?
@Finer danke für die Rückmeldung. Wenn du auf unsere Seite klickst – ist wie oben beschrieben – das Logo als H1 definiert Die H1 möchte ich aber gerne auf "Gesund. Gebacken. Genießen." setzen, da dies den Shop näher beschreibt als wie das Logo.
@Danielhu verstehe, allerdings kannst du mehr als nur ein h1 Tag für deine Seite nutzen. In diesem Fall reicht es aus, wenn du in der image-banner.liquid Sektion bei Zeile 86 das HTML-Tag von h2 auf h1 änderst (Siehe Screenshot).
@Finer danke der schnellen Rückmeldung und der Lösung. Nur leider werden jetzt alle Bannerüberschriften als H1 gesetzt. Ich möchte SEO-technisch aber nur eine H1 auf dieser Seite verwenden...
@Danielhu Du kannst mehrere H1-Verwenden, ohne dass die Auswirkungen auf das SEO hat. Die Annahme, dass jede Webseite nur ein H1-Tag verwenden darf, ist falsch bzw. gibt es hierzu viele Berichte, dass die Verwendung von mehreren H1-Tags keinen negativen Einfluss auf das SEO haben.
Danke für deinen Beitrag. Ich finde das aus SEO - Sicht auch eher semi gelöst. Ich habe nun unter Einstellungen -> Shop Details die Bezeichnung meines Shops eingetragen, die ich auf der Startseite gerne als H1 verwenden würde. Dadurch landet die von mir gewünschte Startseiten - H1 dann im Alt Attribut des Logos, das für die H1 verwendet wird. Ich denke damit dürfte Google zufrieden sein und es macht semantisch Sinn.
@berlinearguard schrieb:Danke für deinen Beitrag. Ich finde das aus SEO - Sicht auch eher semi gelöst. Ich habe nun unter Einstellungen -> Shop Details die Bezeichnung meines Shops eingetragen, die ich auf der Startseite gerne als H1 verwenden würde. Dadurch landet die von mir gewünschte Startseiten - H1 dann im Alt Attribut des Logos, das für die H1 verwendet wird. Ich denke damit dürfte Google zufrieden sein und es macht semantisch Sinn.
Habe das ganze mal durch Screenfrog bei mir laufen lassen und hier sagt mir Screenfrog das keine h1 vorhanden ist, wenn ich es so mache wie du es gelöst hast.
Hey Alle!
Das Thema haben wir schon rauf und runter besprochen hier in der Community und man muss bedenken dass diese Methoden etwas veraltet sind und Google das heutzutage im Zeitalter der KI viel besser macht. Die Shopify Themes sind dafür out-of-the-box optimiert.
Die Annahme, dass jede Seite nur eine h1-Überschrift haben sollte, war z. B. in der Vergangenheit weit verbreitet und wurde als SEO-Best-Practice angesehen. Der Hauptgrund dafür ist, dass der H1-Tag dem Suchmaschinen-Crawler (wie Google) dabei hilft, den Hauptinhalt der Seite zu verstehen.
Allerdings hat sich diese Sichtweise mit der Zeit geändert. Google hat klargestellt, dass Webseiten mehrere H1-Überschriften haben können, ohne dass dies einen negativen Einfluss auf das SEO hat. John Mueller, Webmaster Trends Analyst bei Google, hat erklärt, dass Google mit mehreren H1-Tags auf einer Seite gut umgehen kann.
In eurem speziellen Fall scheint ihr zu versuchen, das H1-Tag vom Logo in einen themenrelevanten Text zu ändern. Um nur eine H1-Überschrift zu haben, könnte man Anpassungen im Liquid-Code vornehmen, wie z. B. aendere im header.liquid
das H1-Tag des Logos in ein anderes Tag (wie zum Beispiel "p
" oder "div
").
<!-- Ersetze h1 mit einem anderen Tag, zum Beispiel "div" -->
<div class="site-header__logo" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<a href="/" itemprop="url">
{% if settings.logo != blank %}
<img src="{{ settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' | img_url: '200x200' }}" alt="{{ shop.name }}" itemprop="logo" id="logo" data-logo="{{ settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' }}" data-id="{{ settings.logo.id }}" data-aspectratio="{{ settings.logo.aspect_ratio }}">
{% else %}
<span class="h1 site-header__logo-text">{{ shop.name }}</span>
{% endif %}
</a>
</div>
Gehe zum image-banner.liquid
und setze den gewünschten Text ("Gesund. Gebacken. Genießen.") in ein H1-Tag.
<h1 class="banner-heading">Gesund. Gebacken. Genießen.</h1>
Hoffe das hilft! 😉
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
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