#Nextjs Metada twitter image and og image

1 messages · Page 1 of 1 (latest)

wooden osprey
#

hii , I want to know how and what are are the best practices to implement OG image in app router , im currently just pasting the image in app folder , also twitter image is not configured , how do i do that

tawdry condorBOT
#

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

#

In Next.js, you can set Open Graph and Twitter images for a route segment using the opengraph-image and twitter-image file conventions. These images are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site. There are two ways to set these images:

  1. Using image files (.jpg, .png, .gif)
  2. Using code to generate images (.js, .ts, .tsx)

You can place an opengraph-image.png or twitter-image.png in the /app directory and the meta tags og:image/twitter:image and derivatives are added as expected. If you create a page in a sub-directory and export metadata containing openGraph and/or twitter, you get only what was defined in the metadata export. However, if you add the png in the same folder, it works as expected again.

Here's an example of how you might set the metadata:

export const metadata: Metadata = {
    // ...
    openGraph: {},
    twitter:{}
}

If you want to generate an image from static text using Next.js, you can create an API endpoint by adding route.tsx under the app/api/og directory in the root of your project. Then paste the following code:

import { ImageResponse } from 'next/og';
 
export const runtime = 'edge';
 
export async function GET() {
 return new ImageResponse(
 (
 <div
 style={{
 fontSize: 40,
 color: 'black',
 background: 'white',
 width: '100%',
 height: '100%',
 padding: '50px 200px',
 textAlign: 'center',
 justifyContent: 'center',
 alignItems: 'center',
 }}
 >
 👋 Hello
 </div>
 ),
 {
 width: 1200,
 height: 630,
 },
 );
}

Then, you can run your app with pnpm dev and browse to <http://localhost:3000/api/og> to see the generated image.

#

To use the generated image as an Open Graph image, you can add a <meta> tag inside the <head> of the webpage with the property attribute set to og:image and the content attribute set to the absolute path of the /api/og endpoint.

Here's an example:

<head>
 <title>Hello world</title>
 <meta
 property="og:image"
 content="<https://og-examples.vercel.sh/api/static">
 />
</head>

Sources:

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

#

@wooden osprey kapa.ai is still learning and improving, please let us know how it did by reacting below

wooden osprey
#

perfect , continue directing me about the manifest.webmanifest file in reguards to opengraph image , twitter image , name , type , description

#

kapa?

#

@tawdry condor

tawdry condorBOT
#

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