Skip to content

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

Description

@Zayden369

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions