Bug Fix·Pushed May 1, 2026·S

Open Graph images now load on social platforms

Social sharing was broken because GitHub Pages couldn't identify OG image file types without extensions. A postbuild step now renames files and updates all metadata references to restore proper rendering.

Social links to the site were missing preview images on Twitter, LinkedIn, and other platforms. GitHub Pages determines file types by extension, but Next.js generates Open Graph images without any extension — just [[code]]opengraph-image[[/code]] — causing the server to respond with [[code]]application/octet-stream[[/code]] instead of [[code]]image/png[[/code]]. Social scrapers interpret this as a broken image and skip the preview. A postbuild script now walks the built output directory and renames every [[code]]opengraph-image[[/code]] file to [[code]]opengraph-image.png[[/code]]. All metadata references across the site point to the new [[code]].png[[/code]] suffix. The site builds normally; the renaming happens automatically afterward. In the [[code]]@gitpulse/site[[/code]] app, Open Graph images now render correctly in social previews.

Technical description

This fix addresses a content-type detection issue on GitHub Pages that was breaking Open Graph image rendering across all social platforms. **The Problem**: Next.js generates Open Graph images as flat files named [[code]]opengraph-image[[/code]] with no extension. GitHub Pages serves unknown file types as [[code]]application/octet-stream[[/code]], which social platform scrapers interpret as a broken or missing image. The result was no thumbnail previews when links were shared on Twitter, LinkedIn, etc. **The Solution**: A two-part fix ensures files have proper extensions and metadata references point to them correctly. **Postbuild Script**: The new [[code ref=1]]scripts/rename-og-png.mjs[[/code]] script runs automatically after Next.js builds. It recursively walks the [[code]]out/[[/code]] directory, identifies files named exactly [[code]]opengraph-image[[/code]], and renames them to [[code]]opengraph-image.png[[/code]]. This happens silently during deployment — no manual intervention required. **Metadata Updates**: All references to OG image paths in [[code]]seo.ts[[/code]] and [[code]]page.tsx[[/code]] were updated to include the [[code]].png[[/code]] suffix. The home page and story detail pages now point to their respective [[code]].png[[/code]] files. ````mermaid graph TD A[next build] --> B[generate opengraph-image files] B --> C[rename-og-png.mjs runs] C --> D{find opengraph-image files?} D -->|yes| E[rename to .png extension] D -->|no| F[deploy output/] E --> F ```` **Files at a Glance**: - [[code]]site/package.json[[/code]] — Added postbuild step to [[code ref=2]]build script[[/code]] - [[code]]site/scripts/rename-og-png.mjs[[/code]] — New script that renames OG image files post-build - [[code]]site/src/lib/seo.ts[[/code]] — Updated OG image URLs to use .png suffix - [[code]]site/src/app/stories/[id]/page.tsx[[/code]] — Updated story page OG image URL to use .png suffix