Pesquisa de site

Como adicionar cabeçalhos otimizados para SEO a um site Next.js

Aprenda como personalizar os metadados de suas páginas para uma melhor experiência do usuário e melhor cobertura de SEO.

Títulos de páginas, 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 ele clica no seu site. Portanto, é importante otimizar os títulos, meta tags e descrição do seu site.

Em Next.js, você os adiciona por meio do componente head personalizado. Você pode adicioná-los em todas as páginas do aplicativo ou personalizá-los para cada página.

Adicionando uma tag 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.

import '../styles/globals.css'
import Head from 'next/head'
 
function MyApp({ Component, pageProps }) {
  return <>
    <Head>
      <meta name="author" content="John Doe"/>
    </Head>
    <Component {...pageProps} />
  </>
}
 
export default MyApp

Se você deseja que uma página tenha um título e uma descrição personalizados, adicione o componente head a ela e 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 estáticas e descrições 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.

import Head from "next/head";
 
const Home= () => {
  return (
    <>
    <Head>
      <title>Blog</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <meta name='description' content='Programming Articles'/>
    </Head>
    <main>
      <h1>Welcome to my blog!</h1>
    </main>
    </>
  );
};
 
export default Home;

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ê colocar este 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 consumam conteúdo dinâmico.

Adicionando Meta Título Dinâmico 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 metadados para o aplicativo Next.js que renderiza postagens de blog seria entediante.

A forma recomendada é criar uma página dinâmica que receba um identificador que você possa usar para buscar o conteúdo do blog. Você pode então usar esse conteúdo no componente head.

import { getAllPosts, getSinglePost } from "../../utils/mdx";
import Head from "next/head";
 
const Post = ({ title, description, content }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <main>{/* page content */}</main>
    </>
  );
};
 
export const getStaticProps = async ({ params }) => {
  // get a single post
  const post = await getSinglePost(params.id, "posts");
 
  return {
    props: { ...post },
  };
};
 
export const getStaticPaths = async () => {
  // Retrieve all posts
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } }));
 
  return {
    paths,
    fallback: false,
  };
};
 
export default Post;

A função getStaticProps passa os dados da postagem para o componente Post como acessórios. O componente Post desestrutura o título, a descrição e o conteúdo dos acessórios. O componente head então usa o título e a descrição nas meta tags.

Next.js é uma estrutura otimizada

Você acabou de aprender como usar o componente head para adicionar meta tí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 para seu site.

Além do componente head, Next.js fornece outros componentes como Link e Image. Esses componentes são otimizados imediatamente, tornando mais fácil a criação de sites rápidos e amigáveis para SEO.

Artigos relacionados: