Angularjs vs SEO vs pushState

Après avoir lu ce thread, j'ai décidé d'utiliser pushstate api dans mon application angularjs entièrement intégrée à l'API (frontend indépendant et backend indépendant).

Voici mon site de test: http://huyaks.com/index.html

J'ai créé un sitemap et téléchargé sur les outils Googleoglemaster.

D'après ce que je peux voir:

Google indexé la page principale, indexé la navigation dynamique (cool!) Mais n'a pas indexé les URL dynamiques. Jetez un coup d'œil.

J'ai examiné le site exemple donné dans le thread connexe:

Http://html5.gingerhost.com/london

Pour autant que je voie, lorsque j'habite directement une page particulière, le contenu qui est présumé être dynamique est renvoyé par le serveur, donc il est indexé. Mais c'est impossible dans mon cas puisque mon application est entièrement dynamique.

Pourriez-vous, s'il vous plaît, conseiller, quel est le problème dans mon cas particulier et comment le réparer?

Merci d'avance.

Remarque: cette question concerne pushState way. Ne me conseillez pas d'utiliser le fragment échappé ou les services de fête de 3 jours comme prerender.io. J'aimerais savoir comment utiliser cette approche.

Évidemment, Quentin n'a pas lu l'article auquel vous parlez. Le point entier de http://html5.gingerhost.com/london est qu'il utilise pushState et prouve qu'il ne nécessite pas de HTML html pour le bénéfice des araignées.

"Ce site utilise HTML5 wizrdry [sic] pour charger le« contenu réel »asynchronously [sic] au reste du code: cela rend plus rapide pour les utilisateurs, mais il est encore totalement indexable par les moteurs de recherche.

L'orthographe Dodgy est de côté, cette démo montre que le contenu chargé de manière asynchrone est indexable.

Pour autant que je voie, lorsque j'habite directement une page particulière, le contenu qui est présumé être dynamique est renvoyé par le serveur

Ce n'est pas le cas. Vous chargez une page vierge avec un certain JavaScript, et que JavaScript charge immédiatement le contenu qui devrait apparaître pour cette URL.

Vous devez faire en sorte que le serveur produise le code HTML que vous obtenez après l' exécution du JavaScript et ne dépendez pas de JS.

Google interprète les pages angulaires, comme vous pouvez le voir sur cette page de démonstration rapide , où le titre et la méta-description s'affichent correctement dans le résultat de la recherche .

Il est très probable que, s'ils interprètent JS du tout, ils l'interprètent assez pour une analyse approfondie des liens.

Le fait que certaines pages ne soient pas indexées est dû au fait que Google n'indique pas toutes les pages qu'elles analysent, même si vous l'ajoutez à un sitemap ou soumettez-le pour l'indexation dans les outils pour les webmasters. Sur la page de démonstration , le lien régulier et le lien étendu ne sont actuellement pas indexés.

Mise à jour: afin de répondre à la question en particulier, il n'y a aucun problème avec PushState sur le site de test. Ces pages ne contiennent tout simplement pas de contenu à valeur ajoutée pour Google. (Voir leurs directives générales ).

Sray, j'ai récemment ouvert la même question dans un autre thread et j'ai été informé que Googlebot et Bingbot font l'index des SPA qui utilisent PushState. Je n'ai pas vu un exemple qui garantit ma confiance, mais c'est ce que j'ai dit. Pour ensuite couvrir vos bases en ce qui concerne Facebook, utilisez des méta-tags de graphiques ouverts.

Je ne suis toujours pas sûr de faire avancer sans envoyer d'extraits HTML aux robots, mais comme vous, je n'ai trouvé aucun tutoriel pour savoir comment le faire lors de l'utilisation de pushState ou même de le suggérer. Mais voici comment j'imagine que cela fonctionnerait avec Symfony2 …

Utilisez prerender ou un autre service pour générer des extraits statiques de toutes vos pages. Rangez-les quelque part accessibles par votre routeur.
Dans votre fichier de routage Symfony2, créez un itinéraire correspondant à votre SPA. J'ai un test de SPA en cours d'exécution sur localhost.com/ng-test/, donc mon itinéraire ressemblerait à ceci:

# Adding a trailing / to this route breaks it. Not sure why.
# This is also not formatting correctly in StackOverflow. This is yaml.
NgTestReroute:
----path: /ng-test/{one}/{two}/{three}/{four}
----defaults:
--------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
--------'one': null
--------'two': null
--------'three': null
--------'four': null
----methods: [GET]
Dans votre contrôleur Symfony2, vérifiez l'agent utilisateur pour voir si c'est googlebot ou bingbot. Vous devriez pouvoir le faire avec le code ci-dessous, puis utilisez cette liste pour cibler les robots qui vous intéressent ( http://www.searchenginedictionary.com/spider-names.shtml ) …

if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}
Si votre contrôleur trouve une correspondance à un robot, envoyez-lui l'extrait HTML. Sinon, comme dans le cas de mon application AngularJS, envoyez simplement l'utilisateur à la page d'index et Angular va bien faire le reste.

De plus, votre question a-t-elle été répondu? Si c'est le cas, sélectionnez un afin que moi et d'autres puissions dire ce qui a fonctionné pour vous.

Snippets HTML pour l'application AngularJS qui utilise PushState?