Améliorer le référencement de son site web sur Storyguide.travel
Avoir un site Web, c’est bien … présent sur Storyguide, c’est super … mais un site structuré respectant quelques normes c’est encore mieux !
En effet, certaines recommandations vont faciliter le référencement de votre site Web sur notre plateforme, mais également sur votre moteur de recherche.
Le codage de votre page (HTML) est fortement recommandé pour booster la visibilité et améliorer la clarté de votre page. Dans ce tuto, nous allons voir les codages des balises associées à la visibilité de votre site web.
Le codage HTML - Introduction au codage
Le codage HTML vous permet de structurer une page web et son contenu. C’est un langage de balisage qui définit la forme de votre page.
Pour visualiser le code du site internet et ainsi configurer les balises nécessaires, exécutez un clic droit sur votre page à l’endroit souhaité, puis cliquez sur « inspecter ».
Une page s’affiche alors sur votre écran et vous permet de coder votre site.
Vous savez à présent vous rendre sur la page HTML. Nous allons voir quelles sont les balises à traiter avec parcimonie pour essayer d’améliorer le référencement de la page.
1. La langue (balise lang)
Il est très important de déclarer la langue utilisée sur les pages web de votre site.
Pour ce faire, indiquez le code iso de la langue sur la balise comme prévu par la norme HTML 5. Vous allez utiliser l’attribut « lang » pour définir la langue du document ou d’une partie de texte désirée.
Cela se présente donc sous la forme suivante :
Si vous souhaitez en savoir davantage sur le codage de la langue, vous pouvez vous rendre à l’adresse suivante : https://www.w3.org/International/questions/qa-html-language-declarations.fr
2. Le titre (balise <h1>)
L’utilisation de la balise H1 correspond au titre principal de la page consultée. Elle est à prendre en considération car c’est un élément fondamental pour le référencement de votre page.
Si vous inspectez le titre de votre page comme expliqué dans la partie précédente, le codage HTML se présentera sous cette forme : <h1>Mon titre</h1>
Assurez donc vous de choisir un titre adéquat et accrocheur, en rapport avec votre sujet pour attribuer à votre site web une réelle identité.
3. Les coordonnées géographiques (lat/lng)
Deux méthodes vont vous être proposées afin de définir vos coordonnées GPS sur le site. Les deux méthodes utilisent deux balises différentes à savoir les balises « itemprop » et les balises « META ». Les deux méthodes vont vous mener au même but et utilisent simplement un cheminement différent. À noter tout de même que l’utilisation des balises « itemprop » est généralement destinée à la modification d’un site déjà existant à la différence des balises « META » qui elles sont généralement destinées à la création d’un site.
Ces deux balises permettent de structurer et de définir des données numériques. Ce sont des informations codées.
- Les balises « META » :
Les balises sont placées dans l’élément « Head » de la page HTML, elle n’apparaissent donc pas sur la page pour le visiteur.
Pour coder les données GPS avec les balises « META », utilisez une balise meta « geo.position » (latitude; longitude GPS) dans le header. Elle aura donc cette forme :
- Pour créer des coordonnées GPS d’un lieux précis, cliquez ici pour vous rendre sur la page similaire à la photo ci-dessous et générer ces informations.
- Les balises « itemprop » : Les balises itemprop sont utilisées dans le but d’attribuer des propriétés à un objet. Tous les éléments HTML peuvent avoir un attribut itemprop car ils sont universels.
- Pour insérer la latitude : encadrez l’information dans une balise contenant l’attribut itemprop « latitude » (coordonées GPS). Cela se présentera sous la forme suivante :
- Pour insérer la longitude : encadrez l’information dans une balise contenant l’attribut itemprop « longitude » (coordonées GPS). Cela se présentera sous la forme suivante :
4. La description
- Les balises « META » :
Si vous choisissez de contrôler les balises « META » pour la description de votre site, vous devrez utiliser une balise meta « og:description » dans le header. Elle se présente sous la forme suivante :
- Les balises « itemprop » :
Si vous choisissez de contrôler les balises « itemprop », encadrez alors l’information dans une balise contenant l’attribut itemprop « description ». Elle se présentera sous cette forme :Ma description ici
5. L'image
Une belle image représentative de votre sujet peut en effet être un levier pour le référencement de votre site web.
- Les balises « META » :
Si vous choisissez de contrôler les balises « META » pour afficher votre image sur votre site, vous devrez utiliser une balise meta « og:image » dans le header . Elle se présente sous la forme suivante :
- Les balises « itemprop » :
Si vous choisissez de contrôler les balises « itemprop », encadrez l’information dans une balise contenant l’attribut itemprop « image » . Elle se présentera sous cette forme :
6. Le breadcrumb
Le « breadcrumb », aussi appelé « fil d’Ariane », permet à l’utilisateur de visualiser son parcours de navigation avant d’arriver sur l’emplacement au quel il se trouve. Le file d’Ariane permet par la même occasion de pouvoir revenir au point de départ de sa recherche, généralement de revenir à l’accueil du site.
Il y a donc une hiérarchie d’évolution dans le navigateur qui est affichée.
Utilisez la classe « breadcrumb » sur votre file d’Ariane.
7. Website
Il est également possible d’ajouter un lien URL afin de rediriger l’utilisateur vers une page web. Pour ce faire, utilisez l’attribut itemprop « url » sur la balise du lien, ou sur une balise encadrante.
9. Autres
Si vous souhaitez apporter d’autres informations à votre site, libre est votre choix. Il est même conseillé, dans la mesure du possible d’y ajouter quelques détails comme par exemple :
- Un numéro de téléphone joignable
- Une adresse mail
- Une adresse postale
- Des horaires
- Des tarifs
- Ainsi que toutes les informations concernant votre site qui vous paraissent judicieuses d’afficher