Bug Fix·Pushed May 1, 2026·S
OG images now render on social platforms
OpenGraph images should now render correctly when stories are shared on Twitter, LinkedIn, and other platforms.
OG images on the site were appearing as broken thumbnails when shared on social media. GitHub Pages determines Content-Type headers based on file extensions, but Next.js generates OG image files without any extension. Without [[code]].png[[/code]] in the filename, Pages served the images as [[code]]application/octet-stream[[/code]] instead of [[code]]image/png[[/code]], causing Twitter, LinkedIn, and other platforms to reject them.
A postbuild script now walks the build output directory and renames every [[code]]opengraph-image[[/code]] file to [[code]]opengraph-image.png[[/code]]. The metadata references throughout the site have been updated to point at the new filenames. This fix applies to the home page and all story detail pages in the [[code]]site[[/code]] app.
Technical description
OpenGraph images were broken across the entire site when shared on social platforms. GitHub Pages requires file extensions to set the correct Content-Type headers — without [[code]].png[[/code]], it falls back to [[code]]application/octet-stream[[/code]], which social scrapers reject.
The fix introduces a postbuild pipeline that corrects filenames after Next.js finishes building. A new Node script walks the static output directory, finds all [[code]]opengraph-image[[/code]] files (which have no extension), and renames them to [[code]]opengraph-image.png[[/code]]. This runs automatically after every build via an updated npm script chain in [[code ref=1]]package.json[[/code]].
Two files that reference OG image URLs needed updates. In [[code ref=2]]seo.ts[[/code]], the home page and story metadata functions now include the [[code]].png[[/code]] suffix in their canonical URLs. The story detail page at [[code ref=3]]stories/[id]/page.tsx[[/code]] received the same update.
````mermaid
graph LR
A[next build] --> B[rename-og-png.mjs]
B --> C[Find opengraph-image files]
C --> D[Rename to opengraph-image.png]
D --> E[Static files deploy to GH Pages]
E --> F[Correct Content-Type headers]
F --> G[Social platforms render images]
````
The renaming script uses a recursive directory walker to handle all locale and route variants — each language version of the home page and each story gets its own OG image. The script logs how many files were renamed for visibility.
**Files at a Glance:**
- [[code]]site/package.json[[/code]] — build script now chains rename step after Next.js build
- [[code]]site/scripts/rename-og-png.mjs[[/code]] — new script that adds .png extension to OG image files
- [[code]]site/src/lib/seo.ts[[/code]] — home and story metadata updated to reference .png URLs
- [[code]]site/src/app/stories/[id]/page.tsx[[/code]] — story page OG image URL updated