---
title: Displaying headlines in social previews with Vercel OG
description: Twitter/X is planning to remove headlines from social previews. To get around this limitation, Vercel OG offers a way to display article titles directly inside OG images.
url: /kb/guide/displaying-article-headlines-in-social-previews
canonical_url: "https://vercel.com/kb/guide/displaying-article-headlines-in-social-previews"
published: 2025-11-03
last_updated: 2025-11-10
authors: Steven Tey
related:
  - /blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images
  - /docs/functions/edge-functions/og-image-generation
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [OG Image Generation](https://vercel.com/docs/og-image-generation?from=related) — Learn how to optimize social media image generation through the Open Graph Protocol and @vercel/og library.
- [Examples](https://vercel.com/docs/og-image-generation/examples?from=related) — Learn how to use the @vercel/og library with examples.
- [Next.js](https://vercel.com/docs/frameworks/full-stack/nextjs?from=related) — Vercel is the native Next.js platform, designed to enhance the Next.js experience.
- [@vercel/og](https://vercel.com/docs/og-image-generation/og-image-api?from=related) — This reference provides information on how the @vercel/og package works on Vercel.
- [Inspect OG Metadata](https://vercel.com/docs/deployments/og-preview?from=related) — Learn how to inspect and validate your Open Graph metadata through the Open Graph deployment tab.
- [Using Tailwind CSS with your OG Image](https://vercel.com/kb/guide/using-tailwind?from=related) — Learn how to use Tailwind CSS to style your OG images.
- [Using dynamic text as your OG Image](https://vercel.com/kb/guide/dynamic-text-as-image?from=related) — Learn how to pass the image title as a URL parameter.
- [Using an SVG image in your OG image](https://vercel.com/kb/guide/using-svg-image?from=related) — Learn how to use SVG embedded content to generate your OG images.
- [Using a custom font in your OG Image](https://vercel.com/kb/guide/using-custom-font?from=related) — Learn how to use a custom font from the tile system in your OG images.
- [Using emoji in your OG image](https://vercel.com/kb/guide/using-emoji-in-image?from=related) — Learn how to use emojis to generate an OG image.

Full cross-link map for this page: [/kb/guide/displaying-article-headlines-in-social-previews.graph.md](/kb/guide/displaying-article-headlines-in-social-previews.graph.md)
<!-- /docsgraph:related -->


OG Image content, including the headline, is crucial for clickthrough rates—[Vercel's image generation library](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) 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.

## Step 1: Clone the Repository

For your convenience, we've created a [template](https://vercel.com/templates/next.js/og-cool) that you can clone and develop locally. Run the following command in your terminal to clone the repository:

```bash
git clone https://github.com/steven-tey/og
```

Once that's done, navigate to the directory, install the dependencies, and run the app:

```bash
pnpm i && pnpm dev
```

## Step 2: Download custom font

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](https://www.cufonfonts.com/font/itc-cheltenham-std) (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:

```bash
styles/
  cheltenham-italic-700.ttf (NYTimes' font)
```

## Step 3: Display headline in Dynamic OG Image

Create an API route in `pages/api/og/index.tsx` and paste the following code:

```tsx
import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

// Optional: replace cheltenham-italic-700.ttf with your custom font
const cheltenham = fetch(
  new URL("@/styles/cheltenham-italic-700.ttf", import.meta.url)
).then((res) => res.arrayBuffer());


export default async function handler(req: NextRequest) {
  const cheltenhamData = await cheltenham;

  const { searchParams } = new URL(req.url);
  const url = searchParams.get("url")

  // fetch the title & image from your database – we are hardcoding them here
  const { title, image } = {
      title: "Fall Marathoners: It’s Time to Up the Miles and Find Your Pace",
      image: "https://static01.nyt.com/images/2023/08/22/multimedia/21MARATHON-TRAINING-BUILDING1-blwc/21MARATHON-TRAINING-BUILDING1-blwc-facebookJumbo.jpg"
   }

  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "center",
          backgroundImage: `url(${image})`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          fontWeight: 600,
          color: "white",
        }}
      >
        <h1
          style={{
            position: "absolute",
            bottom: 60,
            left: 80,
            margin: 0,
            fontSize: 50,
            fontFamily: "NYT Cheltenham",
            maxWidth: 900,
            whiteSpace: "pre-wrap",
            letterSpacing: -1,
          }}
        >
          {title}
        </h1>
      </div>
    ),
    {
      width: 1050,
      height: 549,
      fonts: [
        {
          name: "NYT Cheltenham",
          data: cheltenhamData,
        },
      ],
    }
  );
}
```

Here's a quick breakdown of what's happening in the API route above:

1. Load the custom font we downloaded in Step 2 and feed it as a prop into the API route handler.
   
2. 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.
   
3. Render the headline inside the OG image using the `ImageResponse` constructor from the [@vercel/og](https://vercel.com/docs/functions/edge-functions/og-image-generation) library.
   

You now have an API endpoint (`/api/og`) that generates styled dynamic OG image with headlines directly inside them.

## Dynamic OG images for better link presence on social media

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](https://vercel.com/docs/functions/edge-functions/og-image-generation).