Ich sehe zwei Probleme mit der AngularJS-Anwendung in Bezug auf Suchmaschinen und SEO:

1) Was passiert mit benutzerdefinierten Tags? Ignorieren Suchmaschinen den gesamten Inhalt dieser Tags? Das heißt, ich habe

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

würde <h1>indiziert werden, obwohl sie sich in benutzerdefinierten Tags befinden?

2) Gibt es eine Möglichkeit zu vermeiden, dass Suchmaschinen {{}} Bindungen buchstäblich indizieren? dh

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

Ich weiß, ich könnte so etwas tun

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

aber was ist, wenn ich den Crawler tatsächlich den Titel "sehen" lassen möchte? Ist serverseitiges Rendern die einzige Lösung?

Update Mai 2014

Google-Crawler führen jetzt Javascript aus. Mithilfe der Google Webmaster-Tools können Sie besser verstehen, wie Ihre Websites von Google gerendert werden.

Ursprüngliche Antwort
Wenn Sie Ihre App für Suchmaschinen optimieren möchten, führt leider kein Weg daran vorbei, dem Crawler eine vorgerenderte Version bereitzustellen. Weitere Informationen zu den Empfehlungen von Google für Websites mit Ajax und Javascript finden Sie hier .

Wenn dies eine Option ist, würde ich empfehlen, diesen Artikel darüber zu lesen, wie SEO für Angular mit serverseitigem Rendering durchgeführt wird.

Ich bin nicht sicher, was der Crawler tut, wenn er auf benutzerdefinierte Tags stößt.

Verwenden Sie PushState und Precomposition

Die derzeitige (2015) Methode hierfür ist die Verwendung der JavaScript-PushState-Methode.

PushState ändert die URL in der oberen Browserleiste, ohne die Seite neu zu laden. Angenommen, Sie haben eine Seite mit Registerkarten. Die Registerkarten verbergen und zeigen Inhalte an, und der Inhalt wird dynamisch eingefügt, entweder mit AJAX oder indem Sie einfach display: none und display: block einstellen, um den korrekten Inhalt der Registerkarten auszublenden und anzuzeigen.

Wenn Sie auf die Registerkarten klicken, aktualisieren Sie die URL in der Adressleiste mit pushState. Verwenden Sie beim Rendern der Seite den Wert in der Adressleiste, um zu bestimmen, welche Registerkarte angezeigt werden soll. Angular Routing erledigt dies automatisch für Sie.

Vorkomposition

Es gibt zwei Möglichkeiten, eine PushState Single Page App (SPA) zu starten.

1. Über PushState, wo der Benutzer auf einen PushState-Link klickt und der Inhalt in AJAXed ist.
2. Durch direktes Klicken auf die URL.

Der erste Treffer auf der Website beinhaltet das direkte Aufrufen der URL. Nachfolgende Treffer werden einfach AJAX im Inhalt, wenn der PushState die URL aktualisiert.

Crawler sammeln Links von einer Seite und fügen sie zur späteren Verarbeitung einer Warteschlange hinzu. Dies bedeutet, dass für einen Crawler jeder Treffer auf dem Server ein direkter Treffer ist und er nicht über Pushstate navigiert.

Precomposition bündelt die anfängliche Nutzlast in der ersten Antwort vom Server, möglicherweise als JSON-Objekt. Dadurch kann die Suchmaschine die Seite rendern, ohne den AJAX-Aufruf auszuführen.

Es gibt Hinweise darauf, dass Google möglicherweise keine AJAX-Anforderungen ausführt. Mehr dazu hier:

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

Suchmaschinen können JavaScript lesen und ausführen

Google ist seit einiger Zeit in der Lage, JavaScript zu analysieren. Deshalb haben sie ursprünglich Chrome entwickelt, um als voll funktionsfähiger Headless-Browser für die Google-Spinne zu fungieren. Wenn ein Link ein gültiges href-Attribut hat, kann die neue URL indiziert werden. Es gibt nichts mehr zu tun.

Wenn das Klicken auf einen Link zusätzlich einen PushState-Aufruf auslöst, kann der Benutzer über PushState auf der Site navigieren.

Suchmaschinenunterstützung für PushState-URLs

PushState wird derzeit von Google und Bing unterstützt.

Google

Hier ist Matt Cutts, der auf Paul Irishs Frage zu PushState for SEO antwortet:

http://youtu.be/yiAF9VdvRPw

Hier kündigt Google die vollständige JavaScript-Unterstützung für die Spinne an:

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

Das Ergebnis ist, dass Google PushState unterstützt und PushState-URLs indiziert.

Siehe auch Google Webmaster-Tools als Googlebot abrufen. Sie werden sehen, dass Ihr JavaScript (einschließlich Angular) ausgeführt wird.

Bing

Hier ist Bings Ankündigung der Unterstützung für hübsche PushState-URLs vom März 2013:

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

Verwenden Sie keine HashBangs #!

Hashbang-URLs waren eine hässliche Lücke, in der der Entwickler eine vorgerenderte Version der Site an einem bestimmten Ort bereitstellen musste. Sie funktionieren immer noch, aber Sie müssen sie nicht verwenden.

Hashbang-URLs sehen folgendermaßen aus:

domain.com/#!path/to/resource

Dies würde mit einem Metatag wie diesem gepaart werden:

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

Google indiziert sie nicht in dieser Form, sondern ruft stattdessen eine statische Version der Website von der URL _escaped_fragments_ ab und indiziert diese.

Pushstate-URLs sehen aus wie jede normale URL:

domain.com/path/to/resource

Der Unterschied besteht darin, dass Angular sie für Sie behandelt, indem die Änderung an document.location abgefangen wird, die sich in JavaScript damit befasst.

Wenn Sie PushState-URLs verwenden möchten (und dies wahrscheinlich auch tun), entfernen Sie alle alten URLs und Metatags im Hash-Stil und aktivieren Sie einfach den HTML5-Modus in Ihrem Konfigurationsblock.

Testen Sie Ihre Site

Die Google Webmaster-Tools enthalten jetzt ein Tool, mit dem Sie eine URL als Google abrufen und JavaScript so rendern können, wie Google es rendert.

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

Generieren von PushState-URLs in Angular

Legen Sie den HTML5-Modus für Ihr $ locationProvider-Objekt fest, um echte URLs in Angular anstelle von # mit Präfix zu generieren.

$locationProvider.html5Mode(true);

Serverseite

Da Sie echte URLs verwenden, müssen Sie sicherstellen, dass dieselbe Vorlage (plus einige vorkomponierte Inhalte) von Ihrem Server für alle gültigen URLs gesendet wird. Wie Sie dies tun, hängt von Ihrer Serverarchitektur ab.

Seitenverzeichnis

Ihre App verwendet möglicherweise ungewöhnliche Navigationsformen, z. B. Schweben oder Scrollen. Um sicherzustellen, dass Google Ihre App steuern kann, würde ich wahrscheinlich vorschlagen, eine Sitemap zu erstellen, eine einfache Liste aller URLs, auf die Ihre App reagiert. Sie können dies am Standardspeicherort (/ sitemap oder /sitemap.xml) platzieren oder Google mithilfe von Webmaster-Tools darüber informieren.

Es ist trotzdem eine gute Idee, eine Sitemap zu haben.

Browser-Unterstützung

Pushstate funktioniert in IE10. In älteren Browsern greift Angular automatisch auf URLs im Hash-Stil zurück

Eine Demoseite

Der folgende Inhalt wird unter Verwendung einer Pushstate-URL mit Vorkomposition gerendert:

http://html5.gingerhost.com/london

Wie überprüft werden kann, wird der Inhalt unter diesem Link indiziert und in Google angezeigt.

Serving 404 und 301 Header Status Codes

Da die Suchmaschine bei jeder Anfrage immer auf Ihren Server trifft, können Sie Header-Statuscodes von Ihrem Server bereitstellen und erwarten, dass Google sie sieht.

Lassen Sie uns definitiv über AngularJS und SEO sprechen

Google, Yahoo, Bing und andere Suchmaschinen crawlen das Web auf herkömmliche Weise mit herkömmlichen Crawlern. Sie führen Roboter aus , die den HTML-Code auf Webseiten crawlen und dabei Informationen sammeln. Sie halten interessante Wörter und suchen nach anderen Links zu anderen Seiten (diese Links, deren Anzahl und Anzahl kommen mit SEO ins Spiel).

Warum beschäftigen sich Suchmaschinen nicht mit Javascript-Sites?

Die Antwort hat mit der Tatsache , dass der Suchmaschinen - Roboter arbeitet durch Maden Browser zu tun und sie am meisten oft nicht haben ein Javascript - Rendering - Engine , die JavaScript einer Seite zu machen. Dies funktioniert für die meisten Seiten, da sich die meisten statischen Seiten nicht für das Rendern ihrer Seite durch JavaScript interessieren, da deren Inhalt bereits verfügbar ist.

Was kann man dagegen tun?

Glücklicherweise haben Crawler der größeren Websites damit begonnen, einen Mechanismus zu implementieren, mit dem wir unsere JavaScript-Websites crawlbar machen können. Wir müssen jedoch eine Änderung an unserer Website vornehmen .

Wenn wir unser Sein ändern hashPrefix, #!anstatt einfach zu sein #, ändern moderne Suchmaschinen die Anforderung, _escaped_fragment_statt zu verwenden #!. (Im HTML5-Modus, dh wenn wir Links ohne das Hash-Präfix haben, können wir dieselbe Funktion implementieren, indem wir uns den User AgentHeader in unserem Backend ansehen.)

Das heißt, anstelle einer Anfrage von einem normalen Browser, die aussieht wie:

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

Eine Suchmaschine durchsucht die Seite mit:

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

Wir können das Hash-Präfix unserer Angular-Apps mithilfe einer integrierten Methode festlegen ngRoute:

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

Und wenn wir verwenden html5Mode, müssen wir dies mithilfe des Meta-Tags implementieren:

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

Zur Erinnerung, wir können das html5Mode()mit dem $locationService einstellen :

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

Umgang mit der Suchmaschine

Wir haben viele Möglichkeiten zu bestimmen, wie wir mit der tatsächlichen Bereitstellung von Inhalten für Suchmaschinen als statisches HTML umgehen. Wir können selbst ein Backend hosten, wir können einen Service verwenden, um ein Backend für uns zu hosten, wir können einen Proxy verwenden, um den Inhalt bereitzustellen usw. Schauen wir uns einige Optionen an:

Selbst gehostet

Wir können einen Dienst schreiben, der das Crawlen unserer eigenen Website mit einem kopflosen Browser wie Phantomjs oder Zombiejs übernimmt, einen Schnappschuss der Seite mit gerenderten Daten erstellt und als HTML speichert. Immer wenn wir die Abfragezeichenfolge ?_escaped_fragment_in einer Suchanforderung sehen, können wir den statischen HTML-Snapshot, den wir von der Seite erstellt haben, anstelle der vorgerenderten Seite nur über JS liefern. Dies erfordert ein Backend, das unsere Seiten mit bedingter Logik in der Mitte liefert. Wir können so etwas wie das Backend von prerender.io als Ausgangspunkt verwenden, um dies selbst auszuführen. Natürlich müssen wir uns noch um das Proxying und das Snippet kümmern, aber es ist ein guter Anfang.

Mit einem kostenpflichtigen Service

Der einfachste und schnellste Weg, um Inhalte in Suchmaschinen zu bringen, ist die Verwendung eines Dienstes. Brombone , seo.js , seo4ajax und prerender.io sind gute Beispiele dafür, die das oben genannte Rendering von Inhalten für Sie hosten. Dies ist eine gute Option für Zeiten, in denen wir keinen Server / Proxy ausführen möchten. Außerdem ist es normalerweise super schnell.

Weitere Informationen über die Winkel- und SEO, schrieben wir ein umfangreiches Tutorial darauf an http://www.ng-newsletter.com/posts/serious-angular-seo.html und wir detailliert es noch in unserem Buch ng-Buch: Das komplette Buch über AngularJS . Schau es dir auf ng-book.com an .

Sie sollten sich unbedingt das Tutorial zum Erstellen einer SEO-freundlichen AngularJS-Site im Jahr des Moo-Blogs ansehen. Er führt Sie durch alle Schritte, die in Angulars Dokumentation beschrieben sind. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Mit dieser Technik sieht die Suchmaschine den erweiterten HTML-Code anstelle der benutzerdefinierten Tags.

Dies hat sich drastisch geändert.

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

Wenn Sie verwenden: $ locationProvider.html5Mode (true); Sie sind eingestellt.

Keine Rendering-Seiten mehr.

Die Dinge haben sich ziemlich verändert, seit diese Frage gestellt wurde. Es gibt jetzt Optionen, mit denen Google Ihre AngularJS-Site indizieren kann. Die einfachste Option, die ich gefunden habe, war die Verwendung des kostenlosen Dienstes http://prerender.io , der die crwalable-Seiten für Sie generiert und diese den Suchmaschinen zur Verfügung stellt. Es wird auf fast allen serverseitigen Webplattformen unterstützt. Ich habe vor kurzem angefangen, sie zu verwenden, und der Support ist auch ausgezeichnet.

Ich habe keine Zugehörigkeit zu ihnen, dies kommt von einem glücklichen Benutzer.

Angulars eigene Website bietet Suchmaschinen vereinfachte Inhalte: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Angenommen, Ihre Angular-App verwendet eine Node.js / Express-gesteuerte JSON-API wie /api/path/to/resource. Möglicherweise können Sie Anforderungen mit ?_escaped_fragment_an umleiten /api/path/to/resource.htmlund mithilfe der Inhaltsaushandlung eine HTML-Vorlage des Inhalts rendern, anstatt die JSON-Daten zurückzugeben.

Das einzige ist, dass Ihre Angular-Routen 1: 1 mit Ihrer REST-API übereinstimmen müssen.

EDIT : Mir ist klar, dass dies das Potenzial hat, Ihre REST-API wirklich zu verwirren, und ich empfehle nicht, dies außerhalb sehr einfacher Anwendungsfälle zu tun, in denen es eine natürliche Passform sein könnte.

Stattdessen können Sie für Ihre roboterfreundlichen Inhalte völlig andere Routen und Steuerungen verwenden. Dann duplizieren Sie jedoch alle Ihre AngularJS-Routen und -Controller in Node / Express.

Ich habe mich entschlossen, Schnappschüsse mit einem kopflosen Browser zu erstellen, obwohl ich der Meinung bin, dass dies etwas weniger als ideal ist.

Eine gute Praxis finden Sie hier:

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

Ab sofort hat Google seinen AJAX-Crawling-Vorschlag geändert.

Die Zeiten haben sich geändert. Solange Sie Googlebot nicht daran hindern, Ihre JavaScript- oder CSS-Dateien zu crawlen, können wir Ihre Webseiten im Allgemeinen wie moderne Browser rendern und verstehen.

tl; dr: [Google] empfiehlt den AJAX-Crawling-Vorschlag [Google] aus dem Jahr 2009 nicht mehr.

Die Crawlable Ajax Spec von Google, auf die in den anderen Antworten hier verwiesen wird, ist im Grunde die Antwort.

Wenn Sie daran interessiert sind, wie andere Suchmaschinen und soziale Bots mit denselben Problemen umgehen, habe ich den Stand der Technik hier beschrieben: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Ich arbeite für https://ajaxsnapshots.com , ein Unternehmen, das die crawlbare Ajax-Spezifikation als Service implementiert. Die Informationen in diesem Bericht basieren auf Beobachtungen aus unseren Protokollen.

Ich habe eine elegante Lösung gefunden, die die meisten Ihrer Grundlagen abdeckt. Ich habe anfangs hier darüber geschrieben und hier eine andere ähnliche StackOverflow-Frage beantwortet , die darauf verweist.

Zu Ihrer Information, diese Lösung enthält auch fest codierte Fallback-Tags für den Fall, dass Javascript vom Crawler nicht erfasst wird. Ich habe es nicht explizit umrissen, aber es ist erwähnenswert, dass Sie den HTML5-Modus für eine ordnungsgemäße URL-Unterstützung aktivieren sollten.

Beachten Sie auch: Dies sind nicht die vollständigen Dateien, sondern nur die wichtigen Teile der relevanten Dateien. Wenn Sie Hilfe beim Schreiben des Boilerplate für Anweisungen, Dienste usw. benötigen, finden Sie diese an anderer Stelle. Wie auch immer, hier geht ...

app.js.

Hier stellen Sie die benutzerdefinierten Metadaten für jede Ihrer Routen bereit (Titel, Beschreibung usw.).

$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)

Legt die benutzerdefinierten Metadatenoptionen fest oder verwendet Standardeinstellungen als Fallbacks.

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 (Direktive)

Packt die Ergebnisse des Metadatendienstes für die Ansicht.

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

Komplett mit den zuvor erwähnten fest codierten Fallback-Tags für Crawler, die kein Javascript aufnehmen können.

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

Dies sollte bei den meisten Anwendungsfällen von Suchmaschinen erheblich helfen. Wenn Sie ein vollständig dynamisches Rendering für Crawler sozialer Netzwerke wünschen (was bei der Unterstützung von Javascript zweifelhaft ist), müssen Sie dennoch einen der in einigen anderen Antworten genannten Vor-Rendering-Dienste verwenden.

Hoffe das hilft!

Verwenden Sie PreRender, um statische Seiten Ihrer Website zu erstellen, damit Suchmaschinen sie indizieren können.

Hier erfahren Sie, für welche Plattformen es verfügbar ist: https://prerender.io/documentation/install-middleware#asp-net

Mit Angular Universal können Sie Zielseiten für die App erstellen, die wie die gesamte App aussehen, und anschließend Ihre Angular-App dahinter laden.
Angular Universal generiert reines HTML, dh keine Javascript-Seiten auf der Serverseite, und stellt sie den Benutzern ohne Verzögerung zur Verfügung. So können Sie mit jedem Crawler, Bot und Benutzer (der bereits eine niedrige CPU- und Netzwerkgeschwindigkeit hat) umgehen. Anschließend können Sie sie über Links / Schaltflächen zu Ihrer eigentlichen Winkel-App umleiten, die bereits dahinter geladen wurde. Diese Lösung wird von der offiziellen Website empfohlen. -Mehr Infos zu SEO und Angular Universal-

Crawler (oder Bots) dienen zum Crawlen von HTML-Inhalten von Webseiten. Aufgrund von AJAX-Vorgängen für das asynchrone Abrufen von Daten wurde dies jedoch zu einem Problem, da es einige Zeit dauert, Seiten zu rendern und dynamischen Inhalt darauf anzuzeigen. AngularJSVerwenden Sie in ähnlicher Weise auch ein asynchrones Modell, das Probleme für Google-Crawler verursacht.

Einige Entwickler erstellen einfache HTML-Seiten mit realen Daten und stellen diese Seiten zum Zeitpunkt des Crawls von der Serverseite aus bereit. Wir können dieselben Seiten mit PhantomJSOn-Serve-Seite rendern, die hat _escaped_fragment_(weil Google #!in unseren Website-URLs sucht und dann alles nach dem nimmt #!und es im _escaped_fragment_Abfrageparameter hinzufügt ). Für weitere Informationen lesen Sie bitte diesen Blog .

Die Crawler benötigen keine reichhaltige, hübsch gestaltete Benutzeroberfläche. Sie möchten nur den Inhalt anzeigen , sodass Sie ihnen keinen Schnappschuss einer Seite geben müssen, die für Menschen erstellt wurde.

Meine Lösung: dem Crawler geben, was der Crawler will :

Sie müssen sich überlegen, was der Crawler will, und ihm nur das geben.

TIPP Leg dich nicht mit dem Rücken an. Fügen Sie einfach eine kleine serverseitige Frontansicht mit derselben API hinzu