My portfolio site had one static og-image.jpeg for every page. When someone shared a blog post on LinkedIn, the preview showed the same generic image as the homepage. OG images are part of the broader technical SEO foundation I build into every project. The article title, the tags, the author photo — none of it. Just a dark rectangle with my name.
That's a missed opportunity every time someone shares your content. The OG image is the first thing a person sees before they decide whether to click. For a developer writing technical articles to attract clients, "generic image" is not an option.
Next.js App Router has a built-in convention for this: opengraph-image.tsx. The documentation makes it sound straightforward — drop a file in any route segment, get automatic og:image meta tags. The convention works fine in production. In development with Turbopack, however, it hangs the dev server at 300–400% CPU on every first page load and never recovers without a restart.
Here is why it happens, what I use instead, and the things Satori does not tell you up front.
How opengraph-image.tsx Works — And Why It Breaks
