OG Image content, including the headline, is crucial for clickthrough rates—Vercel's image generation library can help you get around this new limitation by displaying headlines directly inside your article's Open Graph images.
In this guide, we will take a look at how you can build an OG image proxying service that can display the title of an article directly inside the OG image for your news publication.
For your convenience, we've created a template that you can clone and develop locally. Run the following command in your terminal to clone the repository:
Once that's done, navigate to the directory, install the dependencies, and run the app:
Next, you'll need to import the custom font that your publication uses in your news article headings. In this example, we will be using the Cheltenham Font (italic), which is the font used by the New York Times.
Once you find it, download it as .ttf or .otf format and save it in the /styles directory:
Create an API route in pages/api/og/index.tsx and paste the following code:
Here's a quick breakdown of what's happening in the API route above:
- Load the custom font we downloaded in Step 2 and feed it as a prop into the API route handler.
- Retrieve the meta tags (title, description) for the article from your database. Alternatively, you can also feed the values as URL query parameters as well. In this example, we are hard-coding the values for a given article.
- Render the headline inside the OG image using the
ImageResponseconstructor from the @vercel/og library.
You now have an API endpoint (/api/og) that generates styled dynamic OG image with headlines directly inside them.
Vercel's OG image library is a powerful tool for you to display dynamic OG images for your app on social media.
Learn more about the applications you can build with the Vercel OG Image library by checking out the docs.