Add SEO, social meta, and the AM logo

New brand mark: "AM" in the wordmark's Noto Sans JP bold on the
primary blue, generated at every needed size (favicon, 192/512 app
icons, apple-touch, and a 1200x630 Open Graph card) and shown beside
the wordmark in the desktop and mobile headers.

SEO layer: meta description, Open Graph + Twitter card tags, canonical
URL, theme-color, WebApplication JSON-LD, web manifest, robots.txt,
and a sitemap. A SeoService keeps description/OG/canonical in sync
with the active route from per-route data; the production origin
lives in one config constant for an easy custom-domain swap later.
2 new e2e specs (35 total).

Author: hazeliscoding

README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src="public/icon-192.png" width="96" alt="AniMatch logo"></p>
+
 <h1 align="center">AniMatch</h1>
 
 Compare anime taste between [AniList](https://anilist.co) users. One place that answers: **how compatible are we, where do we disagree, and what should we watch together?**

e2e/seo.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test('meta description, canonical, and og:url track the route', async ({ page }) => {
+  await page.goto('/backlog');
+  await expect(page).toHaveTitle(/Shared backlog — AniMatch/);
+  await expect(page.locator('meta[name="description"]')).toHaveAttribute(
+    'content',
+    /plan-to-watch lists/,
+  );
+  await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /\/backlog$/);
+  await expect(page.locator('meta[property="og:url"]')).toHaveAttribute('content', /\/backlog$/);
+
+  // navigating updates the tags
+  await page
+    .getByRole('navigation', { name: 'Global navigation' })
+    .getByRole('link', { name: 'Groups' })
+    .click();
+  await expect(page.locator('meta[name="description"]')).toHaveAttribute('content', /watch club/);
+  await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /\/groups$/);
+});
+
+test('social cards and icons are declared', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute('content', /og-image\.png$/);
+  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute('content', 'summary_large_image');
+  await expect(page.locator('link[rel="manifest"]')).toHaveAttribute('href', 'site.webmanifest');
+  await expect(page.locator('link[rel="icon"][sizes="32x32"]')).toHaveAttribute('href', 'favicon-32.png');
+  await expect(page.locator('script[type="application/ld+json"]')).toHaveCount(1);
+});

public/apple-touch-icon.png

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+Disallow: /auth/
+
+Sitemap: https://animatch-hazels-projects-ebc086d4.vercel.app/sitemap.xml

public/favicon-32.png

@@ -0,0 +1,13 @@
+{
+  "name": "AniMatch",
+  "short_name": "AniMatch",
+  "description": "Compare AniList profiles to see how compatible your anime taste is and what to watch together.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f4f5f7",
+  "theme_color": "#0f57c2",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}