feat(og): dynamic per-article Open Graph images#48
Merged
Conversation
The site shipped no og:image at all — shares rendered blank. Add a default branded social card plus build-time generation of per-article cards when an article sets `og_title` front matter. - Wire og:image/twitter:image (+ dimensions/alt) into baseof.html - Add partials/og-image.html: composites the title (word-wrapped, max 3 lines) and description onto a branded base card via Hugo's images.Text, falling back to a per-page `image` or the site default - Add the base card (assets/og/og-base.png) and default card (static/images/og-image.png), built from the PowerShell.org design system - Bundle Inter (Bold/Regular, OFL) for images.Text - Ignore resources/_gen (Hugo image cache, regenerated each build) Native Hugo image processing — no headless browser or runtime service, runs inside the existing build. Filenames are content-hashed, so CDN and social-scraper caches bust automatically when an article's text changes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
✅ Deploy Preview for powershellorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Added Open Graph metadata for better social sharing. - Standardized author field to use an array format. - Corrected tag capitalization for consistency.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The site shipped no
og:imageat all — links shared to Slack/Discord/X/LinkedIn/iMessage rendered a blank or random preview. This adds:og_titlefront matter.It uses native Hugo image processing (
images.Text) — no headless browser, no runtime service, no CI changes. Everything happens inside the existinghugo --gc --minifystep.How authors opt in
No
og_title→ the page uses a per-pageimage:override if set, else the site-wide default card.How it works
partials/og-image.htmlword-wraps the title (max 3 lines) and description and composites them ontoassets/og/og-base.pngviaimages.Text, returning a content-hashed URL.baseof.htmlnow emitsog:image/twitter:image(+ width/height/alt) pointing at that URL.images.Textneeds a local TTF.resources/_gen/(Hugo''s image cache) is gitignored — regenerated deterministically each build.Caching
Generated filenames are content-hashed (
og-base_hu_<hash>.png), so editing an article''s title/description yields a new URL — CDN edge caches and social-platform scraper caches bust automatically. Unchanged pages keep a stable URL and stay warm.Verification
hugobuild succeeds; article withog_titlegets a generated card, home/other pages keep the default. Confirmed the rendered tags and inspected the output PNG (1200×630).Notes
content/articles/2026-06-23-how-to-write-for-powershell-org.mdout so they can land separately; happy to add a liveog_titleexample in a follow-up.🤖 Generated with Claude Code