Table des matières
Lorsque nous développons un site Web, nous utilisons souvent JavaScript car il est idéal pour créer des sites Web innovants avec de multiples fonctionnalités côté client. L'une des technologies les plus utilisées est AJAX.Par cadres Quoi Jquery, Prototype, Mootools et d'autres, qui permettent de faire des requêtes au serveur, de recevoir le résultat et d'activer le chargement de certains contenus sur la page sans rafraîchir le web et en toute transparence pour l'utilisateur.
Actuellement, la plupart des pages Web montrent une forte dépendance à JavaScript pour créer des effets et des fonctionnalités côté client, ce qui entraîne des risques bien connus en termes de référencement, de problèmes de liens ou d'incompatibilités, de défaillances techniques, de vitesse de téléchargement, etc.
Nous verrons dans ce tutoriel quelques stratégies de développement de sites Web et d'applications AJAX éviter d'avoir des problèmes dans la branche SEO.
Avantages et inconvénients de l'utilisation d'AJAX
Les avantages en termes d'expérience utilisateur sont clairs : pages rapides, moins de surcharge pour le serveur qui ne traite que la commande et renvoie le contenu nécessaire à l'utilisateur. De nombreuses fonctionnalités web de nouvelle génération ne se font pas facilement sans l'utilisation de JavaScript ou de Jquery car cela oblige l'utilisateur à cliquer sur un élément du web et au navigateur de ne pas mettre à jour la page entière mais seulement un bloc de contenu et même afficher différentes informations pour différents utilisateurs.
L'inconvénient est que le contenu renvoyé peut ne pas être visible par les moteurs de recherche et que le bot n'analysera souvent pas le code Jquery ou Ajax. Un problème est que le contenu d'une page n'est visible que par le navigateur, mais pas sur le serveur, le mode de suivi des robots peut leur faire ne pas voir certains contenus ou que certains liens échouent car le robot ne peut pas comprendre JavaScript qui sont très complexes .
Google a continuellement fait évoluer les capacités d'exploration Ajax et Javascript de ses robots, tandis que Bing et Yahoo n'ont pas beaucoup évolué.
Même les moteurs de recherche ne peuvent pas représenter avec précision le contenu le plus pertinent pour une requête de recherche, donc une utilisation excessive de cette technologie peut entraîner un mauvais positionnement dans les résultats de recherche.
Exemples d'éléments et de blocs html améliorant le référencement
Si nous devons créer un bloc, appliquons des noms sémantiques aux classes, c'est-à-dire avec un sens qui décrit le contenu :
Exemple d'un bloc qui affiche du contenu Il vaudrait mieux donner un sens plus sémantique à chaque bloc de code html pour que les robots puissent comprendre quel contenu ils vont montrer : La structure est claire pour être tracée même si le contenu n'a pas été généré dans le HTML. Étant donné que le balisage sémantique contient des mots-clés, il est important d'utiliser des balises HTML appropriées pour le contenu, en cas de doute, nous pouvons consulter le manuel W3school Html.
A l'instar des listes ordonnées ou non, l'un des objectifs des listes de définition est d'afficher la liste des contenus ciblés, comme dans le cas ci-dessus, il peut s'agir d'actualités ou d'une liste de produits. Cela permet une plus grande densité de mots-clés, moins d'encombrement de code.
L'un des aspects les plus importants est que le contenu que Javascript génère pour l'utilisateur est le même contenu exactement le même que celui présenté aux moteurs de recherche ou aux robots de recherche.
Google indique comme solution possible que si notre site Web comprend des technologies auxquelles les moteurs de recherche ne peuvent pas accéder ou ne peuvent pas interpréter, telles que JavaScript ou Ajax, alors nous devons utiliser un texte descriptif ou des signets afin que ces éléments puissent indiquer à quel contenu correspondrait sera affiché et ainsi améliorer l'accessibilité du site. De nombreux utilisateurs utilisent des appareils mobiles, des navigateurs non standard, des logiciels obsolètes et des connexions lentes, de sorte qu'ils peuvent avoir des problèmes lors de l'affichage du contenu ou de l'utilisation de certaines fonctionnalités.
Liens et paramètre par URL
Google préfère utiliser le hashbang en paramètre dans une url, car ainsi il vous sera plus facile d'interpréter vos liens lorsque nous passerons un hastabang au site en paramètre.
Un exemple largement utilisé est sur le site Twitter. Google l'utilise pour conserver et demander le contenu de cette page statique. Pour montrer ce que contiennent les URL réécrites, voici quelques exemples :
Cette URL générée par certaines requêtes est meilleure et plus sémantique pour le référencement
www.miweb.com/#!madrid/productos
Ces deux URL sont plus difficiles à comprendre pour les robots, mais sans aucun doute la dernière améliore quelque peu la sémantique.
www, miweb, com /? tmp = madrid / produits
www.miweb.com/?ciudad=madrid&seccion=productos
Tant que nous pouvons faire SEO sémantique au contenu généré et afficher le même contenu qu'un utilisateur verrait dans les moteurs de recherche, ce n'est pas un gros problème.
Barres de navigation et onglets coulissants
Dans le cas d'avoir le contenu distribué dans des onglets, où le contenu change à l'aide de jquery ou d'un autre framework en fonction de l'onglet dans lequel nous nous positionnons, il doit y avoir une url indépendante pour chaque onglet, lorsque l'utilisateur clique sur un onglet une requête peut également être apportées au serveur pour générer un contenu complètement nouveau. La structure de chaque lien pourrait être quelque chose comme :
www.miweb.com?tab=ventes
www.miwebe.com/?tab=clientes
www.miweb.com/?tab=productos
L'astuce avec les onglets est réalisée avec CSS et Javascript, le serveur renvoie le contenu de tous les onglets avec la première requête de page. Lorsque l'utilisateur clique sur un onglet, les classes définies en CSS font que le navigateur masque le contenu associé à un onglet et n'affiche que le contenu lié à l'onglet cliqué, tandis que les autres sont masqués, mais ils sont dans le code c'est autorisé , il est donc bon de donner un sens sémantique à la structure.
Il est également très important de ne pas autoriser l'exploration de fichiers Javascript ou CSS dans le fichier robots.txt de notre site Web car cela peut nuire au positionnement et à l'indexation de votre contenu et peut entraîner un échec des statistiques d'exploration.
L'une des lignes directrices de Webmestre de Google Il dit spécifiquement de ne pas autoriser le suivi de ces fichiers, mais ni de les bloquer ni de les masquer aux robots.
Google Webmaster Tools pour vérifier et analyser le crawl
Outils Google pour les webmasters nous donne la possibilité d'informer google, en vérifiant la propriété de notre site Web. Veuillez vous connecter avec votre compte Google ou Gmail et nous pourrons ensuite vérifier notre site Web.
Le robot met environ deux semaines pour que les liens s'affichent correctement dans la recherche Google.
Il n'y a pas de moyen simple de s'assurer que tout fonctionne, mais il existe des outils pour vous aider à voir ce qui se passe. Le mieux est d'utiliser l'outil Explorer comme Googlebot, qui nous montre exactement ce que Google voit lors de l'exploration du site Web. Vous pouvez accéder aux outils Google pour les webmasters dans Diagnostics.
En utilisant les outils Google pour Webmasters Tools, nous pouvons vérifier les liens indexés et corriger ou supprimer ces liens afin que votre site Web soit optimisé pour les moteurs de recherche et contienne des liens sans risque d'être pénalisés qui contribuent à améliorer votre référencement, entre autres fonctionnalités.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
