Skip to content
Avatar of steven-teysteven-tey/og

OG.cool – Display headlines in OG images

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

Framework
Use Case
wired OG.cool

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.

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:

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 section).

OG.cool currently supports the following publications:

  • New York Times
  • Wired
  • Techcrunch

Examples

New York Times

Try it for yourself: https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html (OG image preview)

Wired

Try it for yourself: https://og.cool/wired.com/story/adhd-adderall-video-games-endeavorrx/ (OG image preview)

wired OG.cool
Avatar of steven-teysteven-tey/og

OG.cool – Display headlines in OG images

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

Framework
Use Case

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.

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:

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 section).

OG.cool currently supports the following publications:

  • New York Times
  • Wired
  • Techcrunch

Examples

New York Times

Try it for yourself: https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html (OG image preview)

Wired

Try it for yourself: https://og.cool/wired.com/story/adhd-adderall-video-games-endeavorrx/ (OG image preview)

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential