Other Frameworks

OpenGraph.xyz works with any backend framework or language. The key requirement is that the og:image meta tag must be included in the initial HTML response from your server, since most social media crawlers and messaging apps do not execute JavaScript.

URL Structure

The dynamic image URL follows this pattern:

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

• templateId – your unique template identifier (found in the dashboard)
• version – the published version number, prefixed with v (e.g. v3)
• variables – URL-encoded values for each template variable, in order

Here is an example image generated with this URL structure:

The examples below assume a template with two variables: a title (text) and an image URL (image source). Replace the template ID and version number with the actual values from your dashboard.

Node.js

// Template details (find these in your dashboard)
const templateId = '4baf7dd9-4a11-4e55-9837-649e705f44ef'
const version = 3

// Encode your variables
const title = encodeURIComponent('My Awesome Product')
const imageUrl = encodeURIComponent(
  'https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770',
)

// Construct the OG image URL
const ogImageUrl = `https://ogcdn.net/${templateId}/v${version}/${title}/${imageUrl}/og.png`

In your HTML template (e.g. EJS, Handlebars):

<meta property="og:image" content="<%= ogImageUrl %>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="<%= ogImageUrl %>" />

PHP

<?php
// Template details (find these in your dashboard)
$templateId = '4baf7dd9-4a11-4e55-9837-649e705f44ef';
$version = 3;

// Encode your variables
$title = urlencode('My Awesome Product');
$imageUrl = urlencode(
    'https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770'
);

// Construct the OG image URL
$ogImageUrl = "https://ogcdn.net/{$templateId}/v{$version}/{$title}/{$imageUrl}/og.png";
?>

In your HTML:

<meta property="og:image" content="<?php echo $ogImageUrl; ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="<?php echo $ogImageUrl; ?>" />

Python

Works with Django, Flask, FastAPI, or any Python web framework:

import urllib.parse

# Template details (find these in your dashboard)
template_id = "4baf7dd9-4a11-4e55-9837-649e705f44ef"
version = 3

# Encode your variables
title = urllib.parse.quote("My Awesome Product")
image_url = urllib.parse.quote(
    "https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770"
)

# Construct the OG image URL
og_image_url = f"https://ogcdn.net/{template_id}/v{version}/{title}/{image_url}/og.png"

In your template (e.g. Jinja2):

<meta property="og:image" content="{{ og_image_url }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ og_image_url }}" />

Go

package main

import (
	"fmt"
	"net/url"
)

func ogImageURL(templateID string, version int, title string, imageURL string) string {
	return fmt.Sprintf(
		"https://ogcdn.net/%s/v%d/%s/%s/og.png",
		templateID,
		version,
		url.QueryEscape(title),
		url.QueryEscape(imageURL),
	)
}

func main() {
	ogURL := ogImageURL(
		"4baf7dd9-4a11-4e55-9837-649e705f44ef",
		3,
		"My Awesome Product",
		"https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770",
	)
	fmt.Println(ogURL)
}

In your Go HTML template:

<meta property="og:image" content="{{ .OgImageUrl }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .OgImageUrl }}" />

Ruby

Works with Rails, Sinatra, or any Ruby web framework:

require 'uri'

# Template details (find these in your dashboard)
template_id = "4baf7dd9-4a11-4e55-9837-649e705f44ef"
version = 3

# Encode your variables
title = URI.encode_www_form_component("My Awesome Product")
image_url = URI.encode_www_form_component(
  "https://opengraph.b-cdn.net/production/images/56188dc2-e3c3-4ce5-a8b1-1323953e37b9.jpg?token=hOY-wLL-tV2Wb6eqlpzb3hUOqYMZbXQ3az2flBDqaSs&height=800&width=1200&expires=33251249770"
)

# Construct the OG image URL
og_image_url = "https://ogcdn.net/#{template_id}/v#{version}/#{title}/#{image_url}/og.png"

In your ERB template:

<meta property="og:image" content="<%= og_image_url %>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="<%= og_image_url %>" />