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" /> </> ); }