Aprenda a fazer SEO no NextJs

Bom meu camarada, aqui eu não vou explicar o que é SEO, o objetivo é mostrar como o Next resolve um problema do React quando falamos em SEO.

1° Ponto Importante

No React a renderização é CSR (Client Side Rendering), ou seja, a renderização do seu site é feita do lado do cliente, mas você pode perguntar, qual o problema disso?

Veja esse gráfico

Nesse processo, existem 3 principais problemas pro SEO

1» Velocidade de Carregamento

A renderização do lado do cliente pode ser mais lenta, o que pode afetar a velocidade de carregamento da página e prejudica o ranqueamento do Google.

2» Conteúdo "Invisível"

O Google pode ter dificuldade em rastrear o conteúdo da página gerado dinamicamente pelo JavaScript, o que pode afetar a capacidade de indexação da página.

3» URL Dinâmicas

A renderização do lado do cliente pode resultar em URL dinâmicas, o que pode prejudicar a capacidade do Google de rastrear e indexar a página.

Bom, agora veja esse outro gráfico, essa é a renderização SSR (Server Side Rendering), que por padrão é usado no NextJs.

Compare o passo 3 entre os dois métodos.

No SSR a página já foi renderizada pelo Next, mas ainda não está interativa, mas pro queridinho SEO a leitura e rastreamento da página já está funcionando.

Bom, até aqui sem novidades, o Next faz isso por padrão, mas eu queria apenas deixar clara as diferenças.

Mas você pergunta, e como melhorar meu SEO?

No Next você tem um arquivo chamado head.tsx (.js ou .jsx) e nele você define as metatags. E esse arquivo pode ser diferente em cada página e pode inclusive passar os parâmetros por Props

Essa é uma técnica que gosto bastante, criar um arquivo de tags globais, pois você vai usar em toda estrutura do site e todas as páginas, pode ser viewpoint e favicon por exemplo, mas você pode acrescentar outras que façam sentido no seu projeto, veja como ficaria.

export default function GlobalTags() {
  return (
    <>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <link rel="icon" href="/favicon.ico" />
    </>
  );
}

No seu arquivo head.tsx você importa o GlobalTags e cria as metatags específicas daquela página.

import GlobalTags from "./globalTags";

export default function Head() {
  return (
    <>
      <GlobalTags/>
      <title>André Peixoto | Front End Developer</title>
      <meta name="description" content="André Peixoto | Front End Developer" />
      <meta property="og:title" content="Front-End Developer | André Peixoto" />
      <meta
        property="og:description"
        content="Um desenvolvedor apaixonado por design, responsividade e performance."
      />
      <meta property="og:type" content="website" />
    </>
  );
}