Boas práticas de SEO utilizando Next.js

Next.js é um framework do React.js, criado e desenvolvido pela Vercel, que tem como um dos seus principais objetivos auxiliar na indexação da página pelo motor de busca e melhorar o SEO (Search Engine Optimization), consequentemente, melhorando também seu ranqueamento.

[adrotate banner=”4″]

O Next.js faz isso através de diversas estratégias, sendo as mais conhecidas e aplicadas: Server-side rendering (SSR) e Static Site Generation (SSG). Além disso, diversas outras técnicas podem ser utilizadas para facilitar a indexação e o posicionamento da página. Neste artigo, iremos abordar algumas dessas estratégia.

O que é SEO?

Antes de falarmos sobre boas práticas, precisamos entender: o que é SEO?

Podemos entender SEO (em português, otimização para motores de busca) como um conjunto de técnicas que tem por finalidade melhorar a posição do seu produto (pode ser entendido como postagem, site, vídeo, entre outros) em algum mecanismo de busca (como Google ou Youtube). Pensando nisso, vamos descobrir a seguir quais são essas técnicas utilizadas pelo framework Next.

Server Side Rendering (SSR)

Em português, renderização do lado do servidor, o SSR surge como uma ótima estratégia para realizar a otimização de sites. A partir da pré-renderização dos componentes HTML da página, o buscador consegue visualizar e entender do que aquele site fala sem precisar do arquivo Javascript.

Dessa forma, essa funcionalidade corrige um dos maiores problemas do React, que precisava ter seu Javascript executado para visualizar o arquivo HTML completo.

Como aplicar o SSR em projetos

Para entendermos melhor como essa funcionalidade é utilizada, vamos exemplificar com um simples caso de uso (uma página cars que recebe e consome dados fictícios).

Instalação com NPX no terminal

$ npx create-next-app myapp

Dentro do aplicativo next

Agora, vamos criar uma página chamada cars dentro da pasta pages.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 1

A página vai receber como props o nome da marca de vários carros e vai renderizá-los na tela.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 2

Inserindo o SSR

Para isso, criaremos uma função chamada getServerSideProps. Ela será responsável por obter os dados necessários (da API, do JSON) e mandar para o componente renderizar.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 3

Dessa forma, o HTML será pré-renderizado do lado do servidor e o SEO irá melhorar bastante!

Static Site Generation (SSG)

Em português, geração de site estático, o SSG surge como uma ótima estratégia para realizar a otimização de sites pequenos, ou de páginas específicas que não possuem mudanças constantes.

Enquanto o SSR é realizado no momento da requisição, o SSG acontece em tempo de compilação. Ou seja, isso afeta o tempo de carregamento da página, tornando o método útil apenas para situações específicas (como mencionado anteriormente).

Como aplicar o SSG em projetos

Seguindo a mesma linha de raciocínio empregada anteriormente na página cars, podemos substituir o getServerSideProps, pelo getStaticProps.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 4

Da mesma maneira que o SSR, agora essa página será pré-renderizada e os motores de busca irão indexar ela mais facilmente, além de conquistar um melhor ranqueamento.

Outros métodos para melhorar o SEO

Além do que foi apresentado anteriormente, o Next disponibiliza outras técnicas para melhorar ainda mais a otimização da página, como veremos a seguir.

Título e descrição da página

Cada página possui um título e uma descrição. Isto é, pode ser desde uma postagem de blog que vai explicar algo até um produto em um e-commerce. Sem esses metadados, não temos como saber do que se trata aquela página. Se até mesmo nós temos dificuldade de entender aquele conteúdo, imagina o mecanismo de busca!?

Sendo assim, podemos combater essa falha utilizando um cabeçalho e passando para ele o título e a descrição da página. Vamos tomar o exemplo da página que criamos anteriormente:

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 5

Podemos passar essa propriedade em todas as páginas necessárias de nossa aplicação e irá melhorar a posição dela no motor de busca.

Criando o _document

Com o _document, podemos inserir definições padrões do nosso arquivo HTML, como a linguagem padrão (inglês, português, etc). Para isso, vamos criar ele dentro da pages.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 6

Agora, vamos configurá-lo para definir a linguagem padrão como inglês.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 7

Otimizando imagens

Por fim, vamos falar um pouco sobre a otimização de imagens! Ao invés de utilizar a tag img disponibilizada pelo HTML padrão, o Next.js disponibiliza uma tag customizada para exibir imagens em nossa página.

Boas práticas de SEO utilizando Next.js Luby Software
Boas práticas de SEO utilizando Next.js 8

Lembre-se: ao utilizar imagens, sempre dê preferência por arquivos .svg. Isso porque são mais fáceis de serem manipulados. E não se esqueça de passar o tamanho da imagem no CSS!

Conclusão

Aplicando essas estratégias, além de seu código ficar mais organizado, estará melhorando o SEO e, consequentemente, o posicionamento das suas páginas no motor de busca.

Leia também:

TypeScript: quando utilizar Alias ou Interface?

Autor: Carlos César Feitosa.

[adrotate banner=”5″]

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!
Transformação Digital Logo Luby Azul

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima