AngularJS: SEO, Google Analytics e Virtual Pages

Single Page Application e SEO

Há uma polêmica na utilização do AngularJS e outras soluções de SPA (Single Page Application) no que diz respeito a Searching Engine Optimizations (SEO). Tomarei como base o AngularJS. Nele, seus templates (parciais) e seus dados são processados no lado do cliente, inviabilizando assim a indexação do conteúdo resultante por search engines (buscadores) da web como o Google. Uma solução é pré-processar os templates antes de serem indexados. Para esta tarefa, normalmente há a presença de um browser headless como o PhantomJS que acessa a view e entrega seu resultado para o search engine, ou seja, é necessário uma infraestrutura especial para lidar com este problema.

Com a popularização de SPA, o próprio Google passou a processar o script de nossas páginas durante o processo de indexação. Excelente, não? Porém, mesmo com a mudança na política de indexação pelo Google é extremamente recomendado verificar o resultado através do
Google Web Master. Na opção Rastreamento, há a opção Buscas como Google que permite visualizarmos nossa aplicação sob o ponto de vista do robô da Google, responsável pela indexação de nossas páginas. Problema resolvido? Depende! Se para você é suficiente ter o Google como único buscador, sim, mas se você quiser dar a chance para outros buscadores talvez a primeira solução seja a melhor.

Google Analytics e SPA

Outra questão é o uso de ferramentas como o Google Analytics. Como a página carrega apenas uma vez e seu miolo é trocado através de um sistema de rotas (uso de Ajax), o Analytics não saberá que deve considerar cada view parcial uma página, isto é, qualquer interação nas parciais será computada para a view principal, comprometendo assim a coleta de informações (este problema afeta também as estatísticas do mapa de calor de sua aplicação). Este problema pode ser solucionado através de páginas virtuais (Virtual Pages).

Virtual Pages

Podemos sinalizar para o script do Google Analytics que estamos virtualmente trocando de página quando uma view parcial for acessada. Fazemos isso passando para o Analytics o nome da parcial que estamos acessando. Porém, em que lugar e quando executaremos este código?

No ecossistema do AngularJS, podemos adicionar um código que será executado toda vez que uma rota no lado do cliente for processada. É neste ponto que podemos interagir com o script do Google Analytics sinalizando para ele que estamos acessando uma nova página, neste caso virtual, já que em SPA a página principal nunca recarrega. Normalmente adotamos com página virtual o próprio nome da view parcial que estamos acessando:

angular.module('seuModulo', ['SuasDependencias'])
  .config(function($routeProvider) {
  	// rotas da sua aplicação
    
  }).run(function ($rootScope) { 
    $rootScope.$on("$routeChangeStart",function(event, next, current){

        if(next.templateUrl) {
            // interagindo com o Analytics através do objeto global ga
            ga('send', 'pageview', { page: next.templateUrl });
        }
    });
});

Se você ainda preferir, pode isolar esse código em um módulo em separado:

angular.module('virtualPage', [])
.run(function ($rootScope) {
    $rootScope.$on("$routeChangeStart",function(event, next, current){
        if(next.templateUrl) {
            ga('send', 'pageview', { page: next.templateUrl });
        }
    });
});

E importá-lo no módulo principal da sua aplicação:

angular.module('seuModulo', ['virtualPage'])
  .config(function($routeProvider) {
  	// rotas da sua aplicação
 })

Conclusão

A popularidade de SPA fez com que desenvolvedores descobrissem formas de contornar problemas de SEO, inclusive o próprio Google passou a indexar este tipo de aplicação, o que acabou favorecendo seu framework AngularJS e todos aqueles na estrutura SPA. Escolher entre criar uma aplicação tradicional e SPA não é uma escolha trivial, requer que o desenvolvedor conheça, além dos requisitos do negócio, os prós e os contras da abordagem escolhida.

Se você quer saber mais de JavaScript e conhecer o AngularJS, a Caelum possui o Curso Programação front-end com JavaScript e jQuery. Inclusive, se você se interessa por SPA, mais notadamente o AngularJS, lancei recentemente um livro sobre MongoDB, Express, Angular e Node pela Casa do Código. Bom estudo!

E se quiser saber mais sobre o desenvolvimento Mobile, Micro Services, APIs e outros não deixe de visitar a Mobile Conf, dia 30/05/2015 no Rio De Janeiro!

12 Comentários

  1. Rafael Ponte 25/02/2015 at 10:13 #

    Oi Flávio,

    Excelente post! O tema é muito pertinente para websites e/ou webapps públicas que precisam ser indexadas pelo Google. Isso sempre foi uma preocupação desde o início da popularização dos SPAs. Muitos desenvolvedores acabam trabalhando com a abordagem mas não se atentam as suas limitações e possíveis soluções.

    Apenas uma dúvida, a chamada a função ga() da API do Google Analytics ocorre de forma assincrona? Pergunto isso para saber se ela pode influenciar na performance do carregamento das páginas parciais.

    Ah! Parabéns pelo livro! Seu livro já está na minha lista de livros para ler!

    Um abraço!

  2. Diego Brocanelli 25/02/2015 at 10:39 #

    Muito bom o post! Este tipo de ação é muito importante, pois que site não gostaria de estar na busca do Google ou qualquer outro buscador.

    Parabéns pelo post, ele é simples, objetivo e muito claro nas informações.

  3. André 25/02/2015 at 16:41 #

    Ótimo artigo, esclarece muitas dúvidas a respeito dessas “novas” tecnologias, cada vez mais utilizadas.
    Post muito bem escrito de forma clara e objetiva.
    Parabéns e obrigado.

  4. Flávio Almeida 26/02/2015 at 11:13 #

    Valeu pelo feedback pessoal! Rafael, é async.

  5. Marcus Ortense 26/02/2015 at 12:42 #

    Uma dica quanto ao Google Analytics, se você der apenas o pageview virtual, seus eventos ainda vão estar associados ao “pageview real” da página, confundindo muito as suas métricas.

    Para resolver isso você pode, utilizando o método SET do ga, antes do pageview, assim o analytics sabe que todas as métricas disparadas (eventos, transações, etc) a partir desse momento são referentes ao novo path, por exemplo:

    ga(‘set’, { page: next.templateUrl });
    ga(‘send’, ‘pageview’);
    ga(‘send’, ‘event’, ‘interação do novo template’, ‘click btn enviar’);

    Tanto o pageview, quando o evento é relacionado ao page setado anteriormente.

    []’s

  6. Flávio Almeida 26/02/2015 at 13:12 #

    Marcus, valeu por compartilhar essa dica, show!

  7. Altair Moura 26/02/2015 at 15:23 #

    Ótimo artigo, esclareceu muitas dúvidas minhas.

    Parabéns e obrigado.

  8. Dan 04/03/2015 at 22:19 #

    Boa dica!

    Somente um ponto que com essa abordagem crawlers como o do bing e o facebook bot não vão conseguir indexar o seu site, esta é uma das razões que eu mantenho ainda nas minhas aplicações com angular uma infraestrutura como o prerender por exemplo.

  9. Flávio Almeida 05/03/2015 at 13:58 #

    Com certeza Dan, por isso deixei claro para o leitor logo no segundo parágrafo do post esse problema.
    Abraço!

  10. Ademar Junior 28/08/2015 at 18:26 #

    Muito legal! Eu já testei algumas de suas dicas e realmente deu certo hehe
    Obrigado e parabéns pelo artigo!

  11. Cleiton Fermino 27/04/2016 at 17:07 #

    É possível mudar o Title da página ? Simulando uma mudança de página, como exemplo estar em uma lista de produtos, e ao clicar em um determinado produto, ele carregue a view e mude o title, description etc, já que o SEO usa estes dados para rankeamento também. A minha maior questão, é saber se seria possível desenvolver uma Loja Virtual ( claro que o backend seria em outra linguagem ) com AngularJS.
    PS: Comprei seu livro da Casa do Código.

  12. Bruno Dulcetti 19/12/2016 at 09:53 #

    Eu uso o Angulartics (http://angulartics.github.io/), bem interessante e já faz toda a parte de eventos, views, etc.

    Cleiton, é possível sim, é só você executar document.title = ‘Mudança no Título’; dentro do seu controller, por exemplo.

Deixe uma resposta