Dynamic OG Images Without Code: Magic Template URLs for Webflow, Ghost and WordPress

Next.js developers can lean on ImageResponse and Satori for dynamic social cards, but Webflow, Ghost and WordPress builders lack a code-level hook. MarkupGo's…

Next.js developers can lean on ImageResponse and Satori for dynamic social cards, but Webflow, Ghost and WordPress builders lack a code-level hook. MarkupGo's Magic Template URL turns a template and query parameters into a generated image with zero code — no API call, no plugin, no custom code.

Enable Magic URL on your OG template

Start in the MarkupGo template editor and create a 1200×630 template. Design it with placeholder fields for the dynamic data you want to show: title, author name, featured image, publication date, or category. Keep the layout simple — large readable text, generous margins, and a background that works whether the featured image loads or falls back to a solid color.

Once the template is saved, visit your Templates page in the MarkupGo dashboard and toggle Magic URL on for that template [1]. Copy the template ID from the same page. The base URL pattern is https://render.markupgo.com/template/{templateId}.png [1].

Build your Magic Template URL

Replace {templateId} with your actual template ID. Change the extension if you need a different format: png, jpeg, webp, or pdf all work [1].

Add query parameters for each template variable. If your template uses title and author, append ?title=Hello&author=Jane. Every parameter beyond the reserved options fields becomes template context data automatically [1].

Paste the URL into a browser tab and hit enter. The image renders on the spot — no API key, no authorization header, no code at all.

If you want to hide the direct Magic URL from end users — or from your page source — add &json=true to get a JSON response containing the task URL [1]. Both are useful if you proxy the request through your own endpoint or edge function.

Connect to Webflow, Ghost or WordPress via Make.com

Webflow

Use Make's Webflow "Watch Events" trigger, which is one of two triggers among 40 total modules in the native integration [2]. Map the post title, author, and featured image URL to query parameters in your Magic URL. Then chain the actions: Update a CMS Item to write the Magic URL into an "OG image" custom field, then Publish an Item and Publish a Site so the changes appear publicly [2]. You need at least a Webflow CMS plan, which supports up to 2,000 items [2].

Placid's comparable approach for Webflow also writes the generated image into a custom collection field that you then select in Webflow's Open Graph image settings. Bannerbear's Webflow method demands adding custom code to the site.

Ghost

Use Make's Ghost "Watch Posts" instant trigger, one of four instant triggers available in the 13-module integration [3]. Ghost automatically generates Open Graph tags from title, featured image and URL, but you can override them using the options in the post editor sidebar [4]. Map your Magic URL to that field.

For updates, configure a custom webhook in Ghost under Settings > Integrations > Add custom integration, using the post.published.edited event [4][5]. Ghost sends POST requests with JSON bodies, and a 2xx response counts as successful delivery [5]. Make's Ghost integration works on the Free plan, though that limits you to 2 active scenarios and 15 minutes between scheduled runs [3].

WordPress

Use Make's WordPress "Watch Posts" trigger. Write the Magic URL directly into the og:image meta field using Yoast SEO or RankMath. MightyShare overwrites the og:image/twitter:image output of SEO plugins like Yoast SEO and RankMath, but here you control the field yourself. Placid's WordPress plugin refuses to overwrite manually set og:image tags by default, and Bannerbear's WordPress method requires urlencoding data in meta tags manually.

Configure the Make scenario

Add a module to build the Magic URL. Use Make's URL encoding functions on each dynamic field before appending it as a query parameter. A malformed URL — spaces unencoded, ampersands in titles breaking the parameter list — is the most common failure point.

Add the action module to update the OG image field with the full Magic URL. Insert a filter between trigger and action if you want to branch on status: published only, not draft, or specific post types. Filters between modules do not consume Make credits [2].

Each module execution per data bundle costs 1 Make credit [2]. A typical flow of trigger → build URL → update field uses 2-3 credits per post.

Handle the regenerate on update gotcha

MarkupGo caches Magic URLs for 15 days. Reusing the same URL serves the cached image without consuming additional credits [1]. This is efficient until you edit a post. If the title changes but the Magic URL stays identical, social platforms and browsers may continue serving the old cached image.

Fix this by appending a cache-busting parameter. Use ?v={{timestamp}} in Make, or map the post's updated_at field. The image regenerates on every meaningful edit while the base template and structure stay identical. The cache-buster works because the changed URL counts as a new unique URL, which triggers a fresh render [1].

What it costs

MarkupGo's free trial is permanent at 100 credits per month with no credit card required [6]. Each unique Magic URL consumes credits; cached repeats within 15 days are free [1].

Paid plans run Lite at $29/month for 2,000 credits and 5 templates, Plus at $49/month for 10,000 credits and 30 templates, and Pro at $99/month for 20,000 credits and unlimited templates [6].

A blog publishing 3 posts daily needs roughly 90 unique URLs per month, well inside the free trial or Lite plan. Factor in cache-busted updates: if you edit half your posts once, that is still about 135 credits monthly.

Next steps

Validate the generated image with Facebook's Sharing Debugger and Twitter's Card Validator [7].

Sources

  1. markupgo.com
  2. Integrate Make with Webflow (webflow.com)
  3. Automate Ghost With Make: 13 Modules, 4 Instant Triggers (hackceleration.com)
  4. layeredcraft.com
  5. docs.ghost.org
  6. markupgo.com
  7. How to automatically generate Open Graph images (OG images) in Webflow (placid.app)