Indexando páginas no Google de sua SPA Vue.js

Um dos temas mais discutidos quando envolve aplicações de página única (SPA) e a otimização para mecanismos de busca (SEO) é a dificuldade de indexar as páginas no índice e fazer com que os bots reconheçam as meta tags que foram modificadas dinamicamente através da aplicação Javascript.

Hoje em dia existem serviços online que ajudam com esse problema, como o Prerender e o SEO4Ajax. Ambos permitem utilizar uma conta free, porem com algum limite. Eles provem uma forma automática de detecção de links na página e criam um cachê de cada uma para servir aos bots. Esses serviços precisam de um servidor para configurar e sincronizar com o serviço.

No meu blog pessoal, que é uma SPA feito com Vue.js, uso uma hospedagem gratuita e incrivelmente poderosa que se chama Surge e só é possível utilizar arquivos estáticos, nesse caso, não tenho acesso ao servidor e com isso não posso utilizar esses serviços citados acima para me ajudar a indexar minhas página.

Parti para métodos alternativos e utilizei o plugin vue-head para alterar dinamicamente a descrição e o título da página na rota correspondente.

Veja esse código de exemplo: (Sintaxe atualizada v2.0+)

// components/page/contact.vue

...
export default {
    // Omitido ...
    head: {
      title: {
        inner: 'Será um prazer'
      },
      meta: [
        { name: 'description', content: '...My description...', id: 'description' }
      ]
    }
}
...

O vue-head disponibiliza um objeto dentro de cada componente e com ele podemos definir uma gama de meta tags, link, title e etc. No exemplo acima foi usado informações fixas, mas essas informações podem ser carregadas através de um servidor (API) que também funcionará corretamente.

Podemos ver que foi definido o title da página:

title: {
   inner: 'Será um prazer'
}

E a meta tag de descrição:

meta: {
  name: [
        { name: 'description', content: '...My description...', id: 'description' }
  ]
}

Com isso ao acessar a URL de contato no blog, o título e a descrição passará a ser modificada, dando maior sentido ao contexto onde o usuário está navegando.

Com tudo configurado, sai em busca e testei várias possibilidades e uma delas eu encontrei no próprio Google search console.

• Ao acessar vá até o menu Rastreamento > Buscar como o Google.
• Digite a URL que deseja enviar para índice
• Clique no botão Buscar e Renderizar

• Aguarde que esteja disponível, pois durante o processo você verá o status do link como Pendente
• Quando concluído o processo, clique no botão Enviar ao índice

Irá aparecer uma janela como essa:

Utilize nas páginas mais importantes à opção “Rastrear este URL e seus links diretos”, ele é mais eficiente, não é a toa que o Google só disponibiliza 10 inserções mensais

Após isso em poucas horas sua página estará no índice e com as informações corretas, como mostra a imagem abaixo.

Outras configurações que são essenciais

Use o Mode HTML5
Se está utilizando o Vue.js, provavelmente estará utilizando Vue-router, com ele é possível configurar um modo mais amigável para URLs.

const router = new VueRouter({
  history: true
})

Saiba mais em http://router.vuejs.org/en/options.html#history

Sitemaps em sua aplicação é essencial
Estruture corretamente todos os links do seu site em um sitemap.xml e disponibilize na sua aplicação, ele informa aos mecanismos todas as URLs que você deseja indexar.

Você também pode enviar a cada atualização de link, no próprio Google Search Console

• Ao acessar vá até o menu Rastreamento > Sitemaps
• Vá até o botão Adicionar/testar Sitemap
• Adicione a URL que contém um arquivo sitemap.xml

O importante também de saber e como deu para notar, é um processo manual e que se aplica somente para o Google, futuramente teremos algo semelhante em outros mecanismos, pois SPA está ficando mais comuns na web e merece uma atenção urgente para esse tipo de problema.

Foi utilizado o vue-head no Vue.js, mas em qualquer outro framework, lib ou Javascript puro é possível modificar as meta informações da página.

Se você conhece mais maneiras de ajudar o SEO de single pages ou alguma dúvida no processo, deixa o comentário.