L’optimisation des moteurs de recherche, ou SEO, est un élément crucial de tout site ou application web. Les applications et les sites qui ne sont pas facilement indexés par les moteurs de recherche ou qui sont mal optimisés finiront par être cachés derrière des pages et des pages de résultats de recherche. Maintenant, si vous, un développeur Vue.js, ne voulez pas que cela arrive à votre projet, jetez un coup d’œil à ces conseils pour optimiser les sites et les applications Vue.js pour les yeux exigeants des araignées des moteurs de recherche.
La première chose à laquelle pensent la plupart des développeurs lorsqu’ils pensent au référencement est de remplir leurs éléments de balises méta. Alors comment faire cela avec Vue ? Avec vue-meta.
Tout d’abord, installez le package vue-meta via Yarn ou NPM.
$ yarn add vue-meta$ npm install vue-meta --saveEnsuite, importez-la et utilisez-la dans votre point d’entrée Vue :
import Vue from 'vue';
...
import Meta from 'vue-meta';
Vue.use(Meta);
...Maintenant, dans vos composants, vous pouvez ajouter une propriété metaInfo qui contient les différents éléments que vous souhaitez injecter dans votre <head> :
<template>
...
</template>
<script>
export default {
...
metaInfo: {
// Les enfants peuvent remplacer le titre.
title: 'Titre de ma page',
// Résultat : Titre de ma page ← Mon site
// Si un enfant change le titre en "Mon autre titre de page",
// il deviendra : Mon autre titre de page ← Mon site
titleTemplate: '%s ← Mon Site',
// Définissez les métabalises ici.
meta: [
{http-equiv: 'Content-Type', content: 'text/html; charset=utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'description', content: 'J\'ai des choses ici sur mon site.'}
]
}
}
</script>Il est également judicieux d’inclure des balises de médias sociaux pertinentes pour chaque page, surtout si vous pensez qu’elle sera partagée sur les médias sociaux.
metaInfo: {
...
meta: [
...
// OpenGraph data (le plus utilisé)
{property: 'og:title', content: 'Titre de ma page ← Mon site'},
{property: 'og:site_name', content: 'Mon site'},
// La liste des types est disponible ici: http://ogp.me/#types
{property: 'og:type', content: 'website'},
// Il doit être le même que votre lien canonique, voir ci-dessous.
{property: 'og:url', content: 'https://www.mon-site.com/ma-page-special'},
{property: 'og:image', content: 'https://www.mon-site.com/ma-page-special.jpg'},
// Souvent identique à votre méta-description, mais pas toujours.
{property: 'og:description', content: 'J\'ai des choses ici sur mon site.'}
// Carte Twitter
{name: 'twitter:card', content: 'résumé'},
{name: 'twitter:site', content: 'https://www.mon-site.com/ma-page-special'},
{name: 'twitter:title', content: 'Titre de ma page ← Mon site'},
{name: 'twitter:description', content: 'J\'ai des choses ici sur mon site.'},
// Votre identifiant twitter, si vous en avez un.
{name: 'twitter:creator', content: '@gekkode'}
{name: 'twitter:image:src', content: 'https://www.mon-site.com/ma-page-special.jpg'},
// Google / Schema.org markup:
{itemprop: 'name', content: 'Titre de ma page ← Mon site'},
{itemprop: 'description', content: 'J\'ai des choses ici sur mon site.'},
{itemprop: 'image', content: 'https://www.mon-site.com/ma-page-special.jpg'}
]
}Le lien canonique pour le SEO vue js
Il est tout à fait possible, surtout pour les SPA, que l’URL sur laquelle un utilisateur arrive et l’URL qui représente cette page sur le serveur soient légèrement différentes, ou que quelqu’un accède à www.mon-site.com au lieu de mon-site.com ou vice-versa. Juste au cas où, vous devriez mettre un lien canonique dans votre tête pour demander aux moteurs de recherche de considérer cette URL comme l’URL prévue pour cette page.
metaInfo: {
...
link: [
{rel: 'canonical', href: 'https://www.mon-site.com/ma-page-special'}
]
}Les sitemaps pour le SEO vue js
Il n’est pas super important, du moins pour les petits sites, d’avoir un plan de site, mais un plan de site peut être utile pour indiquer aux moteurs de recherche les pages qui, selon vous, sont particulièrement pertinentes et importantes sur votre site. Vous devrez toutefois soit en générer un d’une manière ou d’une autre à partir de vos données, soit l’écrire à la main.
Un exemple de plan de site (simple) :
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://www.mon-site.com</loc>
</url>
<url>
<loc>https://www.mon-site.com/ma-page-speciale</loc>
</url>
<url>
<loc>https://www.mon-site.com/mon-autre-page-speciale</loc>
</url>
<url>
<loc>https://www.mon-site.com/page-2</loc>
</url>
</urlset>Vous pouvez inclure le sitemap dans le fichier robots.txt en ajoutant une ligne telle que
Sitemap: https://www.my-site.com/sitemap.xmlOptimisations mobiles pour le SEO vue js
Google, en tout cas, préfère les sites qui sont optimisés pour les mobiles.
Voici les problèmes qui vous donneraient un avertissement d’optimisation mobile :
- La balise méta viewport n’est pas définie. (Voir ci-dessus.)
- La largeur de la fenêtre d’affichage est fixe.
- Le contenu nécessite un défilement horizontal.
- La taille de la police est trop petite.
- Les éléments tactiles sont trop proches les uns des autres.
- Le guide de Google peut vous donner quelques indications sur la manière de corriger ces problèmes.
Vous obtiendrez également des points supplémentaires si votre site est une PWA.
Autres éléments
- Si votre site n’est pas desservi par HTTPS ou si votre configuration HTTPS est défectueuse, votre classement en pâtira.
- La vitesse de la page est un facteur important de nos jours en matière de référencement, car plusieurs moteurs de recherche préfèrent les sites qui se chargent en quelques secondes aux sites au contenu potentiellement meilleur qui sont incroyablement lents et gonflés.
- Si personne n’établit de liens vers votre site, il peut s’écouler un certain temps avant qu’il n’augmente dans les classements de recherche. Le fait de le publier sur les médias sociaux peut parfois y contribuer.
Vous pouvez utiliser Lighthouse pour tester un large éventail de problèmes susceptibles d’affecter votre classement dans les moteurs de recherche.
Prétraitement / SSR
Enfin, un SPA est, par défaut, désavantagé sur le plan du référencement, car toutes les URL sont gérées par une seule route, et les robots d’exploration devront être en mesure d’exécuter JavaScript pour rendre la page complète (un processus douteux).
Il existe deux méthodes couramment utilisées pour transformer un SPA en un ensemble de pages déjà remplies qui présentent les données sur la page avant de charger le SPA :
- Prerendering – La plus simple des deux méthodes. En gros, vous demandez à un navigateur de visiter automatiquement toutes les pages que vous voulez prérégler dans votre application au cours de votre étape de construction, et il sort le HTML qui en résulte. Vous pouvez pratiquement l’intégrer à votre étape de construction existante.
- Server-Side Rendering – SSR est un processus beaucoup plus complexe. Il vous permet essentiellement de rendre votre application sur le serveur à la demande, mais il s’accompagne d’un certain nombre d’avertissements et exige que vous conceviez votre application en tenant compte de cet aspect.
Pour la grande majorité des sites, Prerendering est la solution la plus simple, mais pour les sites très dynamiques, SSR peut être préféré.
