Vercel OG with metadata api whatsapp previews

[elfin plank]

Hi @waxen inlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some information on how to use the Next.js metadata API and Vercel OG for image generation.

To use the Next.js metadata API, you can follow this example:

export const metadata = {
  openGraph: {
    title: 'Next.js',
    url: 'https://nextjs.org',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
    ],
  },
  robots: {
    index: true,
  }
}

Source: Next.js Beta Documentation (https://beta.nextjs.org/docs/api-reference/file-conventions/head)

For Vercel OG image generation, you can create an API endpoint with the following code:

import { ImageResponse } from '@vercel/og';
 
export const config = {
 runtime: 'edge',
};
 
export default function () {
 return new ImageResponse(
 (
 <div
 style={{
 fontSize: 128,
 background: 'white',
 width: '100%',
 height: '100%',
 display: 'flex',
 textAlign: 'center',
 alignItems: 'center',
 justifyContent: 'center',
 }}
 >
 Hello world!
 </div>
 ),
 {
 width: 1200,
 height: 600,
 },
 );
}

Source: Vercel Documentation (https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)

For more information on Vercel OG image generation, you can refer to the Vercel Documentation (https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation).

As for the issue with WhatsApp, I don't have enough information from the provided extracts to help you troubleshoot the problem.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@waxen inlet kapa.ai is still learning and improving, please let us how it did by reacting below

[waxen inlet]

What could be reasons why this appears to work fine on all other platforms except whatsapp? <@&1089670008898080870>

@elfin plank

[elfin plank]

Let me check the knowledge base for you. One moment! :books: