AngularJS: SEO, Google Analytics e Virtual Pages
![AngularJS: SEO, Google Analytics e Virtual Pages](https://www.alura.com.br/artigos/assets/code/angularjs-seo-google-analytics-e-virtual-pages.1722043202.png)
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
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
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!