---
title: "OG.cool – Display headlines in OG images"
description: "A Next.js app that displays headlines directly inside a dynamically generated image. Powered by @vercel/og."
url: "https://vercel.com/templates/next.js/og-cool"
links:
  repository: "https://github.com/steven-tey/og"
  demo: "https://github.com/steven-tey/og"
  deploy: "https://vercel.com/new/clone?demo-title=OG.cool+%E2%80%93+Display+headlines+in+OG+images&demo-description=A+Next.js+app+that+displays+headlines+directly+inside+a+dynamically+generated+image.+Powered+by+%40vercel%2Fog.&demo-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fog&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3Zu4zlJukH0K3cvDiMRuDM%2F333edd10b7b9799658f499bea31678f7%2Fwired&project-name=OG.cool+%E2%80%93+Display+headlines+in+OG+images&repository-name=og-cool&repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fog&from=templates&skippable-integrations=1"
---

# OG.cool – Display headlines in OG images

A Next.js app that displays headlines directly inside a dynamically generated image. Powered by @vercel/og.

## Introduction

**OG.cool** is a demo that shows you how you can display headlines directly inside your news article's OG image. Powered by [`@vercel/og`](https://vercel.com/docs/functions/edge-functions/og-image-generation).

Read the guide to learn more about how you can implement your own version: https://vercel.com/guides/displaying-article-headlines-in-social-previews

## How it works

To try out **OG.cool**, all you need to do is replace the `https://` (or `https://www.`) portion of the news article's URL with `https://og.cool/`.

Example:

- Original URL: https://www.nytimes.com/2023/08/23/climate/ocean-warming-fish.html
- **OG.cool** URL: https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html

The **OG.cool** URL will still redirect to the destination URL when a user clicks on it, but for bots like `TwitterBot` or `SlackBot`, they'll be shown an OG image with a nice headline in it (refer [Examples](#examples) section).

**OG.cool** currently supports the following publications:

- New York Times
- Wired
- Techcrunch

## Examples

### New York Times

![image](https://github.com/steven-tey/og/assets/28986134/fd79bf14-cab1-4989-a5bb-74146fa43485)

Try it for yourself: https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html ([OG image preview](https://dub.co/tools/metatags?url=https%3A%2F%2Fog.cool%2Fnytimes.com%2F2023%2F08%2F23%2Fclimate%2Focean-warming-fish.html))

### Wired

![image](https://github.com/steven-tey/og/assets/28986134/7de03193-05e0-4ee1-bb3a-45c12ed70cf7)

Try it for yourself: https://og.cool/wired.com/story/adhd-adderall-video-games-endeavorrx/ ([OG image preview](https://dub.co/tools/metatags?url=https%3A%2F%2Fog.cool%2Fwired.com%2Fstory%2Fadhd-adderall-video-games-endeavorrx%2F))

## Related Templates

### [Cron OG Cards](https://vercel.com/templates/next.js/cron-og)

A template for scheduled updates to your OG social cards using Vercel Cron Jobs and Upstash Redis.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.