Shared links to the game show no preview: no Open Graph, Twitter or canonical tags

Aperta Adatta ai principianti
  • Qualcosa non va?
#76 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
62/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
html, javascript, markdown
Ambito
frontend, web-dev

Direzione di ricerca

La modifica va inserita nel <head> di index.html intorno alle righe 6-17, dove si trovano i tag esistenti di title, description e icon. Aggiungi il link canonical e i meta tag Open Graph e Twitter della correzione suggerita, quindi esegui npm test, perché tests/unit/offline.test.js richiede che index.html e sw.js restino sincronizzati. L'immagine della social card assets/social-card.png (1200x630) deve ancora essere creata prima che il controllo og:image passi.

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

Descrizione

enhancement good first issue severity: low

Summary

The game page has a title and description but no Open Graph, Twitter card or canonical tags, so a link to the game shared in chat or on social media shows no image and, in some apps, no preview at all.

Where

  • index.html:6-17 (<head>)

Details

The live page's <head> contains only charset, viewport, <title>, the three stylesheets, description, theme-color, the two icons and the manifest. There is no og:title, og:description, og:image, og:url, og:type, twitter:card or <link rel="canonical">.

Impact

Anyone sharing https://tmhsdigital.github.io/Static_Chess/ gets a bare link or a text-only card. The page is also reachable as /index.html, and without a canonical URL both addresses can be indexed.

Suggested fix

Add to <head>:

<link rel="canonical" href="https://tmhsdigital.github.io/Static_Chess/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Static Chess" />
<meta property="og:description" content="Chess in the browser for two players or against the computer. Works offline." />
<meta property="og:url" content="https://tmhsdigital.github.io/Static_Chess/" />
<meta property="og:image" content="https://tmhsdigital.github.io/Static_Chess/assets/social-card.png" />
<meta name="twitter:card" content="summary_large_image" />

The image needs to be created: a 1200x630 PNG of the board in play, saved as assets/social-card.png. Open Graph images must use absolute URLs.

Acceptance criteria

  • The tags above are present on the live page
  • The og:image URL returns 200 and is 1200x630
  • npm test still passes (tests/unit/offline.test.js compares index.html with sw.js)

Getting started

  • Relevant files: index.html, assets/
  • How to run tests: npm test, npm run format

Filed by repo-audit/pages-audit at 0144de7. Severity: low. Effort: S. audit-key: enhancement|index.html|og-meta

Lingua principale
JavaScript
Stelle
4
Fork
2
Merge medio
4h 8m
PR unite (30g)
1

Preparare l'ambiente

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 TMHSDigital/Static_Chess

Tutte le issue di TMHSDigital/Static_Chess

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.