Introdução

Enquanto desenvolvia meu portfólio comecei a pensar na questão de SEO, mas precisamente nas og-images, como minha intenção era ter imagens dinâmicas para os posts teria que gerar as imagens na aplicação, para não ter o trabalho de gerar uma imagem nova para cada post novo.

Benefícios

• SEO
• Engajamento
• Presença online

Aplicando na prática

Ok, o SEO é uma parte importante no desenvolvimento web mas como podemos fazer isso na prática??

Com uma simples pesquisa podemos achar a documentação do nextjs onde está tudo explicadinho (Aqui vou mostrar na versão 13.4 pode haver mudanças).

Olhando a documentação, a vercel pede para criar um arquivo opengraph-image.tsx || jsx.

A estrutura de pasta ficaria assim:

├── app
│   │
│   ├── blog
│   │   ├── opengraph-image.tsx
│   │   ├── page.tsx
│   │   └── [slug]
│   │       ├── opengraph-image.tsx
│   │       └── page.tsx 
│   ├── layout.tsx
│   ├── opengraph-image.tsx
│   └── page.tsx

Após isso a documentação recomenda usar o componente ImageResponse do next/server oque já facilita bastante para gerar as imagens dinamicamente.

Porem, minha ideia era gerar imagens para varias páginas usando a mesma estrutura, então teria que aplicar o conceito de inversão de dependência, assim essa função poderia ser usada por várias páginas.

// app/api/og-page/route.tsx

import { ImageResponse } from '@vercel/og';
import { PageOgImage } from '@/components/meta/og-images';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const get = (param: string): string => searchParams.get(param) || '';
  try {
    const title = get('title');
    const description = get('description');
    return new ImageResponse(
      <PageOgImage
        title={title}
        description={description}
      />
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e) {
      return new Response(`Failed to generate the image`, {
        status: 500,
      });
  }
};

Esse código recebe uma request com o titulo e descrição e cria uma imagem de 1200x630 usando um component do react.

Com essa parte do código feita falta somente fazer um request nessa função e retornar na função Image(); então vamos lá:

// app/opengraph-image.tsx

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';

export default async function Image() {
  return await fetch(`${process.env.URL}/api/og-page?title=Titulo&description=descrição.`,
    {
      method: 'GET'
    }
  );
};

É recomendável exportar uma constando contendo a extensão e o tamanho da imagem.

Conclusão

O SEO é um tema que vale dar uma atenção enquanto está desenvolvendo uma aplicação web. E com certeza as og-images fazem bastante diferença pois quando você faz uma publicação em uma rede social ou envia em um aplicativo de mensagens induz as pessoas a clicarem no link.