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 myappDentro do aplicativo next
Agora, vamos criar uma página chamada cars dentro da pasta pages.
A página vai receber como props o nome da marca de vários carros e vai renderizá-los na tela.
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.
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.
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:
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.
Agora, vamos configurá-lo para definir a linguagem padrão como inglês.
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.
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″]
