๐๏ธ Avoir une bonne architecture SEO
#14 Ou ne pas avoir peur de bien baliser
Bonjour,
Jโespรจre que tu vas bien.
On se retrouve aujourdโhui pour la newsletter 14 de Krisalead envoyรฉe ร 370 personnes, merci dโen faire parti ๐ฆ
Aujourdโhui, on va parler dโarchitecture SEO, et plus particuliรจrement de lโimportance de bien baliser tes pages.
Quand tu lances un site, il nโest pas tout de suite lรฉgitime aux yeux de Google.
Il faudra donc รชtre irrรฉprochable sur les points que tu peux maรฎtriser, et cโest ce quโon va voir.
Si tu as un thรจme version 2.0 sous Shopify, je te montrerai comment changer et choisir la balise SEO que tu souhaites sur tes diffรฉrents blocs.
Mets ton casque de chantier, on est parti ๐ท๐ผโโ๏ธ
Au sommaire
Cโest quoi une balise SEO ?
Comment voir les balises sur sa page ?
Mettre les bonnes balises sur son Shopify โ
Cโest quoi une balise SEO ?
Quand le robot Google arrive sur ton site, il parcourt ta home page.
Dรจs quโil va trouver un lien, il va se rendre sur cette nouvelle page.
Sur cette nouvelle page, le code que toi tu vois ร lโรฉcran, cโest du HTML.
Et ce code HTML, il a une architecture spรฉcifique.
Cโest lร quโinterviennent les balises HTML, qui sont au nombre de 6 :
H1 : <h1> </h1>
H2 : <h2> </h2>
H3 : <h3> </h3>
H4 : <h4> </h4>
H5 : <h5> </h5>
H6 : <h6> </h6>
On les appelle รฉgalement les balises titres.
Dans les faits, tu utiliseras principalement les balises H1, H2 et H3.
Cโest pourquoi je ne vais pas mโattarder sur les 3 derniรจres balises.
Il y a une rรจgle primordiale ร se rappeler :
chaque page ne doit avoir quโune seule balise H1.
Ensuite, les balises H2 sont les grandes parties de ta page, et les balises H3 servent ร complรฉter des points de ta balise H2.
ร noter que lโรฉlรฉment <p> aussi appelรฉ paragraphe est le texte normal que tu vois sur ta page.
ใฐ๏ธ
Voilร un exemple ce que pourrait รชtre une page bien balisรฉe aux yeux de Google :
<h1> TITRE </h1>
<h2> Sous-Titre 1 </h2>
<h3> Dรฉveloppement 1 </h3>
<p> Corps de mon texte </p>
<h3> Dรฉveloppement 2 </h3>
<p> Corps de mon texte </p>
<h3> Dรฉveloppement 3 </h3>
<p> Corps de mon texte </p>
<h2> Sous-Titre 2 </h2>
<p> Corps de mon texte </p>
<h2>Sous-Titre 3 </h2>
<h3> Dรฉveloppement 1 </h3>
<p> Corps de mon texte </p>
On remarque que lโon a bien notre balise unique H1, 3 balises H2 pour les grandes parties de la page et enfin des balises H3 qui nous servent ร structurer notre texte.
Comment voir les balises sur sa page ?
Maintenant que lโon a dรฉfini les balises et que lโon sait ร quoi devrait ressembler chaque page de notre site, comment voir ce qui est dรฉjร en place.
Il te faudra ici รชtre sur Google Chrome afin de pouvoir tรฉlรฉcharger le plugin gratuit HeadingsMap ๐ง๐ผโ๐ป
Une fois installรฉ, tu peux te rendre sur ton site et regarder la structure de chacune de tes pages.
Jโai pris ici un exemple de la page collection des infusions qui viennent dโรชtre lancรฉes sur kokawa. Regardons ce que cela donne :
Comme tu peux le voir, on a bien une seule balise H1 qui est le thรจme global de la page, puis 4 balises H2 et 3 balises H3.
Aujourdโhui, on voit lโimportance de bien baliser pour que tu puisses le mettre en place facilement sur ton site internet.
Concernant le texte ร mettre dans les balises, on verra plus tard comment optimiser tes balises pour remonter en SEO.
La thรฉorie cโest bien, la pratique cโest mieux.
On va maintenant voir comment le mettre en place sur ton Shopify.
Mettre les bonnes balises sur son Shopify ๐ง๐ผโโ๏ธ
Pendant que je faisais le tour de mes pages, je suis tombรฉ sur la page collection des bougies et je remarque quโelle nโa pas de H1.
Elle a bien un titre de page : Bougie parfumรฉe poรฉtique by kokawa.
Par contre, elle a 3 balises H2 et H3.
Il faudrait pouvoir transformer Bougie parfumรฉe naturelle en balise H1.
Allons voir de plus prรจs dans notre thรจme Shopify.
On peut voir quโil sโagit du bloc Shopify โTexte enrichiโ et quโil sโagit du titre.
De base, le thรจme mettra chaque titre dโun Texte enrichi en balise H2, ce qui nous arrange pas.
On aimerait pouvoir indiquer si lโon souhaite que ce titre soit une balise H1, H2, H3 ou mรชme un paragraphe sโil prรฉsente peu dโintรฉrรชt pour lโarchitecture de notre page.
Tu vas maintenant pouvoir aller directement dans le code de ton thรจme.
Mr. Robot nโa quโร bien se tenir ๐ค
Avant de plonger la tรชte la premiรจre, duplique ton thรจme actuel.
Cโest sur cette nouvelle version du thรจme que lโon va travailler.
Pour que tu saches le rรฉsultat que lโon veut obtenir, cโest avoir cette option en plus sur le titre de la section Texte enrichi :
Comment le mettre en place en 3 minutes ? ๐ก
Quand tu vas vouloir รฉditer le code de ton thรจme Shopify, tu vas arriver dans lโรฉditeur de thรจme.
Tu peux voir quโil y a sur le cรดtรฉ plusieurs dossiers comme Layout, Templates, Sections, etc..
Cโest Sections qui nous intรฉressent.
Section correspond aux blocs que tu peux utiliser dans ton thรจme et donc sur chacune de tes pages, cโest le gros avantage de Shopify version 2.0.
Je cherche donc ma section Texte Enrichi.
Cโest en anglais alors que mon thรจme Shopify est en franรงais, il sโagit bien de rich-text.liquid
Lโavantage cโest que le code pour chaque section nโest souvent pas trรจs long.
Ici, on peut retrouver facilement la partie du code qui nous intรฉresse ร savoir :
Que nous dit ce code ?
Un texte enrichi peut contenir soit un titre, soit un texte, soit un bouton.
Quand cโest un titre, le texte est mis dans une balise H2.
BINGO, on a trouvรฉ oรน intervenir. Ce quโon lโon souhaite cโest faire une condition pour choisir la balise que lโon souhaite.
Cette fois, il faut descendre un petit peu dans la page pour modifier lโarchitecture dโune section texte enrichi afin de pouvoir laisser le choix ร lโutilisateur, autrement dit toi.
On descend sur le bloc Heading et on voit quโil a actuellement deux settings :
Le texte du titre : heading
La taille du texte du titre : heading_size
Si tu remontes sur les images prรฉcรฉdentes, tu verras quโil sโagit bien des deux options que lโon a sur son bloc texte enrichi.
Ici, ce quโon lโon souhaite faire, cโest ajouter une troisiรจme option pour choisir la balise SEO de notre titre.
On aura donc :
Le texte du titre : heading
La balise SEO du titre : balise_SEO
La taille du texte du titre : heading_size
On remarque รฉgalement que pour choisir la taille du texte du titre, cโest un menu dรฉroulant qui nous donne trois choix : petit, moyen ou grand
Pas besoin de se compliquer la vie, on va faire pareil pour la balise SEO, et on pourra choisir : h1, h2, h3, p
Il faut choisir le mรชme type que la taille du titre, ร savoir โselectโ
Puis on voit bien quโil y a lโid et les 4 options possibles.
Maintenant que lโon a รงa, on est proche du but.
Il faut remonter ร lโendroit du code oรน il y a la balise h2.
Nous avons modifiรฉ la section heading pour ajouter une condition sur le choix de la balise que tu feras.
Comme H2 est le choix de base de Shopify et que cโest souvent le plus commun, on fait le choix de le laisser en choix numรฉro 1.
Pour valider la condition, on voit que lโon block.settings.balise_SEO qui correspondra au choix du menu dรฉroulant.
ใฐ๏ธ
Tu peux sauvegarder et te rendre dans ton thรจme.
Le choix de la balise est disponible, tu peux choisir H1 et sauvegarder.
Si tu te rends maintenant sur la page avec ton plugin, ton titre est dรฉsormais une balise H1, bien jouรฉ โ
Pour conclure ๐๐ผโโ๏ธ
Pour savoir si tu es lรฉgitime, Google donne un score dโautoritรฉ sur 100 ร ton domaine.
Pour te donner un exemple, kokawa a un domaine dโautoritรฉ de 2/100.
On peut pas vraiment dire que รงa casse la baraque.
Cโest pourquoi il est primordial de faire les efforts nรฉcessaires pour avoir une architecture irrรฉprochable sur ton site.
Cela te servira pour รชtre bien vu aux yeux du robot de Google, et ainsi faire augmenter ton SEO plus rapidement quand tu feras du contenu.
Beau parallรจle car on parlera contenu dans le prochain gros dossier Krisalead : Comment structurer son contenu pour remonter dans les pages Google ?
En attendant, je te souhaite une trรจs bonne journรฉe,
Alexandre
Hyper actionnable cette รฉdition, top !