Você já quis que seu site Next.js aparecesse como um objeto rico quando compartilhado nas mídias 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.
Por fim, 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. Estes incluem 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 facilita o rastreamento de 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 de mídia social, SEO e tráfego do site.
O Open Graph pode ajudar a melhorar o engajamento nas mídias sociais, 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 visualmente mais atraente e fácil de ler. Isso, por sua vez, pode levar a mais compartilhamentos e curtidas, além de aumentar as taxas de cliques.
2. Melhore o SEO
O Open Graph também pode ajudar melhore 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 ajudar na 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 levar a mais visitantes de retorno.
Por que usar Next.js?
Há duas razões principais para usar o Next.js: melhorar o desempenho e facilitar o desenvolvimento.
1. Melhorar o desempenho
O 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 à redução da carga do servidor.
2. Facilite o desenvolvimento
O Next.js também pode facilitar o desenvolvimento ao fornecer uma maneira simples de criar aplicativos React renderizados pelo servidor. Isso pode tornar mais rápido e fácil desenvolver e implantar aplicativos React.
Como implementar o protocolo Open Graph no Next.js
Há duas maneiras de implementar o Open Graph Protocol no Next.js: usando o pacote next-seo ou criando um _document.js Arquivo.
Método 1: usando o pacote next-seo
A maneira mais fácil de implementar o Open Graph Protocol no 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 instalarpróximo-seo --Salve Depois de instalar o pacote, você pode usá-lo adicionando o seguinte código ao seu index.js Arquivo:
importar { PróximoSeo } a partir de 'próximo-seo';const Página Demo = () => (
<>
<PróximoSeo
título="Seu título"
descrição="Esta é uma descrição de demonstração"
canônico="https://www.example.com"
openGraph={{
URL: 'https://www.example.com',
título: 'Título do gráfico aberto',
Descrição: 'Abrir Descrição do Gráfico',
imagens: [
{
URL: 'https://www.example.com/og-image01.jpg',
largura: 800,
altura: 600,
alt: 'Og Imagem Alt',
modelo: 'imagem/jpeg',
},
{
URL: 'https://www.example.com/og-image02.jpg',
largura: 900,
altura: 800,
alt: 'Og Image Alt Second',
modelo: 'imagem/jpeg',
},
{ URL: 'https://www.example.com/og-image03.jpg' },
{ URL: 'https://www.example.com/og-image04.jpg' },
],
nome do site: 'SeuSiteName',
}}
twitter={{
lidar com: '@lidar com',
site: '@local',
tipo de carta: 'Summary_large_image',
}}
/>
<p>Página de demonstração</p>
</>
);
exportarpredefinição Página Demo;
Esse código importa o componente NextSeo do pacote next-seo e o usa 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 executar devAbrir http://localhost: 3000 em 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 no Next.js é criar um _document.js Arquivo. Este arquivo permitirá que você especifique as tags Open Graph e criar código reutilizável para todas as páginas.
Para configurar um personalizado _document.js arquivo, crie um novo arquivo em seu Páginas diretório com o seguinte conteúdo:
importar Documento, { Html, Cabeçalho, Principal, PróximoScript } a partir de 'próximo/documento';classeMeu documentoestendeDocumento{
estáticoassíncrono getInitialProps (ctx) {
const inicialProps = aguardam Document.getInitialProps (ctx);
Retorna { ...initialProps };
}render(){
Retorna (
<HTML>
<Cabeça>
<propriedade meta="og: url" conteúdo="https://www.example.com" />
<propriedade meta="og: título" conteúdo="Título do gráfico aberto" />
<propriedade meta="og: descrição" conteúdo="Abrir Descrição do Gráfico" />
<propriedade meta="og: imagem" conteúdo="https://www.example.com/og-image.jpg" />
<propriedade meta="og: site_name" conteúdo="SeuSiteName" />
<metanome="twitter: cartão" conteúdo="Summary_large_image" />
<metanome="twitter: site" conteúdo="@local" />
<metanome="twitter: criador" conteúdo="@lidar com" />
</Head>
<corpo>
<Principal />
<PróximoScript />
</body>
</Html>
);
}
}
exportarpredefinição Meu documento;
Adicione o conteúdo abaixo ao seu arquivo index.js:
const Página Demo = () => (
<>
<p>Página de demonstração</p>
</>
);
exportarpredefinição Página Demo;
Este código importa o componente Document do próximo/documento e cria um Meu documento componente. 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 executar devAbrir http://localhost: 3000 em seu navegador para ver a página de demonstração.
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 maneira como seu site aparece nas SERPs, o que pode levar a uma melhor classificação do site.
Há 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 as tags Open Graph é uma maneira rápida e fácil de começar.