Vedo due problemi con l'applicazione AngularJS per quanto riguarda i motori di ricerca e SEO:

1) Cosa succede con i tag personalizzati? I motori di ricerca ignorano l'intero contenuto all'interno di quei tag? cioè supponiamo che io abbia

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

sarebbe <h1>indicizzato nonostante si trovasse all'interno di tag personalizzati?

2) Esiste un modo per evitare letteralmente i motori di ricerca di indicizzazione {{}}? vale a dire

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

So che potrei fare qualcosa del genere

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

ma cosa succede se voglio effettivamente consentire al crawler di "vedere" il titolo? Il rendering lato server è l'unica soluzione?

Aggiornamento maggio 2014

I crawler di Google ora eseguono javascript : puoi utilizzare gli Strumenti per i Webmaster di Google per capire meglio come vengono resi i tuoi siti da Google.

Risposta originale
Se desideri ottimizzare la tua app per i motori di ricerca, sfortunatamente non c'è modo di offrire una versione pre-renderizzata al crawler. Puoi leggere di più sui consigli di Google per i siti ajax e javascript pesanti qui .

Se questa è un'opzione, ti consiglio di leggere questo articolo su come fare SEO per Angular con il rendering lato server.

Non sono sicuro di cosa faccia il crawler quando incontra tag personalizzati.

Utilizzare PushState e Precomposizione

L'attuale (2015) modo per farlo è usare il metodo pushState JavaScript.

PushState modifica l'URL nella barra del browser in alto senza ricaricare la pagina. Supponi di avere una pagina contenente schede. Le schede nascondono e mostrano il contenuto e il contenuto viene inserito in modo dinamico, utilizzando AJAX o semplicemente impostando display: none e display: block per nascondere e mostrare il contenuto corretto della scheda.

Quando si fa clic sulle schede, utilizzare pushState per aggiornare l'URL nella barra degli indirizzi. Quando viene visualizzata la pagina, utilizzare il valore nella barra degli indirizzi per determinare quale scheda mostrare. Il routing angolare lo farà automaticamente per te.

precomposizione

Esistono due modi per accedere a un'app PushState Single Page (SPA)

1. Tramite PushState, in cui l'utente fa clic su un collegamento PushState e il contenuto viene inserito in AJAX.
2. Colpendo direttamente l'URL.

L'hit iniziale sul sito comporta la possibilità di colpire direttamente l'URL. I successi successivi saranno semplicemente AJAX nei contenuti mentre PushState aggiorna l'URL.

I crawler raccolgono i collegamenti da una pagina, quindi li aggiungono a una coda per l'elaborazione successiva. Ciò significa che per un crawler, ogni hit sul server è un hit diretto, non navigano tramite Pushstate.

La precomposizione raggruppa il payload iniziale nella prima risposta dal server, possibilmente come oggetto JSON. Ciò consente al motore di ricerca di eseguire il rendering della pagina senza eseguire la chiamata AJAX.

Esistono alcune prove che suggeriscono che Google potrebbe non eseguire le richieste AJAX. Maggiori informazioni qui:

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

I motori di ricerca possono leggere ed eseguire JavaScript

Google è in grado di analizzare JavaScript da qualche tempo, è per questo che ha originariamente sviluppato Chrome, per fungere da browser senza testa completo per lo spider di Google. Se un collegamento ha un attributo href valido, il nuovo URL può essere indicizzato. Non c'è altro da fare.

Se, inoltre, facendo clic su un collegamento viene attivata una chiamata pushState, l'utente può navigare nel sito tramite PushState.

Supporto per i motori di ricerca per URL PushState

PushState è attualmente supportato da Google e Bing.

Google

Ecco Matt Cutts che risponde alla domanda di Paul Irish su PushState per SEO:

http://youtu.be/yiAF9VdvRPw

Ecco Google che annuncia il pieno supporto JavaScript per lo spider:

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

Il risultato è che Google supporta PushState e indicizzerà gli URL PushState.

Guarda anche gli strumenti per i webmaster di Google come Googlebot. Vedrai che il tuo JavaScript (incluso Angular) viene eseguito.

Bing

Ecco l'annuncio di supporto di Bing per gli URL PushState belli datati marzo 2013:

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

Non usare HashBangs #!

Gli URL di Hashbang erano un brutto stopgap che richiedeva allo sviluppatore di fornire una versione pre-renderizzata del sito in una posizione speciale. Funzionano ancora, ma non è necessario usarli.

Gli URL di Hashbang si presentano così:

domain.com/#!path/to/resource

Questo sarebbe abbinato a un metatag come questo:

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

Google non li indicizzerà in questo modulo, ma estrarrà invece una versione statica del sito dall'URL _escaped_fragments_ e indicizzerà quello.

Gli URL pushstate sembrano qualsiasi URL normale:

domain.com/path/to/resource

La differenza è che Angular li gestisce per te intercettando la modifica in document.location trattandola in JavaScript.

Se vuoi usare gli URL PushState (e probabilmente lo fai) elimina tutti i vecchi URL e metatag stile hash e abilita semplicemente la modalità HTML5 nel tuo blocco di configurazione.

Test del tuo sito

Gli strumenti per i Webmaster di Google ora contengono uno strumento che ti consentirà di recuperare un URL come Google e di visualizzare JavaScript con il rendering di Google.

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

Generazione di URL PushState in angolare

Per generare URL reali in angolari, anziché # prefissati, imposta la modalità HTML5 sull'oggetto $ locationProvider.

$locationProvider.html5Mode(true);

Lato server

Poiché stai utilizzando URL reali, dovrai assicurarti che lo stesso modello (oltre ad alcuni contenuti precomposti) venga spedito dal tuo server per tutti gli URL validi. Il modo in cui lo fai varierà a seconda dell'architettura del tuo server.

Mappa del sito

La tua app può utilizzare forme di navigazione insolite, ad esempio hover o scroll. Per essere sicuro che Google sia in grado di guidare la tua app, probabilmente suggerirei di creare una sitemap, un semplice elenco di tutti gli URL a cui risponde la tua app. Puoi posizionarlo nella posizione predefinita (/ sitemap o /sitemap.xml) o parlarne a Google utilizzando gli strumenti per i webmaster.

È una buona idea avere comunque una sitemap.

Supporto per il browser

Pushstate funziona in IE10. Nei browser meno recenti, Angular tornerà automaticamente agli URL in stile hash

Una pagina dimostrativa

Il seguente contenuto viene reso utilizzando un URL pushstate con precomposizione:

http://html5.gingerhost.com/london

Come si può verificare, a questo link , il contenuto è indicizzato e appare in Google.

Per i codici di stato dell'intestazione 404 e 301

Poiché il motore di ricerca colpirà sempre il tuo server per ogni richiesta, puoi pubblicare i codici di stato dell'intestazione dal tuo server e aspettarti che Google li veda.

Diventiamo definitivi su AngularJS e SEO

Google, Yahoo, Bing e altri motori di ricerca eseguono la scansione del Web in modo tradizionale utilizzando i crawler tradizionali. Eseguono robot che eseguono la scansione dell'HTML sulle pagine Web, raccogliendo informazioni lungo il percorso. Mantengono parole interessanti e cercano altri collegamenti ad altre pagine (questi collegamenti, la loro quantità e il numero di essi entrano in gioco con la SEO).

Allora perché i motori di ricerca non gestiscono i siti javascript?

La risposta ha a che fare con il fatto che i robot dei motori di ricerca funzionano attraverso browser senza testa e molto spesso non hanno un motore di rendering javascript per eseguire il rendering del javascript di una pagina. Funziona per la maggior parte delle pagine poiché la maggior parte delle pagine statiche non si preoccupano del rendering della loro pagina in JavaScript, poiché il loro contenuto è già disponibile.

Cosa si può fare al riguardo?

Fortunatamente, i crawler dei siti più grandi hanno iniziato a implementare un meccanismo che ci consente di rendere i nostri siti JavaScript visitabili, ma ci richiede di implementare una modifica al nostro sito .

Se cambiamo il nostro hashPrefixessere #!invece che semplicemente #, allora i moderni motori di ricerca cambieranno la richiesta da usare _escaped_fragment_invece di #!. (Con la modalità HTML5, ovvero dove abbiamo collegamenti senza il prefisso hash, possiamo implementare questa stessa funzionalità guardando l' User Agentintestazione nel nostro backend).

Vale a dire, invece di una richiesta da un normale browser che assomiglia a:

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

Un motore di ricerca cercherà la pagina con:

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

Possiamo impostare il prefisso hash delle nostre app angolari utilizzando un metodo integrato da ngRoute:

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

E, se stiamo usando html5Mode, dovremo implementarlo usando il meta tag:

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

Promemoria, possiamo impostare html5Mode()con il $locationservizio:

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

Gestire il motore di ricerca

Abbiamo molte opportunità per determinare come gestiremo effettivamente la distribuzione di contenuti ai motori di ricerca come HTML statico. Possiamo ospitare noi stessi un backend, possiamo usare un servizio per ospitare un back-end per noi, possiamo usare un proxy per consegnare il contenuto, ecc. Diamo un'occhiata ad alcune opzioni:

Self-hosted

Siamo in grado di scrivere un servizio per gestire la scansione del nostro sito utilizzando un browser senza testa, come phantomjs o zombiejs, prendendo un'istantanea della pagina con i dati renderizzati e archiviandola come HTML. Ogni volta che vediamo la stringa di query ?_escaped_fragment_in una richiesta di ricerca, possiamo fornire lo snapshot HTML statico che abbiamo preso della pagina anziché della pagina pre-renderizzata solo tramite JS. Questo ci richiede di avere un backend che distribuisca le nostre pagine con una logica condizionale nel mezzo. Possiamo usare qualcosa come il backend di prerender.io come punto di partenza per eseguirlo da soli. Ovviamente, dobbiamo ancora gestire il proxy e la gestione degli snippet, ma è un buon inizio.

Con un servizio a pagamento

Il modo più semplice e veloce per ottenere contenuti nel motore di ricerca è utilizzare un servizio Brombone , seo.js , seo4ajax e prerender.io sono buoni esempi di questi che ospiteranno il rendering dei contenuti sopra per te. Questa è una buona opzione per i momenti in cui non vogliamo occuparci dell'esecuzione di un server / proxy. Inoltre, di solito è super veloce.

Per ulteriori informazioni su Angular e SEO, abbiamo scritto un ampio tutorial su di esso all'indirizzo http://www.ng-newsletter.com/posts/serious-angular-seo.html e lo abbiamo dettagliato ancora di più nel nostro libro ng-book: Il libro completo su AngularJS . Dai un'occhiata a ng-book.com .

Dovresti davvero dare un'occhiata al tutorial sulla costruzione di un sito AngularJS SEO-friendly nell'anno del blog moo. Ti guida attraverso tutti i passaggi delineati nella documentazione di Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Utilizzando questa tecnica, il motore di ricerca vede l'HTML espanso anziché i tag personalizzati.

Questo è drasticamente cambiato.

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

Se si utilizza: $ locationProvider.html5Mode (true); sei pronto.

Niente più pagine di rendering.

Le cose sono cambiate un po 'da quando è stata posta questa domanda. Ora ci sono opzioni per consentire a Google di indicizzare il tuo sito AngularJS. L'opzione più semplice che ho trovato è stata quella di utilizzare il servizio gratuito http://prerender.io che genererà le pagine crwalable per te e le offrirà ai motori di ricerca. È supportato su quasi tutte le piattaforme Web lato server. Di recente ho iniziato a usarli e anche il supporto è eccellente.

Non ho alcuna affiliazione con loro, questo proviene da un utente felice.

Il sito Web di Angular offre contenuti semplificati ai motori di ricerca: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Supponiamo che la tua app Angular stia consumando una API JSON basata su Node.js / Express, come /api/path/to/resource. Forse si potrebbe reindirizzare tutte le richieste con ?_escaped_fragment_a /api/path/to/resource.html, e utilizzare la negoziazione del contenuto per rendere un modello HTML del contenuto, piuttosto che tornare i dati JSON.

L'unica cosa è che i percorsi angolari dovrebbero corrispondere a 1: 1 con l'API REST.

MODIFICARE : Sto realizzando che questo ha il potenziale per confondere davvero il tuo API REST e non ti consiglio di farlo al di fuori di casi d'uso molto semplici in cui potrebbe essere una scelta naturale.

Invece, puoi utilizzare un insieme completamente diverso di percorsi e controller per i tuoi contenuti compatibili con i robot. Ma poi stai duplicando tutti i tuoi percorsi e controller AngularJS in Node / Express.

Ho deciso di generare snapshot con un browser senza testa, anche se penso che sia un po 'meno che ideale.

Una buona pratica può essere trovata qui:

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

A partire da ora Google ha cambiato la sua proposta di scansione di AJAX.

I tempi sono cambiati. Oggi, fintanto che non stai bloccando Googlebot dalla scansione dei tuoi file JavaScript o CSS, siamo generalmente in grado di visualizzare e comprendere le tue pagine web come i browser moderni.

tl; dr: [Google] non sta più raccomandando la proposta di scansione di AJAX [Google] presentata nel 2009.

La specifica Ajax di Google Crawlable, come indicato nelle altre risposte qui, è sostanzialmente la risposta.

Se sei interessato a come altri motori di ricerca e social bot affrontano gli stessi problemi, ho scritto lo stato dell'arte qui: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Lavoro per un https://ajaxsnapshots.com , una società che implementa la specifica Ajax per indicizzazione come servizio: le informazioni contenute nel rapporto si basano sulle osservazioni dei nostri registri.

Ho trovato una soluzione elegante che coprirebbe la maggior parte delle tue basi. Ne ho scritto inizialmente qui e ho risposto a un'altra domanda StackOverflow simile qui cui fa riferimento.

Cordiali saluti, questa soluzione include anche tag di fallback codificati nel caso in cui JavaScript non venga rilevato dal crawler. Non l'ho esplicitamente delineato, ma vale la pena ricordare che dovresti attivare la modalità HTML5 per il corretto supporto degli URL.

Nota anche: questi non sono i file completi, ma solo le parti importanti di quelli rilevanti. Se hai bisogno di aiuto per scrivere la caldaia per direttive, servizi, ecc. Che puoi trovare altrove. Comunque, ecco qui ...

app.js

Qui è dove fornisci i metadati personalizzati per ciascuno dei tuoi percorsi (titolo, descrizione, ecc.)

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

metadati-service.js (servizio)

Imposta le opzioni di metadati personalizzate o utilizza i valori predefiniti come fallback.

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

Comprime i risultati del servizio metadati per la vista.

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

Completa con i tag di fallback codificati precedentemente menzionati, per i crawler che non riescono a captare 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>

Ciò dovrebbe essere di grande aiuto nella maggior parte dei casi d'uso dei motori di ricerca. Se desideri un rendering completamente dinamico per i crawler dei social network (che sono incerti sul supporto Javascript), dovrai comunque utilizzare uno dei servizi di pre-rendering menzionati in alcune delle altre risposte.

Spero che sia di aiuto!

Usa qualcosa come PreRender, crea pagine statiche del tuo sito in modo che i motori di ricerca possano indicizzarlo.

Qui puoi scoprire per quali piattaforme è disponibile: https://prerender.io/documentation/install-middleware#asp-net

Con Angular Universal, puoi generare pagine di destinazione per l'app che assomigliano all'app completa e quindi caricare l'app Angular dietro di essa.
Angular Universal genera puro HTML significa pagine non javascript sul lato server e le serve agli utenti senza ritardi. Quindi puoi occuparti di qualsiasi crawler, bot e utente (che hanno già bassa CPU e velocità di rete), quindi puoi reindirizzarli tramite link / pulsanti alla tua app angolare effettiva che già è stata caricata dietro di essa. Questa soluzione è raccomandata dal sito ufficiale. -Ulteriori informazioni su SEO e Angular Universal-

I crawler (o i bot) sono progettati per eseguire la ricerca per indicizzazione del contenuto HTML delle pagine Web, ma a causa delle operazioni AJAX per il recupero asincrono dei dati, questo è diventato un problema in quanto richiede del tempo per eseguire il rendering della pagina e mostrare il contenuto dinamico su di esso. Allo stesso modo,AngularJS utilizzare anche il modello asincrono, che crea problemi per i crawler di Google.

Alcuni sviluppatori creano pagine html di base con dati reali e pubblicano queste pagine dal lato server al momento della scansione. Possiamo rendere le stesse pagine con PhantomJSsul lato server che ha _escaped_fragment_(Perché Google cerca #!nel nostro sito url e quindi prende tutto dopo il #!e lo aggiunge nel _escaped_fragment_parametro query). Per maggiori dettagli, leggi questo blog .

I crawler non hanno bisogno di un'interfaccia grafica piuttosto ricca e ricca di funzionalità, vogliono solo vedere il contenuto , quindi non è necessario dare loro un'istantanea di una pagina che è stata costruita per gli umani.

La mia soluzione: dare al crawler ciò che desidera il crawler :

Devi pensare a cosa vuole il crawler e dargli solo quello.

SUGGERIMENTO non scherzare con la schiena. Basta aggiungere un piccolo frontview lato server utilizzando la stessa API