← buildlog og

Dynamic OG images for Jekyll

Add to _includes/head.html using Liquid’s url_encode filter. The API returns a 1200×630 PNG, cached at the edge.

<meta property="og:image" content="https://og.sadana.app/api/og?title={{ page.title | url_encode }}&subtitle={{ page.description | default: site.description | url_encode }}&site={{ site.url | remove: 'https://' }}">
<meta name="twitter:card" content="summary_large_image">

Works on GitHub Pages because no plugin is needed. If you use jekyll-seo-tag, set image via front matter instead to avoid duplicates.

Preview

Example OG image for Jekyll

Parameters

title     required, up to 200 chars
subtitle  optional
site      optional footer text
theme     light | dark (Pro)
key       Pro license key (removes watermark)

Check it

After deploying, paste a URL into a card validator (e.g. opengraph.xyz) or share it in a private Slack/Discord channel. Social crawlers cache images, so change the URL (e.g. add &v=2) to force a refresh.

Try the generator

Other frameworks

Next.js · Astro · Hugo · WordPress · Ghost · SvelteKit · Nuxt · Eleventy (11ty) · Jekyll · Docusaurus · plain HTML