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

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

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ê na SERPS e determinam se eles clicam 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 customizado. Você pode adicioná-los em todas as páginas do aplicativo ou personalizá-los para cada página.



MAKEUSEO VÍDEO DO DIA

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.





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ê quiser 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.

copiar música do ipod para o computador

Adicionando Meta Tags e Descrição a uma Página Next.js Específica

Meta tags 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 esse componente, as metatags 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.



sites para baixar músicas completas gratuitamente

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

A forma 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 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 do 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 head então usa o título e a descrição nas metatags.

Next.js é uma estrutura otimizada

Você acabou de aprender a 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 o seu site.

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