Le thème Shopify Dawn est un bon thème pour commencer, mais vous pouvez avoir des alertes SEO à cause du H1 vide dans le header. Ce manque de h1 est un manque à gagner énorme si vous n’avez pas d’autres titres H1. Je vais vous expliquer comment enlever le H1 du logo du thème dawn afin d’améliorer le référencement de votre boutique Shopify.
Pourquoi la balise H1 est-elle importante ?
Le titre h1 est le titre le plus important d’une page et doit être utilisé pour indiquer le sujet principal de la page. Il ne doit y en avoir qu’un seul par page ! Les titres h2, h3 et hn servent à compartimenter le contenu et aide les moteurs de recherche à comprendre de quoi parle la page. Il est donc important d’avoir une structure Hn correct en commençant par le titre le plus important : le h1.
Comment enlever le h1 du header sur le thème Shopify Dawn ?
Cela ne s’applique qu’à la page d’accueil, car les autres pages internes comportent déjà leurs propres titres h1. Sur les pages de produits de Shopify, le h1 est le titre du produit, et sur les pages de collections de Shopify, le h1 est le nom de la collection.
Il y a deux étapes pour corriger le h1 vide de la page d’accueil. La première consiste à supprimer la balise h1 qui entoure le logo de votre boutique dans l’en-tête. La deuxième étape consiste à ajouter un h1 à votre page d’accueil dans le contenu.
La deuxième étape peut être réalisée de deux manières. Vous pouvez soit ajouter un h1 à votre page d’accueil en utilisant le contenu d’un bloc liquide personnalisé, soit mettre à jour la sortie des blocs de texte enrichi pour tenir compte d’un h1 lorsqu’il se trouve sur la page d’accueil.
Quelle que soit la façon dont vous vous occupez de l’étape 2, la première étape nécessite un peu de codage pour supprimer le h1 autour du logo de l’en-tête, c’est pourquoi nous nous en occuperons d’abord.
Étape 1 : Enlever le h1 vide du logo du thème Dawn
Pour enlever le h1 du thème dawn, vous devrez modifier deux lignes de code du thème. Pour le tutoriel j’utilise la dernière version de Dawn qui est la 11.0.0 le 25/10/2023. Pour avoir accès au code Shopify, voici les étapes :
- Allez dans la rubrique « Thèmes » de votre boutique en ligne
- Appuyez sur les trois petits points « … » à gauche de « Publier »
- Appuyez sur « Modifier le code »
Une fois que vous avez accès au code, nous devrons trouver les deux lignes et les changez. Pas de panique, cela va être très simple. Voici les étapes :
- Tapez « header »dans la barre de recherche
- Cliquez sur le fichier « header.liquid » qui va apparaître
- Faites Cmd+F ou Ctrl+F puis tapez « h1 » pour trouver la balise
- Localisez la balise <h1 class= »header_heading »> »
Quand vous aurez trouvé la balise h1, vous allez changer « h1 » en « div » comme ci dessous :
<h1 class="header__heading"
en
<div class="header__heading"
Attention à bien changer la balise fermante qui se trouve à la fin du bloc de code. Si vous ne trouvez pas la balise fermante, vous pouvez la chercher avec la barre de recherche comme montrez précédemment.
</h1>
en
</div>
Si vous souhaitez changer de thèmes Shopify, vous pouvez aussi voir notre guide des 7 meilleurs thèmes Shopify pour ouvrir une boutique en ligne.
Étape 2 : Ajouter un titre h1 à votre boutique
Il y a trois méthodes que vous pouvez utiliser pour ajouter un h1 sur votre page d’accueil Shopify. La première consiste à ajouter un seul bloc liquide personnalisé, la seconde à ajouter un bloc de texte enrichi et la troisème à modifier le code d’un bloc de texte enrichi intégré pour qu’il génère un h1.
Méthode 1 : Ajouter un custom liquid block
C’est probablement la façon la plus simple d’ajouter un h1 à votre page d’accueil maintenant qu’il n’y a pas de balise h1 autour du logo de votre boutique. De plus, cette méthode n’affecte pas les autres pages. Vous ajoutez seulement une section à la page d’accueil. Pour faire cela, voici les étapes :
- Allez dans la rubrique « Thèmes » de la section « Boutique en ligne »
- Appuyez sur « Ajouter une section » qui est tout en bas à gauche dans « Modèle »
- Appuyez sur « Liquid personnalisé » pour ajouter le bloc
Une fois que vous avez ce bloc liquid personnalisé, vous pouvez le placer où vous le souhaitez, mais idéalement dans la partie haute de votre boutique en ligne. Il vous faut maintenant ajouter la partie HTML et le CSS. La partie HTML va expliquer à Google que c’est un titre h1. La partie CSS va montrer votre titre selon des attributs visuels que vous choisissez, voici les étapes à suivre pour insérer un bloc liquid personnalisé sur Shopify :
- Ajuster le bloc dans votre boutique
- Insérez le code HTML dans la case en haut à droite
- Insérez le code CSS dans la case en bas à droite
Voici les codes HTML et CSS que j’ai respectivement utilisé pour l’exemple :
<h1>Ceci est un titre h1</h1>
Pour le CSS ci-dessous, vous pouvez utiliser font-size pour changer la taille du titre et text align pour changer la disposition du titre.
h1 {
font-size: 28px;
text-align: center;
}
Méthode 1.bis : Ajout d'une section "Texte enrichi"
Voici une option simple pour rajouter un titre h1 sur sa boutique Shopify :
- Appuyez sur ajouter une section
- Ajoutez un « Texte enrichi »
- Sélectionnez le texte et transformez-le en titre 1
- Supprimez le titre et le bouton
Voilà, vous avez votre titre. Ci-dessus le tutoriel en images pour vous aider à ajouter le h1.
Astuce : Si vous souhaitez modifier la couleur ou la taille du texte h1 vous pouvez ajouter du CSS personnalisé dans la section du texte enrichi.
Méthode 2 : Modification d'une section/ rich-text.liquid
Nous allons modifier sections/rich-text.liquid pour que le champ Heading dans le bloc Rich text soit affiché comme h1 sur la page d’accueil. Mais le titre sera un h2 sur toutes les autres pages, afin d’éviter d’avoir plusieurs balises h1 sur vos autres pages.
Pour cela vous devez aller dans le modèle rich-text.liquid, à la ligne 27, cherchez la conditionnelle « when ‘heading' » pour trouver ce code :
{%- when 'heading' -%}
<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | replace: 'p>', 'span>' }}
</h2>
Ce bloc insère un h2 pour les titres. Nous voulons le modifier pour qu’il produise plutôt un h1. Mais seulement sur la page d’accueil du titre. Nous allons donc modifier ce bloc pour qu’il ressemble à ce qui suit :
{%- when 'heading' -%}
{% if template == 'index' %}
<h1 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | replace: 'p>', 'span>' }}
</h1>
{% else %}
<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | replace: 'p>', 'span>' }}
</h2>
{% endif %}
Explication du nouveau code : Lorsque nous avons un titre, il faut l’afficher en tant que h1 si nous sommes sur la page d’accueil, sinon il faut l’afficher en tant que h2.
Étape Bonus : Enlever le h2 "Article ajouté au panier"
Nous avons maintenant un h1 modifiable à notre guise sur le thème, génial ! Et si nous poussions l’optimisation SEO un peu plus loin ? Comme vous le voyez au-dessus, nous avons un h2 « Article ajouté au panier » ce qui n’est pas forcément l’idéal pour le référencement. On le voudrait avec une importance moindre comme un h3, h4 ou une div. Je vais vous expliquer comment enlever le h2 sur Shopify, voici les étapes :
- Allez au fichier « cart-notification.liquid »
- Allez à la ligne 23-26 pour trouver « cart-notification__header »
- Changez les balises h2 en balises div
Conclusion
Pour conclure, de nombreux articles traitent de l’importance du balisage sémantique et de la manière dont les en-têtes aident à organiser et à structurer les informations sur une page web. Un élément clé de ces en-têtes est la présence d’un h1.
Modifier le thème Dawn par défaut de Shopify pour avoir un titre h1 descriptif sur la page d’accueil de votre boutique est une solution rapide pour améliorer votre référencement naturel. La différence entre votre boutique en ligne et celles de vos concurrents peut se résumer à la correction ou à l’amélioration de petits détails techniques tels que celui-ci.
Si vous avez besoin d’aide pour l’optimisation du référencement de votre boutique Shopify, nous serions ravis de vous aider à avoir plus de clients. Vous pouvez réserver directement un audit de 45 minutes de votre site avec un plan d’action d’action seo :
Planifiez votre appel avec Léopold
APPEL GRATUIT DE 30 mn
À la fin de cet appel, vous aurez une compréhension claire des prochaines étapes que vous pouvez prendre pour améliorer votre référencement naturel et connaître les stratégies de vos concurrents.
Cet audit est parfait pour :
Les boutiques Shopify souhaitant améliorer leur référencement naturel
Les propriétaires de site souhaitant avoir un audit de leur Shopify
Les entreprises souhaitant dévelloper leur stratégie long terme
Si vous souhaitez être en équipe avec une agence SEO fiable