Como customizar o preview de links em redes sociais no Next.js

#braziliandevs #webdev #nextjs #tutorial

Se você já compartilhou um link no WhatsApp ou alguma rede social como Facebook ou LinkedIn, você deve ter notado que um preview da página em questão quase sempre aparece. Nesse artigo vamos ver como você pode customizar as informações que aparecem nesses previews.

Tudo se resume a metadados

Varia um pouco de rede social para rede social, mas todas as informações que compõem essas prévias, desde o texto até a imagem de destaque, são obtidas a partir de tags <meta> definidas nas páginas.

Facebook, WhatsApp e outras redes sociais usam meta tags conforme definidas pelo Open Graph Protocol, enquanto o Twitter usa algumas tags próprias além das definidas por essa convenção.

Há algumas tags específicas/exclusivas para páginas referentes a tipos de mídia específicos, como vídeos ou músicas, porém nesse tutorial iremos focar em uma página web genérica.

Aplicando em qualquer lugar

Independente de framework ou plataforma, há 4 tags que são obrigatórias para todos os casos, independente do tipo de mídia:

og:title: O título que você quer dar a sua página, vamos considerar para o exemplo desse artigo o valor "Minha página"
og:type: O tipo de mídia da sua página, aqui vamos utilizar o tipo "website", mas também existem os tipos "article", "blog", "music.song" e muitos outros.
og:image: Uma imagem para representar a sua página
og:url: A URL para a sua página

Para aplicar essas propriedades em um arquivo html comum, as tags <head></head> deveriam ter um conteúdo nesse formato:

<meta name="og:title" content="Minha página" />
<meta name="og:type" content="website" />
<meta name="og:image" content="https://cdn.pixabay.com/photo/2023/03/20/20/35/sunset-7865844_1280.jpg" />
<meta name="og:url" content="https://seu-site.com" />

Além dessas tags obrigatórias, é interessante também aplicar as seguintes:

og:image:width: A largura da imagem usada na meta tag og:image
og:image:height: A altura da imagem usada na meta tag og:image
og:description: Uma breve descrição da sua página

Para o twitter as tags usadas são as seguintes:

twitter:card: Define o tamanho do card a ser usado na pré-visualização do link. Aqui vamos usar o valor summary_large_image, mas ele também suporta os valores summary, app e player
twitter:author: Nome de usuário do autor do conteúdo da página
twitter:description: Basicamente o mesmo que og:description
twitter:image: Basicamente o mesmo que og:image
twitter:title: Basicamente o mesmo que og:title

Aplicando com o NextJS

No NextJS, ao invés de declarar essas meta tags diretamente no arquivo html, usamos o objeto metadata, ou a função generateMetadata, para definir as tags.

A seguir está um exemplo usando a função generateMetadata para carregar dados a partir de uma consulta ao banco de dados:

export async function generateMetadata({ params }) {
  const project = await database.getProject(params.id);

  const basicMetadata = {
    title: 'Projeto - Minha página',
    description: 'Conheça mais do meu projeto',
  }

  if (project) {
    const title = project.name;
    const description = project.description;

    return {
      title,
      description,
      metadataBase: new URL('https://seu-site.com/' + project.id),
      twitter: {
        card: 'summary_large_image',
        creator: '@seuUsuarioNoTwitter',
        title,
        description,
        images: [project.image],
      },
      openGraph: {
        title,
        description,
        siteName: 'Minha página',
        type: 'website',
        images: [
          {
            url: project.image,
            width: 1280,
            height: 720,
          },
        ],
      },
    };
  }
  return basicMetadata;
}