menu

SHARKLABS

Vue.js + Prerender: Melhorando o SEO do seu SPA

/
/
Vue.js + Prerender: Melhorando o SEO do seu SPA
bookmark Vue.js access_time

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.

Autor
"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." Martin Fowler