pushState et référencement

Question

Beaucoup de gens ont dit, utilisez pushState plutôt que hashbang.

Ce que je ne comprends pas, c'est comment seriez-vous un moteur de recherche convivial sans utiliser hashbang?

Vraisemblablement, votre contenu pushState est généré par du code JavaScript côté client.

Le scénario est donc le suivant:

Je suis sur example.com. Mon utilisateur clique sur un lien: href="example.com/blog"

pushState capture le clic, met à jour l'URL, saisit un fichier JSON de quelque part et crée la liste des articles de blog dans la zone de contenu.

Avec hashbangs, Google sait aller à l'URL escaped_fragment pour obtenir son contenu statique.

Avec pushState, Google ne voit rien car il ne peut pas utiliser le code JavaScript pour charger le JSON et créer ensuite le modèle.

La seule façon de le faire, à mon avis, est de rendre le modèle côté serveur, mais cela annule complètement les avantages de la transmission de la couche d'application au client.

Alors, est-ce que je comprends bien, pushState n’est-il pas du tout un moteur de référencement convivial pour les applications côté client?

prograhammer · Accepted Answer

Pourquoi ne pas utiliser la balise Meta proposée par Google pour ceux qui ne veulent pas de hash-bang dans leurs URL: <meta name="fragment" content="!">

Voir ici pour plus d’information: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

Malheureusement, je ne pense pas que NickC ait clarifié le problème que je pensais avoir avec le PO. Le problème est simplement que nous ne savons pas à qui nous fournissons du contenu si nous n'utilisons pas le hasch-bang. Pushstate ne résout pas cela pour nous. Nous ne voulons pas que les moteurs de recherche demandent aux utilisateurs finaux de naviguer vers une URL qui crache du JSON non formaté. Au lieu de cela, nous créons des URL (qui déclenchent d'autres appels vers plusieurs URL) qui extraient des données via AJAX et les présentons à l'utilisateur de la manière que nous préférons. Si l'utilisateur n'est pas un humain, nous pouvons également utiliser un instantané HTML pour que les moteurs de recherche puissent correctement diriger les utilisateurs humains vers l'URL dans laquelle ils s'attendent à trouver les données demandées (et de manière présentable). Mais le défi ultime est de savoir comment déterminer le type d'utilisateur. Oui, nous pouvons éventuellement utiliser .htaccess ou quelque chose pour réécrire l'URL des robots des moteurs de recherche que nous détectons, mais je ne suis pas sûr de la fiabilité totale et future de ce dernier. Il est également possible que Google pénalise les utilisateurs qui font ce genre de chose, mais je n’ai pas fait de recherches approfondies à ce sujet. Ainsi, le combo (pushstate + méta tag de google) semble être une solution probable.

Nicole · Answer

Est-ce que `pushState` est mauvais si vous avez besoin de moteurs de recherche pour lire votre contenu?

Non, la discussion sur pushState vise à accomplir le même processus général que le hashbang, mais avec des URL plus esthétiques. Pensez à ce qui se passe réellement lorsque vous utilisez des hashbangs ...

Vous dites:

Avec hashbangs, Google sait aller à l'URL escaped_fragment pour obtenir son contenu statique.

Donc, en d'autres termes,

Google voit un lien vers example.com/#!/blog
Google demande example.com/?_escaped_fragment_=/blog
You retourne un instantané du contenu que l'utilisateur devrait voir

Comme vous pouvez le constater, cela dépend déjà du serveur. Si vous ne diffusez pas d'instantané du contenu du serveur, votre site n'est pas correctement indexé.

Alors, comment Google verra-t-il quelque chose avec pushState?

Avec pushState, Google ne voit rien car il ne peut pas utiliser le javascript pour charger le json et ensuite créer le modèle.

En fait, Google verra ce qu'il pourra demander à l'adresse site.com/blog. Une URL pointe toujours sur une ressource du serveur et les clients respectent toujours ce contrat. Bien sûr, pour les clients modernes, JavaScript a ouvert de nouvelles possibilités de récupération et d’interaction avec le contenu sans actualisation de la page , mais les contrats sont les mêmes.

Ainsi, l’élégance recherchée de pushState réside dans le fait qu’il sert le même contenu à tous les utilisateurs, anciens et nouveaux, compatibles JS et non, mais aux nouveaux utilisateurs obtenez une expérience améliorée .

Comment obtenez-vous Google pour voir votre contenu?

L'approche Facebook - envoyez le même contenu à l'URL site.com/blog à laquelle votre application client serait transformée lorsque vous appuierez /blog sur l'état. (Facebook n'utilise pas encore pushState que je sache, mais ils le font avec des hashbangs)
L'approche Twitter - redirige toutes les URL entrantes vers l'équivalent hashbang. En d'autres termes, un lien vers "/ blog" pousse /blog sur l'état. Mais si cela est demandé directement, le navigateur se termine à #!/blog. (Pour Googlebot, cela dirigerait ensuite vers _escaped_fragment_ comme vous le souhaitez. Pour les autres clients, vous pouvez pushState revenir à la jolie URL).

Alors perdez-vous la capacité `_escaped_fragment_` avec `pushState`?

Dans quelques commentaires différents, vous avez dit

fragment échappé est complètement différent. Vous pouvez servir du contenu pur, non mis en forme, du contenu mis en cache, sans être soumis à la charge des pages normales.

La solution idéale consiste pour Google à créer des sites JavaScript ou à mettre en place un moyen de savoir qu’il existe une URL de fragment échappé, même pour les sites Pushstate (robots.txt?).

Les avantages que vous avez mentionnés ne sont pas isolés de _escaped_fragment_. Le fait qu’il effectue la réécriture pour vous et utilise un paramètre spécialement nommé GET est vraiment un détail d’implémentation. Il n'y a rien de vraiment spécial à ce sujet que vous ne puissiez pas utiliser avec des URL standard - en d'autres termes, réécrivez /blog sur /?content=/blog par vous-même en utilisant mod_rewrite ou l'équivalent de votre serveur.

Et si vous ne fournissez pas du contenu côté serveur?

Si vous ne pouvez pas réécrire les URL et servir une sorte de contenu à /blog (ou à tout autre état que vous avez poussé dans le navigateur), votre serveur ne tient plus vraiment debout par le contrat HTTP.

Ceci est important car un rechargement de page (pour une raison quelconque) extraira le contenu à cette URL. (Voir https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review - "view-source et reload extrairont le contenu du nouvel URI, le cas échéant.")

Ce n'est pas que dessiner des interfaces utilisateur une fois côté client et que charger du contenu via des API JS soit un mauvais objectif, c'est simplement qu'il n'est pas vraiment comptabilisé avec HTTP et les URL et qu'il n'est pas compatible avec les versions antérieures.

Pour le moment, c'est exactement ce à quoi les hashbang sont destinés - pour représenter des états de page distincts sur lesquels le client est navigué et non sur le serveur. Un rechargement, par exemple, chargera la ressource same qui pourra ensuite lire, analyser et traiter la valeur hachée.

Il se trouve simplement qu'ils ont également été utilisés (notamment par Facebook et Twitter) pour modifier l'historique en un emplacement côté serveur sans actualisation de la page. C'est dans ces cas d'utilisation que les gens recommandent d'abandonner le hashbangs pour pushState.

Si vous restituez tout le contenu côté client, vous devriez penser à pushState dans le cadre d'une API d'historique plus pratique, et non comme un moyen de sortir de hashbangs.

Julian · Answer

Toutes les discussions intéressantes sur pushState et #!, et je ne vois toujours pas comment pushState remplace le but de #! Comme le demande l'affiche originale.

Notre solution pour rendre notre site/application Ajax basé sur JavaScript de 99% et qui utilise le code SEOable, utilise bien sûr #!. Le rendu du client étant effectué via HTML, JavaScript et PHP, nous utilisons la logique suivante dans un chargeur contrôlé par notre page de destination. Les fichiers HTML sont totalement séparés du JavaScript et de PHP car nous souhaitons utiliser le même code HTML dans les deux cas (pour la plupart). JavaScript et PHP font généralement la même chose, mais le code PHP est moins compliqué car JavaScript est une expérience utilisateur beaucoup plus riche.

JavaScript utilise jQuery pour injecter en HTML le contenu souhaité. PHP utilise PHPQuery pour injecter dans le code HTML le contenu souhaité - en utilisant "presque" la même logique, mais beaucoup plus simplement que la version PHP ne sera utilisée que pour afficher une version SEOable avec des liens SEOables et non être interagi avec comme la version JavaScript.

Tous les trois composants composant une page, page.htm, page.js et page.php, existent pour tout élément utilisant le fragment échappé afin de savoir s'il faut charger la version PHP à la place de la version JavaScript. La version PHP ne doit pas nécessairement exister pour les contenus ne pouvant pas être référencés (telles que les pages visibles uniquement après la connexion de l'utilisateur). Tout est simple.

Je suis toujours perplexe de voir comment certains développeurs front-end développent d'excellents sites (avec la richesse de Google Docs) sans utiliser les technologies côté serveur conjointement avec celles des navigateurs ... Si JavaScript n'est même pas activé, notre solution JavaScript à 99% ne fera bien sûr rien sans le PHP en place.

Il est possible d'avoir une URL Nice pour atterrir sur une page PHP servie et rediriger vers une version JavaScript si JavaScript est activé, mais ce n'est pas agréable du point de vue de l'utilisateur, car les utilisateurs constituent le public le plus important.

Sur une note de côté. Si vous ne créez qu'un site Web simple pouvant fonctionner sans JavaScript, je peux voir que pushState est utile si vous souhaitez améliorer progressivement votre expérience utilisateur, passant d'un contenu simplement rendu de manière statique à quelque chose de mieux, mais si vous souhaitez donner à votre utilisateur la par exemple, votre dernier jeu écrit en JavaScript ou similaire à Google Docs, mais son utilisation pour cette solution est quelque peu contraignante, car le recul gracieux ne peut aller aussi loin avant que l'expérience utilisateur ne soit pénible par rapport à la vision. du site.