Novo sistema de metadados no Next 13.2 para SEO
Índice
- Introdução
- O que é o Next 13
- A remoção do arquivo head.special
- A nova função de metadados no layout.js
- Título e templates de título
- Adicionando metadados às páginas sem layout
- Layouts de título aninhados
- Descrição e palavras-chave
- Opções avançadas de metadados
- Como configurar os metadados no Next 13.2 e posterior
📄 O Novo Sistema de Metadados no Next 13.2 e Posterior
Ao criar um aplicativo Next.js na versão 13.2 ou posterior, você pode ter percebido uma mudança significativa no gerenciamento de metadados. O arquivo head.special foi descontinuado, sendo removido a partir da versão 13.3. Agora, todos os metadados são mantidos no arquivo layout.js. Neste artigo, vamos explorar esse novo sistema de metadados e como utilizá-lo corretamente.
O que é o Next 13
O Next.js é um framework de desenvolvimento web baseado em React que oferece recursos poderosos de SSR (renderização no servidor) e geração de páginas estáticas. Ele é amplamente utilizado para a construção de aplicativos web modernos e eficientes. Com o lançamento do Next 13, foram introduzidas várias melhorias e atualizações, incluindo uma nova forma de gerenciar os metadados das páginas.
A remoção do arquivo head.special
Uma das principais alterações no Next 13.2 foi a remoção do arquivo head.special. Esse arquivo, que era utilizado para armazenar os metadados das páginas, não é mais suportado nas versões futuras do Next.js. A partir da versão 13.3, todos os metadados devem ser armazenados no arquivo layout.js.
A nova função de metadados no layout.js
Ao abrir o arquivo layout.js de um aplicativo Next.js na versão 13.2 ou posterior, você notará a presença de uma nova função chamada export const metadata. Essa função é responsável por armazenar os metadados das páginas. Vamos explorar as opções disponíveis dentro do objeto de metadados.
Título e templates de título
Um dos metadados mais importantes é o título. O título controla o nome do seu site e é exibido na aba do navegador. Por exemplo, ao adicionar a tag metadata no arquivo da página inicial, você pode definir o título do seu site para "Meu Site Next". Isso fará com que o texto da aba do navegador seja alterado para "Meu Site Next".
Além disso, é possível utilizar templates de título para simplificar a definição de títulos em páginas diferentes. Imagine que você deseje ter um template de título padrão que será utilizado em todas as páginas. Para isso, você pode definir um objeto com a chave default no template de título do arquivo de layout. Em seguida, ao criar uma nova página, você pode simplesmente atualizar o título nessa página e ele será exibido na aba do navegador, juntamente com o template padrão. Por exemplo, se você definir o template como "Meu Site | %s" e atualizar o título de uma página específica para "Sobre", a aba do navegador será exibida como "Meu Site | Sobre".
Adicionando metadados às páginas sem layout
Mesmo que uma página não tenha um layout específico, você ainda pode adicionar metadados a ela. No entanto, nesse caso, o template de título padrão definido no layout será utilizado para o título da página. Isso significa que, se a página não tiver um layout, o título será baseado no template padrão do layout global.
Se você desejar ter um controle mais granular sobre o título da página, poderá definir uma nova descrição utilizando a tag metadata diretamente na página. Por exemplo, ao definir export const metadata = { title: "Sobre", description: "Página de informações sobre a nossa empresa" } no arquivo da página "sobre.js", o título na aba do navegador será exibido como "Sobre" e a descrição será "Página de informações sobre a nossa empresa".
Layouts de título aninhados
Caso você queira adicionar uma descrição à página, mas não deseje adicionar um título, o título padrão definido no layout será exibido na tela. Para realizar essa configuração, você pode simplesmente excluir a propriedade title do objeto metadata na página. Dessa forma, apenas a descrição específica será exibida na página.
Descrição e palavras-chave
Outro metadado útil é a descrição. Ele define o texto que é exibido nos resultados de pesquisa do Google e também pode ser utilizado em outros mecanismos de busca. Se você não especificar uma descrição para uma página, será utilizado o valor da descrição definida no layout da página.
Além disso, há a opção de definir palavras-chave específicas para ajudar os motores de busca a entenderem do que se trata o seu site. Por exemplo, você pode adicionar palavras-chave como "Next.js", "JavaScript" e "desenvolvimento web" para indicar ao Google sobre o conteúdo da sua página.
Opções avançadas de metadados
Além dos metadados básicos, existem várias outras opções disponíveis para a configuração dos metadados no Next.js. Por exemplo, é possível utilizar a opção "open graph" para tornar a página um objeto rico em um gráfico social. Essa opção permite definir títulos, descrições, URLs e outras informações específicas para redes sociais.
Outra opção interessante é a possibilidade de controlar como os robôs dos mecanismos de busca operam em sua página. Por exemplo, se você deseja permitir que o Google indexe o seu site, pode utilizar a opção "robots" e definir o valor "index" para o robô do Google.
Como configurar os metadados no Next 13.2 e posterior
Para configurar os metadados no Next.js a partir da versão 13.2, basta abrir o arquivo layout.js e adicionar a função de metadados export const metadata. Dentro dessa função, defina as opções desejadas, como título, descrição, palavras-chave e outras opções avançadas.
É importante lembrar que, a partir do Next 13.2, o uso do arquivo head.special foi descontinuado e os metadados devem ser armazenados no arquivo layout.js. Certifique-se de fazer essa migração para evitar que seu site seja quebrado após uma atualização.
Esperamos que esse guia tenha sido útil para entender o novo sistema de metadados no Next.js a partir da versão 13.2. Se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo. Agradecemos por ler nosso artigo e até a próxima!
Destaques
- O Next 13 introduziu um novo sistema de metadados
- O arquivo head.special foi removido a partir do Next 13.3
- Os metadados agora são armazenados no arquivo layout.js
- É possível utilizar templates de título para simplificar a definição do título das páginas
- Mesmo páginas sem layout podem ter metadados usando o template padrão definido no layout global
- Descrições e palavras-chave são importantes para otimização de mecanismos de busca
- Há opções avançadas de metadados, como o Open Graph e o controle de robôs de busca
- Certifique-se de migrar seus metadados do arquivo head.special para o layout.js a partir do Next 13.2
FAQ
Q: Como faço para adicionar um título personalizado a uma página sem layout?
R: Se uma página não tiver um layout específico, o título será baseado no template padrão definido no layout global. Para adicionar um título personalizado, é necessário utilizar o template dentro do objeto metadata no arquivo da página.
Q: Posso adicionar descrições personalizadas às páginas?
R: Sim, é possível adicionar descrições personalizadas às páginas utilizando a propriedade description dentro do objeto metadata no arquivo da página. Isso permite que cada página tenha uma descrição única nos resultados de busca.
Q: O novo sistema de metadados é compatível com versões anteriores do Next.js?
R: Não, o novo sistema de metadados foi introduzido a partir do Next 13.2. Versões anteriores não possuem suporte para esse sistema e ainda utilizam o arquivo head.special para gerenciar os metadados.
Q: Onde posso encontrar mais informações sobre as opções avançadas de metadados no Next.js?
R: Você pode encontrar mais informações sobre as opções avançadas de metadados no Next.js na documentação oficial. Recomendamos consultar a documentação para obter detalhes completos sobre cada opção.
Recursos
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
