Let's get définitif sur AngularJS et SEO
Google, Yahoo, Bing et autres moteurs de recherche explorent le web, de manière traditionnelle à l'aide de robots traditionnels. Ils exécutent des robots qui analysent le code HTML des pages web, la collecte d'informations le long de la voie. Ils gardent des mots intéressants et chercher d'autres liens vers d'autres pages (ces liens, le montant et le nombre d'entre eux entrent en jeu avec SEO).
Alors pourquoi ne pas les moteurs de recherche traitent de javascript sites?
La réponse a à voir avec le fait que les robots de moteur de recherche travail par headless navigateurs et le plus souvent ils ne pas avoir un moteur de rendu javascript pour rendre le javascript d'une page. Cela fonctionne pour la plupart des pages comme la plupart des pages statiques ne se soucient pas de JavaScript rendu leur page, leur contenu est déjà disponible.
Ce qui peut être fait à ce sujet?
Heureusement, les robots d'indexation des plus grands sites ont commencé à mettre en œuvre un mécanisme qui nous permet de faire notre JavaScript sites crawlable, mais il nous oblige à mettre en œuvre un changement à notre site.
Si nous changeons notre hashPrefix être #! au lieu de simplement #, puis moderne de moteurs de recherche vont modifier la demande d'utilisation d' _escaped_fragment_ au lieu de #!. (Avec mode HTML5, c'est à dire là où nous avons des liens sans le hachage préfixe, nous pouvons mettre en œuvre cette même fonction en regardant l' User Agent - tête dans notre backend).
C'est-à-dire, au lieu d'une requête à partir d'un navigateur qui ressemble à ceci:
http://www.ng-newsletter.com/#!/signup/page
Un moteur de recherche, de recherche la page:
http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page
Nous pouvons définir la valeur de hachage préfixe de notre Angulaire des applications à l'aide d'une méthode intégrée d' ngRoute:
angular.module('myApp', [])
.config(['$location', function($location) {
$location.hashPrefix('!');
}]);
Et, si nous utilisons html5Mode, nous aurons besoin pour mettre en œuvre cette utilisation de la balise meta:
<meta name="fragment" content="!">
Rappel, nous pouvons définir l' html5Mode() avec l' $location service:
angular.module('myApp', [])
.config(['$location',
function($location) {
$location.html5Mode(true);
}]);
La manipulation du moteur de recherche
Nous avons beaucoup de possibilités pour déterminer comment nous allons faire face à de fournir le contenu pour les moteurs de recherche que la page HTML statique. Nous pouvons accueillir un backend nous-mêmes, nous pouvons utiliser un service d'accueil d'un back-end pour nous, nous pouvons utiliser un proxy pour livrer le contenu, etc. Regardons quelques options:
Auto-hébergé
Nous pouvons écrire un service pour gérer les traitant par l'exploration de notre propre site à l'aide d'un navigateur sans, comme phantomjs ou zombiejs, en prenant un instantané de la page avec un rendu des données et de les stocker au format HTML. Chaque fois que nous voyons la chaîne de requête, ?_escaped_fragment_ dans une requête de recherche, nous pouvons livrer le HTML statique instantané, nous avons pris de la page au lieu de la pré-rendu de la page uniquement via JS. Cela nous oblige à avoir un backend qui livre nos pages avec la logique conditionnelle dans le milieu. Nous pouvons utiliser quelque chose comme pré-rendu.io backend comme un point de départ pour exécuter nous-mêmes. Bien sûr, nous avons encore besoin de gérer l'utilisation de proxy et de l'extrait de la manipulation, mais c'est un bon début.
Avec un service payant
La méthode la plus simple et la plus rapide façon d'obtenir le contenu dans le moteur de recherche est d'utiliser un service de Brombone, seo.js, seo4ajax, et pré-rendu.io sont de bons exemples de ce que sera l'hôte de la au-dessus de rendu de contenu pour vous. C'est une bonne option pour les jours où nous ne voulons pas traiter avec l'exécution d'un serveur/proxy. Aussi, il est généralement très rapide.
Pour plus d'informations sur Angulaire et le RÉFÉRENCEMENT, nous avons écrit un tutoriel complet sur le http://www.ng-newsletter.com/posts/serious-angular-seo.html et nous l'avons détaillé, il est encore plus dans notre livre ng-livre: Le Livre Complet sur AngularJS. Consultez-le à l' ng-book.com.
