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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#76 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
62/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
html, javascript, markdown
Bereich
frontend, web-dev

Rechercherichtung

Die Änderung gehört in den <head> von index.html um die Zeilen 6-17, wo die vorhandenen Tags für title, description und icon stehen. Füge den kanonischen Link sowie die Open-Graph- und Twitter-Meta-Tags aus dem vorgeschlagenen Fix hinzu und führe danach npm test aus, da tests/unit/offline.test.js verlangt, dass index.html und sw.js synchron bleiben. Das Social-Card-Bild assets/social-card.png (1200x630) muss noch erstellt werden, bevor die og:image-Prüfung besteht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
JavaScript
Sterne
4
Forks
2
Ø Merge
4 Std. 8 Min.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TMHSDigital/Static_Chess

Alle Issues in TMHSDigital/Static_Chess

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.