Użyj PushState i Precomposition

Bieżącym (2015) sposobem na to jest użycie metody JavaScript pushState.

PushState Zmienia Adres URL w górnym pasku przeglądarki bez przeładowywania strony. Powiedzmy, że masz stronę zawierającą karty. Karty ukrywają i pokazują zawartość, a zawartość jest wstawiana dynamicznie, używając AJAX lub po prostu ustawiając display: none i display: block, aby ukryć i pokazać poprawną zawartość kart.

Po kliknięciu kart użyj pushState, aby zaktualizować adres url na pasku adresu. Gdy strona jest renderowana, użyj wartości na pasku adresu, aby określić, która karta ma zostać wyświetlona. Routing kątowy zrobi to za ciebie automatycznie.

Prekompozycja

1. poprzez PushState, gdzie użytkownik klika link PushState i zawartość jest AJAXed.
2. poprzez bezpośrednie trafienie adresu URL.

Początkowe trafienie na stronie będzie wymagało bezpośredniego trafienia adresu URL. Kolejne trafienia będą po prostu AJAX w treści, gdy PushState aktualizuje adres URL.

Crawlery pobierają linki ze strony, a następnie dodają je do kolejki w celu późniejszego przetworzenia. Oznacza to, że dla crawlera każde trafienie na serwerze jest bezpośrednim trafieniem, nie poruszają się po Pushstate.

Precomposition łączy początkowy ładunek z pierwszą odpowiedzią serwera, prawdopodobnie jako obiekt JSON. Pozwala to wyszukiwarce renderować stronę bez wykonywania wywołania AJAX.

Tam czy jakieś dowody sugerują, że Google może nie wykonywać żądań AJAX. Więcej na ten temat tutaj:

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

Wyszukiwarki mogą odczytywać i wykonywać JavaScript

Google od jakiegoś czasu jest w stanie analizować JavaScript, dlatego pierwotnie opracowali Chrome, aby działać jako w pełni funkcjonalna przeglądarka bezgłowa dla Google spider. Jeśli link ma poprawny href atrybut, nowy adres URL może być indeksowany. Nie ma nic więcej do roboty.

Jeśli kliknięcie linku dodatkowo spowoduje wywołanie pushState, użytkownik może poruszać się po stronie za pomocą PushState.

Obsługa wyszukiwarek dla adresów URL PushState

PushState jest obecnie obsługiwany przez Google i Bing.

Google

Oto Matt Cutts odpowiadający na pytanie Paula Irish ' a dotyczące PushState dla SEO:

Http://youtu.be/yiAF9VdvRPw

Oto Google zapowiedź pełnej obsługi JavaScript dla pająka:

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

Wynik jest taki, że Google obsługuje PushState i indeksuje adresy URL PushState.

Zobacz także Google webmaster tools' fetch jako Googlebot. Zobaczysz, że Twój JavaScript (w tym Angular) jest wykonywany.

Bing

Oto ogłoszenie Binga o wsparciu dla pretty Pushstate URLs z marca 2013:

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

Nie używaj Hashbangów #!

Adresy URL Hashbang były brzydkim stopgapem wymagającym od dewelopera dostarczenia wstępnie renderowanej wersji witryny w specjalnej lokalizacji. Nadal działają, ale nie musisz ich używać.

Adresy URL Hashbang wyglądają tak:

domain.com/#!path/to/resource

To byłoby sparowane z metatagiem jak to:

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

Google nie indeksuje ich w tej formie, ale zamiast tego pobiera statyczną wersję witryny z adresu URL _escaped_fragments_ i indeksu, który.

Pushstate adresy URL wyglądają jak zwykłe adresy URL:

domain.com/path/to/resource

Różnica polega na tym, że Angular obsługuje je za Ciebie, przechwytując zmianę dokumentu.lokalizacja w języku JavaScript.

Jeśli chcesz użyć adresów URL PushState (i prawdopodobnie tak jest) usuń wszystkie stare adresy URL w stylu hash i metatagi i po prostu włącz tryb HTML5 w bloku konfiguracji.

Testowanie witryny

Google Webmaster tools zawiera teraz narzędzie, które pozwoli Ci pobrać adres URL jako google i renderować JavaScript, jak Google renderuje go.

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

Generowanie adresów URL PushState w Angular

Aby wygenerować prawdziwe adresy URL w kanciastym, a nie # poprzedzonym, ustaw tryb HTML5 w $locationProvider obiekt.

$locationProvider.html5Mode(true);

Strona Serwera

Ponieważ używasz prawdziwych adresów URL, musisz upewnić się, że ten sam szablon (plus wstępnie przygotowana treść) zostanie wysłany przez twój serwer dla wszystkich ważnych adresów URL. Sposób, w jaki to zrobisz, będzie się różnić w zależności od architektury serwera.

Sitemap

Twoja aplikacja może korzystać z nietypowych form nawigacji, na przykład najedź kursorem lub przewiń. Aby upewnić się, że Google jest w stanie napędzać Twoją aplikację, prawdopodobnie sugerowałbym utworzenie mapy witryny, prostej listy wszystkich adresów URL aplikacja odpowiada na. Możesz umieścić go w domyślnej lokalizacji (/sitemap lub / sitemap.xml), lub powiedzieć o tym Google za pomocą narzędzi dla webmasterów.

To dobry pomysł, aby mieć mapę strony w każdym razie.

Obsługa przeglądarki

Strona demo

Następująca treść jest renderowana przy użyciu adresu URL pushstate z prekompozycja:

Http://html5.gingerhost.com/london

Jak można zweryfikować, pod adresem ten link, zawartość jest indeksowana i pojawia się w Google.

Obsługa kodów statusu nagłówka 404 i 301

Ponieważ wyszukiwarka zawsze trafi na twój serwer dla każdego żądania, możesz podawać kody statusu nagłówka z serwera i oczekiwać, że Google je zobaczy.

Let ' s get definitive about AngularJS and SEO

Więc dlaczego Wyszukiwarki nie radzą sobie z javascript miejsca?

Odpowiedź ma związek z faktem, że roboty wyszukiwarek działają przez bezgłowe przeglądarki i najczęściej nie mają silnika renderującego javascript do renderowania javascript strony. Działa to dla większości stron, ponieważ większość statycznych stron nie dba o renderowanie ich strony przez JavaScript, ponieważ ich zawartość jest już dostępna.

Co można z tym zrobić?

Na szczęście gąsienice z większych stron zaczęły wdrażać mechanizm, który pozwala nam uczynić nasze strony JavaScript crawlable, ale to wymaga od nas zaimplementować zmianę na naszej stronie.

Jeśli zmienimy naszą hashPrefix na #! zamiast po prostu #, nowoczesne Wyszukiwarki zmienią żądanie użycia _escaped_fragment_ zamiast #!. (W trybie HTML5, tzn. gdzie mamy linki bez prefiksu hash, możemy zaimplementować tę samą funkcję patrząc na nagłówek User Agent w naszym backendzie).

To znaczy, zamiast żądania ze zwykłej przeglądarki, które wygląda jak:

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

Wyszukiwarka przeszukuje stronę za pomocą:

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

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

I, jeśli używamy html5Mode, będziemy musieli zaimplementować to za pomocą znacznika meta:

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

Przypomnienie, Możemy ustawić html5Mode() za pomocą usługi $location:

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

Obsługa Wyszukiwarki

Mamy wiele możliwości, aby określić, jak sobie radzimy z dostarczaniem treści do wyszukiwarek jako statyczny HTML. Możemy samodzielnie hostować backend, możemy użyć usługi do hostowania back-end dla nas, możemy użyć proxy do dostarczania treści itp. Spójrzmy na kilka opcji:

Własny hosting

Możemy napisać usługę radzenia sobie z pełzaniem własnej strony za pomocą bezgłowej przeglądarki, takiej jak phantomjs lub zombiejs, robiąc migawkę strony z renderowanymi danymi i przechowując ją jako HTML. Ilekroć widzimy łańcuch zapytania ?_escaped_fragment_ w zapytaniu wyszukiwania możemy dostarczyć statyczną migawkę HTML, którą zrobiliśmy strony zamiast wstępnie renderowanej strony za pośrednictwem tylko JS. Wymaga to od nas posiadania zaplecza, który dostarcza nasze strony z logiką warunkową w środku. Możemy użyć czegoś w rodzaju prerender.io ' s backend jako punkt wyjścia do uruchomienia tego samodzielnie. Oczywiście nadal musimy zająć się proxyingiem i obsługą fragmentów, ale to dobry początek.

Z płatną usługą

The easiest and the najszybszy sposób na wprowadzenie treści do wyszukiwarki to skorzystanie z usługi Brombone, seo.js, seo4ajax i prerender.io {[58] } są dobrymi przykładami tych, które będą hostować powyższe renderowanie treści dla Ciebie. Jest to dobra opcja na czasy, kiedy nie chcemy zajmować się uruchamianiem serwera / proxy. Zwykle jest to bardzo szybkie.

Aby uzyskać więcej informacji na temat Angular i SEO, napisaliśmy obszerny samouczek na ten temat w http://www.ng-newsletter.com/posts/serious-angular-seo.html i opisaliśmy to jeszcze bardziej w naszej książce ng-book: The Complete Book on AngularJS {32]}. Sprawdź to na ng-book.com .

Naprawdę powinieneś sprawdzić samouczek na temat budowania przyjaznej SEO witryny AngularJS na blogu year of moo. Prowadzi cię przez wszystkie kroki opisane w dokumentacji Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Używając tej techniki, wyszukiwarka widzi Rozszerzony HTML zamiast niestandardowych tagów.

To się drastycznie zmieniło.

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

Jeśli używasz: $ locationProvider.html5Mode (true); jesteś gotowy.

Koniec z renderowaniem stron.

Wiele się zmieniło, odkąd zadano to pytanie. Dostępne są teraz opcje pozwalające Google indeksować Twoją witrynę AngularJS. Najprostszą opcją jaką znalazłem było użycie http://prerender.io darmowy serwis, który wygeneruje dla ciebie dobre strony i poda je do wyszukiwarek. Jest obsługiwany na prawie wszystkich platformach internetowych po stronie serwera. Niedawno zacząłem z nich korzystać i wsparcie jest również doskonałe.

Nie mam z nimi żadnego związku, to pochodzi od szczęśliwego użytkownika.

Własna strona internetowa Angular służy uproszczonym treściom wyszukiwarkom: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Powiedz, że Twoja aplikacja Angular pochłania węzeł.js / Express-driven JSON api, jak /api/path/to/resource. Być może mógłbyś przekierować dowolne żądania za pomocą ?_escaped_fragment_ do /api/path/to/resource.html i użyć negocjacja zawartości do renderowania szablonu HTML zawartości, zamiast zwracania danych JSON.

Jedyną rzeczą jest to, że Twoje kątowe trasy musiałyby dopasować 1: 1 z Twoje REST API.

EDIT: zdaję sobie sprawę, że ma to potencjał, aby naprawdę zabłocić api REST i nie polecam tego robić poza bardzo prostymi przypadkami użycia, w których może to być naturalne dopasowanie.

Zamiast tego możesz użyć zupełnie innego zestawu tras i kontrolerów dla zawartości przyjaznej dla robotów. Ale potem powielasz wszystkie trasy i kontrolery AngularJS w Node / Express.

Zdecydowałem się na generowanie migawek z bezgłową przeglądarką, chociaż czuję, że to trochę mniej niż ideał.

Dobrą praktykę można znaleźć tutaj:

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

Od teraz Google zmienił swoją propozycję indeksowania AJAX.

Czasy się zmieniły. Dzisiaj, o ile nie blokujesz Googlebota przed indeksowaniem plików JavaScript lub CSS, jesteśmy w stanie renderować i zrozumieć Twoje strony internetowe jak nowoczesne przeglądarki.

tl; dr: [Google] nie polecają już propozycji indeksowania AJAX [Google] z 2009 roku.

Indeksowania specyfikacji Ajax Google, jak wspomniano w innych odpowiedzi tutaj, jest w zasadzie odpowiedź.

Jeśli jesteś zainteresowany tym, jak inne wyszukiwarki i boty społecznościowe radzą sobie z tymi samymi problemami, napisałem tutaj stan wiedzy: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Pracuję dla https://ajaxsnapshots.com, firma, która wdraża Crawlable Ajax Spec jako usługę - informacje zawarte w tym raporcie są oparte na obserwacje z naszych dzienników.

Znalazłem eleganckie rozwiązanie, które pokryłoby większość twoich baz. Pisałem o tym początkowo tutaj I odpowiedziałem na inne podobne pytanie StackOverflow tutaj , które się do niego odwołuje.

FYI To rozwiązanie zawiera również zakodowane na twardo znaczniki awaryjne na wypadek, gdyby JavaScript nie został odebrany przez gąsienicę. Nie opisałem tego wyraźnie, ale warto wspomnieć, że powinieneś aktywować tryb HTML5 dla właściwej obsługi adresów URL.

Uwaga: nie są to kompletne pliki, tylko ważne części tych, które są istotne. Jeśli potrzebujesz pomocy w napisaniu boilerplate dla dyrektyw, usług, itp. to można znaleźć gdzie indziej. W każdym razie, zaczyna się...

App.js

To miejsce, w którym podajesz niestandardowe metadane dla każdej trasy (tytuł, opis itp.)

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

Metadane-usługa.js (serwis)

Ustawia niestandardowe opcje metadanych lub używa wartości domyślnych jako wypadki.

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

Pakuje wyniki usługi metadanych dla widoku.

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);
  }
};

Indeks.html

Wraz z kodowanymi na twardo znacznikami awaryjnymi wspomnianymi wcześniej, dla robotów, które nie mogą odbierać żadnego 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>

Powinno to znacznie pomóc w większości przypadków użycia wyszukiwarek. Jeśli chcesz w pełni dynamicznego renderowania dla robotów społecznościowych (które są niepewne przy obsłudze Javascript), nadal będziesz mieć do korzystania z jednej z usług pre-renderingu wymienionych w niektórych innych odpowiedziach.

Użyj czegoś takiego jak PreRender, sprawia, że statyczne strony Twojej witryny, dzięki czemu wyszukiwarki mogą ją indeksować.

Tutaj możesz dowiedzieć się na jakie platformy jest on dostępny: https://prerender.io/documentation/install-middleware#asp-net

Z Angular Universal możesz generować strony docelowe aplikacji, które wyglądają jak kompletna aplikacja, a następnie załadować aplikację Angular za nią.
Angular Universal generuje czysty HTML, czyli strony bez javascript po stronie serwera i serwuje je użytkownikom bez opóźniania. Możesz więc poradzić sobie z dowolnym crawlerem, botem i użytkownikiem(który ma już niską prędkość procesora i sieci).Następnie możesz przekierować je za pomocą linków / przycisków do rzeczywistej aplikacji kątowej, która już została załadowana za nią. Takie rozwiązanie jest zalecane na oficjalnej stronie. - Więcej informacji o SEO i Angular Universal -

Crawlery (lub boty) są przeznaczone do indeksowania zawartości HTML stron internetowych, ale ze względu na operacje AJAX dla asynchronicznego pobierania danych, stało się to problemem, ponieważ renderowanie strony i wyświetlanie na niej dynamicznej zawartości zajmuje trochę czasu. Podobnie, AngularJS również używać modelu asynchronicznego, co stwarza problem dla Google crawlerów.

Niektórzy programiści tworzą podstawowe strony html z prawdziwymi danymi i obsługują te strony od strony serwera w czasie indeksowania. Możemy renderować te same strony z PhantomJS po stronie serwa, która ma _escaped_fragment_ (ponieważ Google szuka #! w naszych adresach URL witryny, a następnie bierze wszystko po #! i dodaje go w _escaped_fragment_ parametr zapytania). Aby uzyskać więcej szczegółów, przeczytaj ten blog .

Crawlery nie potrzebują bogatego, ładnego gui, chcą tylko zobaczyć zawartość, więc nie musisz dawać im migawki strony, która została zbudowana dla ludzi.

Moje rozwiązanie: aby dać crawlerowi to, czego chce crawler :

TIP Nie zadzieraj z tyłu. Po prostu dodaj mały widok frontowy po stronie serwera za pomocą tego samego API