Títulos de página, meta tags e meta descrições são importantes para SEO. Eles são as primeiras coisas que um usuário vê no SERPS e determinam se eles clicam no seu site. Portanto, é importante otimizar os títulos, metatags e descrição do seu site.
Em Next.js, você os adiciona por meio do componente de cabeçalho personalizado. Você pode adicioná-los em todas as páginas do aplicativo ou personalizá-los para cada página.
Adicionando uma tag de cabeçalho global a todas as páginas Next.js
Next.js fornece _app.js para inicializar páginas. Você pode usá-lo para criar meta tags compartilhadas em todas as páginas.
importar '../styles/globals.css'
importar Cabeça de 'próximo/cabeça'funçãoMeuAplicativo({ Componente, pageProps }) {
retornar <>
<Cabeça>
<metanome="autor" conteúdo="John Doe"/>
</Head>
<Componente {...pageProps} />
</>
}
exportarpadrão MeuAplicativo
Se você deseja que uma página tenha um título e uma descrição personalizados, adicione o componente head a ela e o Next.js o usará em vez do padrão no componente App.
Adicionando Meta Tags e Descrição a uma Página Next.js Específica
Metatags e descrições estáticas são adequadas para páginas cujo conteúdo permanece o mesmo, por exemplo, uma página inicial.
Abra o arquivo /pages/index.js e modifique a tag head com o título e a descrição apropriados.
importar Cabeça de "próximo/cabeça";const Casa= () => {
retornar (
<>
<Cabeça>
<título>blog</title>
<metanome="janela de exibição" conteúdo="escala inicial=1,0, largura=largura do dispositivo" />
<metanome='descrição' conteúdo='Artigos de programação'/>
</Head>
<principal>
<h1>Bem-vindo ao meu blog!</h1>
</main>
</>
);
};
exportarpadrão Lar;
Você acessa o componente Head importando-o de next/head. Ele funciona anexando elementos à tag head de uma página HTML. Dependendo de onde você coloca esse componente, as meta tags e a descrição estarão disponíveis em todo o aplicativo ou em páginas individuais.
Adicionar o título, a largura da janela de visualização e a descrição no arquivo _app.js garante que todas as páginas tenham os mesmos metadados.
Esta página tem conteúdo estático, mas às vezes você pode querer criar páginas que consomem conteúdo dinâmico.
Adicionando Meta Títulos Dinâmicos e Descrições a uma Página Next.js
Dependendo do caso de uso, você pode usar getStaticProps(), getStaticPaths() ou getServerSideProps() para buscar dados em Next.js. Esses dados determinam o conteúdo da página. Use-o para criar os metadados da página.
Por exemplo, criar os metadados para o aplicativo Next.js que renderiza postagens de blog seria tedioso.
A maneira recomendada é criar uma página dinâmica que receba um identificador que você pode usar para buscar o conteúdo do blog. Você pode usar esse conteúdo no componente principal.
importar { getAllPosts, getSinglePost } de "../../utils/mdx";
importar Cabeça de "próximo/cabeça";const Postagem = ({ título, descrição, conteúdo }) => {
retornar (
<>
<Cabeça>
<título>{título}</title>
<metanome="descrição" conteúdo={descrição} />
</Head>
<principal>{/* Conteúdo da página */}</main>
</>
);
};exportarconst getStaticProps = assíncrono ({ parâmetros }) => {
// obtém uma única postagem
const postar = aguardam getSinglePost (params.id, "postagens");retornar {
adereços: {... post },
};
};exportarconst getStaticPaths = assíncrono () => {
// Recupera todas as postagens
caminhos const = getAllPosts("Postagens").map(({ id }) => ({ parâmetros: { id } }));retornar {
caminhos,
cair pra trás: falso,
};
};
exportarpadrão Publicar;
A função getStaticProps passa os dados post para o componente Post como props. O componente Post desestrutura o título, a descrição e o conteúdo dos adereços. O componente principal então usa o título e a descrição nas meta tags.
Next.js é um framework otimizado
Você acabou de aprender como usar o componente head para adicionar metatítulos e descrições a um projeto Next.js. Use esse conhecimento para criar cabeçalhos amigáveis para SEO, subir nas SERPs e atrair mais visitantes ao seu site.
Além do componente principal, o Next.js fornece outros componentes como Link e Imagem. Esses componentes são otimizados imediatamente, facilitando a criação de sites rápidos e otimizados para SEO.
