Próxima versão do Next.js com suporte SEO | Tutorial Next.js 13.2

Tabela de Conteúdos

• Introdução
• O que é o Next 13
• A mudança no arquivo head
• A nova função de metadados
• Utilizando o título
• Templates de título
• Adicionando descrições
• Palavras-chave e otimização para mecanismos de busca
• Open Graph e redes sociais
• Opções adicionais

Introdução

Neste artigo, discutiremos as mudanças recentes no Next 13, especificamente a remoção do arquivo head especial e a introdução de uma nova função de metadados. Explicaremos como utilizar essa nova função para definir o título, descrições e outras configurações importantes para a otimização de mecanismos de busca e compartilhamento em redes sociais. Vamos entender como a atualização para o Next 13.2 afeta o gerenciamento de metadados em seu aplicativo.

O que é o Next 13

O Next 13 é uma versão atualizada do popular framework de desenvolvimento web Next.js. Ele traz melhorias significativas na performance, usabilidade e recursos em comparação com versões anteriores. Uma das alterações mais importantes no Next 13 é a forma como os metadados são tratados.

A mudança no arquivo head

Ao criar um aplicativo Next 13, você pode notar que o arquivo head não está mais presente no diretório. Isso ocorre porque, na versão 13.3, o arquivo head foi depreciado e removido. A partir de agora, todos os metadados devem ser mantidos no arquivo layout.js.

A nova função de metadados

Dentro do arquivo layout.js, você encontrará um novo objeto chamado metadata. Este objeto é responsável por armazenar e gerenciar os metadados do seu aplicativo. Vamos explorar as diferentes chaves disponíveis dentro desse objeto.

Utilizando o título

Uma das chaves mais importantes dentro do objeto de metadados é o title. Essa chave controla o nome do seu site e o título exibido na aba do navegador. Por exemplo, se definirmos o valor do título como "Meu Site Next", veremos essa alteração refletida na aba do navegador ao abrir o aplicativo.

Templates de título

O Next 13 também oferece suporte a templates de título. Isso permite que você defina um template padrão para o título em todas as páginas do seu aplicativo. Para fazer isso, você pode criar um objeto com uma chave default e um valor padrão para o título. Em seguida, utilize a chave template com um sinal de porcentagem seguido da letra "s" nas futuras páginas para atualizar apenas o título específico daquela página.

Adicionando descrições

Outra chave importante nos metadados é a description. Essa chave permite que você defina uma descrição para cada página do seu aplicativo. Essa descrição é exibida nos resultados de busca do Google e pode ajudar os usuários a entenderem o conteúdo da página. Se você não adicionar uma descrição para uma página específica, será utilizada a descrição padrão do layout.

Palavras-chave e otimização para mecanismos de busca

Além do título e descrição, é possível utilizar a chave keywords para adicionar palavras-chave relevantes ao seu aplicativo. Essas palavras-chave ajudam os mecanismos de busca, como o Google, a entenderem o conteúdo do seu site. Por exemplo, você pode adicionar palavras como "Next JS" e "JavaScript" para indicar que seu aplicativo é relacionado a essas tecnologias.

Open Graph e redes sociais

O Next 13 também oferece suporte ao Open Graph, que permite que as páginas do seu aplicativo se tornem "objetos ricos" em uma rede social, como o Facebook. Você pode configurar títulos, descrições, URL, imagens e outros elementos específicos para cada página. Isso proporciona uma experiência de compartilhamento mais atraente quando seu aplicativo é compartilhado nas redes sociais.

Opções adicionais

Além das chaves mencionadas, o objeto de metadados possui várias outras opções e configurações. Você pode controlar como os robôs de mecanismos de busca operam em suas páginas, definir o tema de cores, atualizar o viewport e muito mais. Recomendamos a consulta à documentação oficial para obter mais informações sobre essas opções.

Em resumo, o Next 13 trouxe uma mudança significativa na forma como os metadados são gerenciados. Utilizando a nova função de metadados no arquivo layout.js, agora você pode controlar o título, descrições e outras configurações importantes diretamente em cada página do seu aplicativo. Isso proporciona mais controle e flexibilidade na otimização para mecanismos de busca e compartilhamento em redes sociais.

Faça a atualização para o Next 13.2 ou versões posteriores e aproveite todos os benefícios dessa nova abordagem de metadados. Se você gostou desse sistema de metadados ou tem alguma dúvida, deixe seu comentário abaixo. Ficaremos felizes em ajudar!

Destaques

• O Next 13 traz melhorias significativas no desenvolvimento web.
• O arquivo head foi depreciado e removido na versão 13.3.
• Os metadados do aplicativo são agora gerenciados no arquivo layout.js.
• A nova função de metadados permite definir o título, descrições e outras configurações importantes em cada página.
• Templates de título permitem personalizar o título de forma dinâmica em diferentes páginas.
• É possível adicionar descrições e palavras-chave para otimização de mecanismos de busca.
• O Open Graph permite criar objetos ricos em redes sociais.
• O Next 13 também oferece opções adicionais, como controle de robôs, tema de cores e viewport personalizado.

Perguntas Frequentes

Q: O que é o Next 13?\ R: O Next 13 é uma atualização do framework de desenvolvimento web Next.js.

Q: Como os metadados são gerenciados no Next 13?\ R: Os metadados são agora gerenciados no arquivo layout.js do aplicativo.

Q: É possível personalizar o título de cada página?\ R: Sim, o Next 13 oferece suporte a templates de título, permitindo a personalização dinâmica do título em diferentes páginas.

Q: Quais são as vantagens do Open Graph?\ R: O Open Graph permite que as páginas do aplicativo se tornem objetos ricos em redes sociais, proporcionando uma experiência de compartilhamento mais atraente.

Q: Quais outras opções estão disponíveis nos metadados do Next 13?\ R: Além do título e descrição, é possível definir palavras-chave, controlar robôs de mecanismos de busca, personalizar o tema de cores e muito mais.

Recursos:

• Documentação oficial do Next.js: https://nextjs.org/docs