Indexar AngularJS nos sites de busca

O AngularJS renderiza as páginas usando Javascript, mas o Google e outros motores de busca não executam Javascript. Quando eles acessarem sua página vão encontrar <div ng-view><div>, {{ variable }} e outras instruções. Não o conteúdo que interessa.

Talvez um dia os motores de busca passem a interpretar Javascript, mas não é o acontece no momento. Processar Javascript é custoso e pode demandar muitas outras requests. No Google Webmaster Tools você até pode solicitar, sendo no máximo 500 vezes por semana para o Google indexar sua página executando Javascript.

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

Essa metatag diz aos crawlers que a página é renderizada por Javascript e então eles fazem uma nova request em uma nova URL esperando seja fornecido o conteúdo pronto. Agora é a hora.

Se você usa hash na URL, lembre-se de ter o prefixo !. A hash é um recurso antigo usado para âncorar o conteúdo. Experimente acessar uma URL usando na hash o id de um elemento. A hash com ! passou a significar conteúdo dinâmico.

angular.module('myapp').config(function($locationProvider) {
	$locationProvider.hashPrefix('!');
});

Quando o crawler encontrar uma URL:

http://www.example.com/#!/article/123

O crawler enviará uma request para o servidor como esta:

http://www.example.com/?_escaped_fragment_=/article/123

HTML5 push state não tem hash, então quando o crawler encontrar:

http://www.example.com/article/123

O crawler enviará uma request para o servidor como esta:

http://www.example.com/article/123?_escaped_fragment_=

Agora que você conhece o padrão só precisa retornar o HTML estático. Uma opção é utilizar o PhantomJS para renderizar a página no backend e você retornar esse conteúdo.

Script para PhantomJS

// get.js

var page = require('webpage').create();
var args = require('system').args;

page.open('http://example.com' + args[1], function(status) {
	console.log(page.content);
	phantom.exit();
});

Script PHP

<?php

// index.php ou arquivo que recebe as requests

if (isset($_GET['_escaped_fragment_'])) {
	// hash
	//echo exec('phantomjs test.js ' . $_GET['_escaped_fragment_']);
	
	// push state + apache rewrite
	echo exec('phantomjs get.js '. $_SERVER['REDIRECT_URL']);
	exit;
}

...

É uma solução simples e sem muito trabalho.

Links:

You may also like...