This Is How We Fixed Broken Blog Previews
I posted a link to our blog on X. The preview image looked wrong. Instead of a technical article image, it showed a sales banner.
I checked our last seven posts. They all had the same sales banner. Our engineering deep-dives looked like ads. This hurt our credibility.
The problem was simple. Our code had a fallback rule. If a post had no featured image, it used a default sales banner. Since we did not set featured images for our 42 posts, every post used the same image.
We had two choices:
- Option A: Manually create 42 images. This takes time and creates more work for every new post.
- Option B: Build a dynamic image generator. This creates a custom image for every post automatically.
We chose Option B. We built a small engine using PHP GD.
Here is how it works:
- The engine creates a 1200x630 PNG on demand.
- It uses a dark background and the post title.
- It pulls the title from the database.
- It saves the image to the disk after the first render.
- Every future request serves the cached file. This makes it very fast.
We solved two specific problems during this build:
Language support: Using only Latin fonts like Inter caused Japanese text to appear as empty boxes. We added a check to swap in Noto Sans JP for Japanese titles.
Visual tone: Professional tech blogs like Vercel or PlanetScale use clean, dark cards. We matched this style to build trust with our readers.
Key lessons for you:
- Audit your social media previews. Use a tool to check if your og:image tags work.
- Avoid manual artwork for every post. It does not scale.
- Use a simple stack. PHP GD plus a disk cache is lightweight and effective.
- Plan for multiple languages. Always include a font that supports your full character set.
Your blog images represent your brand. Do not let a default fallback ruin your first impression.