Comment les moteurs de recherche traitent des applications AngularJS?
Je vois deux problèmes avec AngularJS application sur les moteurs de recherche et RÉFÉRENCEMENT:
1) Ce qui se passe avec les balises personnalisées? Les moteurs de recherche à ignorer tout le contenu à l'intérieur de ces balises? c'est à dire supposons que j'ai
<custom>
<h1>Hey, this title is important</h1>
</custom>
serait <h1>
être indexés en dépit d'être à l'intérieur de balises personnalisées?
2) Est-il un moyen d'éviter les moteurs de recherche d'indexer {{}} lie à la lettre? c'est à dire
<h2>{{title}}</h2>
Je sais que je pourrais faire quelque chose comme
<h2 ng-bind="title"></h2>
mais si je veux laisser le robot "voir" le titre? Est rendu côté serveur la seule solution?
- toutes ces "solutions", qui me donne envie de les tenir à l'écart des technologies comme AngularJS, au moins jusqu'à ce que google et tous plus intelligents les robots.
- Oui on peut se demander pourquoi de tous les AngularJS qui est un produit de Google n'est pas venu avec une solution intégrée pour cela.. Bizarre en fait..
- En fait, Misko a écrit Angulaire avant, il a travaillé pour le compte de Google. Google maintenant, les promoteurs du projet, mais ils ne sont pas à l'origine.
- Peut-être que quelqu'un ici peut/doit mettre à jour l'article de Wikipédia sur le SPA, qui stipule que "les SPAs sont généralement pas utilisés dans un contexte où l'indexation des moteurs de recherche est soit obligatoire ou souhaitable." en.wikipedia.org/wiki/Single-page_application [# optimisation des moteurs de Recherche] Theres un énorme paragraphe sur un (obscur) de java à base de cadre de appelé IsNat mais aucune suggestion que le RÉFÉRENCEMENT a été adressée par les goûts de Angularjs.
- Juste une mise à jour à partir d'avril 2016 - AUCUN de mes AngularJS sites indexés. Je sais que d'autres sont d'avoir la chance semble que google bot ne comprend pas les sites avec angular-ui-router
- Je peux confirmer ce que bien. Fait intéressant, un site que j'ai fait à Réagir et réagir-routeur est entièrement indexé, pas de problème. Je souhaite vraiment que je savais ce que le facteur de différenciation a été Angulaire entre les sites et mon Réagit un.
- je kindof à avoir des doutes, parce que Google a commencé à indexer mes pages. Mais Chrome se bloque lorsque j'essaie d'ouvrir le cache. Assez déconné..
- M J - Pourquoi ne pas voir le but? PageSpeed, Angulaire, etc. sont tous les ennemis naturels, organiques annonces sur les SERPs. À dessein. Quand vous avez un énorme business model basé sur la Rémunération Par clic... quoi de mieux pour forcer les gens à payer leurs listes de la création de toute une boîte à outils qui leur donnera pas une option, mais de le faire? Au lieu de construire des sites web de qualité rempli avec du contenu utile, cette industrie est maintenant débordant avec des astuces et des solutions qui ne sont pas les atteindre ou de les résoudre diddly squat.
Vous devez vous connecter pour publier un commentaire.
Mise À Jour Mai 2014
Les crawlers de Google maintenant exécuter le javascript - vous pouvez utiliser le Google Outils Pour Les Webmasters afin de mieux comprendre comment vos sites sont fournis par Google.
Réponse originale à cette question
Si vous souhaitez optimiser votre application pour les moteurs de recherche, il y a malheureusement aucun moyen de contourner servant une pré-version rendue pour le robot. Vous pouvez en lire plus à propos de Google recommandations pour l'ajax et javascript lourds-sites ici.
Si c'est une option que je vous recommande la lecture de cet article sur la façon de faire SEO Angulaire avec rendu côté serveur.
Je ne suis pas sûr de ce que le robot lorsqu'il rencontre des étiquettes personnalisées.
page.content
et retour html statique.Utilisation PushState et de Précomposition
Le courant (2015) façon de le faire est d'utiliser le JavaScript pushState méthode.
PushState modifie l'URL en haut de la barre de navigation sans avoir à recharger la page. Disons que vous avez une page contenant des onglets. Les onglets de masquer et d'afficher le contenu, et le contenu est inséré dynamiquement, soit à l'aide d'AJAX, ou tout simplement en paramètre display:none et display:block pour masquer et afficher le bon contenu de l'onglet.
Lorsque les pattes sont cliqués, utilisez pushState de mettre à jour l'url dans la barre d'adresse. Lorsque la page est affichée, utilisez la valeur dans la barre d'adresse afin de déterminer l'onglet afficher. Angulaire de routage va le faire automatiquement pour vous.
Précomposition
Il y a deux façons de frapper un PushState Single Page App (SPA)
La frappe initiale sur le site impliquera de frapper directement l'URL. Ultérieure coups vont tout simplement AJAX du contenu que de la PushState les mises à jour de l'URL.
Les robots de la récolte des liens d'une page, puis de les ajouter à une file d'attente pour un traitement ultérieur. Cela signifie que pour un robot, chaque coup sur le serveur est un coup direct, ils n'ont pas de naviguer via Pushstate.
Précomposition faisceaux de la première charge utile dans la première réponse du serveur, peut-être un objet JSON. Cela permet au Moteur de Recherche pour afficher la page sans l'exécution de l'appel AJAX.
Il existe des preuves pour suggérer que Google pourrait ne pas exécuter des 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 le code JavaScript
Google a été en mesure d'analyser le JavaScript, pour un certain temps maintenant, c'est pourquoi ils ont développé à l'origine Chrome, pour agir comme un complet navigateur sans le Google araignée. Si un lien est valide attribut href, la nouvelle URL peuvent être indexées. Il n'y a plus rien à faire.
Si en cliquant sur un lien en outre déclenche une pushState appel, le site peut être navigué par l'utilisateur via PushState.
Moteur de recherche de Soutien pour PushState Url
PushState est actuellement pris en charge par Google et Bing.
Google
Ici, Matt Cutts répond à Paul Irish question sur PushState pour le RÉFÉRENCEMENT:
http://youtu.be/yiAF9VdvRPw
Ici est Google annonce la pleine prise en charge 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 les PushState et index PushState Url.
Voir aussi Google webmaster tools comme Googlebot disponible. Vous verrez que votre JavaScript (y compris Angulaire) est exécutée.
Bing
Voici Bing annonce son soutien pour la jolie PushState Url daté de Mars 2013:
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
Ne pas utiliser HashBangs #!
Hashbang les url ont été une vilaine pis-aller obligation pour le promoteur de fournir un pré-rendu du site, à un endroit particulier. Ils ont encore du travail, mais vous n'avez pas besoin de les utiliser.
Hashbang Url ressembler à ceci:
domain.com/#!path/to/resource
Ce serait jumelé avec une balise comme ceci:
<meta name="fragment" content="!">
Google de ne pas indexer ce formulaire, mais au lieu de tirer une version statique du site de la _escaped_fragments_ URL et index.
Pushstate Url ressemble à tout ordinaire URL:
domain.com/path/to/resource
La différence est que Angulaires gère pour vous par l'interception de la modification du document.l'emplacement de la traiter en JavaScript.
Si vous souhaitez utiliser PushState Url (et vous n'avez probablement) de prendre tous les vieux de hachage des Url du style et metatags et simplement activer le mode HTML5 dans votre config bloc.
Test de votre site
Google Webmaster tools contient maintenant un outil qui vous permettra de récupérer une URL que google, et de rendu JavaScript, Google rend.
https://www.google.com/webmasters/tools/googlebot-fetch
Générer PushState Url Angulaire
À produire de véritables Url Angulaire, plutôt que # préfixe, définissez mode HTML5 sur votre $locationProvider objet.
Côté Serveur
Puisque vous êtes réel en utilisant des Url, vous devrez assurer le même modèle (ainsi que certains précomposé de contenu) est expédié par votre serveur pour l'ensemble des Url valides. Comment vous faites cela va varier en fonction de l'architecture de votre serveur.
Sitemap
Votre application peut utiliser des formes inhabituelles de navigation, par exemple hover ou de défilement. Pour s'assurer que Google est en mesure de conduire votre application, je serais probablement suggérer la création d'un sitemap, une simple liste de toutes les url de votre application répond. Vous pouvez placer ce à l'emplacement par défaut (/plan du site ou de l' /sitemap.xml), ou indiquer à Google à l'aide des outils pour les webmasters.
C'est une bonne idée d'avoir un sitemap de toute façon.
Prise en charge du navigateur
Pushstate travaille dans IE10. Dans les navigateurs plus anciens, Angulaire va revenir automatiquement au hachage des Url du style
Une page de démonstration
Le contenu suivant est rendu à l'aide d'un pushstate URL avec précomposition:
http://html5.gingerhost.com/london
Que peut être vérifiée, à ce lien, le contenu est indexé et apparaît dans Google.
Servir 404 et à l'article 301 de l'en-Tête codes d'état
Parce que le moteur de recherche va toujours frappé votre serveur pour chaque demande, vous pouvez vous servir d'en-tête de codes de statut de votre serveur et de s'attendre à Google de les voir.
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 courent robots qui analyse 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 ont 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 requête pour utiliser_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 leUser Agent
d'en-tête dans notre backend).C'est-à-dire, au lieu d'une requête à partir d'un navigateur qui ressemble à:
http://www.ng-newsletter.com/#!/signup/page
Un moteur de recherche, de recherche la page avec:
http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page
Nous pouvons définir le hachage préfixe de notre Angulaire des applications à l'aide d'une méthode intégrée de
ngRoute
:Et si nous avons de l'aide
html5Mode
, nous avons besoin pour mettre en œuvre cette utilisation de la balise meta:Rappel, nous pouvons définir la
html5Mode()
avec le$location
service:De la manipulation du moteur de recherche, de
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 avons détaillé encore plus dans notre livre ng-livre: Le Livre Complet sur AngularJS. Check it out à ng-book.com.
Vous devriez vraiment vérifier le tutoriel sur la construction d'un SEO-friendly AngularJS site sur l'année de moo blog. Il vous guide à travers toutes les étapes décrites sur Angulaire de la documentation. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
À l'aide de cette technique, le moteur de recherche voit l'étendu HTML au lieu de 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);
vous êtes ensemble.
Pas plus le rendu des pages.
#!
. De l'article: "Bing me dit que même s'ils continuent de soutenir le #! la version de crawlable AJAX à l'origine lancé par Google, ils trouvent qu'il n'est pas mis en œuvre correctement la plupart du temps, et ils recommandent fortement pushState à la place." Vous avez encore pour le rendu de la page HTML statique et servir pour_escaped_fragment_
Url. Bing/Google ne va pas exécuter le javascript/AJAX appels._escaped_fragment_
et à la rendre pure pages html. Cela ne résout rien mate.Les choses ont un peu changé depuis que cette question a été posée. Il y a maintenant des options pour permettre à Google d'indexer votre AngularJS site. L'option la plus facile que j'ai trouvé est d'utiliser http://prerender.io service gratuit qui va générer le crwalable pages pour vous et vous servir que pour les moteurs de recherche. Il est pris en charge sur presque tous les web côté serveur plates-formes. J'ai récemment commencé à les utiliser et le support est excellent aussi.
Je n'ai aucune affiliation avec eux, ce qui est à venir à partir d'un utilisateur heureux.
Angulaire propre site web sert de contenu simplifiée pour les moteurs de recherche: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09
Dire votre Angulaire de l'app est la consommation d'un Nœud.js/Express-driven api JSON, comme
/api/path/to/resource
. Vous pourriez peut-être rediriger toutes les demandes avec?_escaped_fragment_
à/api/path/to/resource.html
, et l'utilisation la négociation de contenu de rendre un modèle HTML du contenu, plutôt que de renvoyer les données JSON.La seule chose est, votre Angulaire itinéraires aurait besoin pour correspondre à 1:1 avec des API REST.
MODIFIER: je me suis rendu compte que cela a le potentiel pour vraiment boueux de votre api REST et je ne recommande pas de le faire en dehors de la très simple d'utilisation-cas où il pourrait être un choix naturel.
Au lieu de cela, vous pouvez utiliser un ensemble tout à fait différent des routes et des contrôleurs pour votre robot conviviale. Mais alors vous êtes la duplication de tous vos AngularJS routes et les contrôleurs de Node/Express.
J'ai installé sur la génération des captures d'écran avec une tête navigateur, même si je pense que c'est un peu moins-que-idéales.
Une bonne pratique peut être trouvé ici:
http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag
Que, désormais, Google a changé leur exploration AJAX proposition.
tl;dr: [Google] ne sont plus de recommander l'exploration AJAX proposition [Google] de retour en 2009.
Google Crawlable Ajax Spec, tel que mentionné dans les autres réponses ici, est essentiellement la réponse.
Si vous êtes intéressé à la façon dont les autres moteurs de recherche et sociale des bots font face aux mêmes problèmes que j'ai écrit jusqu'à l'état de l'art ici: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
Je travaille pour une https://ajaxsnapshots.com, une entreprise qui met en œuvre la Crawlable Ajax Spec comme un service - les informations contenues dans ce rapport est basé sur les observations de nos journaux.
J'ai trouvé une solution élégante serait de couvrir la plupart de vos bases. Je l'ai écrit d'abord ici et a répondu à un autre semblable, StackOverflow question ici qui y fait référence.
Pour info cette solution comprend également codé en dur de secours tags Javascript n'est pas capté par le robot. Je n'ai pas explicitement mentionné, mais il vaut la peine de mentionner que vous devez l'activer en mode HTML5 pour une bonne prise en charge des URL.
Également note: ce ne sont pas les dossiers complets, juste les parties importantes de ceux qui sont pertinents. Si vous avez besoin d'aide pour rédiger le texte standard pour les directives, les services, etc. qui peut être trouvé ailleurs. De toute façon, ici, va...
app.js
C'est là où vous fournir les métadonnées personnalisées pour chacun de vos itinéraires (titre, description, etc.)
metadata-service.js (service)
Définit les métadonnées personnalisées options ou utiliser les valeurs par défaut comme des issues.
metaproperty.js (directive)
Les paquets de service de métadonnées résultats pour la vue.
index.html
Complet avec la codé en dur de secours tags mentionné précédemment, pour les robots qui ne peuvent pas ramasser n'importe quel Javascript.
Cela devrait aider considérablement avec la plupart des moteurs de recherche des cas d'utilisation. Si vous voulez pleinement rendu dynamique pour le réseau social robots (qui sont douteux sur la prise en charge de Javascript), vous devrez toujours utiliser l'un des pré-rendu de services mentionnés dans les réponses.
Espérons que cette aide!
Utiliser quelque chose comme pré-rendu, ça fait des pages statiques de votre site afin que les moteurs de recherche peuvent indexer.
Ici vous pouvez trouver pour les plateformes, il est disponible: https://prerender.io/documentation/install-middleware#asp-net
Angulaire Universelle, vous pouvez générer des pages d'atterrissage pour l'application qui ressemblent à la complète application et ensuite chargez votre Angulaire app derrière elle.
Angulaire Universelle génère du HTML pur signifie le non-javascript des pages de côté serveur et de les servir à des utilisateurs sans retarder. De sorte que vous pouvez traiter avec n'importe quel robot, bot et de l'utilisateur (qui ont déjà peu de ressources processeur et réseau grande vitesse).Ensuite, vous pouvez les rediriger par des liens/boutons de votre angulaire de l'application qui est déjà chargé derrière elle. Cette solution est recommandée par le site officiel. -Plus d'infos sur le RÉFÉRENCEMENT et Angulaire Universelle-
Robots (bots) sont conçus pour analyser le contenu HTML des pages web, mais en raison des opérations AJAX asynchrone pour la récupération de données, cela est devenu un problème car il prend quand même le temps de rendu de la page et afficher du contenu dynamique sur elle. De même,
AngularJS
également utiliser le modèle asynchrone, ce qui crée un problème pour les crawlers de Google.Certains développeurs de créer des pages html avec des données réelles et de servir ces pages depuis le côté serveur au moment de l'analyse. On peut rendre les mêmes pages avec
PhantomJS
servir sur le côté qui a_escaped_fragment_
(Parce que Google cherche#!
dans notre site, les url et prend alors tout ce qui est après le#!
et l'ajoute dans_escaped_fragment_
paramètre de requête). Pour plus de détails, veuillez lire ce blog .Les robots n'ont pas besoin d'un riche vedette joli style gui, ils veulent seulement voir le contenu, de sorte que vous n'avez pas besoin de leur donner un instantané d'une page qui a été construit pour les humains.
Ma solution: pour donner le robot ce que le robot veut:
Vous devez penser à ce qui ne le robot voulez, et donnez-lui seulement que.
ASTUCE ne plaisante pas avec le dos. Il suffit d'ajouter un peu de côté de serveur frontview à l'aide de la même API