For/Jekyll
OG image generator for Jekyll
Quick start snippet, implementation notes, and a prefilled preset you can customize. No accounts. No tracking.
Quick start
The safest workflow is: generate a 1200x630 image, host it at an absolute HTTPS URL, then set og:image (and twitter:image). Finally, validate what bots see.
<meta property=\"og:image\" content=\"{{ site.url }}/og.png\" />Generate a starting image
Use one template consistently across your site. Consistency improves recognition and makes your previews look intentional.
- Start here: open the preset editor.
- Share for approval: preview-only link.
- Need sizing rules? OG image size guide.
Validate the live URL
Platforms cache previews. Before you chase ghosts, confirm that the page HTML contains correct OG tags on the public URL.
- Validate a URL to see what tags are present.
- Follow the debug checklist if the image still does not render.
- Audit your sitemap if you want site-wide coverage.
Related
- Framework guide: /learn/how-to-add-og-image
- Meta tags tool: Meta Tag Generator
- Use cases: OG images by use case
Build the preview, then ship the tags
Generate a clean image first. Then use the Meta Tags tool to copy-paste correct OG + Twitter code.