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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#76 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
62/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
html, javascript, markdown
Domaine
frontend, web-dev

Piste de recherche

La modification se situe dans le <head> de index.html, autour des lignes 6-17, là où se trouvent les balises existantes title, description et icon. Ajoute le lien canonical ainsi que les balises meta Open Graph et Twitter de la correction proposée, puis exécute npm test, car tests/unit/offline.test.js exige que index.html et sw.js restent synchronisés. L'image de carte sociale assets/social-card.png (1200x630) doit encore être créée avant que la vérification og:image ne réussisse.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
4
Forks
2
Merge moyen
4 h 8 min
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TMHSDigital/Static_Chess

Toutes les issues de TMHSDigital/Static_Chess

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.