Question Comment les moteurs de recherche traitent-ils les applications AngularJS?


Je vois deux problèmes avec l'application AngularJS concernant les moteurs de recherche et le référencement:

1) Que se passe-t-il avec les balises personnalisées? Les moteurs de recherche ignorent-ils tout le contenu de ces balises? je suppose que j'ai

<custom>
  <h1>Hey, this title is important</h1>
</custom>

aurait <h1> être indexé en dépit d'être à l'intérieur des étiquettes personnalisées?


2) Y at-il un moyen d'éviter que les moteurs de recherche de l'indexation {{}} se lient littéralement? c'est à dire.

<h2>{{title}}</h2>

Je sais que je pourrais faire quelque chose comme

<h2 ng-bind="title"></h2>

mais que se passe-t-il si je veux laisser le robot "voir" le titre? Le rendu côté serveur est-il la seule solution?


684
2017-11-21 17:44


origine


Réponses:


Mise à jour mai 2014

Google crawlers exécute maintenant javascript - Vous pouvez utiliser le Outils Google pour les webmasters pour mieux comprendre comment vos sites sont rendus par Google.

Réponse originale
Si vous souhaitez optimiser votre application pour les moteurs de recherche, il est malheureusement impossible de proposer une version pré-rendue au robot d'exploration. Vous pouvez en savoir plus sur les recommandations de Google pour les sites ajax et javascript-lourds ici.

Si c'est une option que je recommande de lire Cet article sur la façon de faire SEO pour Angular avec le rendu côté serveur.

Je ne suis pas sûr de ce que fait le robot lorsqu'il rencontre des balises personnalisées.


398
2017-11-23 00:17



Utiliser PushState et Precomposition

La façon actuelle (2015) de le faire utilise la méthode JavaScript pushState.

PushState modifie l'URL dans la barre de navigation supérieure sans recharger la page. Supposons que vous avez une page contenant des onglets. Les onglets masquent et affichent le contenu, et le contenu est inséré dynamiquement, soit en utilisant AJAX, soit en définissant simplement display: none et display: block pour masquer et afficher le contenu correct de l'onglet.

Lorsque les onglets sont cliqués, utilisez pushState pour mettre à jour l'URL dans la barre d'adresse. Lorsque la page est rendue, utilisez la valeur dans la barre d'adresse pour déterminer quel onglet afficher. Le routage angulaire le fera automatiquement pour vous.

Précomposition

Il y a deux façons de frapper une application PushState Single Page (SPA)

  1. Via PushState, où l'utilisateur clique sur un lien PushState et le contenu est AJAXed dedans.
  2. En cliquant directement sur l'URL.

Le succès initial sur le site impliquera de cliquer directement sur l'URL. Les appels ultérieurs auront simplement AJAX dans le contenu car PushState met à jour l'URL.

Les cueilleurs récupèrent les liens d'une page, puis les ajoutent à une file d'attente pour traitement ultérieur. Cela signifie que pour un robot d'exploration, chaque hit sur le serveur est un hit direct, ils ne naviguent pas via Pushstate.

Precomposition regroupe la charge utile initiale dans la première réponse du serveur, éventuellement en tant qu'objet JSON. Cela permet au moteur de recherche de restituer la page sans exécuter l'appel AJAX.

Certaines preuves suggèrent que Google pourrait ne pas exécuter les requêtes AJAX. Plus à ce sujet ici:

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

Les moteurs de recherche peuvent lire et exécuter JavaScript

Google a été en mesure d'analyser JavaScript depuis un certain temps maintenant, c'est pourquoi ils ont initialement développé Chrome, pour agir comme un navigateur sans tête complet pour l'araignée de Google. Si un lien a un attribut href valide, la nouvelle URL peut être indexée. Il n'y a plus rien à faire.

Si un clic sur un lien déclenche un appel pushState, le site peut être parcouru par l'utilisateur via PushState.

Prise en charge des moteurs de recherche pour les URL PushState

PushState est actuellement supporté par Google et Bing.

Google

Voici Matt Cutts répondant à la question de Paul Irish sur PushState pour le SEO:

http://youtu.be/yiAF9VdvRPw

Voici Google annonçant le support complet de JavaScript pour l'araignée:

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

Le résultat est que Google prend en charge PushState et indexera les URL PushState.

Voir également Google Fetch des outils pour les webmasters. Vous verrez votre JavaScript (y compris Angular) est exécuté.

Bing

Voici l'annonce de Bing concernant la prise en charge de jolies URL PushState datées de mars 2013:

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

N'utilisez pas HashBangs #!

Les urls Hashbang étaient un pis-aller moche exigeant que le développeur fournisse une version pré-rendue du site dans un endroit spécial. Ils fonctionnent toujours, mais vous n'avez pas besoin de les utiliser.

Les URL Hashbang ressemblent à ceci:

domain.com/#!path/to/resource

Cela serait associé à une métabalise comme celle-ci:

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

Google ne les indexera pas dans ce formulaire, mais utilisera plutôt une version statique du site à partir de l'URL _escaped_fragments_ et l'indexera.

Les URL pushstate ressemblent à n'importe quelle URL ordinaire:

domain.com/path/to/resource

La différence est qu'Angular les gère pour vous en interceptant la modification de document.location en JavaScript.

Si vous souhaitez utiliser les URL PushState (et vous le faites probablement), supprimez toutes les anciennes URL et métabalises du style de hachage et activez simplement le mode HTML5 dans votre bloc de configuration.

Tester votre site

Les outils Google pour les webmasters contiennent maintenant un outil qui vous permettra d'aller chercher une URL en tant que google, et de rendre JavaScript comme Google le rend.

https://www.google.com/webmasters/tools/googlebot-fetch

Génération d'URL PushState en Angular

Pour générer de véritables URL dans Angular, plutôt que # préfixées, définissez le mode HTML5 sur votre objet $ locationProvider.

$locationProvider.html5Mode(true);

Du côté serveur

Puisque vous utilisez de vraies URL, vous devez vous assurer que le même modèle (plus du contenu précomposé) est envoyé par votre serveur pour toutes les URL valides. Comment cela va varier en fonction de l'architecture de votre serveur.

Sitemap

Votre application peut utiliser des formes de navigation inhabituelles, telles que le vol stationnaire ou le défilement. Pour vous assurer que Google est capable de piloter votre application, je suggèrerais probablement de créer un sitemap, une simple liste de toutes les URL auxquelles répond votre application. Vous pouvez placer ceci à l'emplacement par défaut (/ sitemap ou /sitemap.xml), ou en parler à Google en utilisant les outils pour les webmasters.

C'est une bonne idée d'avoir un sitemap de toute façon.

Support du navigateur

Pushstate fonctionne dans IE10. Dans les anciens navigateurs, Angular se rabattra automatiquement sur les URLs de type hash

Une page de démonstration

Le contenu suivant est rendu à l'aide d'une URL pushstate avec précomposition:

http://html5.gingerhost.com/london

Comme peut être vérifié, à ce lien, le contenu est indexé et apparaît dans Google.

Servir les codes d'état d'en-tête 404 et 301

Étant donné que le moteur de recherche parvient toujours à votre serveur pour chaque requête, vous pouvez utiliser les codes d'état d'en-tête de votre serveur et attendre que Google les consulte.


470
2018-04-23 13:10



Ayons un avis définitif sur AngularJS et SEO

Google, Yahoo, Bing et d'autres moteurs de recherche explorent le Web de manière traditionnelle en utilisant des robots d'exploration traditionnels. Ils courent des robots qui explorent le HTML sur les pages Web, recueillant des informations en cours de route. Ils gardent des mots intéressants et recherchent d'autres liens vers d'autres pages (ces liens, le nombre d'entre eux et le nombre d'entre eux entrent en jeu avec le SEO).

Alors pourquoi les moteurs de recherche ne traitent-ils pas les sites javascript?

La réponse a à voir avec le fait que les robots des moteurs de recherche fonctionnent à travers les navigateurs sans tête et ils font le plus souvent ne pas avoir un moteur de rendu javascript pour rendre le javascript d'une page. Cela fonctionne pour la plupart des pages car la plupart des pages statiques ne se soucient pas de rendre JavaScript sur leur page, car leur contenu est déjà disponible.

Que peut-on faire à ce sujet?

Heureusement, les crawlers des plus grands sites ont commencé à implémenter un mécanisme qui nous permet d'explorer nos sites JavaScript, mais nous oblige à mettre en œuvre un changement sur notre site.

Si nous changeons notre hashPrefix être #! au lieu de simplement #, alors les moteurs de recherche modernes vont changer la demande d'utilisation _escaped_fragment_ au lieu de #!. (Avec le mode HTML5, c'est-à-dire où nous avons des liens sans le préfixe de hachage, nous pouvons implémenter cette même fonctionnalité en regardant le User Agent en-tête dans notre backend).

C'est-à-dire, au lieu d'une requête d'un navigateur normal qui ressemble à:

http://www.ng-newsletter.com/#!/signup/page

Un moteur de recherche va chercher dans la page avec:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

Nous pouvons définir le préfixe de hachage de nos applications Angular en utilisant une méthode intégrée de ngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

Et, si nous utilisons html5Mode, nous aurons besoin de l'implémenter en utilisant la balise meta:

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

Rappel, nous pouvons définir le html5Mode() avec le $location un service:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

Manipulation du moteur de recherche

Nous avons beaucoup de possibilités de déterminer comment nous allons traiter la livraison de contenu aux moteurs de recherche en tant que HTML statique. Nous pouvons héberger un backend nous-mêmes, nous pouvons utiliser un service pour héberger un back-end pour nous, nous pouvons utiliser un proxy pour livrer le contenu, etc. Examinons quelques options:

Auto-hébergé

Nous pouvons écrire un service pour gérer l'analyse de notre propre site en utilisant un navigateur sans tête, comme phantomjs ou zombiejs, en prenant un instantané de la page avec des données rendues et en le stockant 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 l'instantané HTML statique que nous avons pris de la page au lieu de la page pré-rendue à travers JS seulement. Cela nous oblige à avoir un backend qui livre nos pages avec une logique conditionnelle au milieu. Nous pouvons utiliser quelque chose comme prerender.io's backend comme point de départ pour exécuter cela nous-mêmes. Bien sûr, nous avons toujours besoin de gérer le proxy et la gestion des snippets, mais c'est un bon début.

Avec un service payant

Le moyen le plus simple et le plus rapide d'intégrer du contenu dans un moteur de recherche consiste à utiliser un service Brombone, seo.js, seo4ajax, et prerender.io sont de bons exemples de ceux qui hébergeront le rendu de contenu ci-dessus pour vous. C'est une bonne option pour les moments où nous ne voulons pas gérer un serveur / proxy. En outre, c'est généralement super rapide.

Pour plus d'informations sur Angular et SEO, nous avons écrit un tutoriel étendu à ce sujet à http://www.ng-newsletter.com/posts/serious-angular-seo.html  et nous l'avons détaillé encore plus dans notre livre ng-book: Le livre complet sur AngularJS. Regardez-le à ng-book.com.


106
2017-12-24 20:05



Vous devriez vraiment consulter le tutoriel sur la construction d'un site AngularJS SEO-friendly sur l'année du blog moo. Il vous guide à travers toutes les étapes décrites dans la documentation d'Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

En utilisant cette technique, le moteur de recherche voit le code HTML développé au lieu des balises personnalisées.


56
2017-11-27 21:55



Cela a radicalement changé.

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

Si tu utilises: $ locationProvider.html5Mode (true); tu es prêt.

Plus de pages de rendu.


41
2018-02-19 22:35



Les choses ont beaucoup changé depuis que cette question a été posée. Il y a maintenant des options pour laisser Google indexer votre site AngularJS. L'option la plus simple que j'ai trouvée était d'utiliser http://prerender.io service gratuit qui va générer les pages crwalable pour vous et servir cela aux moteurs de recherche. Il est pris en charge sur presque toutes les plates-formes Web côté serveur. J'ai récemment commencé à les utiliser et le support est excellent aussi.

Je n'ai aucune affiliation avec eux, cela vient d'un utilisateur heureux.


17
2017-11-26 16:25



Le propre site Web d'Angular offre un contenu simplifié aux moteurs de recherche: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Supposons que votre application Angular consomme une API JSON Node.js / Express, comme /api/path/to/resource. Peut-être pourriez-vous rediriger les demandes avec ?_escaped_fragment_ à /api/path/to/resource.html, et utilise négociation de contenu pour afficher un modèle HTML du contenu plutôt que de renvoyer les données JSON.

La seule chose est, vos routes angulaires devraient correspondre 1: 1 avec votre API REST.

MODIFIER: Je me rends compte que cela a le potentiel de bouleverser votre API REST et je ne recommande pas de le faire en dehors des cas d'utilisation très simples où il pourrait être un ajustement naturel.

Au lieu de cela, vous pouvez utiliser un ensemble entièrement différent de routes et de contrôleurs pour votre contenu robotique. Mais alors vous dupliquez toutes vos routes et contrôleurs AngularJS dans Node / Express.

Je me suis contenté de générer des instantanés avec un navigateur sans tête, même si je pense que c'est un peu moins que l'idéal.


9
2017-11-21 01:25



Une bonne pratique peut être trouvée ici:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag


8
2018-03-16 13:56



A partir de maintenant Google a changé leur proposition d'exploration AJAX.

Les temps ont changé. Aujourd'hui, tant que vous n'empêchez pas Googlebot d'explorer vos fichiers JavaScript ou CSS, nous pouvons généralement afficher et comprendre vos pages Web comme des navigateurs modernes.

tl; dr: [Google] ne recommande plus la proposition d'exploration AJAX [Google] faite en 2009.


7
2017-10-15 10:00



Les spécifications Ajax de Crawlable de Google, telles que référencées dans les autres réponses ici, sont essentiellement la réponse.

Si vous êtes intéressé par la façon dont les autres moteurs de recherche et les robots sociaux traitent les mêmes problèmes, j'ai écrit l'état de l'art ici: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Je travaille pour un https://ajaxsnapshots.com, une société qui implémente le Specjet Ajaxable en tant que service - les informations contenues dans ce rapport sont basées sur les observations de nos journaux.


6
2018-01-21 22:53