AI Integration

You can provide your AI assistant (ChatGPT, GitHub Copilot, Claude, custom agents, etc.) with instructions to automatically generate dynamic Open Graph image URLs for your content.

How It Works

Give your AI two things:

1. General instructions explaining the URL format
2. Template-specific details with the variable names and order

The AI can then construct valid OG image URLs whenever you ask it to generate metadata, create pages, or write integration code.

Here is an example image generated with this approach:

General Instructions

Copy the following into your AI assistant's system prompt, custom instructions, or skill file:

OpenGraph.xyz – Dynamic OG Image URL Generation
=================================================

Generate dynamic Open Graph images by constructing a URL:

https://ogcdn.net/{templateId}/v{version}/{variable1}/{variable2}/.../og.png

Rules:
- All variable values must be URL-encoded (spaces become %20, etc.)
- To use the default value for a variable, use "_" as the value
- The version number increments each time the template is re-published
- The URL always ends with /og.png

URL Components:
- Base URL: https://ogcdn.net
- Template ID: unique identifier for the template
- Version: published version number, prefixed with "v" (e.g. v3)
- Variables: URL-encoded values, separated by "/", in the order defined by the template

Example:
https://ogcdn.net/4baf7dd9-4a11-4e55-9837-649e705f44ef/v3/My%20Awesome%20Product/https%3A%2F%2Fexample.com%2Fimage.jpg/og.png

Template-Specific Details

For each template, your AI needs to know the variable names and their order. Here's an example for a template with two variables — title and image URL:

Template: Product OG Image
Template ID: 4baf7dd9-4a11-4e55-9837-649e705f44ef
Version: 3

Variables (in order):
1. title
   Description: The product or page title
   Example value (raw): "My Awesome Product"
   Example value (encoded): "My%20Awesome%20Product"

2. imageUrl
   Description: URL of the hero/featured image
   Example value (raw): "https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770"
   Example value (encoded): "https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%2Fimages%2F..."

URL pattern:
https://ogcdn.net/4baf7dd9-4a11-4e55-9837-649e705f44ef/v3/{title}/{imageUrl}/og.png

Replace the template ID, version, and variables with your actual template details from the dashboard.

Example Prompts

Once your AI has the instructions, you can use prompts like:

• "Generate the OG image URL for a post titled 'Getting Started with Next.js' with this hero image: https://example.com/nextjs-hero.jpg"
• "Write a Next.js generateMetadata function that creates the OG image URL using our template"
• "Add og:image meta tags to this Astro layout using our template"

Tips

• Keep instructions up to date – When you publish a new version of your template, update the version number in your AI instructions.
• Use default values – Pass _ for any variable you want to keep at its template default. This is useful when not all variables are dynamic.
• Test the URL – Paste a generated URL directly in your browser to verify the image renders correctly.