feat(landing): Russian default + SEO head, icons and OG card

The landing now always opens in Russian (saved 🌐 choice still wins) — browser-language detection made the indexed content nondeterministic (Googlebot renders with en-US). landing.html gains the static Russian SEO head: title/description, canonical pinned to the production origin, Open Graph card (Telegram/VK link previews), twitter:card, JSON-LD, theme-color and the favicon set; the SPA shell turns noindex and its tab title becomes «Эрудит (Скрэббл)». New assets/icons generator (same tile design as the VK loader) produces favicon.svg/ico, apple-touch-icon.png and og-image.png into ui/public/, plus robots.txt.
2026-07-02 01:25:19 +02:00
parent f3e2a6822b
commit 1ed624eaf1
17 changed files with 367 additions and 18 deletions
@@ -2,16 +2,29 @@ import { expect, test } from './fixtures';

 // The landing page is a separate Vite entry (landing.html), served at "/" in production while
 // the game SPA lives at /app/ and /telegram/. In dev it is reachable at /landing.html.
-test('landing shows the pitch, switches language via the dropdown, and toggles theme', async ({ page }) => {
+test('landing defaults to Russian, switches language via the dropdown, and toggles theme', async ({ page }) => {
  await page.goto('/landing.html');

-  // The tagline renders (English in the default test browser).
-  await expect(page.getByText(/Play Scrabble/i)).toBeVisible();
-
-  // The language dropdown switches the copy to Russian.
-  await page.getByRole('button', { name: 'Language' }).click();
-  await page.getByRole('menuitem', { name: /Русский/ }).click();
+  // Russian by default regardless of the browser language (the test browser is en-US):
+  // crawlers render with arbitrary navigator.language, so the landing never auto-detects.
  await expect(page.getByText(/Играй в «Эрудита»/)).toBeVisible();
+  await expect(page).toHaveTitle(/Эрудит \(Скрэббл\)/);
+  expect(await page.evaluate(() => document.documentElement.lang)).toBe('ru');
+
+  // The static SEO head is present (the page is client-rendered; this layer is what
+  // non-rendering crawlers and link-preview bots see).
+  expect(await page.locator('meta[name="description"]').getAttribute('content')).toContain('Эрудит');
+  expect(await page.locator('meta[property="og:image"]').getAttribute('content')).toBe(
+    'https://erudit-game.ru/og-image.png',
+  );
+  const jsonLd = await page.locator('script[type="application/ld+json"]').textContent();
+  expect(JSON.parse(jsonLd!)['@type']).toBe('WebApplication');
+
+  // The language dropdown switches the copy to English, and the document language follows.
+  await page.getByRole('button', { name: 'Language' }).click();
+  await page.getByRole('menuitem', { name: /English/ }).click();
+  await expect(page.getByText(/Play Scrabble/i)).toBeVisible();
+  expect(await page.evaluate(() => document.documentElement.lang)).toBe('en');

  // The theme toggle flips the document theme (ephemeral, light<->dark).
  const before = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
@@ -24,7 +37,7 @@ test('landing shows the pitch, switches language via the dropdown, and toggles t
 // adds .app-shell); the landing is a normal scrolling document and must keep scrolling.
 test('the landing is a normal scrolling document (the SPA document-pin does not apply)', async ({ page }) => {
  await page.goto('/landing.html');
-  await expect(page.getByText(/Play Scrabble/i)).toBeVisible();
+  await expect(page.getByText(/Играй в «Эрудита»/)).toBeVisible();

  const state = await page.evaluate(() => ({
    shell: document.documentElement.classList.contains('app-shell'),
@@ -1,7 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
  <head>
    <meta charset="UTF-8" />
+    <!-- The SPA shell is an empty client-rendered document behind the public landing — keep it
+         out of search indexes (robots.txt deliberately does NOT disallow /app/, so crawlers can
+         reach this tag). -->
+    <meta name="robots" content="noindex" />
    <!-- The Telegram Mini App SDK (window.Telegram.WebApp) is deliberately NOT loaded here: a
         render-blocking <script> to telegram.org hangs the whole page on a network that blocks
         telegram.org (common where Telegram itself reaches users only over a proxy), stranding even
@@ -13,7 +17,11 @@
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    />
-    <title>Scrabble</title>
+    <title>Эрудит (Скрэббл)</title>
+    <!-- Relative icon hrefs: the gateway serves the same build under /app/, /telegram/ and /vk/. -->
+    <link rel="icon" href="favicon.ico" sizes="32x32" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
  </head>
  <body>
    <div id="app"></div>
@@ -1,10 +1,51 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <!-- A normal scrollable page (no board, no Telegram SDK), so allow the browser's zoom. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>Scrabble</title>
+    <!-- The SEO head is static and Russian-only: the page is client-rendered, so this layer is
+         what non-rendering crawlers and link-preview bots (Telegram/VK use Open Graph) see. The
+         absolute URLs are the production origin on purpose — the test contour then canonicalises
+         to production instead of being indexed as a separate site. -->
+    <title>Эрудит (Скрэббл) — играть онлайн с друзьями или роботом</title>
+    <meta
+      name="description"
+      content="Бесплатная онлайн-игра в слова «Эрудит» (Скрэббл): играйте со случайным соперником, с друзьями или против робота — в Telegram, ВКонтакте или прямо в браузере."
+    />
+    <link rel="canonical" href="https://erudit-game.ru/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Эрудит" />
+    <meta property="og:title" content="Эрудит (Скрэббл) — играть онлайн" />
+    <meta property="og:description" content="Игра в слова: со случайным соперником, с друзьями или против робота." />
+    <meta property="og:url" content="https://erudit-game.ru/" />
+    <meta property="og:image" content="https://erudit-game.ru/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:locale" content="ru_RU" />
+    <meta property="og:locale:alternate" content="en_US" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <!-- Relative icon hrefs, like the in-page assets: the same build serves under any path. -->
+    <link rel="icon" href="favicon.ico" sizes="32x32" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f3f4f6" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f1115" />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "Эрудит (Скрэббл)",
+        "alternateName": "Erudit (Scrabble)",
+        "url": "https://erudit-game.ru/",
+        "image": "https://erudit-game.ru/og-image.png",
+        "description": "Бесплатная онлайн-игра в слова «Эрудит» (Скрэббл): играйте со случайным соперником, с друзьями или против робота — в Telegram, ВКонтакте или прямо в браузере.",
+        "applicationCategory": "GameApplication",
+        "operatingSystem": "Any",
+        "inLanguage": ["ru", "en"],
+        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "RUB" }
+      }
+    </script>
  </head>
  <body>
    <div id="app"></div>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect x="5.52" y="5.52" width="84.95" height="84.95" rx="10.15" fill="#D9B978" stroke="#B49559" stroke-width="3.05"/><path d="M46.51 25.06C46.51 25.06 46.51 25.06 46.51 25.06C42.72 25.06 39.47 25.9 36.76 27.58C34.04 29.26 32.13 31.57 31.01 34.51C31.01 34.51 31.01 34.51 31.01 34.51C31.01 34.51 24.25 32.27 24.25 32.27C26.01 27.96 28.78 24.71 32.54 22.52C36.3 20.33 40.98 19.23 46.58 19.23C46.58 19.23 46.58 19.23 46.58 19.23C54.6 19.23 60.87 21.61 65.4 26.36C69.94 31.12 72.2 37.69 72.2 46.08C72.2 46.08 72.2 46.08 72.2 46.08C72.2 51.64 71.19 56.47 69.18 60.57C67.16 64.68 64.23 67.84 60.38 70.06C56.53 72.28 51.93 73.38 46.58 73.38C46.58 73.38 46.58 73.38 46.58 73.38C35.97 73.38 28.38 68.75 23.8 59.49C23.8 59.49 23.8 59.49 23.8 59.49C23.8 59.49 29.63 56.58 29.63 56.58C31.34 60.06 33.63 62.76 36.5 64.66C39.36 66.57 42.6 67.52 46.21 67.52C46.21 67.52 46.21 67.52 46.21 67.52C51.51 67.52 55.82 65.83 59.15 62.46C62.47 59.09 64.37 54.54 64.84 48.81C64.84 48.81 64.84 48.81 64.84 48.81C64.84 48.81 40.42 48.81 40.42 48.81C40.42 48.81 40.42 43.06 40.42 43.06C40.42 43.06 64.84 43.06 64.84 43.06C64.32 37.36 62.46 32.93 59.26 29.78C56.06 26.63 51.81 25.06 46.51 25.06Z" fill="#1A1A1A" stroke="#1A1A1A" stroke-width="1.69"/></svg>
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onMount } from 'svelte';
  import { applyTheme } from './lib/theme';
-  import { i18n, localeFrom, setLocale, t, type Locale } from './lib/i18n/index.svelte';
+  import { i18n, setLocale, t, type Locale } from './lib/i18n/index.svelte';
  import { loadPrefs, savePrefs, type Prefs } from './lib/session';
  import { aboutContent } from './lib/aboutContent';
  import { telegramChannelLink, vkAppLink } from './lib/landing';
@@ -9,7 +9,8 @@
  // Standalone landing page, the public entry at "/" (the game SPA lives at /app/ and
  // /telegram/). It reuses the app's theme/i18n/prefs leaf modules — not the app store — so it
  // stays light. Theme is EPHEMERAL here (no auto, no persistence): it starts from the system
-  // scheme and the icon toggles light<->dark in memory. Language IS persisted (synced with the app).
+  // scheme and the icon toggles light<->dark in memory. Language IS persisted (synced with the
+  // app) but defaults to Russian, never to the browser language — see landing.ts.

  let theme = $state<'light' | 'dark'>('light');
  let langOpen = $state(false);
@@ -31,7 +32,13 @@
    prefs = await loadPrefs();
    theme = systemTheme();
    applyTheme(theme);
-    setLocale(prefs.locale ?? localeFrom(typeof navigator !== 'undefined' ? navigator.language : 'en'));
+    setLocale(prefs.locale ?? 'ru');
+  });
+
+  // Keep the document language honest for assistive tech and crawlers: the static shell
+  // declares lang="ru" (the default), and a 🌐 switch to English must follow.
+  $effect(() => {
+    document.documentElement.lang = i18n.locale;
  });

  function toggleTheme(): void {
@@ -1,7 +1,16 @@
 import { mount } from 'svelte';
 import './app.css';
+import { setLocale } from './lib/i18n/index.svelte';
 import Landing from './Landing.svelte';

 // Entry for the standalone landing page (served at "/" by the gateway; the game SPA lives at
 // /app/ and /telegram/). Mounts into the same #app node as the SPA's main.ts.
+
+// The landing always starts in Russian — the primary audience and the language of the
+// static SEO head (crawlers render with arbitrary navigator.language, e.g. Googlebot's
+// en-US, so browser detection would make the indexed content nondeterministic). Set
+// before mount so the very first paint is Russian; a saved 🌐 choice is applied in
+// Landing's onMount once prefs load.
+setLocale('ru');
+
 export default mount(Landing, { target: document.getElementById('app')! });
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect x="5.52" y="5.52" width="84.95" height="84.95" rx="10.15" fill="#D9B978" stroke="#B49559" stroke-width="3.05"/><path d="M46.51 25.06C46.51 25.06 46.51 25.06 46.51 25.06C42.72 25.06 39.47 25.9 36.76 27.58C34.04 29.26 32.13 31.57 31.01 34.51C31.01 34.51 31.01 34.51 31.01 34.51C31.01 34.51 24.25 32.27 24.25 32.27C26.01 27.96 28.78 24.71 32.54 22.52C36.3 20.33 40.98 19.23 46.58 19.23C46.58 19.23 46.58 19.23 46.58 19.23C54.6 19.23 60.87 21.61 65.4 26.36C69.94 31.12 72.2 37.69 72.2 46.08C72.2 46.08 72.2 46.08 72.2 46.08C72.2 51.64 71.19 56.47 69.18 60.57C67.16 64.68 64.23 67.84 60.38 70.06C56.53 72.28 51.93 73.38 46.58 73.38C46.58 73.38 46.58 73.38 46.58 73.38C35.97 73.38 28.38 68.75 23.8 59.49C23.8 59.49 23.8 59.49 23.8 59.49C23.8 59.49 29.63 56.58 29.63 56.58C31.34 60.06 33.63 62.76 36.5 64.66C39.36 66.57 42.6 67.52 46.21 67.52C46.21 67.52 46.21 67.52 46.21 67.52C51.51 67.52 55.82 65.83 59.15 62.46C62.47 59.09 64.37 54.54 64.84 48.81C64.84 48.81 64.84 48.81 64.84 48.81C64.84 48.81 40.42 48.81 40.42 48.81C40.42 48.81 40.42 43.06 40.42 43.06C40.42 43.06 64.84 43.06 64.84 43.06C64.32 37.36 62.46 32.93 59.26 29.78C56.06 26.63 51.81 25.06 46.51 25.06Z" fill="#1A1A1A" stroke="#1A1A1A" stroke-width="1.69"/></svg>