OG images from a link, no backend
Give every page its own social preview from one address: put the link into og:image and pass the page title in the query. Rendry draws the image on the first request and serves repeats from its cache.
Set it up once
Open the template
Sign up and open the blog post OG template (1200×630) in the editor. Set your site name, author and colours, then save.
Turn on the public link
Save the template, then in the menu above the canvas choose «Template» → «Template tools» → «Public render link» → «Enable public link». Copy the address.
Paste it here
Paste the address into the field below: the snippets for your platform use it at once.
What the link is made of
/u/…png is your saved template. The editor gives you the address, and you can replace it or switch it off there.
Query names are the template's variables; this template calls its headline title. Names it does not have are ignored, and a variable you leave out keeps the text saved in the template.
Snippets
HTML
Put the tags in each page's <head> and write that page's title into the address, encoded: a space as +, & as %26.
<meta property="og:image" content="https://rendry.io/u/YOUR_TOKEN.png?title=Your+page+title">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://rendry.io/u/YOUR_TOKEN.png?title=Your+page+title">Webflow
On a CMS collection template page: Page settings → Custom code → Inside <head> tag. Put the cursor after title= and insert the Name field with + Add Field. Remove the page's own Open Graph image so that it has one og:image. Custom code in page settings needs a paid site plan.
<!-- After title=, insert the Name field with "+ Add Field" -->
<meta property="og:image" content="https://rendry.io/u/YOUR_TOKEN.png?title=">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://rendry.io/u/YOUR_TOKEN.png?title=">Ghost
In your theme's default.hbs, right after {{ghost_head}}. {{encode title}} writes the post title encoded. When a post has a feature image, {{ghost_head}} prints Ghost's own og:image as well; keep one of the two.
{{!-- default.hbs, right after {{ghost_head}} --}}
{{#is "post"}}
<meta property="og:image" content="https://rendry.io/u/YOUR_TOKEN.png?title={{encode title}}">
<meta name="twitter:image" content="https://rendry.io/u/YOUR_TOKEN.png?title={{encode title}}">
{{/is}}WordPress
In a child theme's functions.php or a code snippets plugin. If an SEO plugin already prints og:image, turn its image off.
add_action('wp_head', function () {
if (!is_singular()) return;
$title = get_post_field('post_title', get_queried_object_id());
$image = 'https://rendry.io/u/YOUR_TOKEN.png?title=' . rawurlencode($title);
echo '<meta property="og:image" content="' . esc_url($image) . '">' . "\n";
echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
echo '<meta name="twitter:image" content="' . esc_url($image) . '">' . "\n";
}, 5);The platform steps are written from published guides; we have not run them on a live site of each platform. After publishing, open the page source: the og:image tag should hold your link with the title in it.
What it costs
A new title is a new image: 1 credit from your balance for an image of up to 2 megapixels, which covers the 1200×630 template. The same address again is served from the cache at no cost. After you edit the template, each title is drawn again on its next request.
One link on a template of this size draws up to 200 new images a day; after that it answers 429, and the images it already made keep loading.
At a zero balance a new title gets no image (a 402 answer), and that page's preview stays empty until you top up. A new account gets 50 free credits after confirming its email.
Building pages with a script? POST /api/v1/render/sync with an API key renders the same template. OG images through the API