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

Open Beginner friendly
  • Is something wrong?
#76 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
62/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
html, javascript, markdown
Domain
frontend, web-dev

Research direction

The change belongs in the <head> of index.html around lines 6-17, where the existing title, description and icon tags sit. Add the canonical link and Open Graph and Twitter meta tags from the suggested fix, then run npm test, since tests/unit/offline.test.js requires index.html and sw.js to stay in sync. The social card image at assets/social-card.png (1200x630) still has to be created before the og:image check passes.

Written by the indexing model from the issue text.

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

Dominant language
JavaScript
Stars
4
Forks
2
Avg merge
4h 8m
Merged PRs (30d)
1

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TMHSDigital/Static_Chess

All issues in TMHSDigital/Static_Chess

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.