layer5io / layer5io/layer5

[SEO] Validate and repair broken social-preview image references

Open
#8,055 1 comment 0 reactions 1 assignee View on GitHub

@Zayden369 is already working on this.

Since Sep 14, 2026.

framework/gatsby help wanted kind/bug
Dominant language
JavaScript
Stars
1.1k
Forks
1.6k
Avg merge
2d 10h
Merged PRs (30d)
18

Description

Current Behavior

Several Layer5 pages provide local image paths to the shared SEO component, but the referenced files do not exist under static/images/.

The shared component converts these paths into absolute public URLs and uses them for og:image and twitter:image:

https://github.com/layer5io/layer5/blob/master/src/components/seo.js

The following references currently have no corresponding files under static/images/:

Page source | Referenced image -- | -- src/pages/cloud-native-management/meshery/meshery-operator.js | /images/meshery-operator.webp src/pages/solutions/architecture-diagram/index.js | /images/solutions-collaborate.webp src/pages/solutions/cloud-native-deployments-by-diagram/index.js | /images/solutions-diagram.webp src/pages/solutions/developer-defined-infrastructure/index.js | /images/solutions-infrastructure.webp src/pages/solutions/devrel-platform-for-kubernetes-and-cloud-native-content/index.js | /images/solutions-devrel.webp src/pages/solutions/platform-engineering/index.js | /images/solutions-devrel.webp src/pages/solutions/gitops/index.js | /images/solutions-gitops.webp src/pages/solutions/kubernetes-multi-cluster-operation/index.js | /images/solutions-operation.webp

Because these paths are string values rather than imported Gatsby assets, they are expected to resolve from the static/ directory. Missing files may result in broken OpenGraph and Twitter preview images when the affected pages are shared.

A previous issue, #6348, concerned selecting a suitable OpenGraph image for one DevRel page. This issue covers multiple missing references and proposes automated validation to prevent the problem from recurring.

Desired Behavior
  • Every local image passed to the SEO component should resolve to an existing file in the generated website.

  • Each affected page should use a relevant raster social-preview image.

  • An automated validation check should detect missing local SEO image references before deployment.

Suggested Implementation
  1. Review the affected pages and identify appropriate existing images or add optimized raster assets under static/images/.

  2. Correct references where the intended asset already exists under a different path.

  3. Add a validation script or test that:

    • Detects local image paths passed to the SEO component.

    • Verifies that each referenced asset exists in static/ or the generated public/ output.

    • Reports the affected source file and missing image path.

  4. Integrate the validation into the appropriate test or build workflow.

Acceptance Criteria
  • All listed social-preview image URLs resolve after building the website.

  • Each affected page uses a relevant raster preview image.

  • An automated check fails when a local SEO image references a nonexistent asset.

  • Validation failures identify the source file and missing path.

  • Existing linting, tests, and the Gatsby production build pass.

  • No unrelated page content or visual layout is changed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.