Jak se vyhledávače zabývají aplikacemi AngularJS?

Použijte PushState a Precomposition

Aktuální (2015) způsob, jak toho dosáhnout, je pomocí metody pushState JavaScript.

PushState změní adresu URL v horní liště prohlížeče bez opětovného načtení stránky. Řekněme, že máte stránku obsahující karty. Karty skryjí a zobrazují obsah a obsah se vkládá dynamicky, a to buď pomocí AJAX nebo jednoduše nastavením zobrazení: žádné a zobrazení: blok pro skrytí a zobrazení správného obsahu karty.

Po klepnutí na karty použijte tlačítko pushState k aktualizaci adresy URL v adresním řádku. Když je stránka vykreslena, pomocí hodnoty v panelu Adresa určete, která karta se má zobrazit. Angular routing to udělá automaticky.

Předkompozice

Existují dva způsoby, jak zasáhnout aplikaci PushState Single Page App (SPA)

1. Přes PushState, kde uživatel klikne na odkaz PushState a obsah je AJAXed in.
2. Přímým stiskem adresy URL.

Počáteční hit na webu bude zahrnovat zasažení adresy URL přímo. Následné zásahy budou jednoduše AJAX v obsahu jako PushState aktualizuje URL.

Pásy sklizně odkazují ze stránky a přidávají je do fronty pro pozdější zpracování. To znamená, že pro prolézací modul je každý zásah na serveru přímým zásahem, neprochází přes Pushstate.

Předkompozice svazuje počáteční užitečné zatížení do první odezvy ze serveru, případně jako objekt JSON. To umožňuje vyhledávači vykreslit stránku bez volání AJAX.

Existuje několik důkazů, které naznačují, že společnost Google nemusí provádět požadavky [AJAX _. Více o tomto zde:

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

Vyhledávače mohou číst a spouštět JavaScript

Google byl již nějakou dobu schopen analyzovat JavaScript, proto původně vytvořili Chrome, aby fungovali jako plnohodnotný bezhlavý prohlížeč pro pavouka Google. Pokud má odkaz platný atribut, může být nová adresa URL indexována. Není co dělat.

Pokud navíc kliknutím na odkaz spustíte volání PushState, uživatel může stránku navigovat prostřednictvím služby PushState.

Podpora vyhledávačů pro adresy URL služby PushState

PushState je v současné době podporován společností Google a Bing.

Google

Zde je Matt Cutts reagující na otázku Paula Irishe o PushState pro SEO:

http://youtu.be/yiAF9VdvRPw

Zde Google oznamuje plnou podporu JavaScriptu pro pavouka:

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

Výsledkem je, že společnost Google podporuje službu PushState a bude indexovat adresy URL služby PushState.

Viz také nástroje pro webmastery Google, které lze načíst jako Googlebot. Uvidíte, že váš JavaScript (včetně úhlového) je proveden.

Bing

Zde je oznámení společnosti Bing o podpoře pro pěkné adresy URL služby PushState z března 2013:

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

Nepoužívejte HashBangs #!

Adresa URL Hashbangu byla ošklivá zastávka vyžadující, aby vývojář poskytl předem vytvořenou verzi webu na zvláštním místě. Stále pracují, ale nemusíte je používat.

Adresy URL služby Hashbang vypadají takto:

domain.com/#!path/to/resource

Toto by bylo spárováno s metadagem takto:

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

Společnost Google je v tomto formuláři neindexuje, ale místo toho vytáhne statickou verzi webu z adresy URL a indexu _escaped_fragments_.

Adresy URL Pushstate vypadají jako obyčejná adresa URL:

domain.com/path/to/resource

Rozdíl je v tom, že s nimi Angular zachází s nimi tak, že zachytí změnu v dokumentu.

Pokud chcete používat PushState URL (a pravděpodobně to uděláte), vyndejte všechny staré URL hash a metatagy a jednoduše povolte režim HTML5 ve vašem konfiguračním bloku.

Testování vašich stránek

Nástroje pro webmastery Google nyní obsahují nástroj, který vám umožní načíst adresu URL jako Google a vykreslit jej tak, jak jej vykreslí Google.

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

Generování URL PushState v úhlovém

Chcete-li generovat skutečné adresy URL v úhlových, spíše než # prefixovaných, nastavte režim HTML5 na objekt $ locationProvider.

$locationProvider.html5Mode(true);

Strana serveru

Vzhledem k tomu, že používáte skutečné adresy URL, budete muset zajistit, aby váš server pro všechny platné adresy URL obdržel stejnou šablonu (plus nějaký předkomponovaný obsah). Jak se to bude lišit v závislosti na architektuře serveru.

Soubor Sitemap

Vaše aplikace může používat neobvyklé formy navigace, například hover nebo rolování. Chcete-li zajistit, že Google je schopen řídit vaši aplikaci, pravděpodobně bych navrhl vytvořit soubor Sitemap, jednoduchý seznam všech adres URL, na které vaše aplikace reaguje. Můžete to umístit na výchozí umístění (/ sitemap nebo /sitemap.xml) nebo o tom informovat společnost Google pomocí nástrojů pro webmastery.

Je to dobrý nápad mít sitemap stejně.

Podpora prohlížeče

Pushstate pracuje v IE10. Ve starších prohlížečích se Angular automaticky vrátí na adresy URL ve stylu hašování

Demo stránka

Následující obsah je vykreslen pomocí adresy URL Pushstate s předkompozicí:

http://html5.gingerhost.com/london

Jak lze ověřit, na tento odkaz , obsah je indexován a objevuje se v Googlu.

Stavové kódy 404 a 301 stavů záhlaví

Vzhledem k tomu, že vyhledávač vždy zasáhne váš server pro každý požadavek, můžete z vašeho serveru podávat kódy stavu záhlaví a očekávat, že je Google uvidí.

Pojďme se rozhodnout o AngularJS a SEO

Google, Yahoo, Bing a další vyhledávače procházejí webem tradičními způsoby pomocí tradičních prohledávačů. Spouštějí roboty, které procházejí HTML na webových stránkách a shromažďují informace podél cesty. Udržují zajímavá slova a hledají další odkazy na jiné stránky (tyto odkazy, jejich množství a počet jich přichází do hry se SEO).

Proč se tedy vyhledávače nezabývají stránkami javascriptu?

Odpověď má co do činění s tím, že roboti vyhledávačů pracují přes bezhlavé prohlížeče a nejčastěji nemají ne mají vykreslovací engine javascript, aby vykreslili javascript na stránce. To funguje pro většinu stránek, protože většina statických stránek nezajímá o vykreslení stránky JavaScript, protože jejich obsah je již k dispozici.

Co s tím lze udělat?

Prohledávače větších lokalit naštěstí začaly realizovat mechanismus, který nám umožňuje, aby naše stránky JavaScriptu procházely, ale to vyžaduje, abychom provedli změnu na našich stránkách .

Pokud změníme hashPrefix na #! namísto #, pak moderní vyhledávače změní požadavek na použití _escaped_fragment_ namísto #!. (V režimu HTML5, tj. Tam, kde máme odkazy bez předpony hash, můžeme tuto funkci implementovat při pohledu na hlavičku User Agent v našem backendu).

To znamená, že namísto požadavku z běžného prohlížeče, který vypadá takto:

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

Vyhledávač vyhledá na stránce pomocí:

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

Můžeme nastavit předponu hash našich Angular aplikací pomocí vestavěné metody z ngRoute:

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

Pokud používáme funkci html5Mode, budeme ji muset implementovat pomocí značky meta:

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

Připomenutí, můžeme nastavit html5Mode() pomocí služby $location:

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

Manipulace s vyhledávačem

Máme spoustu příležitostí, jak určit, jak se budeme zabývat skutečným doručováním obsahu do vyhledávačů jako statického kódu HTML. Můžeme hostit backend sami, můžeme použít službu pro hostování back-end pro nás, můžeme použít proxy k dodání obsahu, atd. Podívejme se na několik možností:

Vlastní

Můžeme napsat službu, která by se zabývala procházením našich vlastních stránek pomocí bezhlavého prohlížeče, jako jsou phantomjs nebo zombiejs, přičemž snímek stránky se vykreslenými daty uloží jako HTML. Kdykoliv vidíme řetězec dotazu ?_escaped_fragment_ v požadavku na vyhledávání, můžeme dodat statický snímek HTML, který jsme pořídili na stránce namísto předkreslené stránky pouze prostřednictvím JS. To vyžaduje, abychom měli backend, který dodává naše stránky s podmíněnou logikou uprostřed. Můžeme použít něco jako prerender.io's backend jako výchozí bod pro spuštění tohoto sami. Samozřejmě, stále musíme zvládnout proxy a manipulaci s úryvky, ale je to dobrý začátek.

S placenou službou

Nejjednodušší a nejrychlejší způsob, jak získat obsah do vyhledávače, je použít službu Brombone , seo.js , seo4ajax , a prerender.io jsou dobrými příklady těchto který bude hostit výše uvedené vykreslování obsahu. To je dobrá volba pro časy, kdy se nechceme zabývat spuštěním serveru/proxy. Také je to obvykle super rychlé.

Pro více informací o Angular a SEO, jsme psali rozsáhlý tutoriál na to http://www.ng-newsletter.com/posts/serious-angular-seo.html a podrobněji jsme to popsali v naší knize ng-book: Kompletní kniha o AngularJS . Podívejte se na ng-book.com .

Měli byste se opravdu podívat na tutoriál o budování SEO-přátelské stránky AngularJS v roce blogu moo. Prochází všemi kroky popsanými v Angularově dokumentaci. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Pomocí této techniky vyhledávací stroj vidí rozšířené HTML namísto vlastní značky.

To se drasticky změnilo.

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

Pokud používáte: $ locationProvider.html5Mode (true); jste nastaveni.

Žádné další stránky s vykreslením.

Od té doby, co byla tato otázka položena, se věci změnily. Nyní máte možnost nechat Google indexovat vaše stránky AngularJS. Nejjednodušší možností, kterou jsem našel, bylo použít službuhttp://prerender.iofree, která vám vygeneruje stránky, které jsou pro vás k dispozici, a slouží vyhledávačům. Je podporován na téměř všech webových platformách na straně serveru. Nedávno jsem je začal používat a podpora je také vynikající.

Nemám s nimi žádný vztah, pochází od šťastného uživatele.

Vlastní webové stránky společnosti Angular poskytují vyhledávačům zjednodušený obsah: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Řekněte, že aplikace Angular spotřebovává aplikaci JSON api řízenou systémem Node.js/Express, jako je /api/path/to/resource. Možná byste mohli přesměrovat všechny požadavky s ?_escaped_fragment_ na /api/path/to/resource.html a použít vyjednávání obsahu k vykreslení šablony HTML obsahu, namísto vrácení dat JSON.

Jediné je, že vaše Angular trasy by musely odpovídat 1: 1 vašemu REST API.

EDITOVAT: Uvědomuji si, že to má potenciál zablokovat vaše REST api a nedoporučuji to dělat mimo velmi jednoduché případy použití, kde by to mohlo být být přirozeným fit.

Místo toho můžete použít zcela jinou sadu tras a ovladačů pro váš obsah přátelský k robotům. Pak ale kopírujete všechny své AngularJS trasy a řadiče v Node/Express.

Usadil jsem se na generování snímků s bezhlavým prohlížečem, i když mám pocit, že je to trochu méně než ideální.

Správný postup naleznete zde:

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

Od této chvíle změnila společnost Google svůj návrh na procházení AJAX.

Časy se změnily. Dnes, pokud nezablokujete robota Googlebot při procházení vašich souborů JavaScript nebo CSS, jsme obecně schopni zobrazovat a chápat vaše webové stránky jako moderní prohlížeče.

tl; dr: [Google] již nedoporučují AJAX návrh na procházení [Google] provedený v roce 2009.

Google Crawlable Ajax Spec, jak je uvedeno v dalších odpovědích zde, je v podstatě odpověď.

Máte-li zájem o to, jak se ostatní vyhledávače a sociální roboty zabývají stejnými problémy, napsal jsem zde stav techniky zde: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification .html

Pracuji pro https://ajaxsnapshots.com , společnost, která implementuje Crawlable Ajax Spec jako službu - informace v této zprávě jsou založeny na pozorováních z našich logů.

Našel jsem elegantní řešení, které by pokrylo většinu vašich základen. Napsal jsem o tom zpočátku zde a odpověděl na další podobnou otázku StackOverflow zde která na ni odkazuje.

FYI toto řešení také obsahuje hardcoded záložní značky v případě, Javascript není vyzvednut prolézač. Nemám výslovně nastíněn, ale stojí za zmínku, že byste měli aktivovat HTML5 režim pro správnou podporu URL.

Všimněte si také: nejsou to kompletní soubory, jen důležité části těch, které jsou relevantní. Pokud budete potřebovat pomoc při psaní kotle pro směrnice, služby atd., Které najdete jinde. Tady jde ...

app.js

Zde zadáváte vlastní metadata pro každou ze svých tras (název, popis atd.)

$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 (služba)

Nastaví vlastní možnosti metadat nebo použije výchozí hodnoty jako nouzové.

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

Balíčky výsledků služby metadat pro zobrazení.

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

Kompletní s hardcoded záložní značky zmíněné dříve, pro prohledávače, které nemohou vyzvednout žádný 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>

To by mělo pomoci dramaticky s většinou případů použití vyhledávačů. Pokud chcete plně dynamické vykreslování pro prohledávače sociálních sítí (které jsou v případě podpory Javascript podporovány), budete stále muset použít některou ze služeb předběžného vykreslování uvedených v některých dalších odpovědích.

Snad to pomůže!

Pomocí Angular Univerzální můžete generovat vstupní stránky pro aplikaci, které vypadají jako úplná aplikace, a poté za sebou načíst aplikaci Angular.
Úhlový univerzální generuje čistý HTML znamená ne-javascript stránky na straně serveru a slouží uživatelům bez zpoždění. Takže se můžete vypořádat s jakýmkoliv prohledávačem, botem a uživatelem (kteří již mají nízkou rychlost procesoru a sítě). Pak je můžete přesměrovat pomocí odkazů/tlačítek na vaši aktuální úhlovou aplikaci, která již byla načtena za ní. Toto řešení se doporučuje na oficiálních stránkách. Více informací o SEO a Angular Univerzální-

Použijte něco jako PreRender, to dělá statické stránky vašeho webu, takže vyhledávače mohou indexovat.

Zde se dozvíte, jaké platformy je k dispozici: https://prerender.io/documentation/install-middleware#asp-net

Prohledávače (nebo roboty) jsou určeny k procházení obsahu webových stránek ve formátu HTML, ale vzhledem k operacím AJAX pro asynchronní načítání dat se tento problém stal problémem, protože vykreslování stránky a zobrazování dynamického obsahu na něm někdy trvá. Podobně AngularJS také používá asynchronní model, který vytváří problém pro prohledávače Google.

Někteří vývojáři vytvářejí základní html stránky s reálnými daty a obsluhují tyto stránky ze strany serveru v době procházení. Můžeme vykreslit stejné stránky s PhantomJS na obslužné straně, která má _escaped_fragment_ (Protože Google vyhledává #! v našich webových adresách a poté vše za #! a přidává do parametru _escaped_fragment_ query). Pro více informací si přečtěte tento blog .

Prohledávače nepotřebují bohatě zobrazený docela stylizovaný gui, jen chtějí vidět obsah , takže nemusíte dát jim snímek stránky, která byla postavena pro lidi.

Moje řešení: dát prohledávači to, co chce prolézací modul :

Musíte myslet na to, co ten crawler chce, a dát mu jen to.

TIP se nepohne se zády. Pomocí stejného rozhraní API přidejte malé zobrazení na straně serveru