Você já quis que seu site Next.js aparecesse uma vez que um objeto rico quando compartilhado nas mídias sociais? Nesse caso, você precisa implementar o protocolo Open Graph.
O pacote next-seo facilita a soma 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 termo, você deve considerar exatamente quais informações incluir em suas tags.
O que é gráfico franco?
O protocolo Open Graph é um padrão franco que permite aos desenvolvedores controlar uma vez que as mídias sociais exibem seu texto. Foi originalmente desenvolvido pelo Facebook, mas muitas outras plataformas adotaram o protocolo desde portanto. Estes incluem Twitter, LinkedIn e Pinterest.
O Open Graph permite especificar exatamente uma vez que outros sites devem exibir seu texto, garantindo que ele tenha uma boa fisionomia e seja fácil de ler. Também permite maior controle sobre uma vez que 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áfico do site.
1. Melhore o engajamento nas mídias sociais
O Open Graph pode ajudar a melhorar o engajamento nas mídias sociais, tornando mais fácil para os usuários compartilharem seu texto. Ao especificar uma vez que os sites devem exibir seu texto, você pode torná-lo visualmente mais simpático 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 a melhorar seu SEO. Ao especificar o título, a descrição e a imagem de cada texto, você pode controlar uma vez que ele aparece nos resultados da pesquisa. Isso pode ajudar a aumentar a taxa de cliques do seu site, muito uma vez que melhorar sua classificação universal.
3. Aumente o tráfico do site
Finalmente, o Open Graph pode ajudar a aumentar o tráfico do site. Ao tornar mais fácil para os usuários compartilharem seu texto, 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áfico.
4. Melhore a experiência do usuário
Outro obséquio 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 universal 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. Melhore 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 trouxa do servidor.
2. Facilite o desenvolvimento
O Next.js também pode facilitar o desenvolvimento fornecendo uma maneira simples de gerar aplicativos React renderizados pelo servidor. Isso pode tornar mais rápido e fácil desenvolver e implantar aplicativos React.
Porquê 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 Registro.
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. Nascente pacote irá gerar involuntariamente as tags necessárias para você.
Para instalar o pacote next-seo, execute o seguinte comando:
npm install next-seo Depois de instalar o pacote, você pode usá-lo adicionando o seguinte código ao seu índice.js Registro:
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;
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 run devAbra http://localhost:3000 em seu navegador para ver a página de prova.
Método 2: usando o registo _document.js personalizado
Outra maneira de implementar o Open Graph Protocol no Next.js é gerar um _document.js Registro. Nascente registo permitirá que você especifique as tags Open Graph e crie código reutilizável para todas as páginas.
Para configurar um personalizado _document.js registo, crie um novo registo em seu Páginas diretório com o seguinte texto:
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 texto aquém ao seu registo índice.js:
const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);export default DemoPage;
Nascente 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, muito uma vez que o nome do site e o identificador do Twitter.
Execute o seguinte comando para iniciar o servidor de desenvolvimento:
npm run devAbra http://localhost:3000 em seu navegador para ver a página de prova.
Somar tags Open Graph ao seu site pode lhe dar mais controle sobre uma vez que ele aparece nas postagens de mídia social e pode ajudar a melhorar as taxas de cliques. Você também pode melhorar a maneira uma vez que 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 encetar.
