Pesquisa de site

Como implementar o protocolo Open Graph em Next.js

Open Graph é uma vitória fácil de SEO e, felizmente, você pode adicioná-lo ao seu site Next.js com qualquer um desses dois métodos simples.

Você sempre quis que seu site Next.js aparecesse como um objeto rico quando compartilhado nas redes sociais? Nesse caso, você precisa implementar o protocolo Open Graph.

O pacote next-seo facilita a adição de tags Open Graph ao seu site Next.js. Você também pode usar uma abordagem mais manual para um controle mais preciso sobre o resultado final.

Finalmente, você deve considerar exatamente quais informações incluir em suas tags.

O que é gráfico aberto?

O protocolo Open Graph é um padrão aberto que permite aos desenvolvedores controlar como as mídias sociais exibem seu conteúdo. Foi originalmente desenvolvido pelo Facebook, mas muitas outras plataformas adotaram o protocolo desde então. Isso inclui Twitter, LinkedIn e Pinterest.

O Open Graph permite especificar exatamente como outros sites devem exibir seu conteúdo, garantindo que ele tenha uma boa aparência e seja fácil de ler. Também permite maior controle sobre como os links são renderizados. Isso torna mais fácil rastrear cliques e outras métricas de engajamento.

Por que usar o protocolo Open Graph?

Existem três áreas principais que o Open Graph deve melhorar: engajamento na mídia social, SEO e tráfego do site.

1. Melhore o envolvimento nas redes sociais

O Open Graph pode ajudar a melhorar o envolvimento na mídia social, tornando mais fácil para os usuários compartilharem seu conteúdo. Ao especificar como os sites devem exibir seu conteúdo, você pode torná-lo mais atraente visualmente e fácil de ler. Isso, por sua vez, pode levar a mais compartilhamentos e curtidas, bem como ao aumento das taxas de cliques.

2. Melhore o SEO

Open Graph também pode ajudar a melhorar seu SEO. Ao especificar o título, a descrição e a imagem de cada conteúdo, você pode controlar como ele aparece nos resultados da pesquisa. Isso pode ajudar a aumentar a taxa de cliques do seu site, bem como melhorar sua classificação geral.

3. Aumente o tráfego do site

Finalmente, o Open Graph pode ajudar a aumentar o tráfego do site. Ao tornar mais fácil para os usuários compartilharem seu conteúdo, você pode aumentar o número de pessoas que o veem. Isso, por sua vez, pode levar a mais visitantes do site e aumento do tráfego.

4. Melhore a experiência do usuário

Outro benefício de usar o protocolo Open Graph é que ele pode melhorar a experiência do usuário em seu site. Ao incluir metadados, você pode facilitar a acessibilidade e reutilizar os dados, garantindo que os usuários vejam as informações mais relevantes. Isso pode levar a uma melhor experiência geral em seu site, o que pode gerar mais visitantes de retorno.

Por que usar Next.js?

Existem dois motivos principais para usar Next.js: para melhorar o desempenho e para facilitar o desenvolvimento.

1. Melhore o desempenho

Next.js pode ajudar a melhorar o desempenho dividindo o código do seu aplicativo e pré-buscando recursos. Isso pode levar a um tempo de carregamento mais rápido e a uma carga reduzida do servidor.

2. Facilite o desenvolvimento

Next.js também pode facilitar o desenvolvimento, fornecendo uma maneira simples de criar aplicativos React renderizados em servidor. Isso pode tornar mais rápido e fácil o desenvolvimento e a implantação de aplicativos React.

Como implementar o protocolo Open Graph em Next.js

Existem duas maneiras de implementar o Open Graph Protocol em Next.js: usando o pacote next-seo ou criando um arquivo _document.js personalizado.

Método 1: usando o pacote next-seo

A maneira mais fácil de implementar o Open Graph Protocol em Next.js é usar o pacote next-seo. Este pacote irá gerar automaticamente as tags necessárias para você.

Para instalar o pacote next-seo, execute o seguinte comando:

npm install next-seo --save

Depois de instalar o pacote, você pode usá-lo adicionando o seguinte código ao seu arquivo index.js:

import { NextSeo } from 'next-seo';
 
const DemoPage = () => (
  <>
    <NextSeo
      title="Your Title"
      description="This is a demo description"
      canonical="https://www.example.com"
      openGraph={{
        url: 'https://www.example.com',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [
          {
            url: 'https://www.example.com/og-image01.jpg',
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
            type: 'image/jpeg',
          },
          {
            url: 'https://www.example.com/og-image02.jpg',
            width: 900,
            height: 800,
            alt: 'Og Image Alt Second',
            type: 'image/jpeg',
          },
          { url: 'https://www.example.com/og-image03.jpg' },
          { url: 'https://www.example.com/og-image04.jpg' },
        ],
        site_name: 'YourSiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <p>Demo Page</p>
  </>
);
 
export default DemoPage;

Este código importa o componente NextSeo do pacote next-seo e o utiliza para especificar o título, a descrição e a imagem da página. Ele também especifica o nome do site e o identificador do Twitter.

Execute o seguinte comando para iniciar o servidor de desenvolvimento:

npm run dev

Abra http://localhost:3000 no seu navegador para ver a página de demonstração.

Método 2: usando o arquivo _document.js personalizado

Outra maneira de implementar o Open Graph Protocol em Next.js é criar um arquivo _document.js personalizado. Este arquivo permitirá que você mesmo especifique as tags Open Graph e crie código reutilizável para todas as páginas.

Para configurar um arquivo _document.js personalizado, crie um novo arquivo em seu diretório pages com o seguinte conteúdo:

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
 
  render() {
    return (
      <Html>
        <Head>
          <meta property="og:url" content="https://www.example.com" />
          <meta property="og:title" content="Open Graph Title" />
          <meta property="og:description" content="Open Graph Description" />
          <meta property="og:image" content="https://www.example.com/og-image.jpg" />
          <meta property="og:site_name" content="YourSiteName" />
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:site" content="@site" />
          <meta name="twitter:creator" content="@handle" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Adicione o conteúdo abaixo ao seu arquivo index.js:

const DemoPage = () => (
  <>
    <p>Demo Page</p>
  </>
);
 
export default DemoPage;

Este código importa o componente Document de next/document e cria um componente MyDocument personalizado. Ele especifica o título, a descrição e a imagem da nossa página, bem como o nome do site e o identificador do Twitter.

Execute o seguinte comando para iniciar o servidor de desenvolvimento:

npm run dev

Abra http://localhost:3000 no seu navegador para ver a página de demonstração.

Melhore a classificação do site com tags OG

Adicionar tags Open Graph ao seu site pode lhe dar mais controle sobre como ele aparece nas postagens de mídia social e pode ajudar a melhorar as taxas de cliques. Você também pode melhorar a forma como seu site aparece nas SERPs, o que pode levar a uma melhor classificação do site.

Existem também muitas outras maneiras de melhorar a classificação do site. Você deve otimizar seu site para dispositivos móveis e usar títulos e descrições ricos em palavras-chave. Mas usar tags Open Graph é uma maneira rápida e fácil de começar.

Artigos relacionados: