Le SEO c\u2019est quoi\u00a0?<\/h2>\n
Le SEO c\u2019est l\u2019ensemble des techniques utilis\u00e9es pour s\u2019assurer qu\u2019un site ressortent bien dans les pages de r\u00e9sultats des moteurs de recherche. Le r\u00e9f\u00e9rencement naturel (SEO) est une pratique int\u00e9ressante car elle recoupe pas mal d\u2019aspects techniques de l\u2019accessibilit\u00e9 Web tout en prenant en compte les besoins des utilisateurs d\u2019un point de vue contenu. Le but ultime est de r\u00e9pondre aux besoins des gens avec les bonnes informations au bon moment.<\/p>\n
Pourquoi est-ce que le SEO, c\u2019est important\u00a0?<\/h2>\n
En tant que programmeur ou d\u00e9veloppeur, c\u2019est normal de se demander \u00e0 quoi sert cette pratique qu\u2019on associe au marketing en ligne. C\u2019est assez simple, Google fait la pluie et le beau temps en ce moment. Il y a des dizaines de milliards de recherche faites sur Google par mois et cela ne fait qu\u2019augmenter. R\u00e9sultat des courses, m\u00eame le plus beau site au monde, avec un code impeccable ne sert \u00e0 presque rien s\u2019il n\u2019est pas index\u00e9 correctement.<\/p>\n
Notions de base pour comprendre le SEO technique<\/h2>\n
Pour bien se classer dans Google ou tout autre moteur de recherche, il est important d’avoir une compr\u00e9hension de base du fonctionnement des moteurs de recherche.<\/p>\n
Comment est-ce que Google lit un site ?<\/h3>\n
Il y 3 phases: crawl<\/span>, indexation, pr\u00e9sentation des r\u00e9sultats. Les bots savent ex\u00e9cuter du JS mais des fois, ils prennent votre code pour de la prose\u2026<\/p>\n <\/p>\n Ce qui nous int\u00e9resse plus particuli\u00e8rement dans cette illustration du processus de Google, c\u2019est les phases de d\u00e9couverte, de crawl<\/span> et d\u2019indexation. Durant la d\u00e9couverte, le bot se balade \u00e0 travers le Web \u00e0 la recherche de contenus pertinents. Puis, le bot explore les pages sur le Web selon un processus algorithmique. Suite \u00e0 cela, chaque page est index\u00e9e selon son contenu (texte, image et code).<\/p>\n Le web moderne est plus compliqu\u00e9 qu\u2019on ne le pense. Parfois, les bots ont du mal \u00e0 comprendre ce qui leur est pr\u00e9sent\u00e9 :<\/p>\n Googlebot peut lire du javascript mais il se met en place un backlog pour d\u00e9terminer quelles pages sont trait\u00e9es en priorit\u00e9.<\/p>\n Google a un processus d\u2019indexation en deux vagues :<\/p>\n Des pages lentes \u00e0 se charger peuvent impacter le crawl<\/span>. On vous conseille donc d\u2019aller vers du rendu hybride ou c\u00f4t\u00e9 serveur (SSR – Server Side Rendering<\/span>). Miser sur du SSR ou bien un rendering hybride<\/p>\n Cela permet \u00e0 Google de mieux d\u00e9couvrir vos pages via les liens dans le contenu. Si les liens sont dans le HTML initial, Google peut commencer \u00e0 passer \u00e0 travers la liste de suite !<\/p>\n Attention il faut imp\u00e9rativement s\u2019assurer que les robots et pas uniquement les navigateurs ont droit au \u201crendering<\/span>\u201d !<\/p>\n Voici un lien vers la documentation officielle de Google<\/a> pour vous aider. Vous pouvez aussi contourner le probl\u00e8me avec du dynamic rendering<\/span> pour sp\u00e9cifier au bot avec un user-agent<\/span> de moteur de recherche qu\u2019il a droit \u00e0 un rendering<\/span> \u00e0 part. Voici les outils que l\u2019on vous conseille dans ce cas l\u00e0 : Puppeteer<\/a> et Rendertron<\/span>.<\/p>\n Faites attention \u00e0 la fa\u00e7on dont vous mettez en place vos liens :<\/p>\n S\u2019il vous pla\u00eet ne faites pas des trucs pareils, cela me fait pleurer des larmes de sang :<\/p>\n Vous pouvez tester vos redirections<\/a> pour vous faire une id\u00e9e, ou regarder du c\u00f4t\u00e9 de Search Console<\/span>, Google vous remonte ce type d’alerte.<\/p>\n Voici les quelques conseils simples \u00e0 prendre en compte quand on veut optimiser les images pour le r\u00e9f\u00e9rencement naturel :<\/p>\n Fin 2017, de nouvelles r\u00e8gles arrivent pour le positionnement des sites sur Google mobile. Malheureusement, tout le monde n\u2019est pas n\u00e9cessairement au courant que Google dispose d\u2019un index mobile d\u00e9di\u00e9. Voici quelques conseils pour couvrir les bases du SEO mobile :<\/p>\n Validez si tout est approuv\u00e9 dans l\u2019outil de test mobile de Google<\/a>.<\/p>\n C\u2019est un \u00e9l\u00e9ment qui compte pour le positionnement SEO, pensez \u00e0 les composer en suivant ces<\/p>\n Un argument marketing de taille, pensez donc \u00e0 respecter quelques r\u00e9gles simples :<\/p>\n Il faut indiquer la langue en utilisant Href lang :<\/p>\n Un fichier Un ![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/problem-with-ionic-in-seo@2x.jpg\")
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/publish-discover-crawl-index-rank@2x.jpg\")
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/body-app-root-seo@2x.jpg\")
<app-root><\/code> et 3 fichiers JavaScript.<\/figcaption><\/figure>\nGoogle Bot et le JavaScript : tout un parcours du combattant<\/h2>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/html-rendering-process@2x.jpg\")
<\/p>\nLe rendering<\/h3>\n
\n
Comment tester si \u00e7a fonctionne bien ?<\/h3>\n
\n
L\u2019art de tisser des liens en JS<\/h2>\n
\n
onclick<\/code> est accept\u00e9.<\/li>\n<a href="#" onclick="goTo('stuff')">Still wrong! \u0ca0_\u0ca0<\/a>Attention aux r\u00e9ponses HTTP<\/h2>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/http-error@2x.jpg\")
\n
Les images et le SEO<\/h2>\n
\n
Conseils pour le SEO mobile<\/h2>\n
\n
\n
Et si on vous emb\u00eate avec les balises meta<\/h2>\n
La meta Title<\/h3>\n
\n
Meta descriptions<\/h3>\n
\n
Et si le site est bilingue ?<\/h2>\n
\n
\/fr\/<\/code> et \/en\/<\/code> ou bien si vous avez plusieurs pays \u00e0 couvrir \/fr-ca\/<\/code>, \/fr-be\/<\/code>, \/fr-fr\/<\/code>, etc.<\/li>\nlang<\/code> dans votre code. Par d\u00e9faut celui-ci est plac\u00e9 sur l\u2019\u00e9l\u00e9ment html<\/code> (root) de la page. Vous pouvez changer cet attribut \u00e0 n\u2019importe quel moment au sein de votre code si la langue change en cours de route. (et si vous utiliser WordPress, ce plugin pour ajouter des attributs hreflang et lang<\/a> peut vous servir)<\/li>\nsitemap.xml<\/code> ou bien dans l\u2019en-t\u00eate HTTP (Helmet<\/a> est l\u00e0 pour \u00e7a en React)<\/li>\nLes fichiers SEO \u00e0 conna\u00eetre<\/h2>\n
Le fichier robots.txt<\/h3>\n
robots.txt<\/code> est \u00e0 la racine et indique le sitemap.xml<\/code>. Il ne doit pas \u00eatre utilis\u00e9 pour d\u00e9sindexer les pages. Le meilleur moyen de vous orienter ici est de vous inviter \u00e0 lire la documentation plut\u00f4t claire de Google sur le robot.txt<\/a>.<\/p>\nLes fichiers sitemap.xml<\/h3>\n
sitemap.xml<\/code> est une carte de route du site Web que l\u2019on soumet \u00e0 Google pour aider l\u2019indexation. Le maximum d\u2019URLs pouvant \u00eatre contenus dans ce fichier est de 50,000. Apr\u00e8s cela, il faut cr\u00e9er un fichier sitemap_index.xml<\/code> qui va lister les autres sitemap.xml<\/code> du site. Aujourd\u2019hui, beaucoup de plugins g\u00e9n\u00e8rent automatiquement plusieurs sitemap.xml<\/code> avec un fichier index. Il faut \u00e9viter de lister les pages 404, canoniques ou bien no-index dans ce document. Il existe diff\u00e9rents types de sitemap.xml<\/code> : son, images, vid\u00e9o, news, etc.<\/p>\n