How to Automatically Generate Open Graph Images From Your Sitemap
Learn how to automate OG images from your sitemap: discover every URL from sitemap.xml, render an on-brand 1200×630 card for each page, and serve them behind one og:image tag — no manual design work per page.
To automate Open Graph images from your sitemap, you point a generator at your sitemap.xml, let it discover every URL, render a templated 1200×630 card from each page’s title and metadata, then serve those images behind a single og:image tag per page. The result: every URL on your site gets a unique, on-brand share preview without anyone touching a design tool. This guide walks through exactly how that pipeline works and how to set it up.
If you publish more than a handful of pages, hand-making share images does not scale — and the pages you skip ship with no preview at all, which means worse click-through every time someone shares them. Your sitemap already lists every page you care about, so it is the perfect source of truth to drive image generation.
Why your sitemap is the right trigger
A sitemap.xml is a machine-readable list of your canonical URLs, and most CMSs and static-site generators produce one automatically. That makes it ideal as the input to an automated OG pipeline:
- Complete. It already contains the URLs you want indexed — the same ones that get shared.
- Self-updating. Publish a new post and your sitemap gains a
<url>entry, so the next run picks it up with no extra work. - Change-aware. The
<lastmod>timestamp tells you which pages changed, so you only re-render what actually moved.
A standard sitemap entry looks like this:
<url>
<loc>https://example.com/blog/cut-churn</loc>
<lastmod>2026-06-14</lastmod>
</url>For large sites, you may have a sitemap index — a parent file that points at several child sitemaps. A good automation reads the index, follows each child, and de-duplicates the combined URL list before generating anything.
The automation pipeline, step by step
1. Discover the URLs
Fetch sitemap.xml, parse the <loc> values, and follow any nested sitemaps. Keep the <lastmod> alongside each URL so later runs can skip unchanged pages. Cap the number of URLs you process per run so a runaway sitemap can’t blow up your job.
2. Read each page’s metadata
For every URL, pull the data your template needs — usually the <title> (or existing og:title), the meta description, and the site name. This is the text that will appear on the card, so it pays to clamp it sensibly: trim titles to roughly 60 characters and descriptions to about 180 so they fit the safe zone without awkward wrapping.
3. Render a 1200×630 image from a template
This is where automation earns its keep. Instead of designing each card, you define a template once — layout, fonts, colours, logo placement — and feed in per-page variables. The recommended Open Graph image size is 1200×630 pixels (a 1.91:1 ratio), which renders as a full-width card on every major platform.
A robust renderer should:
- Output exactly 1200×630 PNG (or JPEG), kept comfortably under 1 MB so crawlers don’t reject it.
- Keep all text and the logo inside the centre safe zone — roughly the middle 1080×600 region with at least 60px of edge margin — because apps crop edges differently and overlay avatars or play buttons in corners.
- Auto-fit the headline: shrink or wrap long titles to two lines max, and keep the font at 48px or larger so the card is legible as a thumbnail.
4. Store and serve behind a stable URL
Save each rendered image and serve it from a permanent URL with long cache headers. The page’s og:image then points at that absolute URL. Because the address is stable, you can re-render the image in place when a page changes and the tag never needs editing.
The meta tags each page needs
Generating the image is only half the job — each page still has to declare it. The automation should write (or you should template) a block like this into the page <head>:
<meta property="og:title" content="How we cut churn by 38%">
<meta property="og:description" content="The three experiments that moved the needle.">
<meta property="og:image" content="https://example.com/og/cut-churn.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/blog/cut-churn">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">Two details matter the most. The og:image must be an absolute URL — crawlers do not resolve relative paths or run your JavaScript. And twitter:card=summary_large_image guarantees X shows the big card instead of squeezing your 1200×630 artwork into a tiny square. Declaring og:image:width and og:image:height lets crawlers reserve space and render the preview faster.
Generate the image and the meta tags from the same source, in the same run. When they drift apart, that’s when previews silently break.
Keeping images fresh as the sitemap changes
An automation is only “set and forget” if it stays current. Re-run the pipeline on a schedule, or whenever you deploy, and use <lastmod> to regenerate only the pages that changed. Two more habits keep things clean:
- Re-scrape after changes. Platforms cache previews aggressively. When you replace an image, re-fetch the URL in each platform’s debugger so the new version propagates.
- Validate before trusting. Spot-check pages to confirm the tags resolve to a real 1200×630 image, not a 404 or a stale square.
Doing it without building the pipeline yourself
You can assemble all of this in-house — a sitemap parser, an SVG-to-PNG renderer, a template system, storage, and a scheduler — but it is a fair amount of plumbing to maintain. Ogwave does the whole pipeline for you: point it at your sitemap.xml, it discovers every URL, reads each page’s title, and renders an on-brand 1200×630 card for all of them automatically.
You pick from a library of programmable designs — editorial, bold type, mono, duotone, product cards and more — so the output matches your brand instead of looking generic. Before you commit, you can paste any URL into the free preview tool to see how your current tags render across platforms and get a corrected, copy-paste meta block. From there it’s a single connection to generate previews for your entire site.
The short version
To automate OG images from your sitemap: discover URLs from sitemap.xml, read each page’s title and description, render a templated 1200×630 image per page, serve it behind a stable absolute og:image URL, and add twitter:card=summary_large_image plus the width/height tags. Re-run on a schedule using <lastmod> so only changed pages regenerate. If you’d rather not build the plumbing, connect your sitemap to Ogwave and let every page earn the click it deserves.