feat: add og description\image\etc

docs/backlog.md

@@ -227,7 +227,15 @@
       переименований уже опубликованных страниц; клонов с canonical не делать
       (`docs/plan-seo.md` §5)
 - [ ] sitemap.xml из реестра + `Sitemap:` в robots.txt (S1b/S1c)
-- [ ] Seo.svelte: canonical + OG-теги, per-tool OG-картинки (S1d/S1e)
+- [ ] Seo.svelte: per-tool OG-картинки (S1e) — у каждой страницы инструмента
+      своя превью-карточка 1200×630 для соцсетей/мессенджеров: имя инструмента,
+      бренд, иконка. Сейчас все страницы ссылаются на общую
+      `static/og/default.png` (генерирует `pnpm --dir web gen:og` —
+      Playwright-скриншот HTML-карточки в `web/scripts/gen-og.mjs`). Что делать:
+      расширить gen-og.mjs — проход по реестру страниц, карточка с названием
+      инструмента в `static/og/[slug].png`, в `Seo.svelte` подставлять og-URL по
+      slug страницы. Критерий приёмки: у `/tools/flip-png` в og:image своя
+      картинка с названием инструмента, файл лежит в `static/og/`
 - [ ] контент страницы инструмента: seo-блок в словарях, how-to/FAQ/related (S2)
 - [ ] JSON-LD (SoftwareApplication/FAQPage/Breadcrumb) + llms.txt (S3)
 - [ ] дистрибуция: закрепить репо, alternative.to, Product Hunt, Reddit/HN (S4c)

web/package.json

@@ -14,6 +14,7 @@
 		"test:coverage": "vitest run --coverage",
 		"test:rules": "vitest run eslint-plugins/__tests__",
 		"test:e2e": "playwright test",
+		"gen:og": "node scripts/gen-og.mjs",
 		"format": "prettier --write . --log-level warn --cache",
 		"format:check": "prettier --check . --log-level warn --cache",
 		"lint": "eslint .",

web/scripts/gen-og.mjs

@@ -0,0 +1,56 @@
+// Генерирует static/og/default.png — дефолтная OG-карточка 1200×630.
+// Запуск: pnpm --dir web gen:og. Карточка рисуется в браузере (текст, иконки),
+// per-tool карточки — этим же harness позже (docs/plan-seo.md S1e).
+import { mkdirSync } from "node:fs";
+import { chromium } from "playwright";
+
+const W = 1200;
+const H = 630;
+
+const IMAGE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`;
+
+function cardHtml() {
+	return `<!doctype html><html><body style="margin:0">
+	<div style="
+		width:${W}px;height:${H}px;box-sizing:border-box;
+		background:#0a120c;
+		background-image:linear-gradient(#12281a 1px, transparent 1px),linear-gradient(90deg,#12281a 1px, transparent 1px);
+		background-size:40px 40px;
+		display:flex;align-items:center;justify-content:space-between;
+		padding:80px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
+		border:3px solid #16a34a;
+	">
+		<div>
+			<div style="
+				width:72px;height:72px;background:#86efac;color:#052e16;
+				display:flex;align-items:center;justify-content:center;
+				font-size:34px;font-weight:700;margin-bottom:32px;
+			">EP</div>
+			<div style="color:#86efac;font-size:56px;font-weight:700;letter-spacing:-1px;">easy-png-tools</div>
+			<div style="color:#a7c4b1;font-size:28px;margin-top:24px;">PNG utilities right in your browser</div>
+			<div style="color:#4d7c5f;font-size:22px;margin-top:16px;">Convert · Crop · Resize — locally, no uploads</div>
+		</div>
+		<div style="
+			color:#86efac;width:300px;height:300px;border:3px solid #16a34a;
+			background:#0f1f14;display:flex;align-items:center;justify-content:center;
+		"><div style="width:240px;height:240px;">${IMAGE_ICON}</div></div>
+	</div>
+</body></html>`;
+}
+
+mkdirSync(new URL("../static/og/", import.meta.url), { recursive: true });
+
+const browser = await chromium.launch();
+try {
+	const page = await browser.newPage({ viewport: { width: W, height: H } });
+	await page.setContent(cardHtml());
+	await page.screenshot({
+		path: new URL("../static/og/default.png", import.meta.url).pathname.replace(
+			/^\/([A-Za-z]:)/,
+			"$1",
+		),
+	});
+	console.log(`og/default.png written (${W}x${H})`);
+} finally {
+	await browser.close();
+}

web/src/lib/components/Seo.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { SITE_URL } from "$lib/seo";
+
+	interface Props {
+		title: string;
+		description: string;
+		/** Путь страницы от корня роутера ("/", "/list-tools", "/tools/…"). */
+		path: string;
+	}
+	let { title, description, path }: Props = $props();
+
+	const url = $derived(`${SITE_URL}${path}`);
+	const image = `${SITE_URL}/og/default.png`;
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<link rel="canonical" href={url} />
+	<meta property="og:type" content="website" />
+	<meta property="og:site_name" content="easy-png-tools" />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:url" content={url} />
+	<meta property="og:image" content={image} />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<meta name="twitter:image" content={image} />
+</svelte:head>

web/src/lib/seo.ts

@@ -0,0 +1,6 @@
+/**
+ * Публичный URL сайта для canonical/OG (абсолютные URL, включая base-path
+ * GitHub Pages). После покупки домена меняется здесь — `docs/plan-seo.md` §6.
+ * Внимание: `$app/paths.base` для этого не подходит — он относительный.
+ */
+export const SITE_URL = "https://ku6epxboctuk.github.io/easy-png-tools";

web/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import CatalogHeader from "$lib/components/catalog/CatalogHeader.svelte";
 	import CatalogToolbar from "$lib/components/catalog/CatalogToolbar.svelte";
 	import ToolCard from "$lib/components/catalog/ToolCard.svelte";
+	import Seo from "$lib/components/Seo.svelte";
 	import { favFirst, isFav } from "$lib/favorites.svelte";
 	import {
 		pageDescription,
@@ -37,9 +38,7 @@
 	);
 </script>
 
-<svelte:head>
-	<title>{t("home.defaultTitle")}</title>
-</svelte:head>
+<Seo title={t("home.defaultTitle")} description={t("home.heroLead")} path="/" />
 
 <div class="catalog-page">
 	<CatalogHeader total={PREVIEW_TOTAL} />

web/src/routes/list-tools/+page.svelte

@@ -4,6 +4,7 @@
 	import CatalogHeader from "$lib/components/catalog/CatalogHeader.svelte";
 	import CatalogToolbar from "$lib/components/catalog/CatalogToolbar.svelte";
 	import ToolCard from "$lib/components/catalog/ToolCard.svelte";
+	import Seo from "$lib/components/Seo.svelte";
 	import { favFirst, isFav } from "$lib/favorites.svelte";
 	import {
 		pageDescription,
@@ -37,10 +38,11 @@
 	);
 </script>
 
-<svelte:head>
-	<title>{t("catalog.pageTitle")}</title>
-	<meta name="description" content={t("catalog.metaDescription")} />
-</svelte:head>
+<Seo
+	title={t("catalog.pageTitle")}
+	description={t("catalog.metaDescription")}
+	path="/list-tools"
+/>
 
 <div class="catalog-page">
 	<CatalogHeader total={PREVIEW_TOTAL} />

web/src/routes/tools/[slug]/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import EmptyState from "$lib/components/feedback/EmptyState.svelte";
 	import SchemaToolView from "$lib/components/schema/SchemaToolView.svelte";
+	import Seo from "$lib/components/Seo.svelte";
+	import { pageDescription, pageTitle } from "$lib/i18n/schema-tool-strings";
 	import { t } from "$lib/i18n/t";
 	import { getPageBySlug, getTool } from "$lib/registry";
 	import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
@@ -14,8 +16,17 @@
 	const tool = $derived(page ? getTool(page.steps[0].id) : undefined);
 </script>
 
+{#if page}
+	<Seo
+		title={`easy-png-tools / ${pageTitle(page)}`}
+		description={pageDescription(page)}
+		path={`/tools/${page.slug}`}
+	/>
+{/if}
 <svelte:head>
-	<title>easy-png-tools / {page?.title ?? t("toolPage.fallbackTitle")}</title>
+	{#if !page}
+		<title>easy-png-tools / {t("toolPage.fallbackTitle")}</title>
+	{/if}
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>