Como customizar o preview de links em redes sociais no Next.js
Tags: braziliandevs, webdev, nextjs, tutorial
Published: 2024-03-20 19:36:19

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](https://ogp.me/), 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:

```html
<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:

```typescript
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;
}
```

E é isso, só com essas tags você já consegue deixar seus previews com uma cara bem legal.

### Links úteis

Abaixo eu deixo alguns links que podem ser úteis caso você queira fazer algo mais detalhado/específico. 

[Documentação do Open Graph Protocol](https://ogp.me/)

[Documentação do NextJS sobre utilização do Open Graph Protocol](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph)

[Ferramenta de _preview_ de apresentação de links no Facebook e Twitter](https://robolly.com/open-graph-preview/)

[Mais informações sobre as tags usadas pelo twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)