Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

OG.cool – Display headlines in OG images

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

DeployView Demo
And here's a Wired-inspired example

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:

  • 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 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)

GitHub
Ownersteven-tey
Repositoryog
Use Cases
Starter
Stack
Next.js
Tailwind

Related Templates

Cron OG Cards

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

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • eveNew
  • ConnectNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Agent Skills
  • Next.js
  • Domains
  • v0

Frameworks

  • eveNew
  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: