Clarify SEO descriptions and repository guidance

.github/workflows/validate.yml

@@ -0,0 +1,27 @@
+name: Validate library
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+permissions:
+  contents: read
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: site
+    steps:
+      - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: site/package-lock.json
+      - run: npm ci
+      - run: npm run build
+      - run: npm run test:prompts
+      - run: npm run test:library
+      - run: npm run test:sites
+      - run: npm run test:seo

README.md

@@ -19,7 +19,9 @@ The English interface on the live site. Samples share one subject and scene so y
 
 The site does not generate images. It offers English and Japanese explanations; copy-ready prompts remain English in both interfaces. The language choice is remembered locally, and `?lang=en` or `?lang=ja` overrides it.
 
-The catalog includes six original techniques, eleven anime illustration treatments, ten light-novel treatments, ten quiet literary looks, seven photographic looks, fifteen general-fiction illustration treatments, and sixteen manga/comic treatments. The photographic collection includes cinematic mystery and uneasy daylight horror. Four further manga variations explore stronger pen hatching, round-faced matte color, bold scruffy ink, and crisp cel shadows with hair highlights. Five adult editorial treatments explore reportage spot ink, loose contours with flat color, broad oil pastel, blue ballpoint with a warm accent, and hand-stippled duotone. Five bold design variations use cutout silhouettes, stretched editorial symbols, chunky wax shapes, sparse continuous lines, and modular shapes with oversized dots to visibly reduce face, clothing, and background detail. An adult everyday cel-animation option adds natural proportions, fine outlines, restrained cel shadows, and observed everyday backgrounds. Earlier looks remain available; variations can overlap rather than representing completely separate styles. Density choices include intentionally sparse drawing as well as rich detail.
+The catalog covers watercolor and other original techniques, anime, manga/comics, light-novel illustration, literary illustration, photography, and general-fiction illustration. Filter by visual family or choose a detail density, from deliberately sparse drawing to rich detail. All 75 existing styles remain available; some visual treatments overlap.
+
+日本語でも絵柄の説明・検索・比較を利用できます。コピーするプロンプトは英語です。[日本語のライブラリ](https://avsl.4roz.com/?lang=ja)で絵柄を選び、自分の画像生成AIに貼り付けて使ってください。
 
 ## What the samples demonstrate
 
@@ -53,6 +55,10 @@ npm run test:seo
 
 The crawl files live in `site/public/sitemap.xml` and `site/public/robots.txt`; Vite copies them into `dist/client` as static files. The sitemap currently contains only `https://avsl.4roz.com/`. Language (`?lang=ja/en`), style (`?style=…`), comparison queries, and section fragments are views of that same canonical page, not separate indexable pages. When real static pages with self canonicals are added, update the sitemap with their canonical URLs. `test:seo` compares the sitemap with the built indexable HTML pages and checks the robots reference and Sites asset handling. Omit `lastmod` unless an actual content modification date is available.
 
+The page title stays **AI Visual Style Library** in both display languages. The initial HTML provides an English description and Open Graph/Twitter sharing metadata; switching languages updates the descriptions in the browser. This remains one query-based app, so it does not expose separate Japanese and English indexable pages. Metadata improves the description of the site; search rankings and traffic must be measured separately.
+
+The larger bilingual static-page prototype is preserved on [`archive/bilingual-static-seo-prototype`](https://github.com/yo4e/AI-Visual-Style-Library/tree/archive/bilingual-static-seo-prototype) for future evaluation. It is not part of the current app.
+
 ## Update samples and publish
 
 Finalize the English style and scene instructions before generation. Generate a separate sample for each treatment using its exact combined text, inspect it against the intended line/form/shading traits, and record the submitted prompt and source/output hashes. Keep unrelated examples and existing provenance intact. `npm run export:prompts` refreshes the Markdown prompt library. Integrity tests compare the current prompt text and served image bytes with the manifest.

site/index.html

@@ -3,11 +3,25 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Explore 75 visual styles for image generation. Compare samples and copy English prompts, with English and Japanese descriptions." />
+    <meta name="description" content="Compare 75 image-generation styles, from watercolor to manga and photography. Copy English style and scene prompts, with English and Japanese descriptions." />
     <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="canonical" href="https://avsl.4roz.com/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="AI Visual Style Library" />
+    <meta property="og:title" content="AI Visual Style Library" />
+    <meta property="og:description" content="Compare 75 image-generation styles, from watercolor to manga and photography. Copy English style and scene prompts, with English and Japanese descriptions." />
+    <meta property="og:url" content="https://avsl.4roz.com/" />
+    <meta property="og:image" content="https://avsl.4roz.com/images/watercolor.webp" />
+    <meta property="og:image:width" content="960" />
+    <meta property="og:image:height" content="540" />
+    <meta property="og:image:alt" content="Watercolor benchmark: a woman in a red coat studying a map on a train platform." />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="AI Visual Style Library" />
+    <meta name="twitter:description" content="Compare 75 image-generation styles, from watercolor to manga and photography. Copy English style and scene prompts, with English and Japanese descriptions." />
+    <meta name="twitter:image" content="https://avsl.4roz.com/images/watercolor.webp" />
+    <meta name="twitter:image:alt" content="Watercolor benchmark: a woman in a red coat studying a map on a train platform." />
     <meta name="theme-color" content="#ffffff" />
     <title>AI Visual Style Library</title>
   </head>

site/src/i18n.jsx

@@ -110,8 +110,8 @@ export function LanguageProvider({children}) {
  useEffect(()=>{
   document.documentElement.lang=locale;
   document.title='AI Visual Style Library';
-  const description=document.querySelector('meta[name="description"]');
-  if(description)description.content=locale==='ja'?'画像生成に使える75種類の絵柄。コピー用プロンプトは英語、説明は日本語と英語で切替。':'Explore 75 visual styles for image generation. Compare samples and copy English prompts, with English and Japanese descriptions.';
+  const description=locale==='ja'?'水彩・漫画・写真など75種類の絵柄を見本で比較。絵柄と人物・場面・構図の英語プロンプトを別々にコピーして、自分の画像生成AIで使えます。説明は日本語・英語に対応。':'Compare 75 image-generation styles, from watercolor to manga and photography. Copy English style and scene prompts, with English and Japanese descriptions.';
+  document.querySelectorAll('meta[name="description"], meta[property="og:description"], meta[name="twitter:description"]').forEach(meta=>{meta.content=description});
   try{localStorage.setItem('visual-style-language',locale)}catch{}
  },[locale]);
  function changeLanguage(next){setLocale(next);const url=new URL(window.location.href);if(url.searchParams.has('lang')){url.searchParams.set('lang',next);window.history.replaceState({},'',url.pathname+url.search+url.hash)}}