← Back to Guides Using languages in your OG image Learn how to use other languages in the text of your OG image. Last updated on August 2, 2024
Og Image Generation You can use the following code sample to explore using parameters and different content types with next/og . To learn more about Og Image Generation, see Open Graph Image Generation .
In this example, your post image uses different languages. Create an api route with route.tsx in /app/api/og/ and paste the following code:
app/api/og/route.tsx TypeScript TypeScript JavaScript import { ImageResponse } from 'next/og';
// App router includes @epycbyte/og. No need to install it. 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 你好 नमस्ते こんにちは स्वัสดीक่ะ अन्नियन dobрий день Hallá ), { width: 1200, height: 630 } ); }
If you're not using a framework, you must either add "type": "module" to your package.json or change your JavaScript Functions' file extensions from .js to .mjs
Preview the OG route locally by running the following command: pnpm yarn npm pnpm dev
Then, browse to http://localhost:3000/api/og. You will see the following image: Image generated using other languages.
Please note that right-to-left languages are not currently supported.
Related
- Consume the OG route Learn how use the API route with your social media post
- Getting started with OG image Learn all the steps involved with publishing your OG image
Was this helpful?