OGImgBlog
Engineering notes on building OGImg — architecture, tradeoffs, and how the API actually works under the hood.
How to Add Dynamic OG Images to Your Next.js App
Two real ways to give every page its own social preview image in the App Router: Next.js's built-in ImageResponse file convention, and pointing og:image at a rendering API instead — with the tradeoffs of each.
How OGImg Caches Rendered OG Images with Cloudflare R2
A content-addressed caching architecture for a dynamic OG image API: hashing render params, checking Cloudflare R2 with a HEAD request, and why cache hits still count against quota.
What Size Should an Open Graph Image Be? 1200×630 Explained
The image dimensions and aspect ratio that Facebook, LinkedIn, Slack and X actually use for link previews, why 1.91:1 is the number to remember, and how to avoid cropped text.
The Open Graph Tags Every Page Needs
A practical checklist for og:title, og:description, og:url, og:image, og:type and og:site_name, with the mistakes that quietly break previews on real sites.
X and Twitter Cards: When to Use summary_large_image
How the twitter:card meta tag chooses between a small thumbnail and a large image, what X falls back to when Open Graph tags are missing, and how to test the result.
Why Your Link Preview Shows the Old Image (and How to Refresh It)
Each platform caches link previews on its own schedule. Here is why an updated og:image can keep showing for days, and the debugging tools and URL tricks that force a refresh.
Canonical URLs and og:url: Keep Them Consistent
Why the canonical link, og:url and the sitemap should all name the same address, how tracking parameters and trailing slashes create duplicates, and how Next.js sets them.
Writing Meta Titles and Descriptions That Fit the Snippet
Search engines cut titles and descriptions by pixel width, not by character count. How to write them so the important words survive, and how to check the result before you publish.
JSON-LD Structured Data for Articles, Embedded Safely
How to describe a blog post with schema.org JSON-LD in a Next.js page, which properties matter for articles, and why the script tag must escape the less-than sign.
Sitemap and robots.txt in the Next.js App Router
Generate sitemap.xml and robots.txt from code in the App Router, keep them in sync with your real pages, and avoid the common mistake of listing URLs that redirect or return 404.
Build-Time or Request-Time OG Images: Choosing a Strategy
Static generation makes previews fast but stale. On-demand rendering stays current but costs time on every cache miss. A decision guide for choosing between them per page type.
Making Social Images Readable: Contrast, Size and Alt Text
Link previews are often seen at thumbnail size on a phone. Practical rules for text size, contrast, safe margins and alt text so an OG image still says something when it is small.
A Pre-Launch Checklist for Testing Link Previews
Before you announce a page, check its preview in each platform's debugger, confirm the image URL returns a real PNG, and verify the tags on the live HTML rather than your local dev server.
Favicons and App Icons in Next.js: The Set You Actually Need
Which icon files browsers, iOS home screens and Android pins really request, how the App Router's icon.png and apple-icon.png conventions handle them, and what to skip.