Tous sur le SEO Technique du Phantom thème

A. Introduction

Ce tutoriel est disponible pour les packs suivants :

Classique
Premium
Master +

Le SEO (Search Engine Optimization) ou référencement naturel a pour but premier d'amener du trafic qualifié et gratuit sur un site depuis les moteurs de recherche. Le SEO consiste dans l'art d'optimiser une page web et dans sa globalité tout un site web pour les moteurs de recherche.

Il est donc important d’avoir la main sur le paramétrage de celui-ci dans le contenu de votre site.

Nous vous présentons donc ici tout les mesures prises par le Phantom Thème pour vous aider à obtenir le meilleur référencement possible depuis Shopify.

B. Balise `Hn`

En référencement naturel, Hn décrit une balise utilisée pour le titrage et sous-titrage d'un contenu web (en complément de la balise title). Elle se décline sous la forme h1, h2, h3, etc., jusqu'à h6, et entoure les différents titres et sous-titres d'un document en les hiérarchisant sur plusieurs niveaux (6 au total). La balise p quand à elle définit un paragraphe.

Dans le Phantom Thème, tout titre possède le choix d’être modifié au niveau de sa balise Hn.

Ainsi vous pourrez gérer la structure de vos pages comme bon vous semble sans devoir aller dans le code du thème pour les changer !

C. Données structurées / résultats enrichis (schema.org)

Le moteur de recherche de Google met tout en œuvre pour comprendre le contenu d'une page. Dans cette optique, vous pouvez nous fournir des informations claires sur la signification d'une page en y ajoutant des données structurées. Ces données structurées sont un format normalisé permettant de fournir des informations sur une page et de classer le contenu de cette page. Par exemple, sur une page de recette, il peut s'agir des ingrédients, du temps et de la température de cuisson, des calories, etc (Pour en savoir plus).

Le Phantom Thème comporte les données structurées déjà établies pour les modèles de page suivant :

En-tête
- schéma Website
- schéma Organization (inclut réseaux sociaux)
Fil d’arianne
Modèle Article de blog
- schéma Article
Modèle Blog
- schéma Blog (inclut schéma Article)
Modèle Collection
- schéma CollectionPage (détail de la collection
- schéma ItemList (détail des produits de la collection)
Modèle Produit
- schéma Product : les champs agreggateRating et review ne seront mentionné que si une application d’avis est installée, que le produit en comporte, et que cette appli est sélectionné dans Paramètres de thème > SEO On Site > Application d’avis installée.

Si votre application d’avis ne figure pas parmi la liste, veuillez nous contacter au mail suivant : [email protected]

D. Balise canonique

La balise canonical indique aux moteurs de recherche quelle page (et donc url) est l’originale pour un même contenu, et donc seule celle-ci sera normalement indexée.

Celle-ci s’apparente à un panneau indicateur ayant pour but d’éviter les conséquences (néfastes pour votre site web) du duplicate content.

Votre boutique Shopify est composé de 2 types d’url pour accéder à vos pages produits :

https://monshop.com/products/nomproduit
https://monshop.com/collections/nomcollection/products/nomproduit

L’url canonique est l’url la plus courte, ici la 1ère, et sera celle qui indexée par les moteurs de recherche. Lorsque le navigateur passera (crawlera) sur la 2ème url, celui-ci détectera la balise canonical contenant la 1ère url, et considèrera cette page comme un contenu identique et à ne pas indexer, il la considèrera donc pour le maillage interne, mais cette url n’apparaîtra pas dans les moteurs de recherche.

Ainsi, sur le Phantom Thème, l’url canonical est https://monshop.com/products/nomproduit, tandis que l’url de redirection vers les produits depuis le site est https://monshop.com/collections/nomcollection/products/nomproduit permettant un maillage interne entre les collections et leurs produits, améliorant votre référencement sur vos collections.

E. Signaux web essentiels (Web core vitals)

Core Web Vitals est une nouvelle initiative de Google visant à améliorer la vitesse de chargement et l’expérience utilisateur (UX) de tous les sites Internet.

Core Web Vitals repose sur trois mesures. Chacun d’entre eux touche un aspect essentiel pour qu’une page soit rapide et offre une bonne expérience utilisateur :

LCP (Largest Contentful Paint) :
L’indicateur LCP mesure le temps de chargement du contenu, marque le moment exact où le plus grand élément de contenu – image, vidéo, bloc de texte – au-dessus du pli (ce que vous voyez sans défiler vers le bas) est entièrement chargé. Un bon LCP ne dure pas plus de 2,5 secondes.
FID (First Input Delay) :
Basé sur le framework RAIL (Response Animation Idle Load), le métrique First Input Delay ou « délai de première entrée » mesure la réactivité de la page Web. Explicitement, c’est le temps qui s’écoule entre le moment où l’utilisateur effectue une action à l’instar d’un clic et celui où le navigateur répond à cette interaction.
Un bon FID doit répondre au moins de 0,1 seconde soit à 100 millisecondes. Pour y parvenir, évitez à tout prix d’utiliser Web Worker, un script JS indépendant des autres scripts, exécuté en arrière-plan d’une page HTML.
CLS (Cumulative Layout Shift) :
Le Cumulative Layout Shift ou « décalage cumulatif de mise en page » mesure la stabilité visuelle. Souvent, les éléments d’une page se déplacent au fur et à mesure que le contenu se charge et s’affiche sur l’écran – une expérience assez lassante et qui conduit généralement à de nombreux clics au mauvais endroit, ce qui gâche clairement l’expérience de navigation.
En fait, cette métrique CLS quantifie la fréquence et l’ampleur avec laquelle ces changements se produisent sur une page.
Avec un score de 0 à 1 (0 signifie qu’il n’y a pas de déplacement et 1 veut dire qu’il y a le plus de déplacement), les concepteurs de sites Web peuvent mesurer le CLS pour améliorer l’UX et le référencement naturel. En somme, un faible CLS peut être considéré comme une page « agréable ».

Le Phantom Thème a été optimisé pour répondre aux critères que Google a fixé pour ces mesures, et ainsi améliorer grandement le référencement de vos pages.

F. Gestion de l'indexation sur les moteurs de recherche

L’indexation des vos pages des navigateurs est une étape cruciale pour votre site et permet d’être trouvé dans les résultats de recherche de ceux-ci.

Si une page peut être indexée, les navigateurs ont également prévus une balise permettant de mentionné une non-indexation, utile suivant les pages.

Par exemple, une page /pages/cgv n’aura aucune utilité à être indexé, car elle empiètera sur le référencement des autres pages plus importante. Il est donc important de mentionner dans votre site, dans la balise <head> une balise <meta name="robots" content="noindex">.

Pour faire cela facilement, et sans avoir besoin de coder, le Phantom Thème propose un champ spécifique à cela dans Paramètres de thème > SEO On Site > Mettre des pages en noindex :

Ainsi, comme indiqué dans les infos de ce paramètre, il vous suffit de mettre l’ancre des urls de page que vous ne souhaitez pas indexée, séparée par une simple virgule.

L’ancre correspond à la terminson d’une url, son dernier maillon, exemple :

https://monshop.com/collections/nomcollection/products/nomproduit a pour ancre nomproduit

Vous pouvez donc par exemple définir ce paramètre comme ceci :

contact,faq,suivi-de-colis,cgv

Les pages possédant ces ancres ne seront alors pas indexées par les moteurs de recherche, mais accessible aux utilisateurs de votre boutique.

G. Page collections/all

La page collections/all est une collection sur votre boutique regroupant la totalité des produits de celle-ci. Malgré que cette page soit accessible et visible dans le sitemap de votre site crée par Shopify (https://mashop.com/sitemap.xml), celle-ci ne possède aucun endroit pour paramétrer sa balise title et sa balise description.

Sur le Phantom Thème, rendez-vous dans Paramètres de thème > SEO On Site.

Vous pourrez alors définir ces balises comme vous le souhaitez et ainsi optimiser votre SEO.

H. Text / HTML ratio

Une métrique importante pour votre référencement et peu connu du grand public est le Text / HTML Ratio. Celle-ci constitue le rapport entre le nombre de caractère textuel affiché sur une page et le nombre de caractère HTML pour l’afficher. Le but est bien entendu que ce ratio soit le plus élevé possible, un maximum de contenu pour un minimum de code derrière.

Le Phantom Thème a été optimisé de sorte que ce ratio soit le plus élevé possible dans le contexte d’une boutique e-commerce, et ainsi booster votre référencement naturel sur les résultats de recherche.

Sur un blog, l’objectif est d’être à un ratio de 10% minimum, sur une boutique e-commerce, 2% suffise. Le Phantom possède en moyenne pour une page produit un ratio de 4%.

Ce ratio dépendra également de la quantité de texte que vous placerez dans vos différentes pages.

I. Attribut rel="nofollow, noindex" sur les liens

Sur un site, des liens permettent la navigation entre les différentes pages qui le constitue, on appelle ça le maillage interne de ce site.

Si on part du principe que la page d’accueil est la racine du site site (votre nom de domaine, sans rien après dans l’url), alors c’est la page qui prédomine sur votre boutique.

Ensuite, depuis cette page, des liens redirigent vers d’autres segments de votre site, ainsi comme le principe de vases communicants, la page d’accueil dilue de son influence sur ces liens.

Il est donc logique d’éviter de diluer cette influence pour certains liens pour lesquels nous ne désiront pas que les navigateurs en tiennent compte.

Ainsi, l’attribute rel="nofollow,noindex" sert pour cet usage et empêche les crawlers (analyseur de site tel que Google) d’aller sur la redirection du lie

Cet attribut est placé sur une balise <a> balise désignant un lien en HTML.

Si vous utilisez cet attribut sur tout lien renvoyant vers une page, comme vos CGV par exemple, alors aucun navigateur n’aura connaissance du contenu de cette, ayant une interdiction formelle d’être parcourue. Si vous souhaitez simplement qu’elle n’apparaissent pas dans les moteurs de recherche, il est préférable d’utiliser la fonction noindex.

Dans le Phantom Thème, pour faciliter la mise en place de cette balise sans avoir à toucher au code, il vous suffit de placer #nofollow dans le titre du lien d’un menu, chaîne de caractère qui sera supprimé avant le rendu du titre sur la page.

Exemple : Vous souhaitez placer cette balise sur un lien redirigeant vers les CGV de votre site, placé dans le pied de page.

Rendez-vous dans Boutique en ligne > Navigation > Menu pied de page.

Placer alors #nofollow sur le titre du lien en cliquant sur le bouton Modifier de celui-ci.

Enregistrer vos modifications.

De retour sur votre site, en faisant un clic droit sur le lien en question, puis Inspecter, vous retrouvez alors l’attribut rel="nofollow,noindex" dans la balise <a> de votre lien.