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? c'est à dire supposons que j'ai

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

serait <h1>indexé bien qu'il se trouve dans des balises personnalisées?

2) Existe-t-il un moyen d'éviter les moteurs de recherche d'indexation des liaisons {{}} 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?

Mise à jour de mai 2014

Les robots d'exploration Google exécutent désormais le javascript - vous pouvez utiliser les outils Google pour les webmasters pour mieux comprendre comment vos sites sont affichés par Google.

Réponse originale
Si vous souhaitez optimiser votre application pour les moteurs de recherche, il n'y a malheureusement aucun moyen de servir une version pré-rendue au robot. Vous pouvez en savoir plus sur les recommandations de Google pour les sites Ajax et Javascript lourds ici .

Si c'est une option, je vous recommande de lire cet article sur la façon de faire du référencement pour Angular avec un rendu côté serveur.

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

Utiliser PushState et Precomposition

La façon actuelle (2015) de procéder consiste à utiliser la méthode JavaScript pushState.

PushState modifie l'URL dans la barre de navigation supérieure sans recharger la page. Supposons que vous ayez 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 d'onglet correct.

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 l'onglet à afficher. Le routage angulaire le fera automatiquement pour vous.

Précomposition

Il existe deux façons d'accéder à une application de page unique (SPA) PushState

1. Via PushState, où l'utilisateur clique sur un lien PushState et le contenu est AJAXé.
2. En appuyant directement sur l'URL.

Le coup initial sur le site impliquera de frapper l'URL directement. Les hits suivants seront simplement AJAX dans le contenu lorsque le PushState met à jour l'URL.

Les robots collectent des liens à partir d'une page, puis les ajoutent à une file d'attente pour un traitement ultérieur. Cela signifie que pour un robot, chaque hit sur le serveur est un hit direct, ils ne naviguent pas via Pushstate.

La précomposition 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 rendre la page sans exécuter l'appel AJAX.

Il existe des preuves suggérant que Google pourrait ne pas exécuter les demandes 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 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 en outre un appel pushState, l'utilisateur peut naviguer sur le site via PushState.

Prise en charge des moteurs de recherche pour les URL PushState

PushState est actuellement pris en charge par Google et Bing.

Google

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

http://youtu.be/yiAF9VdvRPw

Voici Google qui annonce la prise en charge complète 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 aussi la récupération des outils Google pour les webmasters en tant que Googlebot. Vous verrez que votre JavaScript (y compris Angular) est exécuté.

Bing

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

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

N'utilisez pas HashBangs #!

Les URL Hashbang étaient un vilain point d'arrêt obligeant le développeur à fournir une version pré-rendue du site à 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éta-étiquette comme celle-ci:

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

Google ne les indexera pas sous cette forme, mais extraira une version statique du site 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 les traitant en JavaScript.

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

Tester votre site

Les outils Google pour les webmasters contiennent désormais un outil qui vous permettra de récupérer 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 angulaire

Pour générer de vraies URL en angulaire plutôt qu'en # 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 devrez vous assurer que le même modèle (plus du contenu précomposé) est envoyé par votre serveur pour toutes les URL valides. La manière de procéder variera en fonction de l'architecture de votre serveur.

Plan du site

Votre application peut utiliser des formes de navigation inhabituelles, par exemple le survol ou le défilement. Pour garantir que Google est en mesure de gérer votre application, je suggérerais probablement de créer un plan du site, une simple liste de toutes les URL auxquelles votre application répond. Vous pouvez le placer à l'emplacement par défaut (/ sitemap ou /sitemap.xml), ou en informer Google à l'aide des outils pour les webmasters.

C'est quand même une bonne idée d'avoir un plan du site.

Prise en charge du navigateur

Pushstate fonctionne dans IE10. Dans les navigateurs plus anciens, Angular retombera automatiquement sur les URL de style de hachage

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 on peut le vérifier, sur ce lien , le contenu est indexé et apparaît dans Google.

Desservant les codes d'état des en-têtes 404 et 301

Étant donné que le moteur de recherche frappera toujours votre serveur pour chaque demande, vous pouvez diffuser des codes d'état d'en-tête depuis votre serveur et vous attendre à ce que Google les voie.

Soyons définitifs sur AngularJS et SEO

Google, Yahoo, Bing et d'autres moteurs de recherche explorent le Web de manière traditionnelle à l'aide de robots traditionnels. Ils exécutent des robots qui explorent le HTML sur les pages Web, collectant des informations en cours de route. Ils gardent des mots intéressants et recherchent d'autres liens vers d'autres pages (ces liens, leur nombre et leur nombre entrent en jeu avec le référencement).

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

La réponse a à voir avec le fait que les robots des moteurs de recherche fonctionnent à travers des navigateurs sans tête et qu'ils n'ont le plus souvent pas de 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 du rendu JavaScript de leur page, car leur contenu est déjà disponible.

Que peut-on y faire?

Heureusement, les robots des grands sites ont commencé à mettre en œuvre un mécanisme qui nous permet de rendre nos sites JavaScript explorables, mais cela nous oblige à mettre en œuvre une modification de notre site .

Si nous changeons notre hashPrefixpour être #!au lieu de simplement #, les moteurs de recherche modernes changeront la demande à utiliser à la _escaped_fragment_place 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 l'en- User Agenttête dans notre backend).

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

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

Un moteur de recherche recherchera la page avec:

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

Nous pouvons définir le préfixe de hachage de nos applications angulaires à l'aide d'une méthode intégrée à partir de ngRoute:

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

Et, si nous utilisons html5Mode, nous devrons implémenter cela en utilisant la balise meta:

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

Rappel, nous pouvons régler le html5Mode()avec le $locationservice:

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

Manipulation du moteur de recherche

Nous avons beaucoup d'occasions de déterminer comment nous traiterons la livraison du contenu aux moteurs de recherche au format 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 fournir le contenu, etc. Voyons quelques options:

Auto-hébergé

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

Avec un service payant

Le moyen le plus simple et le plus rapide pour obtenir du contenu dans un moteur de recherche est d'utiliser un service Brombone , seo.js , seo4ajax et prerender.io en sont de bons exemples 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. De plus, c'est généralement super rapide.

Pour plus d'informations sur Angular et SEO, nous avons écrit un didacticiel détaillé à ce sujet sur 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 . Découvrez-le sur ng-book.com .

Vous devriez vraiment consulter le tutoriel sur la construction d'un site AngularJS optimisé pour le référencement 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 HTML développé au lieu des balises personnalisées.

Cela a radicalement changé.

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

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

Plus de pages de rendu.

Les choses ont beaucoup changé depuis que cette question a été posée. Il existe désormais des options permettant à Google d'indexer votre site AngularJS. L'option la plus simple que j'ai trouvée était d'utiliser le service gratuit http://prerender.io qui générera pour vous les pages modifiables et les servira 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 également excellent.

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

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

Supposons que votre application angulaire consomme une API JSON Node.js / Express, comme /api/path/to/resource. Peut-être que vous pouvez rediriger toutes les demandes avec ?_escaped_fragment_à /api/path/to/resource.htmlet utiliser la négociation de contenu pour rendre un modèle HTML du contenu, plutôt que de retourner les données JSON.

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

EDIT : Je me rends compte que cela a le potentiel de brouiller votre API REST et je ne recommande pas de le faire en dehors de cas d'utilisation très simples où cela 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 convivial pour les robots. Mais alors vous dupliquez tous vos itinéraires et contrôleurs AngularJS dans Node / Express.

J'ai décidé 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.

Une bonne pratique peut être trouvée ici:

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

À ce jour, Google a modifié sa 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 les navigateurs modernes.

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

La spécification Ajax explorable de Google, référencée dans les autres réponses ici, est essentiellement la réponse.

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

Je travaille pour https://ajaxsnapshots.com , une entreprise qui implémente la spécification Ajax Crawlable en tant que service - les informations contenues dans ce rapport sont basées sur les observations de nos journaux.

J'ai trouvé une solution élégante qui couvrirait la plupart de vos bases. J'ai d'abord écrit à ce sujet ici et répondu à une autre question StackOverflow similaire ici qui y fait référence.

Pour info, cette solution comprend également des balises de secours codées en dur au cas où Javascript ne serait pas détecté par le robot. Je ne l'ai pas explicitement décrit, mais il convient de mentionner que vous devez activer le mode HTML5 pour une prise en charge correcte des URL.

Notez également: ce ne sont pas les fichiers complets, juste les parties importantes de ceux qui sont pertinentes. Si vous avez besoin d'aide pour rédiger le passe-partout des directives, services, etc. qui peuvent être trouvés ailleurs. Bref, c'est parti ...

app.js

C'est ici que vous fournissez les métadonnées personnalisées pour chacun de vos itinéraires (titre, description, etc.)

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js (service)

Définit les options de métadonnées personnalisées ou utilise les valeurs par défaut comme solutions de rechange.

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (directive)

Assemble les résultats du service de métadonnées pour la vue.

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

Complet avec les balises de secours codées en dur mentionnées précédemment, pour les robots d'exploration qui ne peuvent pas récupérer de Javascript.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

Cela devrait aider considérablement avec la plupart des cas d'utilisation des moteurs de recherche. Si vous souhaitez un rendu entièrement dynamique pour les robots des réseaux sociaux (qui ne sont pas compatibles avec Javascript), vous devrez toujours utiliser l'un des services de pré-rendu mentionnés dans certaines des autres réponses.

J'espère que cela t'aides!

Utilisez quelque chose comme PreRender, il crée des pages statiques de votre site afin que les moteurs de recherche puissent l'indexer.

Ici, vous pouvez savoir pour quelles plateformes il est disponible: https://prerender.io/documentation/install-middleware#asp-net

Avec Angular Universal, vous pouvez générer des pages de destination pour l'application qui ressemblent à l'application complète, puis charger votre application Angular derrière.
Angular Universal génère du HTML pur signifie des pages sans javascript côté serveur et les sert aux utilisateurs sans délai. Vous pouvez donc traiter avec n'importe quel robot, robot et utilisateur (qui ont déjà une faible vitesse de processeur et de réseau). Ensuite, vous pouvez les rediriger par des liens / boutons vers votre application angulaire réelle qui est déjà chargée derrière. Cette solution est recommandée par le site officiel. -Plus d'informations sur le référencement et Angular Universal-

Les robots (ou robots) sont conçus pour analyser le contenu HTML des pages Web, mais en raison des opérations AJAX pour la récupération de données asynchrones, cela est devenu un problème car il faut du temps pour afficher la page et afficher le contenu dynamique sur celle-ci. De même, AngularJSutilisez également un modèle asynchrone, ce qui crée un problème pour les robots d'exploration Google.

Certains développeurs créent des pages html de base avec des données réelles et diffusent ces pages côté serveur au moment de l'exploration. Nous pouvons afficher les mêmes pages avec PhantomJSle côté serveur qui a _escaped_fragment_(car Google recherche #!dans les URL de notre site, puis prend tout après le #!et l'ajoute dans _escaped_fragment_le paramètre de requête). Pour plus de détails, veuillez lire ce blog .

Les robots d'exploration n'ont pas besoin d'un interface graphique assez riche, ils veulent seulement voir le contenu , vous n'avez donc pas besoin de leur donner un instantané d'une page qui a été conçue pour les humains.

Ma solution: donner au robot ce que le robot veut :

Vous devez penser à ce que veut le robot, et ne lui donner que cela.

CONSEIL ne plaisante pas avec le dos. Ajoutez simplement une petite vue avant côté serveur en utilisant la même API