[P1] Audit: Tool-specific Open Graph images are missing or too generic

[baixiangcpp]

Imported from the byteflow.tools deep audit on 2026-06-22.

Problem: tool pages appear to use generic or non-differentiated social preview images. For a tool-heavy site, each major tool should have an OG image that communicates the exact tool and expected output.

Affected page types:

• Tool pages
• Category pages
• Workflow pages
• Cluster/tutorial pages

Reproduction steps:

1. Inspect meta tags for several tool pages.
2. Compare og:image and twitter:image across JSON Formatter, JWT Decoder, Image Resizer, Regex Tester, and Pipeline Builder.
3. Preview links in social card validators.
4. Check if images contain tool name, category, and a simple visual example.

Expected behavior: high-priority tools should have unique, readable social cards tailored to the tool.

Actual behavior: social images are likely shared or too generic across pages.

Impact: lower share click-through, weaker brand recognition, and reduced differentiation in social and messaging apps.

Proposed fix:

• Generate OG images per major tool and category.
• Include tool icon, name, short benefit, privacy-local badge, and sample UI/output.
• Use 1200x630 as default and validate file size.
• Add automatic image generation for new tools.
• Add tests ensuring every indexable page has a reachable og:image.

Acceptance criteria:

• Top 30 tools have unique OG images.
• Social card previews display correct title, description, and image.
• Images are accessible, optimized, and cached.
• New tool pages cannot ship without OG metadata.

[baixiangcpp]

Closed as completed by the canonical BF audit backlog work. This older non-BF audit issue duplicates work now merged through PRs #209-#219, with the BF issues closed and guard/test coverage in place. The remaining non-duplicate follow-up is #7, which stays open because the upstream Next/PostCSS advisory is not fixed yet.