Vejo dois problemas com o aplicativo AngularJS em relação aos mecanismos de pesquisa e SEO:

1) O que acontece com as tags personalizadas? Os mecanismos de pesquisa ignoram todo o conteúdo dessas tags? ou seja, suponha que eu tenha

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

seria <h1>indexado apesar de estar dentro de tags personalizadas?

2) Existe uma maneira de evitar que os mecanismos de pesquisa de indexação {{}} vinculem literalmente? ie

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

Eu sei que eu poderia fazer algo como

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

mas e se eu quiser realmente deixar o rastreador "ver" o título? A renderização do lado do servidor é a única solução?

Atualização de maio de 2014

Os rastreadores do Google agora executam javascript - você pode usar as Ferramentas do Google para webmasters para entender melhor como seus sites são renderizados pelo Google.

Resposta original
Se você deseja otimizar seu aplicativo para os mecanismos de pesquisa, infelizmente não há como oferecer uma versão pré-renderizada ao rastreador. Você pode ler mais sobre as recomendações do Google para sites pesados ​​ajax e javascript aqui .

Se essa for uma opção, recomendo a leitura deste artigo sobre como fazer SEO para Angular com renderização no servidor.

Não tenho certeza do que o rastreador faz quando encontra tags personalizadas.

Use PushState e pré-composição

A maneira atual (2015) de fazer isso é usar o método JavaScript pushState.

O PushState altera o URL na barra superior do navegador sem recarregar a página. Digamos que você tenha uma página contendo guias. As guias ocultam e mostram o conteúdo, e o conteúdo é inserido dinamicamente, usando AJAX ou simplesmente configurando display: none e display: block para ocultar e mostrar o conteúdo correto da guia.

Quando as guias são clicadas, use pushState para atualizar o URL na barra de endereços. Quando a página for renderizada, use o valor na barra de endereço para determinar qual guia será exibida. O roteamento angular fará isso por você automaticamente.

Pré-composição

Há duas maneiras de acessar um SPA (PushState Single Page App)

1. Via PushState, em que o usuário clica em um link PushState e o conteúdo é AJAX.
2. Pressionando o URL diretamente.

O hit inicial no site envolve atingir diretamente o URL. Os hits subsequentes terão apenas AJAX no conteúdo, pois o PushState atualiza o URL.

Os rastreadores colhem links de uma página e os adicionam a uma fila para processamento posterior. Isso significa que, para um rastreador, cada ocorrência no servidor é uma ocorrência direta, eles não navegam pelo Pushstate.

A pré-composição agrupa a carga útil inicial na primeira resposta do servidor, possivelmente como um objeto JSON. Isso permite que o mecanismo de pesquisa renderize a página sem executar a chamada AJAX.

Existem evidências que sugerem que o Google pode não executar solicitações AJAX. Mais sobre isso aqui:

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

Os mecanismos de pesquisa podem ler e executar JavaScript

O Google já consegue analisar o JavaScript há algum tempo; é por isso que eles originalmente desenvolveram o Chrome, para atuar como um navegador sem cabeçalho completo para o Google spider. Se um link tiver um atributo href válido, o novo URL poderá ser indexado. Não há mais nada a fazer.

Se clicar em um link além de acionar uma chamada pushState, o site poderá ser navegado pelo usuário via PushState.

Suporte do mecanismo de pesquisa para URLs do PushState

Atualmente, o PushState é suportado pelo Google e Bing.

Google

Aqui está Matt Cutts, respondendo à pergunta de Paul Irish sobre PushState para SEO:

http://youtu.be/yiAF9VdvRPw

Aqui está o Google anunciando suporte JavaScript completo para o spider:

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

O resultado é que o Google suporta o PushState e indexa os URLs do PushState.

Consulte também a busca das ferramentas para webmasters do Google como Googlebot. Você verá que seu JavaScript (incluindo Angular) é executado.

Bing

Aqui está o anúncio do suporte do Bing para URLs PushState bastante datadas de março de 2013:

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

Não use HashBangs #!

Os URLs Hashbang eram uma piada feia, exigindo que o desenvolvedor fornecesse uma versão pré-renderizada do site em um local especial. Eles ainda funcionam, mas você não precisa usá-los.

Os URLs Hashbang são assim:

domain.com/#!path/to/resource

Isso seria associado a uma metatag como esta:

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

O Google não os indexará neste formulário, mas extrairá uma versão estática do site do URL _escaped_fragments_ e o indexará.

Os URLs do Pushstate se parecem com qualquer URL comum:

domain.com/path/to/resource

A diferença é que o Angular lida com eles interceptando a alteração em document.location que lida com isso em JavaScript.

Se você deseja usar URLs PushState (e provavelmente o faz), retire todos os URLs e metatags antigos de estilo hash e simplesmente ative o modo HTML5 no seu bloco de configuração.

Testando seu site

As ferramentas do Google para webmasters agora contêm uma ferramenta que permitirá buscar um URL como google e renderizar JavaScript conforme o Google a renderizar.

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

Gerando URLs PushState em Angular

Para gerar URLs reais em Angular, em vez de # prefixados, defina o modo HTML5 no seu objeto $ locationProvider.

$locationProvider.html5Mode(true);

Lado do servidor

Como você está usando URLs reais, será necessário garantir que o mesmo modelo (mais algum conteúdo pré-composto) seja enviado pelo servidor para todos os URLs válidos. Como você faz isso varia de acordo com a arquitetura do servidor.

Mapa do site

Seu aplicativo pode usar formas incomuns de navegação, por exemplo, passe o mouse ou role. Para garantir que o Google possa direcionar seu aplicativo, eu provavelmente sugeriria a criação de um mapa do site, uma lista simples de todos os URLs aos quais ele responde. Você pode colocá-lo no local padrão (/ sitemap ou /sitemap.xml) ou informar o Google sobre isso usando as ferramentas para webmasters.

É uma boa ideia ter um mapa do site de qualquer maneira.

Suporte do navegador

O Pushstate funciona no IE10. Em navegadores antigos, o Angular retornará automaticamente aos URLs no estilo hash

Uma página de demonstração

O conteúdo a seguir é renderizado usando um URL pushstate com pré-composição:

http://html5.gingerhost.com/london

Como pode ser verificado, neste link , o conteúdo é indexado e está aparecendo no Google.

Exibição de códigos de status do cabeçalho 404 e 301

Como o mecanismo de pesquisa sempre acessa o servidor em todas as solicitações, você pode fornecer códigos de status de cabeçalho no servidor e esperar que o Google os veja.

Vamos ser definitivos sobre AngularJS e SEO

Google, Yahoo, Bing e outros mecanismos de pesquisa rastreiam a Web de maneiras tradicionais usando rastreadores tradicionais. Eles executam robôs que rastreiam o HTML nas páginas da web, coletando informações ao longo do caminho. Eles mantêm palavras interessantes e procuram outros links para outras páginas (esses links, a quantidade deles e o número deles entram em jogo com o SEO).

Então, por que os mecanismos de pesquisa não lidam com sites javascript?

A resposta tem a ver com o fato de os robôs do mecanismo de pesquisa funcionarem em navegadores sem cabeça e na maioria das vezes não possuem um mecanismo de renderização de javascript para renderizar o javascript de uma página. Isso funciona para a maioria das páginas, pois a maioria das páginas estáticas não se importa com o JavaScript renderizado, pois o conteúdo já está disponível.

O que pode ser feito sobre isso?

Felizmente, os rastreadores dos sites maiores começaram a implementar um mecanismo que nos permite tornar nossos sites JavaScript rastreáveis, mas exige que implementemos uma alteração em nosso site .

Se mudarmos hashPrefixpara ser em #!vez de simplesmente #, os mecanismos de pesquisa modernos mudarão a solicitação a ser usada em _escaped_fragment_vez de #!. (No modo HTML5, ou seja, onde temos links sem o prefixo de hash, podemos implementar esse mesmo recurso, observando o User Agentcabeçalho em nosso back-end).

Ou seja, em vez de uma solicitação de um navegador normal parecido com:

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

Um mecanismo de pesquisa pesquisará a página com:

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

Podemos definir o prefixo de hash de nossos aplicativos Angular usando um método interno de ngRoute:

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

E, se estivermos usando html5Mode, precisaremos implementar isso usando a metatag:

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

Lembrete, podemos definir o html5Mode()com o $locationserviço:

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

Manipulando o mecanismo de pesquisa

Temos muitas oportunidades para determinar como lidaremos com a entrega de conteúdo para os mecanismos de pesquisa como HTML estático. Nós podemos hospedar um back-end, podemos usar um serviço para hospedar um back-end para nós, podemos usar um proxy para fornecer o conteúdo etc. Vamos examinar algumas opções:

Auto-hospedado

Podemos criar um serviço para lidar com o rastreamento de nosso próprio site usando um navegador sem cabeça, como phantomjs ou zombiejs, tirando um instantâneo da página com dados renderizados e armazenando-o como HTML. Sempre que vemos a string de consulta ?_escaped_fragment_em uma solicitação de pesquisa, podemos fornecer o instantâneo HTML estático que tiramos da página em vez da página pré-renderizada por apenas JS. Isso exige que tenhamos um back-end que ofereça nossas páginas com lógica condicional no meio. Podemos usar algo como o backend do prerender.io como ponto de partida para executar isso por conta própria. Obviamente, ainda precisamos lidar com a proxy e a manipulação de trechos, mas é um bom começo.

Com um serviço pago

A maneira mais fácil e rápida de inserir conteúdo no mecanismo de pesquisa é usar o serviço Brombone , seo.js , seo4ajax e prerender.io, são bons exemplos desses que hospedarão a renderização de conteúdo acima para você. Essa é uma boa opção para os momentos em que não queremos lidar com a execução de um servidor / proxy. Além disso, geralmente é super rápido.

Para obter mais informações sobre Angular e SEO, escrevemos um extenso tutorial em http://www.ng-newsletter.com/posts/serious-angular-seo.html e detalhamos ainda mais em nosso livro ng-book: O livro completo sobre o AngularJS . Confira em ng-book.com .

Você realmente deve conferir o tutorial sobre como criar um site AngularJS otimizado para SEO no ano do blog moo. Ele o orienta em todas as etapas descritas na documentação da Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Usando essa técnica, o mecanismo de pesquisa vê o HTML expandido em vez das tags personalizadas.

Isso mudou drasticamente.

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

Se você usar: $ locationProvider.html5Mode (true); você está pronto.

Não há mais páginas de renderização.

As coisas mudaram bastante desde que essa pergunta foi feita. Agora existem opções para permitir que o Google indexe seu site AngularJS. A opção mais fácil que encontrei foi usar o serviço gratuito http://prerender.io que gerará as páginas que podem ser navegáveis ​​para você e as servirá aos mecanismos de pesquisa. É suportado em quase todas as plataformas web do servidor. Recentemente, comecei a usá-los e o suporte também é excelente.

Eu não tenho nenhuma afiliação com eles, isso é proveniente de um usuário feliz.

O site da Angular fornece conteúdo simplificado aos mecanismos de pesquisa: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Digamos que seu aplicativo Angular esteja consumindo uma API JSON orientada a Node.js / Express, como /api/path/to/resource. Talvez você possa redirecionar qualquer solicitação com ?_escaped_fragment_para /api/path/to/resource.htmle usar a negociação de conteúdo para renderizar um modelo HTML do conteúdo, em vez de retornar os dados JSON.

A única coisa é que suas rotas angulares precisariam corresponder 1: 1 com sua API REST.

EDIT : Estou percebendo que isso tem o potencial de realmente atrapalhar sua API REST e não recomendo fazê-lo fora de casos de uso muito simples, nos quais pode ser um ajuste natural.

Em vez disso, você pode usar um conjunto totalmente diferente de rotas e controladores para seu conteúdo compatível com robôs. Mas então você está duplicando todas as suas rotas e controladores AngularJS no Node / Express.

Decidi gerar instantâneos com um navegador sem cabeça, apesar de achar que isso é um pouco abaixo do ideal.

Uma boa prática pode ser encontrada aqui:

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

A partir de agora, o Google mudou sua proposta de rastreamento AJAX.

Os tempos mudaram. Hoje, desde que você não impeça o Googlebot de rastrear seus arquivos JavaScript ou CSS, geralmente podemos renderizar e entender suas páginas da Web como navegadores modernos.

tl; dr: [Google] não recomendam mais a proposta de rastreamento AJAX [Google] feita em 2009.

O Ajax Specs rastreável do Google, conforme mencionado nas outras respostas aqui, é basicamente a resposta.

Se você estiver interessado em saber como outros mecanismos de pesquisa e bots sociais lidam com os mesmos problemas, escrevi o estado da arte aqui: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Eu trabalho para uma https://ajaxsnapshots.com , uma empresa que implementa a Crawlable Ajax Spec como um serviço - as informações nesse relatório são baseadas em observações de nossos logs.

Encontrei uma solução elegante que cobriria a maioria de suas bases. Eu escrevi sobre isso inicialmente aqui e respondi a outra pergunta semelhante do StackOverflow aqui que faz referência a ele.

Para sua informação, essa solução também inclui tags de fallback codificadas caso o Javascript não seja captado pelo rastreador. Não o expliquei explicitamente, mas vale a pena mencionar que você deve ativar o modo HTML5 para obter suporte adequado à URL.

Observe também: esses não são os arquivos completos, apenas as partes importantes daqueles que são relevantes. Se você precisar de ajuda para escrever o gabarito de diretrizes, serviços etc. que podem ser encontrados em outros lugares. Enfim, aqui vai ...

app.js

É aqui que você fornece os metadados personalizados para cada uma das suas rotas (título, descrição etc.)

$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 (serviço)

Define as opções de metadados personalizados ou usa padrões como 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 (diretiva)

Empacota os resultados do serviço de metadados para a exibição.

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

Complete com as tags de fallback codificadas anteriormente mencionadas, para rastreadores que não conseguem pegar nenhum 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>

Isso deve ajudar muito na maioria dos casos de uso de mecanismos de pesquisa. Se você deseja renderização totalmente dinâmica para rastreadores de redes sociais (que são duvidosas no suporte a Javascript), ainda precisará usar um dos serviços de pré-renderização mencionados em algumas das outras respostas.

Espero que isto ajude!

Use algo como o PreRender, que cria páginas estáticas do seu site para que os mecanismos de pesquisa possam indexá-lo.

Aqui você pode descobrir quais plataformas estão disponíveis: https://prerender.io/documentation/install-middleware#asp-net

Com o Angular Universal, você pode gerar páginas de destino para o aplicativo que se parecem com o aplicativo completo e carregar o aplicativo Angular por trás dele.
O Angular Universal gera HTML puro, significa páginas sem javascript no lado do servidor e as serve aos usuários sem demora. Assim, você pode lidar com qualquer rastreador, bot e usuário (que já possui baixa velocidade de CPU e rede) e, em seguida, pode redirecioná-los por links / botões para o seu aplicativo angular real que já foi carregado por trás dele. Esta solução é recomendada pelo site oficial. -Mais informações sobre SEO e Angular Universal-

Os rastreadores (ou bots) são projetados para rastrear o conteúdo HTML das páginas da Web, mas devido às operações do AJAX para busca assíncrona de dados, isso se tornou um problema, pois leva algum tempo para renderizar a página e mostrar conteúdo dinâmico nela. Da mesma forma, AngularJStambém use o modelo assíncrono, que cria problemas para os rastreadores do Google.

Alguns desenvolvedores criam páginas html básicas com dados reais e as veem no lado do servidor no momento do rastreamento. Podemos renderizar as mesmas páginas com o PhantomJSlado de veiculação que possui _escaped_fragment_(porque o Google procura #!nos URLs de nosso site e, em seguida, pega tudo após o #!e o adiciona no _escaped_fragment_parâmetro de consulta). Para mais detalhes, leia este blog .

Os rastreadores não precisam de uma GUI estilizada com recursos avançados; eles querem apenas ver o conteúdo ; portanto, você não precisa fornecer uma imagem instantânea de uma página criada para humanos.

Minha solução: dar ao rastreador o que ele deseja :

Você deve pensar no que o rastreador deseja e dar apenas isso a ele.

DICA não mexa nas costas. Basta adicionar uma pequena visão frontal do servidor usando a mesma API