Hoe Ik de Homepage H1-Tag in Shopify Winkels Heb Gerepareerd: Een Stap-voor-Stap Gids voor Verkopers
Als een ervaren Shopify-verkoper dacht ik dat ik mijn SEO-basiskennis onder controle had. Ik optimaliseer mijn producttitels, schrijf unieke beschrijvingen en werk hard aan mijn collecties. Stel je dus mijn schok voor toen ik onlangs ontdekte dat alle vier mijn Shopify-winkels het belangrijkste on-page SEO-element op hun homepages misten: de H1-tag.
Ik heb twee frustrerende uren doorgebracht met het doorzoeken van de Shopify Community-forums, waarbij ik verschillende "snelle oplossingen" probeerde die nooit echt werkten. Daarom schrijf ik deze gids. Na veel vallen en opstaan ontwikkelde ik een onfeilbare twee-stappen methode die het probleem netjes oploste in al mijn winkels, die populaire gratis thema's gebruiken zoals Ride, Taste en Shapes.
Deze gids zal je door mijn exacte proces leiden. We zullen ontdekken waarom dit probleem bestaat, waarom je niet gewoon moet kopiëren wat andere sites doen, en uiteindelijk een perfecte, professionele oplossing implementeren.
Een snelle opmerking: Deze gids richt zich specifiek op de homepage. De meeste Shopify-thema's kennen correct H1-tags toe aan je producttitels, blog post titels en collectietitels. De homepage is degene die bijna altijd wordt vergeten.
Stap 1: De Diagnose – Waar is Mijn H1-Tag Gebleven?
Het eerste wat ik leerde is dat bij de meeste Shopify-thema's, het probleem niet is dat je geen H1-tag hebt. Het probleem is dat je H1-tag wordt verspild aan het logo van je winkel.
Dit is slecht voor SEO. Je homepage H1 zou een beschrijvende zin moeten zijn met je hoofdtrefwoorden, die Google vertelt waar je hele winkel over gaat. Je logo kan dat niet. Hier is hoe je je eigen site in minder dan een minuut kunt controleren.
De Een-Minuut Diagnose:
- Ga naar de homepage van je winkel.
- Klik met de rechtermuisknop direct op het logo van je winkel in de header.
- Selecteer "Inspecteren" uit het dropdown-menu.
- De ontwikkelaarshulpmiddelen van je browser openen, met een regel code gemarkeerd. Kijk naar die regel en de regel direct erboven. Zie je het omgeven door
<h1>-tags?
H1-Tag Diagnose in Ontwikkelaarshulpmiddelen
Als je je logo omgeven ziet door een <h1>, heb je hetzelfde probleem als ik. Onze missie is om eerst deze H1-tag te "bevrijden" van het logo, en het dan goed te gebruiken.
Natuurlijk kun je ook een browserextensie installeren om te controleren of je H1-tag aanwezig is en goed functioneert. Zoals dit:
SEO Extensie Controle
Een Snelle Omweg: Waarom Je Niet Gewoon Andere Sites Moet Kopiëren
Tijdens mijn onderzoek vond ik andere websites die dit schenen te hebben opgelost. Maar toen ik hun code inspecteerde, realiseerde ik me dat ze precies dezelfde fout maakten: hun H1 zat nog steeds op hun logo! Ps: Dit is eigenlijk een bekend DTC-merk. Ik ontdekte ze door officiële aanbevelingen van Google en Shopify Plus, en ik bestudeer hun marketing sindsdien. Je kunt zien dat hun logo wordt gebruikt als H1-tag, wat lui en totaal verkeerd is.
Merk Logo H1 Voorbeeld
Het gebruik van het logo als H1 biedt zeer weinig informatieve waarde aan zoekmachines en AI-crawlers zoals Google, ChatGPT of Perplexity. De H1 fungeert als de tagline van je website—het zou een duidelijke, beknopte zin moeten zijn die crawlers onmiddellijk vertelt waar je site over gaat. Tenzij je Nike, Coca-Cola of Disney bent—merken die geen introductie nodig hebben—is dit een gemiste kans.
H1-Tag Beste Praktijken
Het gevolg was dat veel van hun product- en collectiepagina's de homepage H1 herbruikten, wat Google en AI-crawlers zoals ChatGPT serieus kan misleiden. Dit beïnvloedt direct hoe de kwaliteit van de site wordt beoordeeld. Dit heeft een aanzienlijke negatieve impact op de AI-zichtbaarheid van hun website. Zie de volgende screenshot: ze hebben geen H1-tag op een zeer belangrijke collectiepagina!
Ontbrekende H1 Collectiepagina
Dit is een kritiek belangrijke les: kopieer niet gewoon de code van een andere site zonder het SEO-principe erachter te begrijpen. Het gebruik van de H1-tag voor je logo is een verouderde praktijk omdat:
- Het is niet trefwoordrijk. Het bevat alleen je merknaam, niet wat je verkoopt.
- Het is niet paginaspecifiek. De logo H1 verschijnt op elke afzonderlijke pagina, waardoor Google wordt verteld dat je "Over Ons" pagina en een specifieke productpagina dezelfde titel hebben. Dit is een grote SEO-fout.
We hebben een betere, meer professionele oplossing nodig.
De Ultieme Oplossing: Een Perfecte Balans van SEO & Design
Ons doel is eenvoudig:
- Verwijder de
<h1>van het logo. - Voeg een nieuwe, trefwoordrijke
<h1>toe aan de homepage die onzichtbaar is voor gebruikers maar perfect zichtbaar voor Google, ChatGPT en andere AI-crawlers.
De Filosofie: We zullen een speciale CSS-klasse gebruiken om onze nieuwe H1-tag visueel te verbergen. Het is belangrijk om niet display: none; te gebruiken, omdat Google dat mogelijk negeert. In plaats daarvan gebruiken we een moderne, toegankelijkheidsvriendelijke techniek die perfect veilig is voor SEO.
Het Twee-Stappen Masterplan
Stap 1: De Vereiste - header.liquid Repareren
Eerst moeten we het thema vertellen om te stoppen met het gebruik van <h1> voor het logo.
- Ga in je Shopify Admin naar Online Winkel > Thema's. Klik op je huidige thema op ... en dan Code bewerken.
- Open de Sections-map en klik op het header.liquid bestand.
- Zoek in het bestand (Ctrl+F of Cmd+F) naar
<h1. Je zoekt naar de code die je logo omgeeft. - Je taak is om de openings
<h1>-tag te veranderen in<div>en de sluitings</h1>-tag in</div>. Je moet dit mogelijk op een of twee plaatsen in het bestand doen.
VOOR
Header Voor Reparatie
NA: h1 naar div
Header Na Reparatie
Een speciale opmerking: Op mijn Taste, Ride en Shapes thema's, zat deze <h1>-tag vaak binnen een {% if template.name == 'index' %} statement. Dit is prima. De reparatie is hetzelfde: verander h1 naar div waar je het ook vindt dat het logo omgeeft.
- Klik Opslaan. De H1-tag is nu vrij.
Stap 2: De Implementatie - theme.liquid Aanpassen
Hier voegen we onze nieuwe, krachtige H1 toe. Deze stap behelst het bewerken van het belangrijkste bestand in je thema, dus wees voorzichtig.
- Maak eerst een back-up! Ga naar de Thema's pagina, klik ... op je thema en selecteer Dupliceren. Dit creëert een veilige kopie die je kunt herstellen als er iets misgaat.
- Open in de code-editor de Layout-map en klik op theme.liquid.
- Vind de openings
<body>-tag bij de bovenkant van het bestand. Het zou er uit kunnen zien als<body class="gradient">of iets soortgelijks. - Plak de volgende code op een nieuwe regel direct onder de openings
<body>-tag.
Theme Liquid Implementatie
De Code om te Plakken:
{%- 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">Je Geweldige Homepage Titel - Hoofd Trefwoorden Hier</h1>
{%- endif -%}
- Belangrijkste Deel: Verander de tekst "Je Geweldige Homepage Titel - Hoofd Trefwoorden Hier" naar je werkelijke, gewenste H1. Bijvoorbeeld: "Handgemaakte Leren Tassen & Minimalistische Portemonnees – Je Merknaam".
- Klik Opslaan.
Je Actieplan en Afsluitende Gedachten
Van de initiële schok van de ontdekking tot een finale, perfecte oplossing, deze reis leerde me een waardevolle les. Het optimaliseren van je winkel gaat over het begrijpen van de principes, niet alleen het toepassen van snelle oplossingen.
Hier is je finale checklist:
- Diagnoseer Eerst: Controleer altijd het logo van je eigen site met de "Inspecteren" tool om te zien of het omgeven is door een
<h1>. - Het Logo is Geen H1: Je logo hoort in een
<div>, niet in een heading-tag. Repareer dit in header.liquid. - Gebruik de Visueel Verborgen Methode: Dit is de professionele standaard voor het toevoegen van een H1 zonder je ontwerp te beïnvloeden.
- Beheers de Workflow: Het "header.liquid repareren -> implementeren in theme.liquid" proces is de meest betrouwbare manier om dit definitief op te lossen.
Ik hoop dat deze gedetailleerde gids je de twee uren frustratie bespaart die het mij kostte. Je homepage H1-tag goed krijgen is een grote stap voorwaarts in je SEO-reis.
Veel succes, en deel gerust je succes in de reacties!