Traffic growth: OG cards, Wordform share, Eclipse 2026/7 SEO

Add per-game OG SVGs and meta tags; improve Wordform share with Web Share API and win prompt; tune Eclipse Predictor for 2026/2027 searches with deep links and FAQ schema.

Author: mf4633

Chess.html

@@ -25,8 +25,12 @@
   <meta property="og:url" content="https://boardgaminghub.com/Chess.html">
   <meta property="og:title" content="Chess — Free Online Chess">
   <meta property="og:description" content="Free in-browser Chess. Single-player vs AI or 2-player local. No signup.">
-  <meta property="og:image" content="https://boardgaminghub.com/og-image.png">
-  <meta name="twitter:card" content="summary_large_image">
+<meta property="og:image" content="https://boardgaminghub.com/og/chess.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/chess.svg">
+<meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:image" content="https://boardgaminghub.com/og-image.png">
   <script type="application/ld+json">
   { "@context": "https://schema.org", "@type": "VideoGame", "name": "Chess",

Drift.html

@@ -14,7 +14,11 @@
 <meta property="og:url" content="https://boardgaminghub.com/Drift.html">
 <meta property="og:title" content="Drift — Daily Word Ladder">
 <meta property="og:description" content="Transform start to target one letter at a time. Daily theme. Free, in-browser.">
-<meta name="twitter:card" content="summary">
+<meta property="og:image" content="https://boardgaminghub.com/og/drift.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/drift.svg">
 <script type="application/ld+json">
 { "@context": "https://schema.org", "@type": "VideoGame", "name": "Drift",
   "description": "Daily word ladder puzzle: transform a 4-letter start word into a 4-letter target word, changing one letter per step, with every intermediate word valid English.",

EclipsePredictor.html

@@ -4,13 +4,26 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="theme-color" content="#04060E">
-<title>Eclipse Predictor &mdash; Solar Eclipse Paths on a 3D Globe | Board Gaming Hub</title>
-<meta name="description" content="Step through every solar eclipse from 1900 to 2200. Computed with astronomy-engine (sub-arcsecond accuracy), drawn as paths of totality on a 3D Earth.">
+<title>2026 &amp; 2027 Solar Eclipse Path Map — 3D Globe | Board Gaming Hub</title>
+<meta name="description" content="Free 3D solar eclipse path map for 2026 (Aug 12 total — Spain, Iceland) and 2027 (Aug 2 — Spain to Egypt, 6+ min totality). Every eclipse 1900–2200, sub-arcsecond astronomy-engine accuracy.">
+<meta name="keywords" content="2026 solar eclipse path, 2027 solar eclipse, eclipse map, path of totality, solar eclipse predictor, August 2026 eclipse, August 2027 eclipse">
 <link rel="canonical" href="https://boardgaminghub.com/EclipsePredictor.html">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://boardgaminghub.com/EclipsePredictor.html">
-<meta property="og:title" content="Eclipse Predictor &mdash; Solar Eclipse Paths">
-<meta property="og:description" content="Click through 21st-century solar eclipses and watch the path of totality sweep across a 3D globe.">
+<meta property="og:title" content="2026 &amp; 2027 Solar Eclipse Paths on a 3D Globe">
+<meta property="og:description" content="Step through the Aug 12 2026 and Aug 2 2027 total eclipses — paths of totality on a rotatable Earth. Free, no signup.">
+<meta property="og:image" content="https://boardgaminghub.com/og/eclipse.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/eclipse.svg">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
+  {"@type":"Question","name":"When is the next total solar eclipse?","acceptedAnswer":{"@type":"Answer","text":"The next total solar eclipse is August 12, 2026, visible from Greenland, Iceland, and northern Spain. The following major total eclipse is August 2, 2027 across Spain, North Africa, and the Middle East — up to 6m23s of totality."}},
+  {"@type":"Question","name":"Where can I see the 2026 solar eclipse?","acceptedAnswer":{"@type":"Answer","text":"The August 12, 2026 total eclipse crosses Greenland, Iceland, and northern Spain. Use Eclipse Predictor to view the exact path of totality on a 3D globe."}},
+  {"@type":"Question","name":"Where is the 2027 eclipse of the century?","acceptedAnswer":{"@type":"Answer","text":"The August 2, 2027 total eclipse — one of the longest of the century at over 6 minutes — crosses Spain, Morocco, Algeria, Libya, Egypt, and Saudi Arabia."}}
+]}
+</script>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#127773;</text></svg>">
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -1867,6 +1880,18 @@ <h4>LEGEND</h4>
     // Default to 2024-04-08 if present, else most recent
     let idx = ECLIPSES.findIndex(e => e.year === 2024 && e.month === 4 && e.day === 8);
     if (idx < 0) idx = Math.floor(ECLIPSES.length / 2);
+    const qs = new URLSearchParams(location.search);
+    const dateKey = qs.get('date') || qs.get('eclipse');
+    if (dateKey) {
+      const di = ECLIPSES.findIndex(e => `${e.year}-${String(e.month).padStart(2,'0')}-${String(e.day).padStart(2,'0')}` === dateKey);
+      if (di >= 0) idx = di;
+    } else if (qs.get('year') === '2026') {
+      const di = ECLIPSES.findIndex(e => e.year === 2026 && e.month === 8 && e.day === 12);
+      if (di >= 0) idx = di;
+    } else if (qs.get('year') === '2027') {
+      const di = ECLIPSES.findIndex(e => e.year === 2027 && e.month === 8 && e.day === 2);
+      if (di >= 0) idx = di;
+    }
     loadEclipse(idx);
     // Fade out overlay
     loadOverlayEl.style.transition = 'opacity 0.5s';
@@ -1878,11 +1903,17 @@ <h4>LEGEND</h4>
 </script>
 
 <section class="seo-content" style="position:relative;z-index:50;background:#0c1016;margin-top:0;padding-bottom:40px;">
-  <h2>About Eclipse Predictor</h2>
-  <p>Step through every solar eclipse from 1900 to 2200. Paths of totality, annularity, and hybrid eclipses are computed with <strong>astronomy-engine</strong> (sub-arcsecond ephemeris) and drawn on a rotatable 3D Earth.</p>
+  <h2>2026 &amp; 2027 Solar Eclipse Paths</h2>
+  <p>Step through every solar eclipse from 1900 to 2200. Paths of totality are computed with <strong>astronomy-engine</strong> (sub-arcsecond ephemeris) and drawn on a rotatable 3D Earth.</p>
+  <h3>Upcoming total eclipses</h3>
+  <ul>
+    <li><a href="?date=2026-08-12"><strong>Aug 12, 2026</strong></a> — total: Greenland, Iceland, northern Spain</li>
+    <li><a href="?date=2027-08-02"><strong>Aug 2, 2027</strong></a> — total: Spain through Egypt (&ldquo;Eclipse of the Century,&rdquo; 6m+ totality)</li>
+    <li><a href="?date=2024-04-08">Apr 8, 2024</a> — Great American Eclipse (replay)</li>
+  </ul>
   <h3>What you can explore</h3>
   <ul>
-    <li>Click through the catalog or jump by year — e.g. 2024-04-08 North America, 2026-08-12 Europe, 2027-08-02 Africa.</li>
+    <li>Deep links: <code>?date=2026-08-12</code> or <code>?year=2027</code> jump straight to the eclipse.</li>
     <li>Toggle coastlines, night shading, penumbra band, and landmark cities along the path.</li>
     <li>Open <strong>Show the Math</strong> for Besselian elements and contact times.</li>
   </ul>

Floodline.html

@@ -11,7 +11,11 @@
 <meta property="og:url" content="https://boardgaminghub.com/Floodline.html">
 <meta property="og:title" content="Floodline — California Flood Defense Sim">
 <meta property="og:description" content="Free flood-defense sim with real California water physics and historical scenarios.">
-<meta property="og:image" content="https://boardgaminghub.com/og-image.png">
+<meta property="og:image" content="https://boardgaminghub.com/og/floodline.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/floodline.svg">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:image" content="https://boardgaminghub.com/og-image.png">
 <script type="application/ld+json">

Solitaire.html

@@ -12,7 +12,11 @@
 <meta property="og:url" content="https://boardgaminghub.com/Solitaire.html">
 <meta property="og:title" content="Solitaire — Free Online Klondike">
 <meta property="og:description" content="The classic single-player card game. Free, in-browser, single-file HTML.">
-<meta name="twitter:card" content="summary">
+<meta property="og:image" content="https://boardgaminghub.com/og/solitaire.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/solitaire.svg">
 <script type="application/ld+json">
 { "@context": "https://schema.org", "@type": "VideoGame", "name": "Solitaire (Klondike)",
   "description": "Build foundations from Ace to King in each suit, using a tableau of seven columns and a draw stock.",

Sudoku.html

@@ -12,7 +12,11 @@
 <meta property="og:url" content="https://boardgaminghub.com/Sudoku.html">
 <meta property="og:title" content="Sudoku — Free Online Daily Puzzle">
 <meta property="og:description" content="Easy to expert puzzles, pencil notes, hint mode, daily seed. Free, in-browser, single-file HTML.">
-<meta name="twitter:card" content="summary">
+<meta property="og:image" content="https://boardgaminghub.com/og/sudoku.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/sudoku.svg">
 <script type="application/ld+json">
 { "@context": "https://schema.org", "@type": "VideoGame", "name": "Sudoku",
   "description": "Place digits 1–9 so that every row, column, and 3×3 box contains each digit exactly once.",

Wordform.html

@@ -14,7 +14,11 @@
 <meta property="og:url" content="https://boardgaminghub.com/Wordform.html">
 <meta property="og:title" content="Wordform — Free Daily Word Puzzle">
 <meta property="og:description" content="Six guesses, five letters, one daily word. Free, in-browser, single-file HTML.">
-<meta name="twitter:card" content="summary">
+<meta property="og:image" content="https://boardgaminghub.com/og/wordform.svg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://boardgaminghub.com/og/wordform.svg">
 <script type="application/ld+json">
 { "@context": "https://schema.org", "@type": "VideoGame", "name": "Wordform",
   "description": "Guess the 5-letter daily word in six tries, with color-coded letter feedback.",
@@ -93,6 +97,11 @@
   .info strong { color: #f0d89c; }
   .legend { color: #8a7858; font-size: 0.78em; margin: 8px 0; }
   .legend span { display: inline-block; width: 16px; height: 16px; border-radius: 2px; vertical-align: middle; margin: 0 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.4); }
+  #shareBtn.pulse { animation: sharePulse 1.2s ease-in-out infinite; border-color: #d4a050; color: #ffe8a8; }
+  @keyframes sharePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,160,80,0.5); } 50% { box-shadow: 0 0 0 8px rgba(212,160,80,0); } }
+  #shareToast { display: none; margin: 12px auto 0; max-width: 340px; padding: 10px 14px; background: #1a1410; border: 1px solid #5a4028; border-radius: 6px; color: #e8d8b8; font-size: 0.82em; line-height: 1.5; }
+  #shareToast.show { display: block; }
+  #shareToast button { margin-top: 8px; width: 100%; }
 </style>
 </head>
 <body>
@@ -107,6 +116,7 @@ <h1>WORDFORM</h1>
   <div id="board"></div>
   <div id="msg"></div>
   <div class="stats">STREAK <span id="streak">0</span> · WINS <span id="wins">0</span> · PLAYED <span id="played">0</span></div>
+  <div id="shareToast"><span id="shareToastText"></span><button type="button" id="shareToastBtn">Share result</button></div>
   <div id="kb"></div>
   <nav><a href="index.html">All games</a> · <a href="Sudoku.html">Sudoku</a> · <a href="2048.html">2048</a></nav>
 
@@ -230,22 +240,49 @@ <h2>How to play Wordform</h2>
     $('streak').textContent = s.streak; $('wins').textContent = s.wins; $('played').textContent = s.played;
   }
   function finishMsg() {
-    if (guesses.length && guesses[guesses.length-1].word === target) msg('SOLVED IN ' + guesses.length);
+    const won = guesses.length && guesses[guesses.length-1].word === target;
+    if (won) msg('SOLVED IN ' + guesses.length);
     else msg('OUT OF GUESSES — ' + target.toUpperCase());
+    if (mode === 'daily' && done) promptShare(won);
   }
   function msg(t) { $('msg').textContent = t; }
+  const SHARE_URL = 'https://boardgaminghub.com/Wordform.html';
   function shareGrid() {
     if (!guesses.length) return '';
-    const head = mode === 'daily' ? 'Wordform #' + dailyIndex() + ' ' + (done && guesses[guesses.length-1].word === target ? guesses.length : 'X') + '/6' : 'Wordform';
+    const won = done && guesses[guesses.length-1].word === target;
+    const head = mode === 'daily' ? 'Wordform #' + dailyIndex() + ' ' + (won ? guesses.length : 'X') + '/6' : 'Wordform';
     const map = { hit: '🟩', warm: '🟨', miss: '⬛' };
-    return head + '\n' + guesses.map(g => g.scores.map(s => map[s]).join('')).join('\n') + '\nboardgaminghub.com/Wordform.html';
+    return head + '\n' + guesses.map(g => g.scores.map(s => map[s]).join('')).join('\n') + '\n' + SHARE_URL;
   }
-  $('dailyBtn').onclick = () => { mode = 'daily'; $('dailyBtn').classList.add('active'); $('randomBtn').classList.remove('active'); target = pickTarget(); load(); };
-  $('randomBtn').onclick = () => { mode = 'random'; $('randomBtn').classList.add('active'); $('dailyBtn').classList.remove('active'); target = pickTarget(); guesses = []; current = ''; done = false; render(); msg(''); };
-  $('shareBtn').onclick = async () => {
-    const g = shareGrid(); if (!g) { msg('NOTHING TO SHARE'); return; }
-    try { await navigator.clipboard.writeText(g); msg('COPIED'); } catch (e) { msg('COPY FAILED'); }
-  };
+  async function doShare() {
+    const text = shareGrid();
+    if (!text) { msg('NOTHING TO SHARE'); return; }
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: 'Wordform', text: text, url: SHARE_URL });
+        msg('SHARED');
+        return;
+      } catch (e) { if (e && e.name === 'AbortError') return; }
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      msg('COPIED — paste anywhere');
+    } catch (e) { msg('COPY FAILED'); }
+  }
+  function promptShare(won) {
+    $('shareBtn').classList.add('pulse');
+    const toast = $('shareToast');
+    const tbtn = $('shareToastBtn');
+    $('shareToastText').textContent = won
+      ? 'Nice solve! Share your emoji grid — no spoilers.'
+      : 'Tough one today. Share your grid anyway?';
+    toast.classList.add('show');
+    tbtn.textContent = navigator.share ? 'Share result' : 'Copy result';
+    tbtn.onclick = () => { doShare(); toast.classList.remove('show'); $('shareBtn').classList.remove('pulse'); };
+  }
+  $('dailyBtn').onclick = () => { mode = 'daily'; $('dailyBtn').classList.add('active'); $('randomBtn').classList.remove('active'); target = pickTarget(); $('shareToast').classList.remove('show'); $('shareBtn').classList.remove('pulse'); load(); };
+  $('randomBtn').onclick = () => { mode = 'random'; $('randomBtn').classList.add('active'); $('dailyBtn').classList.remove('active'); target = pickTarget(); guesses = []; current = ''; done = false; $('shareToast').classList.remove('show'); $('shareBtn').classList.remove('pulse'); render(); msg(''); };
+  $('shareBtn').onclick = () => doShare();
   document.addEventListener('keydown', e => {
     if (e.ctrlKey || e.metaKey) return;
     if (e.key === 'Enter') submit();