Vue.js + Prerender: Melhorando o SEO do seu SPA
Você usa Vue.js e quer melhorar o SEO do seu site? Neste artigo eu explico como fazer a pré-renderização de arquivos HTML.
SPA vs SEO
Os Single Page Aplications (SPA) contribuiram significativamente para o desenvolvimento Web. Desenvolver sistemas administrativos (também chamados de Painel Administrativo, Admin, Intranet, etc) usando frameworks SPA é só alegria.
O grande problema é quando você vai criar um site que precisa ser indexado por mecanismos de pesquisa, como o Google (Isso é que chamados de SEO - Search Engine Optimization).
Não vou entrar em detalhes sobre SEO, mas a questão é que os mecanismos de pesquisa precisam receber o conteúdo HTML renderizado para entender do que se trata o site. O problema é que os aplicativos SPA empacotam todo o conteúdo dentro de um arquivo JavaScript e isso dificulta significativamente a indexação destes sites.
Uma das alternativas para resolver este problema é a pré-renderização, onde todo o conteúdo é previamente processado (por um servidor ou no ambiente de desenvolvimento) com o objetivo de gerar os arquivos HTML necessários para facilitar a indexação do aplicativo nos mecanismos de buscas.
Vue.js + Prerender: Biblioteca Recomendada
Para fazer a pré-renderização de aplicativos construídos com Vue.js, vou utilizar a biblioteca Prerender-SPA-Plugin. Ela foi construída por Chris Fritz e funciona como um plugin para Webpack, ou seja, consegue fazer a pre-renderização de qualquer aplicativo que use Webpack (independentemente do framework escolhido).
Vale ressaltar que essa biblioteca se integra muito bem ao Vue.js, uma vez que o Chris Fritz é membro do Vue Core Team. Inclusive na documentação do Vue existe uma recomendação para usar essa biblioteca para pré-renderização.
É claro isso pode ser feito utilizando outras bibliotecas/frameworks (como o Nuxt.js), mas nesse artigo o foco é a biblioteca Prerender-SPA-Plugin.
Se você quer saber mais sobre a pré-renderização com Nuxt, leia este outro artigo que eu escrevi: Nuxt.js + Prerender: Como Criar um Static Site para SEO
Pré-requisito: Projeto Vue.js
Antes iniciar, você precisa ter um projeto Vue.js funcionando. Se você não sabe como fazer, é só instalar o Vue CLI e executar o comando para criar o projeto.
Passo 1: Instalação
Para instalar a biblioteca, basta executar:
npm install prerender-spa-plugin --save
Passo 2: Configurar Webpack
Em um projeto Vue.js não existe o arquivo webpack.config.js, uma vez que o Webpack já vem pré-configurado. Mas você pode fazer essas configurações no arquivo vue.config.js:
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about'],
}),
],
},
};
Lembrando que no item routes (linha 9) você precisa especificar todas as rotas que seu aplicativo deseja pré-renderizar.
Passo 3: Verifique o VueRouter
Importante destacar que a pré-renderização só vai funcionar se o Mode History do Vue Router for ativado. De maneira geral, o Mode History é um recurso que permite a navegação sem Anchors (#) na URL.
Segue exemplo de como ativar o Mode History:
const router = new VueRouter({
mode: 'history', // IMPORTANT
base: process.env.BASE_URL,
routes: [
// your routes
],
});
Passo 4: Verifique o Root Component
Todo aplicativo Vue.js tem um Root Element, que é aquele elemento HTML que serve de base para instância do Vue.
<body>
<div id="app"></div>
</body>
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
Sabe o id="app" que você viu no exemplo acima? Então precisa repetir isso no seu Root Component (neste caso é o App.vue).
<template>
<div id="app">
<div>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
Ou seja, o id="app" precisa ser declarado em dois lugares: No Root Element e no Root Component. Se não colocar, a pré-renderização não vai funcionar.
Os passos 3 e 4 estão descritos na documentação oficial do Prerender-SPA-Plugin no item de Ressalvas.
Passo 5: Build
Antes de iniciar o passo 5, é importante salientar que nesta etapa você precisa alterar seu ambiente para produção, ou seja:
NODE_ENV=production
Por fim, execute o seguinte comando para gerar os arquivos HTML pré-renderizados:
npm run build
De uma maneira geral, o que vimos até aqui é o básico para o processo de pré-renderização. Mas se você quer melhorar ainda mais o SEO do seu site, se liga nos suguintes tópicos.
Importante para SEO: Meta Tags
A biblioteca Vue-Meta é ótima para adicionar Meta Tags e é compatível com o Prerender-SPA-Plugin. Para utiliza-lá é muito fácil, primeiramente faça a instalação:
npm install vue-meta --save
Adicione o seguinte código no seu projeto (preferencialmente dentro do arquivo main.js):
import Vue from 'vue';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
Agora é só declarar dentro de cada componente as Meta Tags que você pretende utilizar:
<template>
<div>
<div>About page</div>
<!-- any code here -->
</div>
</template>
<script>
export default {
name: 'About',
metaInfo: {
htmlAttrs: {
lang: 'pt-BR',
},
title: 'About',
meta: [{ name: 'descrition', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }],
},
};
</script>
Se você quer mais informações sobre a importância das Meta Tags para o SEO, veja este artigo da Rock Content.
Importante para SEO: Schema.org
Você sabe o qual é o papel do Schema.org?
Se não sabe, vou tentar ir direto ao ponto: Imagine que dentro do seu site tem um número de telefone, mas os buscadores (Google, Bing, Yahoo, etc) não sabem que aquilo é um número telefone e nem a quem pertence.
É para resolver este tipo de problema que foi criado o Schema.org. Se você quer saber mais sobre isso leia esse artigo.
Você pode facilitar o trabalho dos buscadores complementando o seu HTML:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Gabriel Willemann</span>
<span itemprop="jobTitle">Software Developer</span>
<span itemprop="telephone">(99) 9 9999-9999</span>
</div>
Ou você pode inserir um script específico para isso:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Gabriel Willemann",
"jobTitle": "Software Developer",
"telephone": "(99) 9 9999-9999"
}
</script>
Se você optar por essa maneira, você pode utilizar a biblioteca vue-jsonld para facilitar o seu trabalho.
Sobre a instalação e a configuração dessa biblioteca é bem fácil, é só seguir as instruções do repositório. E o código final fica desse jeito:
<template>
<div>
<div>About page</div>
<!-- any code here -->
</div>
</template>
<script>
export default {
name: 'About',
jsonld() {
return {
'@context': 'http://schema.org/',
'@type': 'Person',
'name': 'Gabriel Willemann',
'jobTitle': 'Software Developer',
'telephone': '(99) 9 9999-9999',
};
},
};
</script>
Considerações finais
Lembrando que após adicionar as Meta Tags e o Schema.org, você precisa reexecutar o processo de "build" (passo 5).
Para finalizar, quero deixar claro que neste artigo eu usei o Vue.js na versão 2.6 e o Prerender-SPA-Plugin na versão 3.4.
Dúvidas ou sugestões é só entrar em contato. Abraço.
