Skip to content

ensure-social-preview

skillLast commit

Audit, create, repair, and verify large-image social previews for web apps and websites.

Open productSource
Role
Agent workflow design and automation engineering
Scope
Agent workflow, validation automation, and packaging
Status
Published npm package

Problem

A page can look correct in a browser while link-card crawlers see missing/client-only metadata, an inaccessible/small image, or stale platform cache.

Constraints

  1. C1

    Proprietary social platforms' selection and cache algorithms cannot be simulated or controlled.

  2. C2

    Metadata must be crawler-visible and image URLs remotely reachable.

  3. C3

    Only PNG, JPEG, and supported WebP encodings yield deterministic dimension checks.

Architecture

Repository/framework inspection and standards; deterministic HTML/image checker with 0/1/2 exit contract; preserve/repair/create workflow followed by local and deployed verification.

01

Skill workflow

Repository/framework inspection and standards.

02

Automation

Deterministic HTML/image checker with 0/1/2 exit contract.

03

Verification

Preserve/repair/create workflow followed by local and deployed verification.

Decisions

D1

Separate implementation eligibility from platform cache symptoms

Separate implementation eligibility from platform cache symptoms.

D2

Preserve valid metadata and make the smallest framework-native repair

Preserve valid metadata and make the smallest framework-native repair.

D3

Standardize new preview assets at 1200×630

Standardize new preview assets at 1200×630 while verifying bytes/type/dimensions rather than trusting file extensions.

Contribution

  • Built raw HTML/meta/image response auditing.
  • Implemented raster dimension validation and explicit exit codes.
  • Codified framework patterns and a social-preview standard.
  • Added installer, checker, and package-contract tests.

Outcomes

  • Agents can diagnose missing versus cached cards.
  • Repair incomplete/relative/client-only metadata.
  • Create a branded large-image asset when needed.
  • Verify local implementation and deployed crawler eligibility without promising a platform-specific layout.

Verified stack

  • Agent Skills
  • JavaScript
  • Node.js
  • npm
  • GitHub Actions
  • CI/CD

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.