'>

Fixation 5 problèmes courants SEO avec HTML5 ... Aujourd'hui!

Depuis quelques temps, vous avez probablement entendu des conversations sur la façon dont un problème ou un autre serait beaucoup plus facile résolu avec HTML5, mais parce que X pour cent des utilisateurs sont encore sur IE nous ne pouvons pas "passer à HTML5".

Cependant, en réalité, HTML5 n'est pas quelque chose que vous devez «allumer» - ce n'est pas une grande chose. Pensez HTML5 non comme un outil mais comme un ensemble d'outils, une collection de nouvelles fonctionnalités, dans de nombreux cas indépendants les uns des autres. Ce message porte sur la prestation de référencement de HTML5, et si nous nous concentrons sur ce que Google et co. peut interpréter et non avec la compatibilité du navigateur. Il n'est pas nécessaire pour un navigateur de reconnaître toutes les balises d'une page, aussi longtemps que nous ne perturbent pas sa capacité à rendre cette page (et si le navigateur reçoit un certain avantage aussi, c'est encore mieux). Cependant, nous allons aborder ce que les navigateurs font et ne prennent pas en charge et comment cela se rapporte à la SEO, il ya beaucoup de bits dans la boîte à outils HTML5 que les navigateurs n'ont absolument aucun problème avec, et où ils le font, nous pouvons souvent aider.

Nous allons nous pencher sur certains problèmes courants rencontrés avec la SEO, et discuter de la façon HTML5 pourraient aider à les résoudre. Je suis sûr qu'il ya beaucoup d'autres situations où HTML5 pourrait nous aider, mais j'ai choisi 5 pour y aller avec. Notez que tous ne sont pas de ces scénarios ouverture et de fermeture, mais je pense qu'ils sont tous les scénarios où il HTML5 peut fournir une mesure d'aide, que ce soit maintenant ou dans un avenir très proche.
Problème 1: Pagination

Enjeux: le duplicate content, rampent budgétaire, les flux de jus

Pagination sur un site eCommerce Vous avez une tonne de pages, par exemple des produits d'inscription dans une catégorie particulière, qui sont des apartés complètement identiques à partir de quel sous-ensemble de vos produits sont répertoriés sur eux. Maintenant, vous voulez vous assurer que vous vous situez, mais vous ne voulez pas non plus à rencontrer des problèmes de duplicate content, ou perdez pas votre budget crawl laisser Google ramper sur des centaines de pages qui n'ajoutent aucune valeur. Cependant, peut-être que vous ne voulez qu'ils soient analysés pour s'assurer que le contenu est indexé? Peut-être que vous voulez qu'ils rampé mais êtes au courant de ces mêmes produits sont classés dans différents groupes et des séquences en différentes catégories et vous sont préoccupés par les implications de cette. Si seulement vous pouviez juste dire Google: "Hey! Ces pages sont paginés listes, veuillez donc les traiter en conséquence ".

Il s'agit d'un scénario commun pour de nombreux sites, notamment des sites de commerce électronique, mais tout un problème commun, il est encore quelque chose que nous voyons beaucoup de clients aux prises avec. En outre, souvent les clients auront un caprice de site spécifique ou préférence qui rend moins simple que ce qu'il devrait être.

Malheureusement Googlebot n'est pas encore sensible et si nous ne pouvons pas discuter avec le petit gars tout de suite, nous devons donc trouver un autre moyen. Entrez HTML5 et les liens séquentiels:

Une séquence de documents est celui où chaque document peut avoir un frère précédent et un frère suivant. Un document sans frère précédent le début de sa séquence, un document sans frère suivant la fin de sa séquence.

Un document peut faire partie de plusieurs séquences.

Source: W3 spécification HTML5

Qui détaille assez précisément notre problème! Alors, comment faire le travail "liens séquentiels de? Bien sûr, via notre vieil ami l'attribut rel. Précédemment votre page précédente et page suivante boutons aurait pu ressembler:

 <a href='products.php?page=3'> Page précédente </ a>
 <a href='products.php?page=5'> Page suivante </ a>

Nous ajoutons simplement les attributs rel en conséquence:

 <a href='products.php?page=3' rel='prev'> Page précédente </ a>
 <a href='products.php?page=5' rel='next'> Page suivante </ a>

Cela envoie un signal clair que ces pages sont une séquence qui vont ensemble, et évidemment cette information sémantique est un moyen propre pour laisser Google, Bing et autres moteurs connaissent cette relation.

Maintenant, ce n'est pas un argent-balle et je ne recommanderais pas ce que vous faites juste cela et rien d'autre, mais je vous recommande absolument que vous fassiez ajouter ces attributs à vos liens de pagination. Ce n'est pas la solution complète, car il ya des «séquences» de documents qui ne sont pas les feuilles de style de la liste de produits (par exemple les sections de l'initiation) et nous n'avons pas encore avoir une image complète de combien Google va faire confiance à ces attributs. Cependant, plus vous pouvez indiquer à Google au sujet de votre contenu le mieux vous aider (Google est une fille?) Comprendre et indexer votre contenu, et ces attributs sont un indicateur fantastique de Google et un bon endroit pour commencer.

Actions: Déployer rel Prev / Next sur ​​les liens de pagination.
Problème 2: Structure de la page

Enjeux: indexation précise, le budget d'exploration, SERP CTR, les flux de jus

Depuis des années, on nous a rappelé à plusieurs reprises de se concentrer sur HTML sémantique. A l'origine l'accent sur ce qu'il avait fait le rendu du contenu à travers les dispositifs et les formats beaucoup plus facile quand il est soigneusement classé: HTML pour le contenu et la signification, CSS pour la présentation et le style, et le Javascript pour le comportement supplémentaire. Retrait quelque chose dans votre HTML qui était juste là pour la présentation n'était pas trop difficile, mais la gestion de définir complètement la signification du contenu avec HTML était à peu près impossible - HTML n'était tout simplement pas une langue assez riche. Microformats commencé inondations en essayant de combler certaines des lacunes, mais le fait est que le HTML est resté mal équipé pour cette tâche.

Une fois de plus, HTML5 précipite pour sauver la journée! Il ne fournit pas toutes les réponses, mais il ne va un long chemin à aider en fournissant toute une série de nouvelles balises que nous pouvons utiliser pour organiser le contenu du web et donne Google et les moteurs beaucoup plus d'aide dans l'interprétation de nos sites. Certaines de ces étiquettes comprennent:

 <section>
 <header>
 <footer>
 <article>
 <hgroup>
 <aside>
 <nav>

Il s'agit principalement trait à ce que vous attendez et je ne vais pas les décrire en détail chaque ici, si vous souhaitez en savoir un peu plus sur eux, puis consultez excellente de w3schools HTML5 Tag référence .

Je vais vous donner quelques exemples ...

Auparavant, les éléments constitutifs de la plupart des pages ont été séparés avec la balise div surmené:

 <div id="myarticle">
 ...
 </ Div>
 id="extrafacts"> <div
 ...
 </ Div>

Toutefois, dans le HTML5, nous avons un éventail beaucoup plus large de balises d'attribuer une signification sémantique pour ces éléments, de sorte que le même exemple peut ressembler à ceci:

 <article>
 ...
 </ Article>
 <aside>
 ...
 </ Aside>

Vous devriez voir immédiatement la différence - les balises elles-mêmes transmettre maintenant quelques informations sur ce qu'ils contiennent. Pour n'importe quel moteur de recherche tente d'interpréter la page et cataloguer les informations sur cette page ayant ces indicateurs donne un avantage énorme.

Comme autre exemple, nous pouvons maintenant briser pages vers le haut beaucoup plus nettement; envisager le problème de la balise H1 traditionnel, et de regarder cet exemple:

Google Actualités Top Stories

Quel est le H1 appropriée sur cette page? Le fait est que toutes les pages ne se prêtent pas à être divisé avec un titre principal. HTML5 utilise une approche plus sensible un nous permet d'avoir plusieurs
et
éléments et multiples H1S sur une page:

 section> id="finance">
 <header>
 <h1> </ h1>
 </ Header>

  ...
 <footer>
  </ Footer>
 </ Section>
 id="entertainment"> de section>
 <header>
 <h1> </ h1>
 </ Header>

  ...
 <footer>
  </ Footer>
 </ Section>

HTML5 est assez intelligent pour comprendre que ces
et
éléments sont les en-têtes et pieds de page pour leurs balises parentes.

Pour un référencement ce qui rend structurer une page beaucoup plus facile, et pour un moteur de recherche, il rend les pages beaucoup plus facile à interpréter et qui aide à l'indexation précise.

Ce n'est pas tout à fait clair comment Google gère tout ce nouveau illuminée trouvé, alors je vous conseille une approche pragmatique pour le moment. Si vous êtes à l'aise avec de multiples éléments H1, alors vous pouvez toujours utiliser les autres éléments. Vous trouverez probablement que la plupart des projets, il ya des éléments de ceux-ci que vous pouvez inclure déjà.

Patience ... une dernière chose avant de vous plonger dedans!

Avec Firefox, Chrome de Safari vous serez en mesure d'appliquer les CSS pour ces nouveaux tags à droite de la porte, mais pour un certain autre navigateur, ce n'est pas le cas ... Dans IE ces balises seront inaccessibles à CSS sans un peu d'aide . Heureusement, il ya une solution là-bas sous la forme de la source libre et ouvert html5shiv . Télécharger ce peu intelligent de Javascript et de l'installer et vous vous apercevrez que vous êtes bon pour aller. Prenez ce IE!

Actions: commencer progressivement refactoring vos conceptions de la page pour intégrer lentement ces nouveaux éléments. Commencez remplaçant ou complétant les balises div génériques avec ces nouveaux tags.
Problème 3: pages de recherche internes

Enjeux: indexation précise, le duplicate content, le budget d'exploration

Qu'advient-il si vous parcourez la page des résultats de Google Bing Bing pour googler? Eh bien, rien en fait, car ils bloquent avec robots.txt, mais mon point est quand un moteur de recherche commence à ramper résultats les pages d'un autre moteur de recherche l'univers reçoit mal à l'aise.

Maintenant, si vous disposez d'une fonction de recherche interne sur votre site, la réponse standard serait de bloquer avec robots.txt et arrêter le cauchemar infernal qui peuvent par ailleurs résulter. Cependant, certains sites se fondent réellement la fonction de recherche avec les systèmes de navigation étranges ou même utiliser les résultats de la recherche comme un moyen de lister certaines catégories de produits qu'ils Lien vers. La meilleure solution est de fixer le site IA et en faire un non-problème, mais il n'est pas toujours aussi facile qu'il devrait l'être.

En outre, vous pouvez trouver beaucoup de gens un lien vers les pages de résultats et, dans certains cas, vous voudrez peut-être qu'ils indexés.

Eh bien, HTML5 offre un moyen rapide et facile de laisser Google sait ce qui se passe ...

 <a href='/search.php' rel='search'> Rechercher dans le site </ a>

Cela permet aux moteurs de recherche savent que la page cible est un moteur de recherche, et non à son répétitif mais c'est un signal très utile, vous pouvez être fournir les moteurs de recherche et prendra toutes les 20 secondes à ajouter à chaque maillon nécessaire. Alors que vous êtes là, vous voudrez peut-être consulter opensearch.org qui permet aux choses sérieusement cool - y compris en laissant les navigateurs découvrent votre fonction de recherche et à l'intégrer directement dans la barre de recherche de votre navigateur.

Actions: Ajouter rel recherche à tous les liens vers tout sur ​​les fonctions de recherche du site.
Problème 4: Les microformats = schema.org

Questions: partage social, SERP CTR, riche extraits

Microformats et RDFa existe deux formes d'ancrer les méta-données lisibles par machine dans notre page web qui sont à la fois très bien connu dans la communauté SEO. Microformats et RDFa ont vu une reprise marquée en usage depuis Google a introduit rich snippets en 2009, permettant référenceurs pour ajouter un peu de bling à leurs listes SERP:

Exemple d'extrait riche

Microdonnées à grande diffusion est une autre forme, et fait partie de la spécification HTML5, mais il est resté un peu dans l'ombre et n'a pas vu l'adoption généralisée des autres.

Plus récemment, il y avait le communiqué de schema.org de Google, Bing et Yahoo. Avec beaucoup d'excitation ce qui semble avoir causé une certaine confusion avec de nombreux référenceurs pensant que cela soit un nouveau format.

Schema.org n'est pas un format ou une langue en soi, mais c'est en fait un vocabulaire qui les moteurs de recherche sont tous d'accord pour comprendre et respecter. Elle établit quels types d'entités et les attributs que vous pouvez insérer dans les métadonnées sur vos pages web et garanties que tous les moteurs vont comprendre ces.

MAIS, et c'est là que le bât blesse ....

Le vocabulaire de schema.org n'est disponible que pour ceux qui parlent dans le format de microdonnées.

Vous ne pouvez pas l'utiliser avec les microformats ou le format RDFa actuellement. Les moteurs disent que cela va changer dans le temps, mais en attendant, si vous voulez profiter du vocabulaire schema.org vous avez besoin de microdonnées à grande diffusion de l'HTML5.

Le site schema.org lui-même a beaucoup de détails sur la façon d'utiliser les microdonnées et le mettre sur vos pages Web, afin obtenir là-bas et obtenir la lecture.

Heureusement, vous n'êtes pas obligé de choisir entre ces formats, et Google ont confirmé qu'il est autorisé à avoir ces différents formats sur la même page Web baliser les mêmes métadonnées. Donc même si vous avez des microformats ou RDFa vous pouvez toujours utiliser microdonnées à grande diffusion avec schema.org, et je vous encourage à le faire. Je ne pense cependant que Google vont commencer à montrer une préférence pour les métadonnées en utilisant le vocabulaire de schema.org.

Actions: Intégrer de microdonnées à côté de microformats et RDFa vous avez déjà. Rechercher de nouvelles occasions d'utiliser ces formats.
Problème 5: AJAX et les URL

Enjeux: indexation précis, le partage social, les flux de jus

Celui-ci est bien connu et détesté par presque tous les SEO que jamais il y avait. Les sites AJAX sont vraiment agréable pour les utilisateurs et d'améliorer l'expérience utilisateur beaucoup .... jusqu'au moment où l'utilisateur tente d'ajouter la page qu'ils sont sur, ou par courriel à quelqu'un, ou partager via les médias sociaux, ou utiliser le bouton de retour, ou trouver la page de leur histoire le lendemain.

AJAX et SEO simplement n'ont jamais été conçus pour mélanger, et maintenant nous sommes dans un monde où les gens veulent à la fois. Si vous avez réussi à éviter ce problème et ne sont pas conscients, c'est alors que je vais vous présenter brièvement ce ... AJAX permet à une page Web, via l'utilisation de javascript, mettre à jour le contenu d'une page sans vraiment recharger la page, une nouvelle requête HTTP sera envoyée et le nouveau contenu sera probablement remplacer un vieux contenu sur la page, mais parce que la page ne se recharge pas l'URL ne change pas.

La méthode traditionnelle pour résoudre ce afin d'assurer la Googlebot peut araignée le contenu est simplement de s'assurer que les appels AJAX sont accrochés à <a> traditionnels de sorte que vous pouvez inclure un href à une version de ce même contenu que Google va chercher (et de loin Trop souvent encore, cela n'a pas été fait - ce qui signifie que le contenu est coincé et ne sera jamais indexé). C'est très bien pour l'aspect exploration de SEO, mais aujourd'hui, nous devons tenir compte du fait que les parts sociales sont un aspect important de SEO trop et si l'utilisateur ne peut pas copier et coller l'URL correcte alors vous êtes déjà handicapé.

Donc, vous l'aurez deviné, HTML5 vient à la rescousse en proposant de nouvelles fonctionnalités DOM que nous pouvons utiliser avec javascript pour modifier dynamiquement l'URL dans la barre d'adresse sans recharger la page. Il s'agit dans la forme de history.pushState () et de ses méthodes associées (replaceState () et popState ()):

 var stateObj = {foo: "bar"};
 history.pushState (stateObj, "page 2", "bar.html");

Non seulement history.pushState () ne permet de mettre à jour l'URL à la volée, mais il pousse ces nouvelles URL à l'histoire des navigateurs, afin que l'utilisateur peut utiliser le bouton de retour comme prévu et trouver la page de leur histoire plus tard.

Découvrez cette démo de démo de HTML5 pushState .

Malheureusement, IE ne supporte pas encore pushState même avec IE9 et si vous ne pouvez pas complètement oublier l'aide horriblement solutions qui utilisent le #, mais il ya heureusement une solution pré-intégrée qui fait le repli pour IE pour vous. Vous ne devriez pas laisser le fait que cela ne peut pas fonctionner sur IE vous rebute intégration pour les autres navigateurs si, il est préférable de permettre à ces fonctionnalités améliorées pour certains utilisateurs que rien du tout.

Actions: La prochaine fois que vous êtes impliqué dans la phase de conception d'un site AJAX intègrent PushState dans la solution. Voir également la refactorisation du contenu AJAX vous avez déjà.
Conclure

HTML5 héros et IE combats de menace HTML5 et les technologies connexes sont incroyablement excitant pour le référencement, les utilisateurs et le Web dans son ensemble. Cependant, il est toujours va être un certain temps avant qu'il puisse être déploiement généralisé de nombreuses fonctionnalités principalement grâce au fait que même la dernière version d'Internet Explorer ne tente même pas de soutenir certaines fonctionnalités.

Mais en attendant, il ya certainement des éléments qui peuvent être utilisés pour le référencement et les pièces qui peuvent être utilisés pour des fonctions utilisateur, et j'encourage tout le monde à adopter ces possibles où. Si il ya certaines fonctionnalités que vous souhaitez déployer pour les utilisateurs qui ont des navigateurs modernes, tout en soutenant ceux qui utilisent des versions qui n'ont pas cette fonctionnalité, vous devriez vérifier cette vaste collection de solutions de repli HTML5 cross-browser .
Où allez-vous?

Pour ma part, je me demande ce que les extensions les moteurs de recherche eux-mêmes pourraient offrir une fois HTML5 voit une adoption plus large. Maintenant que les messages Google+ manifestent dans les SERPs, aime Tweets avant eux, nous assistons à une migration loin de «recherche web 'sens de chercher des pages web, et plus vers elle signifie la recherche d'informations Web. Peut-être que nous allons bientôt voir le jour où nous pouvons utiliser rel canonique sur l'
<section> et
<article> balises de type, ce qui serait vraiment nous permettre une certaine souplesse sans être niggled des doutes sur le duplicate content.

Ensuite, il ya WAI-ARIA , un cahier des charges distinct portant sur ​​les applications web, mais qui est comptabilisé dans HTML5 . Avec l'attribut son «rôle» nous prenons les premières mesures en vue d'être en mesure de dire robots sur le comportement de nos pages web et pas seulement de leur contenu.

La chose que je sais, c'est que HTML5 est à venir, et chaque SEO doit se mettre au diapason. Si vous pouvez démarrer non seulement HTML5 apprentissage maintenant, mais le déploiement déjà aspects de celui-ci, alors vous allez être bien placé lorsque la force de frappe sur le web HTML5. Rendez-vous de l'autre côté! 
Publié par Drupal Study