Auto-generated Open Graph images in SanityPress

SanityPress v6.1.1 introduces an exciting new feature: automatic generation of Open Graph (OG) images powered by Vercel's next/og package. This addition makes it even easier to create engaging social media previews for your content.

Open Graph images play a crucial role in how your content appears when shared across social media platforms. These preview images can significantly impact click-through rates and overall engagement, making them an essential element of modern web content.

How It Works¶

The new OG image generation in SanityPress automatically creates social preview images based on your page's SEO meta title (metadata.title). This process happens seamlessly in the background, requiring no additional work from content creators.

The feature leverages the power of next/og, which provides a robust foundation for generating dynamic images. The implementation is clean and efficient, with the core functionality residing in the /app/api/og/route.tsx file.

Customization Options¶

While SanityPress provides an excellent default template for OG images, developers can easily customize the design to match their brand identity. The customization is handled through the OG route file, where you can modify:

• Typography and fonts
• Layout and composition
• Color schemes
• Background elements

For the best results, we recommend using native CSS properties rather than Tailwind CSS, as the latter is still in beta for OG image generation.

Development and Testing¶

During development, you can preview your OG images locally and with the title URL parameter at:

localhost:3000/api/og?title=Your%20Title%20Here

• The URL at the bottom is retrieved from the NEXT_PUBLIC_BASE_URL environment variable.
• The icon to the left (🖤) is powered by my other project: ic0n.dev

For more basic testing, the Vercel OG Playground provides an excellent environment to experiment with different designs and configurations.

Technical Implementation¶

The implementation follows Vercel's recommended practices for OG image generation, ensuring optimal performance and compatibility. The feature is built on top of Satori, Vercel's HTML/CSS to SVG converter, which powers the image generation process.

Developers can access the full range of customization options through the official documentation, allowing for precise control over the generated images.

Getting Started¶

To start using the OG image generation feature, simply ensure you're running SanityPress v6.1.1 or later. The system will automatically generate preview images based on your content's metadata title.

For developers looking to customize the implementation, the source code is available on GitHub, and comprehensive documentation is provided through the Vercel OG Image Generation docs.