Add og:image preview cards to docs pages

Aperta
#237 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

@adamshatzkamer ci sta già lavorando.

Dal 9/10/2026.

  • #242 di @adamshatzkamer — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
66/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
documentation

Direzione di ricerca

Start by locating how the website renders docs pages and sets their page metadata, then identify the existing title and description handling. Add and verify the requested Open Graph and Twitter card metadata, including an image with alt text and 1200x630 dimensions. Check a docs URL with the LinkedIn Post Inspector and X/Twitter card validator; per-page image generation is optional.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

Docs pages have no og:image, so links shared on LinkedIn, X or Slack show no preview card.

Current behavior

Sharing a docs URL produces a plain link with no image.

Expected behavior

Shared docs links show a preview card with an image, title and description.

Proposed solution

  • Add a default og:image (branded, 1200x630) to all docs pages.
  • Optionally generate per-page images from the page title.
  • Add twitter:card (summary_large_image), og:image:width, og:image:height and og:image:alt.

Acceptance criteria

  • A docs page URL shows a preview card in the LinkedIn Post Inspector and the X/Twitter card validator.
  • Image has alt text and correct dimensions.

Additional context

Found in an audit of gofr.dev AI readiness and discoverability on 2026-10-07.

Lingua principale
JavaScript
Stelle
44
Fork
44
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

  • Include un Dockerfile o un file Docker Compose
  • Nessun modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di gofr-dev/website

Tutte le issue di gofr-dev/website

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.