Using languages in your OG image
Learn how to use other languages in the text of your OG image.Table of Contents
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
import { ImageResponse } from 'next/og';
// App router includes @vercel/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 你好 नमस्ते こんにちは สวัสดีค่ะ 안녕 добрий день Hallá
</div>
),
{
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 dev
Then, browse to http://localhost:3000/api/og
. You will see the following image:
Please note that right to left languages are not currently supported.
Last updated on May 4, 2024
Was this helpful?