Creating OpenGraph Images Programmatically with DrawByURL

OpenGraph images are crucial for social media sharing and SEO. They appear when your content is shared on platforms like Twitter, Facebook, and LinkedIn. This guide shows you how to generate them programmatically with DrawByURL.

Why OpenGraph Images Matter

OpenGraph images:

- Increase click-through rates on social media

- Improve brand recognition

- Make your content more shareable

- Enhance SEO performance

Standard OpenGraph Dimensions

The recommended size for OpenGraph images is **1200×630 pixels**. This aspect ratio (1.91:1) works well across all major platforms.

Basic OpenGraph Image

Here's a simple OpenGraph image:

/background-gradient-sunset/text-value-My-Blog-Post-color-white-x-600-y-315-size-64?width=1200&height=630

Dynamic OpenGraph Images

You can create dynamic OpenGraph images by generating URLs based on your content:

function generateOGImage(title, author) {

const titleSlug = title.replace(/\s+/g, '-');

return `/background-gradient-sunset/text-value-${titleSlug}-color-white-x-600-y-315-size-64/text-value-By-${author}-color-white-x-600-y-400-size-32?width=1200&height=630`;

}

Blog Post OpenGraph Images

For blog posts, include the title and optionally the author:

/background-color-navy/text-value-How-to-Create-Images-color-white-x-600-y-250-size-72-weight-bold/text-value-A-Complete-Guide-color-white-x-600-y-350-size-48/text-value-By-John-Doe-color-gray-x-600-y-500-size-28?width=1200&height=630

Product OpenGraph Images

For products or services:

/background-color-white/circle-color-blue-size-200-x-300-y-315/text-value-Product-Name-color-black-x-700-y-250-size-56-weight-bold/text-value-Starting-at-99-color-blue-x-700-y-350-size-36?width=1200&height=630

Using OpenGraph Images in HTML

Add OpenGraph meta tags to your HTML:

Next.js Integration

In Next.js, you can use the Metadata API:

export const metadata: Metadata = {

openGraph: {

images: [

{

url: `https://drawbyurl.com/background-gradient-sunset/text-value-${title}-color-white-x-600-y-315-size-64?width=1200&height=630`,

width: 1200,

height: 630,

alt: title,

};

Dynamic Generation in Next.js

For dynamic routes, generate OpenGraph images based on the page content:

export async function generateMetadata({ params }): Promise<Metadata> {

const post = await getPost(params.slug);

const ogImageUrl = `https://drawbyurl.com/background-gradient-sunset/text-value-${post.title.replace(/\s+/g, '-')}-color-white-x-600-y-315-size-64?width=1200&height=630`;

return {

openGraph: {

images: [ogImageUrl],

};

}

Best Practices

1. **Always use 1200×630** - This is the standard size

2. **Include text** - Make sure your title is readable

3. **Use high contrast** - Ensure text is visible against the background

4. **Keep it simple** - Complex designs may not render well at small sizes

5. **Test on platforms** - Preview how your image looks on different social platforms

Advanced Examples

With Logo

/background-color-white/circle-color-blue-size-150-x-200-y-315/text-value-Company-Name-color-black-x-600-y-315-size-64?width=1200&height=630

Category-Based Colors

const categoryColors = {

tech: 'blue',

design: 'purple',

business: 'green',

};

const ogImage = `/background-color-${categoryColors[category]}/text-value-${title}-color-white-x-600-y-315-size-64?width=1200&height=630`;

Conclusion

Creating OpenGraph images programmatically with DrawByURL is simple and powerful. You can generate unique images for every piece of content automatically, improving your social media presence and SEO.

For more examples, check out our [gallery](/gallery) or [use cases](/use-cases).