Como os mecanismos de pesquisa lidam com os aplicativos AngularJS?

697

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?

luisfarzati
fonte
17
todas essas "soluções" me fazem querer me afastar de tecnologias como o AngularJS, pelo menos até o google e todos terem rastreadores mais inteligentes.
Codemonkey
22
@Codemonkey: Sim seria de se perguntar por que de todos os AngularJS que é um produto da Google não surgiu com um built-in solução para isso .. Wierd realmente ..
Roy MJ
11
Na verdade, Misko escreveu Angular antes de trabalhar para o Google. O Google agora patrocina o projeto, mas eles não são os autores.
superluminary
2
Talvez alguém aqui possa / deva atualizar o artigo da Wikipedia sobre SPA, que declara "SPAs geralmente não são usados ​​em um contexto em que a indexação de mecanismos de pesquisa é um requisito ou desejável". pt.wikipedia.org/wiki/Single-page_application [# Search engine optimization] Há um parágrafo enorme sobre uma estrutura baseada em java (obscura) chamada IsNat, mas nenhuma sugestão de que o SEO tenha sido abordado por pessoas como Angularjs.
Linojon
3
@Roy MJ - Por que ninguém vê a intenção? PageSpeed, Angular etc. são todos inimigos de listagens naturais e orgânicas nas SERPs. Propositadamente. Quando você tem um grande modelo de negócios baseado em Pay-Per-Clicks ... qual a melhor forma de forçar as pessoas a pagar por suas listagens do que criar uma caixa de ferramentas inteira que não lhes dará nenhuma opção, mas fazê-lo? Em vez de criar sites de qualidade, cheios de conteúdo valioso, agora esse setor está repleto de truques e soluções que não alcançam ou resolvem agachamento de maneira desordenada.
Steven Ventimiglia

Respostas:

403

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.

joakimbl
fonte
13
Isso não é mais atual. Agora você deve usar o pushState. Não há necessidade de fornecer uma versão estática separada do site.
23714 superluminary
3
mesmo com a atualização google, ng-view não será processado corretamente, como eu posso ver no Google Webmaster Tools
tschiela
10
Sim, apenas porque eles executam javascript não significa que sua página será indexada corretamente. A maneira mais segura é detectar o useragent do bot do google, usar um navegador sem cabeça como o phantomjs, obter page.contente retornar html estático.
Testador
6
Sei que essa pergunta é específica ao SEO, mas lembre-se de que outros rastreadores (Facebook, Twitter etc.) ainda não podem avaliar o JavaScript. Compartilhar páginas em sites de mídia social, por exemplo, ainda seria um problema sem uma estratégia de renderização no servidor.
Stephen Watkins
3
Alguém pode dar um exemplo de site AngularJS indexado corretamente sem implementar a especificação do esquema de rastreamento do Google?
check_ca
470

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.

superluminário
fonte
Eu tenho que olhar para isso - obrigado pela explicação. Uma coisa que fico pensando é: o Google agora executa o javascript antes de indexar a página?
JVV
1
"PushState altera o URL na barra superior do navegador sem recarregar a página ... 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ços para determinar qual para exibir. O roteamento angular fará isso por você automaticamente. " Lâmpada!
atconway 9/09/14
1
@ superluminary, você poderia explicar o assunto um pouco mais? Especialmente a seção 'Lado do servidor'. Estou usando a navegação dinâmica angularjs + angularjs-route + locationProvider.html5Mode + api + dynamic (não a estática, como em html5.gingerhost.com. Os URLs são exibidos bem, no entanto, o conteúdo não parece ser indexado. servir de alguma forma um conteúdo estático ao acessar uma página por um URL direto? Estou realmente confuso com esta mensagem: >> você precisará garantir que o mesmo modelo seja enviado pelo servidor para todos os URLs válidos. Você poderia explicar? com antecedência.
Sray
1
@sray - Se todos os URLs do seu site estiverem servindo o mesmo modelo, o navegador poderá pegá-lo e o Angular poderá levá-lo a partir daí, inspecionando o URL e renderizando o conteúdo correto. Se atingir esse URL diretamente no servidor retornar 404 ou 500, você terá um problema, os links diretos não funcionarão, os favoritos não funcionarão e você não será indexado. Você vê agora?
superluminary
1
@ user3339411 - Você deve ter um URL para cada página à qual seu site responderá. Se o seu site precisar responder apenas a um URL com um conjunto de conteúdo, você não precisará de nenhum roteamento. Isso é bom para um site simples. Se, no entanto, seu site trouxer dados diferentes (via JSON) para URLs diferentes, faria sentido usar o roteamento. Como as páginas estáticas do Github são baseadas em arquivos, você precisaria de um arquivo html real apoiando cada URL nesta instância. No entanto, não há regra de que um site precise ser baseado em arquivos e, se você usar uma plataforma alternativa, poderá servir o mesmo modelo para vários URLs.
superluminary
107

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 .

um usuário
fonte
1
O SEO4Ajax também é um bom exemplo de serviço pago (gratuito durante a versão beta). Infelizmente, parece que não tenho permissão para editar esta resposta para adicioná-la na lista.
check_ca
1
@auser Você ainda recomenda essa abordagem? O comentário mais votado mais recente parece desencorajar essa abordagem.
Lycha
Este é um ótimo exemplo de por que nunca devemos dizer coisas como "guia definitivo" no CS :). Os principais mecanismos de pesquisa agora executam Javascript, portanto, essa resposta precisa ser reescrita ou excluída completamente.
Seb
1
@seb isso ainda é necessário, digamos, tags de gráfico aberto que precisam estar na página quando os robôs a rastrearem. Por exemplo, cartões do Facebook ou Twitter precisam dele. Mas esta resposta deve ser atualizada para se concentrar no estado de envio HTML5 em vez do hashbang que está obsoleto agora.
22617 adriendenat
@Grsmto você está certo! Então acho que deve ser reescrito porque diz que os principais mecanismos de pesquisa não executam JS, o que não é mais verdade.
Seb
57

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.

Brad Green
fonte
@ Brad Green, mesmo assim a pergunta foi encerrada (por qualquer motivo), você pode estar em posição de respondê-la. Eu acho que deve estar faltando alguma coisa: stackoverflow.com/questions/16224385/...
Christoph
41

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.

user3330270
fonte
3
Esta deve ser a melhor resposta agora. Estamos em 2014 e a resposta de @joakimbl não é mais ideal.
Stan
11
Isto está incorreto. Esse artigo (de março de 2013) não diz nada sobre o Bing executando o javascript. O Bing simplesmente fornece uma recomendação para usar o pushstate em vez da recomendação anterior #!. Do artigo: "O Bing me diz que, apesar de ainda oferecerem suporte à versão #! Do AJAX rastreável originalmente lançada pelo Google, eles descobrem que ele não é implementado corretamente a maior parte do tempo e recomendam fortemente o pushState". Você ainda precisa renderizar o HTML estático e servi-lo para _escaped_fragment_URLs. O Bing / Google não executará as chamadas javascript / AJAX.
Prerender.io 23/03
2
Você ainda precisa _escaped_fragment_e processa páginas html puras. Isso não resolve nada, companheiro.
Stan Stan
Ainda assim, o robô do Google não consegue ver o conteúdo dinâmico do meu site, apenas a página vazia.
precisa saber é o seguinte
site de pesquisa: mysite.com mostra {{staff}}, não o conteúdo carregado pelo AngularJS. Como se o Google crawler nunca tivesse ouvido falar de JavaScript. O que eu posso fazer?
Toolkit
17

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.

Ketan
fonte
6
O código para prerender.io está no github ( github.com/collectiveip/prerender ) para que qualquer pessoa possa executá-lo em seus próprios servidores.
user276648
Agora também está desatualizado. Veja a resposta do @ user3330270 abaixo.
precisa
2
Isso não está desatualizado. A resposta do @ user3330270 está incorreta. O artigo ao qual eles vinculam simplesmente diz para usar o pushstate em vez do # !. Você ainda precisa renderizar páginas estáticas para os rastreadores, porque eles não executam javascript.
Prerender.io 23/03
9

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.

Kevin C.
fonte
7

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.

Thor
fonte
@ Toolkit, o que você quer dizer?
Thor
1
O Googlebot NÃO consegue analisar sites angulares
Toolkit
4
@Toolkit você está falando hoop absoluta, o meu site angular completo tem sido índice pelo Google com dados de meta dinâmica sem quaisquer problemas
twigg
@twigg você tem lógica defeituosa, quer dizer, se um (seu) site Angular foi indexado, todos foram. Bem, eu tenho uma surpresa para você. Nenhum dos meus foi indexado. Pode ser porque eu uso angular ui router ou quem sabe por quê. Nem mesmo as principais páginas sem quaisquer dados ajax
Toolkit
@ Toolkit Se nem mesmo suas páginas estáticas de html são indexadas, isso não tem nada a ver com a capacidade do Google de rastrear arquivos JS. Se você está dizendo que o Google não pode rastrear anyting corretamente .. bem, eu acho que você está errado
phil294
6

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.

Robert AJS
fonte
O link está inativo no blog listado.ajaxsnapshots.com
Kevin
4

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!

Andrew
fonte
Também estou seguindo esta solução e pensei assim antes disso, mas quero perguntar que os mecanismos de pesquisa lerão o conteúdo das tags personalizadas.
Ravinder Payal
@RavinderPayal você pode verificar esta solução com seoreviewtools.com/html-headings-checker
Vijay
2

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

NicoJuicy
fonte
angular é para aliviar o trabalho ou apenas fazer as operações mais caro e tendo tempo
Ravinder Payal
2

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-

erginduran
fonte
1

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 .

Rubi saini
fonte
Isso não é mais verdade a partir de outubro de 2017, esta calculadora de imposto de renda, o Income-tax.co.uk é construído com AngularJs puros (até os títulos são como <title> Calculadora de impostos por £ {{profitSliders.yearly | number: 0}} salário </title>, que é processado como "calculadora de impostos por salário de £ 30000), e o Google os indexa na primeira página para centenas de palavras-chave. Crie seus sites para seres humanos, torne-os impressionantes e o Google cuidará do resto ;)
Kaszoni Ferencz
0

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

pykiss
fonte