A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation below:

Open Graph (OG) Image Generation

To assist with generating dynamic Open Graph (OG) images, you can use the Vercel @vercel/og library to compute and generate social card images using Vercel Functions.

Vercel OG image generation is supported on the Node.js runtime.

Local resources can be loaded directly using fs.readFile. Alternatively, fetch can be used to load remote resources.

const fs = require('fs').promises;
 
const loadLocalImage = async () => {
  const imageData = await fs.readFile('/path/to/image.png');
  // Process image data
};

There are limitations when using vercel/og with the Next.js Pages Router and the Node.js runtime. Specifically, this combination does not support the return new Response(…) syntax. The table below provides a breakdown of the supported syntaxes for different configurations.

Configuration Supported Syntax Notes pages/ + Edge runtime return new Response(…) Fully supported. app/ + Node.js runtime return new Response(…) Fully supported. app/ + Edge runtime return new Response(…) Fully supported. pages/ + Node.js runtime Not supported Does not support return new Response(…) syntax with vercel/og.

Get started with an example that generates an image from static text using Next.js by setting up a new app with the following command:

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';
// 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
      </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

Run the following command:

Then, browse to http://localhost:3000/api/og. You will see the following image:

Deploy your project to obtain a publicly accessible path to the OG image API endpoint. You can find an example deployment at https://og-examples.vercel.sh/api/static.

Then, based on the Open Graph Protocol, create the web content for your social media post as follows:

With the example deployment at https://og-examples.vercel.sh/api/static, use the following code:

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

Every time you create a new social media post, you need to update the API endpoint with the new content. However, if you identify which parts of your ImageResponse will change for each post, you can then pass those values as parameters of the endpoint so that you can use the same endpoint for all your posts.

In the examples below, we explore using parameters and including other types of content with ImageResponse.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4