Contenu AngularJS et Google

Récemment, j'ai vu des articles indiquant que Google regroupe maintenant des sites et rend CSS et Javascript. Exemple d'article de Google lui-même: http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

J'ai une configuration d'application de page unique en mode Angulaire avec HTML5 sur le routage. Une ng-view dans mon index.html est remplie en fonction de l'URL comme suit:

 app.config(function($routeProvider, $locationProvider){ $locationProvider.html5Mode(true); $routeProvider.when("/", { templateUrl: "/views/dashboard.html" }).when("/portfolio", { templateUrl: "/views/portfolio.html" }); });

Google devrait maintenant consulter www.example.com/portfolio , exécuter le javascript qui apporte le contenu de views/portfolio.html et pouvoir lire tout ce contenu correctement?

C'est ce qui devrait se passer selon les articles que j'ai lus. Ceci en particulier l'explique en détail concernant Angular: https://weluse.de/blog/angularjs–seo-finally-a-piece-of-cake.html

Voici le problème. Lorsque j'utilise Google Webmaster Tools et la fonctionnalité Fetch , Fetch and Render pour voir comment Google voit mes pages, il ne rend pas le JS et montre simplement le HTML initial dans mon index.html .

Est-ce que ça marche? Ai-je fait quelque chose de mal? Comment puis-je le tester?

Donc, comme je l'ai mentionné dans les commentaires, j'espère que cette réponse donne plus de contexte de ce que je veux dire.

Donc, lorsque vous faites votre déclaration de html5Mode , html5Mode également le hashPrefix :

 $locationProvider .html5Mode(true) .hashPrefix('!');

Ensuite, dans votre <head> , incluez cette balise:

 <meta name="fragment" content="!">

Ce qui se passe ici, c'est que vous fournissez une mesure de recharge pour l'API Historique, ce qui signifie que tous les utilisateurs qui visitent avec des navigateurs compatibles (essentiellement tous les jours), ils verront cela:

 http://example.com/home/

Et seulement sur les navigateurs de dinosaures comme IE9, ils verraient ceci:

 http://example.com/#!/home/

Maintenant, c'est dans la vie réelle avec les gens réels en tant que visiteurs. Vous avez demandé spécifiquement d'être indexé par Google, qui utilise des robots. Ils essayeront d'aller à example.com/home/ comme une destination réelle sur votre serveur (c'est-à-dire /home/index.html ), ce qui n'existe évidemment pas. En fournissant la <meta> ci-dessus, vous avez fourni l'indice au robot pour passer à une version ?_escaped_fragment du site (comme index.html?_escaped_fragment=home ) et l' index.html?_escaped_fragment=home à cette URL de /home/ in the Recherches réelles de Google.

C'est entièrement sur le backend, tous les visiteurs de votre site verront toujours l'URL propre et ne sont nécessaires que parce que sous le capot Angular utilise location.hash, ce qui n'est pas vu sur le serveur. En bout de ligne, vos utilisateurs réels ne seront pas affectés et ne disposeront pas de l'URL laide, sauf s'ils sont sur un navigateur qui ne prend pas en charge l'API Historique. Pour ces utilisateurs, tout ce que vous avez fait est de faire fonctionner le site pour eux (comme avant, cela aurait été brisé).

J'espère que cela t'aides!

METTRE À JOUR

Puisque vous utilisez une pile MEAN, vous pouvez également suivre une direction différente qui a duré longtemps, c'est-à-dire utiliser des instantanés HTML. Il y a des npms qui fournissent des instantanés (c'est-à-dire un HTML statique de post-rendu) pouvant être diffusés depuis votre serveur aux emplacements affichés. Cette technique est un peu dépassée, mais elle existe depuis 2012 et est prouvée.

Lorsque j'ai fait ça, j'ai utilisé grunt-html-snapshot , mais il y en a d'autres. Vous pouvez même utiliser PhantomJS pour faire les instantanés, même si je ne l'ai jamais fait.