Améliorer son score SEO avec VueJS + NuxtJS

Tout le monde se secoue ! 

J’ai commencé (vendredi 15 mars 2019 à 12h32) la rédaction d’un article au doux nom de « Améliorer son score SEO avec VueJS + NuxtJS » et j’ai pour objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limites pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Vous pourrez consulter la bêta à votre guise à l’adresse suivante :

Merci !

PS de la folie: l’article n’est pas terminé, je ne pensais pas que la bêta le publierait pour tous les membres de ZdS ! En revanche il est déjà bien entamé donc n’hésitez pas à faire de premiers retours !

Intéressant, j’ai également était confronté au SEO avec Vuejs/Nuxt, sauf que moi c’était dans le cadre d’une webapp que j’ai dev pour un jeu.

Un point qu’on pourrait noter (ce n’est pas du SEO là), dont je me suis rendu compte que très récemment, c’est que lorsqu’on est en SPA, vue qu’on ne change pas vraiment de page, il est plutôt recommandé de stocker tous ses cookies sur / sinon bah… on n’a pas accès aux cookies des autres pages exemple, si je vais de /foo à /bar lorsque j’arrive sur /bar j’aurais toujours les cookies de /foo (et implicitement /) mais pas /bar.

Pour revenir au SEO, pour ma part, le site que j’ai dev est hébergé sur github, du coup, pas de SSR, tout est généré à l’avance, pour le SEO, j’intègre donc à la compilation des éléments utiles pour le SEO, je ne sais pas si c’est la meilleure solution, mais ça fonctionne très bien.

Enfin, dans le cadre d’un site multilingue (c’est le cas du mien) de mon point de vue (je n’ai pas regardé ce que disaient les autres sur internet à ce sujet), il faut utiliser une sous page (monsite.com/fr), voir un sous-domaine (fr.monsite.com) pour optimiser le SEO suivant la langue (et ne pas oublier de le rajouter dans l’attribut lang de la balise html).

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Voilà, j’ai terminé la première version de cet article ! J’attends de le relire à tête reposée avant d’en demander une validation, mais vos retours sont toujours les bienvenus en attendant  !

@heziode: C’est une façon de faire ! Je trouve personnellement (question de goût), qu’il est plus simple et maintenable d’avoir une approche par page comme avec Nuxt, où l’on peut vraiment avoir une gestion très fine des métadonnées, des données structurées, etc… qu’une approche globale sensée gérer un peu tout.

Merci beaucoup pour l’info sur les cookies, c’est intéressant  !

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Version finale, j’attends quelques avis avant d’envoyer en validation !

@kern047,

Je trouve personnellement (question de goût), qu’il est plus simple et maintenable d’avoir une approche par page comme avec Nuxt

Pour rebondir sur ce que tu avais dit, j’ai fais comme cela car lors de la génération du code static en SPA avec la commande generate, il ne fait pas le rendu des head contenu dans le code (cf cette issue), il regarde uniquement ce qu’il y a dans le nuxt.config.js.

Bonjour !

Petite question : cela va faire bientôt un mois que l’article est en validation. Je comprends tout à fait si c’est du fait que l’équipe soit occupée, j’aimerais juste m’assurer qu’il n’y a aucun soucis avec l’article ou que je n’ai rien loupé  !

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Juste une petite remarque sur le code ci-dessous.

  robots: {
    Disallow: '/admin',
    Sitemap: `${process.env.WEBSITE_URL}/sitemap.xml`
  }

Dans l’option Disallow, il me semble qu’il manque la page /login mentionnée plus haut comme étant déclarée exclue du Sitemap.

    exclude: [ // les pages qu'on a pas trop envie de voir atterrir sur Google
      '/login',
      '/admin/**'
    ],

Dans le première partie, peut-être dire quelques mots sur Nuxt, expliquer ce que c’est, etc.

Il manque le Disallow: '/login' dans la conf du robots.txt.

Pour la validation de JSON+LD, google propose également un outil de validation des données structurées ce qui est très pratique pour tester la bonne structuration de nos données. Ça peut même être tester en local via local-tunnel.

Il me semble également pertinant de préciser le remarques que j’avais fait pour ceux qui ne font pas de SSR mais qui génère le site (site statique).

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Salut à vous deux ! Merci beaucoup pour les retours !

J’ai modifié le fichier robots.txt, et ajouté différents passages sur les différents points évoqués, notamment les outils externes disponibles et la possibilité de se passer de SSR avec l’implémentation que tu as montrée @Heziode.

En revanche, pour expliquer Nuxt je ne vois pas tellement quoi ajouter à ce passage :

Mais ne vous enfuyez pas, il existe une solution ! Le Server-Side Rendering (SSR) ! Cela permet de générer à l’avance le HTML final de vos pages, et donc vos balises META. Quand /produits/mon-super-produit sera appelé, le serveur répondra avec les métadonnées correspondant à votre produit, qui sera correctement indexé ! Sauvés !

Pour faire du SSR avec VueJS, nous allons utiliser NuxtJS !

J’explique ce qu’est le SSR avant de dire que NuxtJS est l’outil utilisé pour en faire avec VueJS. Je pense qu’une introduction supplémentaire serait assez redondante !

En fait de la façon dont c’est écris on le comprend comme : Nuxt js permet de faire du SSR avec Vue.js

Or c’est par vraiment ça. Nuxt est bien plus que cela, le SSR est une de ces méthodes de rendering, et il ne fait pas que du rendering car il fournis également tout un éco-système, une structure de projet pour organisé son codi, etc.

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Je viens d’ajouter la précision

comme par exemple cette implémentation.

Peut-être rajouter quelque chose comme cela : comme par exemple cette implémentation, qui fait du « pre-rendering », aussi appelé « Static Site Generation » au lieu de faire du SSR.

Sinon pour moi c’est ok.

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

Voilà j’ai ajouté la phrase. J’avoue que certaines de ces modifications ne sont pas tellement à mon goût car je trouve que ça ajoute des informations un poil superficielles et déviant du sujet d’origine, ça change le ton de l’article sur ces passages qui était assez concis dans l’ensemnble, mais j’espère qu’on pourra enfin le valider  !

Merci beaucoup en tout cas !

Bonjour,

La bêta du contenu « Améliorer son score SEO avec VueJS + NuxtJS » a été désactivée.