Als langjähriger Shopify-Verkäufer dachte ich, ich hätte meine SEO-Grundlagen im Griff. Ich optimiere meine Produkttitel, schreibe einzigartige Beschreibungen und arbeite hart an meinen Kollektionen. Stellen Sie sich also meinen Schock vor, als ich kürzlich entdeckte, dass alle vier meiner Shopify-Shops das wichtigste On-Page-SEO-Element auf ihren Homepages fehlte: das H1-Tag.
Ich verbrachte zwei frustrierende Stunden damit, die Shopify Community-Foren zu durchforsten und verschiedene "schnelle Fixes" auszuprobieren, die nie richtig funktioniert haben. Deshalb schreibe ich diese Anleitung. Nach viel Versuch und Irrtum entwickelte ich eine narrensichere Zwei-Schritte-Methode, die das Problem sauber bei allen meinen Shops löste, die beliebte kostenlose Themes wie Ride, Taste und Shapes verwenden.
Diese Anleitung führt Sie durch meinen exakten Prozess. Wir werden aufdecken, warum dieses Problem existiert, warum Sie nicht einfach kopieren sollten, was andere Seiten machen, und schließlich eine perfekte, professionelle Lösung implementieren.
Ein kurzer Hinweis: Diese Anleitung konzentriert sich speziell auf die Homepage. Die meisten Shopify-Themes weisen H1-Tags korrekt Ihren Produkttiteln, Blog-Post-Titeln und Kollektionstiteln zu. Die Homepage ist diejenige, die fast immer vergessen wird.
Schritt 1: Die Diagnose – Wo ist mein H1-Tag hin?
Das erste, was ich lernte, ist, dass bei den meisten Shopify-Themes das Problem nicht darin besteht, dass Sie kein H1-Tag haben. Das Problem ist, dass Ihr H1-Tag für das Logo Ihres Shops verschwendet wird.
Das ist schlecht für SEO. Ihr Homepage-H1 sollte ein beschreibender Satz mit Ihren Hauptkeywords sein, der Google sagt, worum es in Ihrem gesamten Shop geht. Ihr Logo kann das nicht. Hier erfahren Sie, wie Sie Ihre eigene Seite in unter einer Minute überprüfen können.
Die Ein-Minuten-Diagnose:
- Gehen Sie zur Homepage Ihres Shops.
- Klicken Sie mit der rechten Maustaste direkt auf das Logo Ihres Shops im Header.
- Wählen Sie "Untersuchen" aus dem Dropdown-Menü.
- Die Entwicklertools Ihres Browsers öffnen sich mit einer hervorgehobenen Codezeile. Schauen Sie sich diese Zeile und die direkt darüber an. Sehen Sie sie in
<h1>-Tags eingepackt?
H1-Tag-Diagnose in Entwicklertools
Wenn Sie Ihr Logo in einem <h1> eingepackt sehen, haben Sie das gleiche Problem wie ich. Unsere Mission ist es, zuerst dieses H1-Tag vom Logo zu "befreien" und es dann richtig zu nutzen.
Natürlich können Sie auch eine Browser-Erweiterung installieren, um zu überprüfen, ob Ihr H1-Tag vorhanden ist und ordnungsgemäß funktioniert. So wie hier:
SEO-Erweiterungs-Check
Ein kurzer Exkurs: Warum Sie nicht einfach andere Seiten kopieren sollten
Während meiner Recherche fand ich andere Websites, die das scheinbar hinbekommen hatten. Aber als ich ihren Code inspizierte, stellte ich fest, dass sie genau den gleichen Fehler machten: ihr H1 war immer noch auf ihrem Logo! Ps: Das ist tatsächlich eine bekannte DTC-Marke. Ich entdeckte sie durch offizielle Empfehlungen von Google und Shopify Plus, und ich studiere seitdem ihr Marketing. Sie können sehen, dass ihr Logo als H1-Tag verwendet wird, was faul und völlig falsch ist.
Marken-Logo H1-Beispiel
Die Verwendung des Logos als H1 bietet Suchmaschinen und KI-Crawlern wie Google, ChatGPT oder Perplexity sehr wenig Informationswert. Das H1 fungiert als Tagline Ihrer Website – es sollte ein klarer, prägnanter Satz sein, der Crawlern sofort sagt, worum es auf Ihrer Seite geht. Es sei denn, Sie sind Nike, Coca-Cola oder Disney – Marken, die keine Einführung brauchen – ist dies eine verpasste Gelegenheit.
H1-Tag Best Practices
Infolgedessen verwendeten viele ihrer Produkt- und Kollektionsseiten das Homepage-H1 erneut, was Google und KI-Crawler wie ChatGPT ernsthaft irreführen kann. Das wirkt sich direkt darauf aus, wie die Qualität der Seite bewertet wird. Das hat einen erheblichen negativen Einfluss auf die KI-Sichtbarkeit ihrer Website. Siehe folgenden Screenshot: Sie haben kein H1-Tag auf einer sehr wichtigen Kollektionsseite!
Fehlendes H1 Kollektionsseite
Das ist eine kritisch wichtige Lektion: kopieren Sie nicht einfach den Code einer anderen Seite, ohne das SEO-Prinzip dahinter zu verstehen. Die Verwendung des H1-Tags für Ihr Logo ist eine veraltete Praxis, weil:
- Es ist nicht keyword-reich. Es enthält nur Ihren Markennamen, nicht was Sie verkaufen.
- Es ist nicht seitenspezifisch. Das Logo-H1 erscheint auf jeder einzelnen Seite und sagt Google, dass Ihre "Über uns"-Seite und eine spezifische Produktseite den gleichen Titel haben. Das ist ein großer SEO-Fehler.
Wir brauchen eine bessere, professionellere Lösung.
Die ultimative Lösung: Eine perfekte Balance von SEO & Design
Unser Ziel ist einfach:
- Das
<h1> vom Logo entfernen.
- Ein neues, keyword-reiches
<h1> zur Homepage hinzufügen, das für Benutzer unsichtbar, aber für Google, ChatGPT und andere KI-Crawler perfekt sichtbar ist.
Die Philosophie: Wir werden eine spezielle CSS-Klasse verwenden, um unser neues H1-Tag visuell zu verstecken. Es ist wichtig, nicht display: none; zu verwenden, da Google das möglicherweise ignoriert. Stattdessen verwenden wir eine moderne, barrierefreie Technik, die für SEO völlig sicher ist.
Der Zwei-Schritte-Masterplan
Schritt 1: Die Voraussetzung - header.liquid reparieren
Zuerst müssen wir dem Theme sagen, dass es aufhören soll, <h1> für das Logo zu verwenden.
- Gehen Sie in Ihrem Shopify-Admin zu Onlineshop > Themes. Klicken Sie bei Ihrem aktuellen Theme auf ... und dann Code bearbeiten.
- Öffnen Sie den Sections-Ordner und klicken Sie auf die header.liquid-Datei.
- Durchsuchen Sie die Datei (Strg+F oder Cmd+F) nach
<h1. Sie suchen nach dem Code, der Ihr Logo umschließt.
- Ihre Aufgabe ist es, das öffnende
<h1>-Tag zu <div> und das schließende </h1>-Tag zu </div> zu ändern. Möglicherweise müssen Sie dies an einer oder zwei Stellen in der Datei tun.
VORHER
Header vor der Reparatur
NACHHER: h1 zu div
Header nach der Reparatur
Ein besonderer Hinweis: Bei meinen Taste, Ride und Shapes-Themes befand sich dieses <h1>-Tag oft innerhalb einer {% if template.name == 'index' %}-Anweisung. Das ist in Ordnung. Die Lösung ist dieselbe: ändern Sie h1 zu div, wo immer Sie es das Logo umschließen finden.
- Klicken Sie Speichern. Das H1-Tag ist jetzt frei.
Schritt 2: Die Implementierung - theme.liquid ändern
Hier fügen wir unser neues, mächtiges H1 hinzu. Dieser Schritt beinhaltet die Bearbeitung der wichtigsten Datei in Ihrem Theme, seien Sie also bitte vorsichtig.
- Erstellen Sie zuerst ein Backup! Gehen Sie zur Themes-Seite, klicken Sie ... bei Ihrem Theme und wählen Sie Duplizieren. Das erstellt eine sichere Kopie, die Sie wiederherstellen können, falls etwas schief geht.
- Öffnen Sie im Code-Editor den Layout-Ordner und klicken Sie auf theme.liquid.
- Finden Sie das öffnende
<body>-Tag nahe dem Anfang der Datei. Es könnte wie <body class="gradient"> oder ähnlich aussehen.
- Fügen Sie den folgenden Code in einer neuen Zeile direkt unter dem öffnenden
<body>-Tag ein.
Theme Liquid Implementierung
Der einzufügende Code:
{%- if template.name == 'index' or template == 'index' -%}
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
</style>
<h1 class="visually-hidden">Ihr großartiger Homepage-Titel - Haupt-Keywords hier</h1>
{%- endif -%}
- Wichtigster Teil: Ändern Sie den Text "Ihr großartiger Homepage-Titel - Haupt-Keywords hier" zu Ihrem tatsächlichen, gewünschten H1. Zum Beispiel: "Handgefertigte Ledertaschen & Minimalistische Geldbörsen – Ihr Markenname".
- Klicken Sie Speichern.
Ihr Aktionsplan und abschließende Gedanken
Von der anfänglichen Schockentdeckung bis zur finalen, perfekten Lösung lehrte mich diese Reise eine wertvolle Lektion. Die Optimierung Ihres Shops geht darum, die Prinzipien zu verstehen, nicht nur schnelle Fixes anzuwenden.
Hier ist Ihre finale Checkliste:
- Zuerst diagnostizieren: Überprüfen Sie immer das Logo Ihrer eigenen Seite mit dem "Untersuchen"-Tool, um zu sehen, ob es in einem
<h1> eingepackt ist.
- Das Logo ist kein H1: Ihr Logo gehört in ein
<div>, nicht in ein Heading-Tag. Reparieren Sie das in header.liquid.
- Verwenden Sie die visuell versteckte Methode: Das ist der professionelle Standard, um ein H1 hinzuzufügen, ohne Ihr Design zu beeinträchtigen.
- Meistern Sie den Workflow: Der "header.liquid reparieren -> in theme.liquid implementieren"-Prozess ist der zuverlässigste Weg, das ein für alle Mal zu lösen.
Ich hoffe, diese detaillierte Anleitung erspart Ihnen die zwei Stunden Frustration, die es mich gekostet hat. Ihr Homepage-H1-Tag richtig hinzubekommen ist ein großer Schritt vorwärts in Ihrer SEO-Reise.
Viel Erfolg, und teilen Sie gerne Ihren Erfolg in den Kommentaren!
