Implementasi Dynamic Open Graph Image Generation untuk Meningkatkan Social CTR

Ketika tautan website Anda dibagikan di WhatsApp, LinkedIn, X (Twitter), atau Facebook, gambar pratinjau (OpenGraph Image) adalah hal pertama yang dilihat calon pengunjung. Gambar generik atau statis sering kali diabaikan.

Dengan paket `@vercel/og` berbasis Satori, Anda dapat membuat gambar OpenGraph dinamis menggunakan HTML & JSX yang dirender menjadi gambar PNG secara instan di Edge Network.

Kode Implementasi OG Image Dinamis di Next.js:

```typescript

// app/blog/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export const alt = 'Bali Top Studio Article OG';

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

export const contentType = 'image/png';

export default async function Image({ params }: { params: { slug: string } }) {

return new ImageResponse(

(

<div style={{

background: '#141210',

color: '#f8f6f2',

width: '100%',

height: '100%',

display: 'flex',

flexDirection: 'column',

justifyContent: 'center',

padding: '60px',

border: '4px solid #c9a96e',

}}>

<h1 style={{ fontSize: '52px', fontFamily: 'serif', color: '#c9a96e' }}>

BALI TOP STUDIO

</h1>

<p style={{ fontSize: '32px', color: '#f8f6f2' }}>

{params.slug.replace(/-/g, ' ')}

</p>

</div>

)

);

}

```

Tingkatkan konversi digital bisnis Anda bersama Jasa Pembuatan Website Surabaya.