--- title: How I generate an Open Graph image for every post description: A practical walkthrough of generating unique Open Graph preview images for every blog post at build time using Astro and the astro-og-canvas library. The setup... canonical: https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How I generate an Open Graph image for every post | daily.dev og:description: A practical walkthrough of generating unique Open Graph preview images for every blog post at build time using Astro and the astro-og-canvas library. The setup... og:url: https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o og:image: https://api.daily.dev/og/posts/fouqECE4O.png og:image:alt: How I generate an Open Graph image for every post og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How I generate an Open Graph image for every post **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 2 min read · 1 upvotes · 0 comments ## Summary A practical walkthrough of generating unique Open Graph preview images for every blog post at build time using Astro and the astro-og-canvas library. The setup involves creating a dynamic file route at src/pages/og/[...route].ts, fetching all posts from a content collection, and passing titles and descriptions to OGImageRoute to produce per-post PNG images. Key gotcha: OGImageRoute is async and requires await or Astro can't find getStaticPaths. The generated images are static files with no runtime dependency. A note on build performance: with 1700+ posts, image generation adds time, but astro-og-canvas caches unchanged posts — with a caveat around cache location on Cloudflare Pages. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I generate a unique Open Graph image for each blog post in Astro? Use the astro-og-canvas library to create an image route, such as src/pages/og/[...route].ts, that reads post data from a content collection and passes each post's title and description to OGImageRoute. This generates a static PNG per post at build time, at a URL like /og/.png, which can then be referenced in og:image and twitter:image meta tags. _daily.dev surfaces practical Astro build setups like this for developers polishing their site's link previews._ ### Why does my Astro build fail with astro-og-canvas saying getStaticPaths is not found? This happens when the await keyword is missing before calling OGImageRoute, since it is an async function. Without awaiting it, Astro cannot find the resulting getStaticPaths and GET exports, causing the build to fail. Adding await before OGImageRoute resolves the issue. _developers debugging Astro build errors can find gotchas like this one on daily.dev before hitting them._ ## Similar posts on daily.dev - [How I made this Astro site build faster and cut its deploy size](https://daily.dev/posts/how-i-made-this-astro-site-build-faster-and-cut-its-deploy-size-x7vte3lsv) · Flavio Copes · 1 upvotes · 1 comments - [OG Image Generation in AnalogJS](https://daily.dev/posts/og-image-generation-in-analogjs-ssrni20lq) · Telerik · 0 upvotes · 0 comments - [Rails 8: How to Auto-Generate Social Media Preview Cards](https://daily.dev/posts/rails-8-how-to-auto-generate-social-media-preview-cards-atispnhpj) · Ruby Flow · 0 upvotes · 0 comments - [My blog got popular, and my bandwidth exploded to ~300GB in just 10 days](https://daily.dev/posts/my-blog-got-popular-and-my-bandwidth-exploded-to-300gb-in-just-10-days-nflugkjyl) · Neciu Dan · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#typescript](https://daily.dev/tags/typescript), [#astro](https://daily.dev/tags/astro) [View this post on daily.dev](https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How I generate an Open Graph image for every post","url":"https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o"},"datePublished":"2026-07-07T08:29:29.924Z","dateModified":"2026-09-13T19:38:26.835Z","description":"A practical walkthrough of generating unique Open Graph preview images for every blog post at build time using Astro and the astro-og-canvas library. The setup...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/907c6c028f107fad7d0379f1571dde35?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/907c6c028f107fad7d0379f1571dde35?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,typescript,astro","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"How I generate an Open Graph image for every post"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-i-generate-an-open-graph-image-for-every-post-fouqece4o#faq","mainEntity":[{"@type":"Question","name":"How do I generate a unique Open Graph image for each blog post in Astro?","acceptedAnswer":{"@type":"Answer","text":"Use the astro-og-canvas library to create an image route, such as src/pages/og/[...route].ts, that reads post data from a content collection and passes each post's title and description to OGImageRoute. This generates a static PNG per post at build time, at a URL like /og/.png, which can then be referenced in og:image and twitter:image meta tags. daily.dev surfaces practical Astro build setups like this for developers polishing their site's link previews."}},{"@type":"Question","name":"Why does my Astro build fail with astro-og-canvas saying getStaticPaths is not found?","acceptedAnswer":{"@type":"Answer","text":"This happens when the await keyword is missing before calling OGImageRoute, since it is an async function. Without awaiting it, Astro cannot find the resulting getStaticPaths and GET exports, causing the build to fail. Adding await before OGImageRoute resolves the issue. developers debugging Astro build errors can find gotchas like this one on daily.dev before hitting them."}}]} ```