O que é Sitemap?

O sitemap fornece uma visão geral estruturada de todas as páginas do seu site.

Isso é especialmente importante para sites dinâmicos, como aqueles construídos com Vue.js.

Neste artigo, mostraremos como criar um sitemap para seu site Vue.js.

Criando um projeto Vue.js

Para começar, vamos criar um novo projeto Vue.js usando o comando no terminal:

vue create

Isso criará uma estrutura de pasta básica para o seu projeto, incluindo arquivos como main.js e App.vue.

Pacote Sitemap

Em seguida, precisamos instalar o pacote sitemap usando o npm.

Isso pode ser feito digitando no terminal:

npm install sitemap

Este pacote fornece uma maneira fácil de criar e gerenciar seu sitemap.

Criando o arquivo sitemap.js

Agora, vamos criar um novo arquivo chamado sitemap.js na raiz do nosso projeto.

Este arquivo será responsável por gerar o sitemap usando o pacote sitemap que acabamos de instalar.

Adicionaremos o seguinte código a esse arquivo:

const Sitemap = require('sitemap');
const fs = require('fs');
const path = require('path');

const sm = new Sitemap({
  hostname: 'https://www.example.com',
  cacheTime: 600000,        // 600 sec - cache purge period
});

// Adicionar as páginas do seu site aqui
sm.add({
  url: '/',
  changefreq: 'daily',
  priority: 1
});

sm.add({
  url: '/about',
  changefreq: 'monthly',
  priority: 0.8
});

// Gera o sitemap
const xml = sm.toString();

// Escreve o sitemap em um arquivo
fs.writeFileSync(path.join(__dirname, 'public/sitemap.xml'), xml);

No código acima, estamos usando o pacote sitemap para criar uma nova instância do sitemap, configurando o hostname e o tempo de cache.

Em seguida, adicionamos as páginas do nosso site usando o método add, especificando a URL, a frequência de alteração e a prioridade.

Finalmente, geramos o sitemap e escrevemos o resultado em um arquivo chamado sitemap.xml na pasta public do nosso projeto.

Importante

É importante manter o arquivo sitemap.js atualizado sempre que adicionar ou remover páginas do seu site.

Depois de adicionar todas as páginas relevantes e escrever o sitemap em um arquivo, você pode submeter o sitemap aos mecanismos de busca, como o Google, usando o Search Console.

Isso permitirá que eles rastreiem e indexem suas páginas corretamente, o que pode ajudar a melhorar o desempenho de suas páginas nos resultados de pesquisa.

Além disso, você também pode adicionar o sitemap ao seu arquivo robots.txt, que é usado para informar os mecanismos de busca sobre como rastrear e indexar seu site.

Para fazer isso, adicione a seguinte linha ao seu arquivo robots.txt:

Sitemap: https://www.example.com/sitemap.xml

Resumo

Em resumo, criar um sitemap para seu site Vue.js é uma ótima maneira de ajudar os mecanismos de busca a rastrear e indexar suas páginas corretamente.

Usando o pacote sitemap, você pode facilmente criar e gerenciar seu sitemap, adicionando páginas relevantes e escrevendo o resultado em um arquivo.

Lembre-se de submeter o sitemap aos mecanismos de busca e adicioná-lo ao seu arquivo robots.txt para garantir que seu site seja rastreado e indexado corretamente.