Starter

OG.cool – Display headlines in OG images

Type: Code

Framework: Next.js

CSS: Tailwind

OG.cool Overview: A demonstration showcasing the integration of article headlines within the Open Graph (OG) image of a news article, utilizing the @vercel/og library.
Implementation Guide: A detailed guide on implementing this feature in your projects is available at Vercel’s Guide.
Usage:
- Simple Conversion: Convert any news article URL into an OG.cool URL by replacing the https:// (or https://www.) part with https://og.cool/.
- Example Conversion:
  - Original: https://www.nytimes.com/2023/08/23/climate/ocean-warming-fish.html
  - OG.cool: https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html
- Functionality: The modified URL redirects users to the original article while presenting bots with an OG image that includes the article’s headline.
Supported Publications: Currently, OG.cool works with New York Times, Wired, and TechCrunch.
Examples:
- New York Times: See an OG image preview by visiting https://og.cool/nytimes.com/2023/08/23/climate/ocean-warming-fish.html
- Wired: Preview an OG image by navigating to https://og.cool/wired.com/story/adhd-adderall-video-games-endeavorrx/