pushState et SEO

Beaucoup de gens ont été dire, utiliser pushState plutôt que hashbang.

Ce que je ne comprends pas, comment voulez-vous être moteur de recherche convivial, sans l'aide de hashbang?

Sans doute votre pushState contenu est généré par un code JavaScript côté client.

Le scénario est tellement:

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

pushState capture de clic, les mises à jour de l'URL, saisit un fichier JSON à partir de quelque part, et crée la liste de messages de blog dans la zone de contenu.

Avec hashbangs, google sait aller à l'escaped_fragment URL pour obtenir leur contenu statique.

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

La seule façon que je peux voir, c'est pour rendre le modèle sur le côté serveur, mais qui nie complètement les avantages de pousser la couche d'application pour le client.

Donc suis-je obtenir ce droit, pushState n'est pas SEO friendly pour des applications côté client à tous?

InformationsquelleAutor Harry | 2011-05-31
  1. 16

    Que sur l'utilisation de la balise meta que Google suggère pour ceux qui ne veulent pas de hachage tape dans l'Url:
    <meta name="fragment" content="!">

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

    Malheureusement, je ne pense pas que Nicole avait clarifié la question que je pensais que l'OP avait. Le problème est simplement que nous ne savons pas qui nous servent de contenu si nous n'utilisons pas le mot-bang. Pushstate ne résout pas pour nous. Nous ne voulons pas que les moteurs de recherche de raconter des utilisateurs finaux pour naviguer vers une URL qui crache sans mise en forme de JSON. Au lieu de cela, nous avons créer des Url (qui déclenchent d'autres appels à davantage d'Url) de récupérer les données via AJAX et de les présenter à l'utilisateur dans la manière que nous préférons. Si l'utilisateur n'est pas un homme, comme alternative, nous pouvons servir un html-instantané, de sorte que les moteurs de recherche peut bien diriger l'utilisateur vers l'URL qu'ils s'attendent à trouver les données (et d'une façon présentable). Mais le défi ultime est de savoir comment déterminer le type d'utilisateur? Oui, on peut éventuellement utiliser .htaccess ou quelque chose à réécrire l'URL pour les robots des moteurs de recherche nous détecter, mais je ne suis pas sûr de savoir comment fullproof et futureproof c'est. Il peut également être possible que Google pourrait pénaliser les gens pour faire ce genre de chose, mais je n'ai pas étudié à fond. Si l' (pushstate google + la balise meta) combo semble être une probable solution.

    • Ok je vois, donc maintenant je pense que la meilleure solution consiste à afficher le contenu d'abord, sans JS. Mais au sommet de votre JS (après la page de chargement et dom ready) ont un peu de code a immédiatement couru à masquer le contenu HTML qui a été initialement affichée ou la remplacer par la JS amélioration. Par exemple, j'utilise jquery datagrid, je voudrais donc afficher un tableau HTML en premier, puis de charger le JS immédiatement à transformer/masquer/remplacer la normale des données tabulaires affiché à la JS grille de version. Puis à partir de ce moment, toutes les autres requêtes ajax peut être servi comme JSON jumelé avec l'URL de mise à jour via pushstate.
    • Quelle est votre expérience avec la solution que vous avez proposée? A l'index de Google de cette "temporaire" de l'HTML? Ne s'affichent correctement dans la recherche google? Aussi n'est-il pas dire que l'expérience est un peu "nerveux" comme la première page HTML est rafraîchi avec le html généré par JS?
    • Voici la solution que j'ai travaillé et il accomplit le travail très bien: stackoverflow.com/questions/22824991/.... Je viens de passer un tableau HTML et aussi jqgrid avec le JSON (équivalent à ce qui est dans le HTML). SEO lit le HTML, et l'utilisateur obtient une mise à niveau de l'expérience et de toutes les demandes via ajax. À l'aide de pushstate, je peux mettre à jour l'URL de base sur la façon dont l'utilisateur trie/les pages de la grille (sans avoir besoin d'un hashbang). Cela permet à l'utilisateur d'enregistrer les URL et obtenir les mêmes résultats.
    • Je vais essayer dans quelques jours pour faire une modification sur ma réponse afin de mieux expliquer.
    • L'AJAX rampant le régime est désormais obsolète: developers.google.com/webmasters/ajax-crawling/docs/.... Il est conseillé de changer les sites qui l'utilisent: plus.google.com/+JohnMueller/posts/LT4fU7kFB8W
    InformationsquelleAutor prograhammer
  2. 97

    Est pushState mauvais si vous avez besoin de moteurs de recherche pour lire votre contenu?

    Non, le parler pushState est axée autour du réaliser le même processus général de hashbangs, mais avec de meilleures-recherche des Url. Pensez à ce qui se passe réellement lorsque vous utilisez hashbangs...

    Vous dire:

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

    Donc, en d'autres termes,

    1. Google voit un lien pour example.com/#!/blog
    2. Google demandes example.com/?_escaped_fragment_=/blog
    3. Vous de retour d'un instantané du contenu à l'utilisateur de

    Comme vous pouvez le voir, il s'appuie déjà sur le serveur. Si vous n'êtes pas servir un instantané du contenu à partir du serveur, votre site n'est pas indexé correctement.

    Alors, comment Google va rien voir avec pushState?

    Avec pushState, google ne voit rien car il ne peut pas utiliser le javascript pour charger le json et par la suite créer le modèle.

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

    De sorte que le but de l'élégance de pushState est qu'il sert le même contenu à tous les utilisateurs, anciens et nouveaux, JS et pas, mais les nouveaux utilisateurs obtenir une meilleure expérience.

    Comment obtenez-vous Google pour voir votre contenu?

    1. Le Facebook de l'approche — servir le même contenu à l'URL site.com/blog que votre client application serait de se transformer en lorsque vous appuyez /blog sur l'état. (Facebook n'utilise pas pushState encore, que je sache, mais ils le font avec hashbangs)

    2. Le Twitter approche — rediriger toutes les Url de la hashbang équivalent. En d'autres termes, un lien vers "/blog" pousse /blog sur l'état. Mais si c'est demandé directement, le navigateur se termine #!/blog. (Pour Googlebot, ce serait alors la route pour _escaped_fragment_ que vous le souhaitez. Pour les autres clients, vous pouvez pushState retour à la jolie URL).

    Donc, ne vous perdez la _escaped_fragment_ capacité avec pushState?

    Dans un couple de différentes observations, vous avez dit

    échappé fragment est complètement différent. Vous pouvez servir pure unthemed de contenu, contenu mis en cache, et ne pas être mis sous la charge normale pages.

    La solution idéale est de Google de faire de JavaScript sites ou de mettre en œuvre certains moyens de savoir qu'il y a une fuite de fragment d'URL, même pour pushstate sites (robots.txt?).

    Les avantages que vous avez mentionnés ne sont pas isolés à _escaped_fragment_. Qu'il ne la réécriture pour vous et utilise une nommée spécialement GET param est vraiment un détail d'implémentation. Il n'y a rien de vraiment spécial à propos de ça que tu ne pouvais pas faire avec la norme Url — en d'autres termes, la réécriture de /blog à /?content=/blog sur votre propre en utilisant mod_rewrite ou de votre serveur équivalent.

    Que si vous ne servez pas côté serveur de contenu à tous?

    Si vous ne pouvez pas réécrire les Url et les servir un certain type de contenu à /blog (ou quel que soit l'état que vous avez poussé dans le navigateur), alors votre serveur n'est plus vraiment en respectant le HTTP contrat.

    Ceci est important car un rechargement de la page (pour quelque raison que ce soit) va extraire le contenu à cette adresse. (Voir https://wiki.mozilla.org/Firefox_3.6/PushState_Security_Review — "vue de la source et de recharger à la fois de récupérer le contenu à la nouvelle URI si l'on a été poussé.")

    Ce n'est pas que le dessin des interfaces utilisateur une fois sur le côté client et le chargement de contenu via JS Api est un mauvais but, c'est juste qu'il n'est pas vraiment représenté avec HTTP et les Url et c'est fondamentalement pas de compatibilité descendante.

    Pour le moment, c'est la chose exacte que hashbangs sont destinés à représenter distinctes page d'états qui sont navigué sur le client et non sur le serveur. Un rechargement, par exemple, pour charger le même ressource qui peut ensuite lire, analyser et traiter la valeur de hachage.

    Elle est juste qu'ils ont également été utilisé (notamment par Facebook et Twitter) pour changer l'histoire à un serveur de localisation sans rafraichissement de la page. C'est dans ces cas d'utilisation que les gens sont de recommander l'abandon de hashbangs pour pushState.

    Si vous rendre tout le contenu de client-côté, vous devriez penser à pushState dans le cadre d'une pratique de l'histoire de l'API, et non pas un moyen de sortir de l'aide hashbangs.

    • Le contenu n'existe pas, les utilisateurs normaux voudrais le voir à site.com/blog, mais vous devez le faire en javascript travail sur elle.
    • Avez-vous lu le reste de ma réponse? Une URL est une URL sens un localisateur de ressource. Le serveur de croire qu'il y a du contenu à site.com/blog? Si non, alors il n'existe pas pour les Moteurs de Recherche. Le but de pushState n'est pas de travailler autour de cela. C'est pour des raisons de commodité. Hashbangs ne pas corriger ce soit, et _escaped_fragment_ est compliqué solution de contournement qui repose toujours sur le serveur d'avoir un instantané de la JS contenu généré (vu par les utilisateurs normaux, comme vous le dites). pushState effectivement simplifie tout cela.
    • escaped fragment est complètement différent. Vous pouvez servir pure unthemed de contenu, contenu mis en cache, et ne pas être mis sous la charge normale pages. En fin de compte, il ne devrait pas d'importance de savoir si ou non le serveur sait que la page est là, l'audience du site est le client, le client voit la page. En fait, pour de nombreuses applications, il n'y a PAS de serveur. Je n'utilise pas un serveur mais je préfère faire comme beaucoup que possible sur le client. :S souhaite juste que google serait de se dépêcher et d'évaluer JS déjà.
    • Jusqu'à ce que les URLs sont conçus pour servir les clients côté contenu, ils se réfèrent toujours à une ressource sur le serveur, et les clients de les traiter de cette façon, y compris les bots. Cela ne signifie pas que votre objectif est de faire autant que possible sur le client n'est pas valide, mais pour le moment, ça pourrait être accompli à l'aide de (laid) hashbangs. J'ai mis à jour ma réponse à votre cas d'utilisation.
    • Tout d'abord, je vais seulement ce que Google dit qu'ils font pour _escaped_fragment_, et je ne sais pas ce que vous faites en particulier. Mais ce que Google dit, je suppose que vous doit être au service de certains types de contenu par le serveur quand vous voyez que la requête param. Dans votre cas, il aurait besoin d'un peu de ruse, mais vous pourriez vous servir de certains <noscript> contenu ou autre chose de /blog et ensuite JS créer la page que vous voulez. Ou, vous pouvez tenter de détecter les bots et intentionnellement servir de contenu tout à fait différent.
    • Une fois de plus la bonne et la meilleure solution n'est pas choisi comme correct... mauvais, mauvais.
    • réponse impressionnante et maintenant profiter de 10k outil sur DONC 🙂
    • C'est comme un nouveau monde. Merci!!!! 🙂
    • Si j'ai un lien comme: <a href="product/productName" onclick="showProduct(product)">A product</a>, et le onclick commence avec "preventDefault()", puis AJAXly charge le nouveau contenu sur le produit dans la page, et j'ai assurez-vous que le lien ".../produit/productName" charger une version de la page où le produit spécifique de contenu seront inclus dans la réponse du serveur --- ainsi, le site continuera de fonctionner de manière dynamique, mais aura aussi toujours du contenu statique disponible en allant sur un lien du produit directement à droite? Pas besoin de pushState ou hashbang de cette manière, non???

    InformationsquelleAutor Nicole
  3. 0

    Tous intéressants de parler de pushState et #!, et je ne peux toujours pas voir comment pushState remplace #!'s but que l'original de l'affiche de la demande.

    Notre solution pour rendre notre 99% JavaScript Ajax site/application SEOable est à l'aide de #! de cours. Depuis le client, le rendu est fait via HTML, JavaScript et PHP, nous utilisons la logique suivante dans un chargeur contrôlé par notre page d'atterrissage. Les fichiers HTML sont totalement séparés du JavaScript et PHP, parce que nous voulons le même code HTML dans les deux (pour la plupart). Le JavaScript et le PHP dans la plupart des cas la même chose, mais le code PHP est moins compliqué que le JavaScript est un plus expérience utilisateur plus riche.

    Le JavaScript utilise jQuery pour injecter dans le HTML, le contenu qu'il veut. PHP utilise PHPQuery à injecter dans le HTML, le contenu qu'il veut - à l'aide de "presque" la même logique, mais beaucoup plus simple que la version de PHP ne sera utilisée que pour afficher une SEOable version avec SEOable liens et de ne pas être en interaction avec la version JavaScript.

    Tous sont les trois éléments qui composent une page, page.htm, page.js et page.php existent pour tout ce qui utilise le fragment échappé à savoir si pour charger la version de PHP à la place de la version JavaScript. La version de PHP n'a pas besoin d'exister pour les non-SEOable de contenu (tels que les pages qui ne peuvent être vus après connexion de l'utilisateur). Tout est simple.

    Je suis toujours perplexe comment certains développeurs front end s'éloigner le développement de sites (avec la richesse de Google Docs) sans l'aide de technologies côté serveur en conjonction avec le navigateur celles... Si JavaScript n'est pas encore activé, alors notre 99% JavaScript solution ne sera évidemment pas faire n'importe quoi sans le PHP en place.

    Il est possible d'avoir une belle URL à la terre sur un PHP servi page et rediriger l'utilisateur vers une version JavaScript si JavaScript est activé, mais ce n'est pas bon d'un point de vue utilisateur puisque les utilisateurs sont le plus important de l'auditoire.

    Sur une note de côté. Si vous faites juste un simple site web qui peut fonctionner sans JavaScript, alors je peux voir pushState être utile si vous voulez progressivement améliorer votre expérience d'utilisateur à partir d'un simple statiquement rendu de contenu dans quelque chose de mieux, mais si vous voulez donner à vos utilisateurs la meilleure expérience de la aller chercher... disons que votre dernier jeu écrit en JavaScript ou quelque chose comme Google Docs puis c'est l'utilisation de cette solution est un peu limité comme gracieusement retomber ne peux pas aller plus loin avant que l'expérience utilisateur est douloureuse par rapport à la vision du site.

    InformationsquelleAutor Julian