Comment les moteurs de recherche gèrent-ils les applications AngularJS?


697

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?


17
toutes ces "solutions" me donnent juste envie de m'éloigner des technologies comme AngularJS, au moins jusqu'à ce que google et tous aient des robots plus intelligents.
Codemonkey

22
@Codemonkey: Oui, on se demanderait pourquoi tous les AngularJS qui sont un produit de Google n'ont pas trouvé de solution intégrée pour cela .. Wierd en fait ..
Roy MJ

11
En fait, Misko a écrit Angular avant de travailler pour Google. Google sponsorise maintenant le projet, mais ce ne sont pas les initiateurs.
superluminaire

2
Peut-être que quelqu'un ici peut / devrait mettre à jour l'article Wikipédia sur les SPA qui déclare que "les SPA ne sont généralement pas utilisés dans un contexte où l'indexation des moteurs de recherche est soit une exigence, soit souhaitable." en.wikipedia.org/wiki/Single-page_application [# Optimisation pour les moteurs de recherche] Il y a un énorme paragraphe sur un framework (obscur) basé sur Java appelé IsNat mais aucune suggestion que le référencement a été traité par des gens comme Angularjs.
linojon

3
@Roy MJ - Pourquoi personne ne voit-il l'intention? PageSpeed, Angular, etc. sont tous des ennemis des listes naturelles et organiques sur les SERPs. À dessein. Lorsque vous avez un énorme modèle commercial basé sur le paiement par clic ... comment mieux forcer les gens à payer pour leurs annonces que de créer une boîte à outils complète qui ne leur donnera aucune option, mais de le faire? Au lieu de créer des sites Web de qualité remplis de contenu précieux, cette industrie regorge maintenant de tricheurs et de solutions qui n'atteignent pas ou ne résolvent pas le squat.
Steven Ventimiglia

Réponses:


403

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.


13
Ce n'est plus d'actualité. Vous devez maintenant utiliser pushState à la place. Il n'est pas nécessaire de diffuser une version statique distincte du site.
superluminaire

3
même avec la mise à jour google, ng-view ne sera pas rendu correctement, comme je peux le voir dans les outils Google pour les webmasters
tschiela

10
Oui, ce n'est pas parce qu'ils exécutent javascript que votre page sera indexée correctement. Le moyen le plus sûr est de détecter l'agent utilisateur google bot, d'utiliser un navigateur sans tête comme phantomjs, d'obtenir page.contentet de renvoyer du HTML statique.
testeur

6
Je me rends compte que cette question est spécifique au référencement, mais gardez à l'esprit que d'autres robots (Facebook, Twitter, etc.) ne sont pas encore en mesure d'évaluer JavaScript. Le partage de pages sur des sites de médias sociaux, par exemple, serait toujours un problème sans stratégie de rendu côté serveur.
Stephen Watkins

3
S'il vous plaît, quelqu'un peut-il donner un exemple de site AngularJS correctement indexé sans implémenter la spécification du schéma d'exploration de Google?
check_ca

470

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.


Je dois examiner cela - merci pour l'explication. Une chose que je me demande toujours, est-ce que Google exécute maintenant le javascript avant d'indexer la page?
jvv

1
"PushState modifie l'URL dans la barre de navigation supérieure sans recharger la page ... Lorsque vous cliquez sur les onglets, 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 laquelle onglet à afficher. Le routage angulaire le fera automatiquement pour vous. " Ampoule!
atconway

1
@superluminary, pourriez-vous, s'il vous plaît, expliquer le sujet un peu plus en profondeur? Surtout la section «Côté serveur». J'utilise angularjs + angularjs-route + locationProvider.html5Mode + api + navigation dynamique (pas celle statique comme sur html5.gingerhost.com. Les URL sont bien affichées, mais le contenu ne semble pas être indexé. Dois-je servir en quelque sorte un contenu statique tout en accédant à une page par une URL directe? Je suis en fait confus par ce message: >> vous devrez vous assurer que le même modèle est expédié par votre serveur pour toutes les URL valides. Pourriez-vous l'expliquer? Merci à l'avance.
Sray

1
@sray - Si chaque URL de votre site diffuse le même modèle, le navigateur pourra récupérer le modèle et Angular pourra le récupérer à partir de là, en inspectant l'URL et en affichant le contenu correct. Si frapper cette URL directement sur le serveur renvoie un 404 ou un 500, alors vous avez un problème, les liens directs ne fonctionneront pas, les signets ne fonctionneront pas et vous ne serez pas indexés. Voyez-vous maintenant?
superluminaire

1
@ user3339411 - Vous devez avoir une URL pour chaque page à laquelle votre site répondra. Si votre site n'a besoin que de répondre à une URL avec un seul ensemble de contenu, vous n'avez absolument pas besoin de routage. C'est très bien pour un site simple. Si toutefois votre site apporte des données différentes (via JSON) pour différentes URL, il serait judicieux d'utiliser le routage. Étant donné que les pages statiques Github sont basées sur des fichiers, vous auriez besoin d'un fichier HTML réel sauvegardant chaque URL dans cette instance. Il n'y a pas de règle selon laquelle un site Web doit être basé sur des fichiers, et si vous utilisez une plate-forme alternative, vous pouvez servir le même modèle pour plusieurs URL.
superluminaire

107

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 .


1
SEO4Ajax est également un bon exemple de service payant (gratuit pendant la bêta). Malheureusement, il semble que je ne suis pas autorisé à modifier cette réponse pour l'ajouter à la liste.
check_ca

1
@auser Recommandez-vous toujours cette approche? Le nouveau commentaire le plus voté semble décourager cette approche.
Lycha

Ceci est un excellent exemple de pourquoi nous ne devrions jamais dire des choses comme "guide définitif" dans CS :). Les principaux moteurs de recherche exécutent désormais Javascript, donc cette réponse doit être réécrite ou supprimée.
Seb

1
@seb, cela est toujours nécessaire pour, disons, les balises graphiques ouvertes qui doivent être dans la page lorsque les robots l'explorent. Par exemple, les cartes Facebook ou Twitter en ont besoin. Mais cette réponse devrait être mise à jour pour se concentrer sur l'état push HTML5 au lieu du hashbang qui est désormais obsolète.
adriendenat

@Grsmto vous avez raison! Ensuite, je suppose que cela devrait être réécrit parce qu'il dit que les principaux moteurs de recherche n'exécutent pas JS, ce qui n'est plus vrai.
Seb

57

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.


@Brad Green, même si la question était fermée (pour quelque raison que ce soit), vous pourriez être en mesure d'y répondre. Je suppose que je dois manquer quelque chose: stackoverflow.com/questions/16224385/…
Christoph

41

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.


3
Cela devrait être la meilleure réponse maintenant. Nous sommes en 2014 et la réponse de @joakimbl n'est plus optimale.
Stan

11
Ceci est une erreur. Cet article (de mars 2013) ne dit rien sur l'exécution par Bing de javascript. Bing donne simplement une recommandation d'utiliser pushstate au lieu de leur précédente recommandation d'utilisation #!. De l'article: "Bing me dit que bien qu'ils prennent toujours en charge la version #! D'AJAX explorable initialement lancée par Google, ils constatent qu'elle n'est pas implémentée correctement la plupart du temps, et ils recommandent fortement pushState à la place." Vous devez toujours rendre le code HTML statique et le servir pour les _escaped_fragment_URL. Bing / Google n'exécutera pas les appels javascript / AJAX.
Prerender.io

2
Vous avez toujours besoin _escaped_fragment_et restituer des pages HTML pures. Cela ne résout rien du tout.
Stan

Le robot google ne peut toujours pas voir le contenu dynamique de mon site, seulement une page vide.
calmbird

site de recherche: mysite.com affiche {{staff}}, pas le contenu chargé via AngularJS. Comme si le robot Google n'avait jamais entendu parler de JavaScript. Que puis-je faire?
Toolkit

17

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.


6
Le code de prerender.io est sur github ( github.com/collectiveip/prerender ) afin que n'importe qui puisse l'exécuter sur ses propres serveurs.
user276648

Ceci est désormais également dépassé. Voir la réponse de @ user3330270 ci-dessous.
Les Hazlewood

2
Ce n'est pas obsolète. La réponse de @ user3330270 est incorrecte. L'article auquel ils pointent indique simplement d'utiliser pushstate au lieu du # !. Vous devez toujours rendre les pages statiques pour les robots, car ils n'exécutent pas javascript.
Prerender.io

9

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.



7

À 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.


@Toolkit que voulez-vous dire?
Thor

1
Googlebot n'est PAS en mesure d'analyser les sites Web angulaires
Toolkit

4
@Toolkit, vous parlez de cerceau absolu, mon site angulaire complet a été indexé par google avec des métadonnées dynamiques sans aucun problème
twigg

@twigg vous avez une logique défectueuse, vous voulez dire que si un (votre) site Web Angular était indexé, tous l'étaient. Eh bien, j'ai une surprise pour vous. AUCUN des miens n'a été répertorié. Peut-être parce que j'utilise un routeur ui angulaire ou qui sait pourquoi. Pas même les pages principales sans données ajax
Toolkit

@Toolkit Si même vos pages html statiques ne sont pas indexées, cela n'a rien à voir avec la capacité de Google à explorer les fichiers JS. Si vous dites que google ne peut pas ramper correctement, eh bien je pense que vous vous trompez
phil294

6

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.


Le lien est en baisse dans le blog répertorié.ajaxsnapshots.com
Kevin

4

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!


Je suis également en train de suivre cette solution et j'ai pensé comme ça avant cela, mais je veux demander aux moteurs de recherche de lire le contenu des balises personnalisées.
Ravinder Payal

@RavinderPayal pouvez-vous vérifier cette solution avec seoreviewtools.com/html-headings-checker
vijay


2

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-


1

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 .


Ce n'est plus le cas depuis octobre 2017, cette calculatrice d'impôt sur le revenu revenue-tax.co.uk est construite avec des AngularJs purs (même les titres sont comme <title> Tax Calculator pour £ {{gainsSliders.yearly | number: 0}} salaire </title> qui se traduit par "calculateur d'impôt pour 30000 £ de salaire), et Google les indexe les classe sur la première page pour des centaines de mots clés. Construisez simplement vos sites Web pour les humains, mae les géniaux, et Google s'occupera du reste ;)
Kaszoni Ferencz

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.