From 63a2ae4c0503c7c3a42c6c8909f7655c3e9fcaae Mon Sep 17 00:00:00 2001
From: kentakom1213 <kentakom1213@gmail.com>
Date: Wed, 27 May 2026 14:01:14 +0900
Subject: [PATCH 1/2] fix: modify top page information

---
 README.md                   |   8 +-
 docs/improve-seo/00-plan.md | 287 ++++++++++++++++++++++++++++++++++++
 index.html                  |  74 ++++++++--
 public/robots.txt           |   4 +
 public/sitemap.xml          |   6 +
 5 files changed, 362 insertions(+), 17 deletions(-)
 create mode 100644 docs/improve-seo/00-plan.md
 create mode 100644 public/robots.txt
 create mode 100644 public/sitemap.xml

diff --git a/README.md b/README.md
index 886b989..7590e03 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,16 @@
 
 [![Build Status](https://github.com/kentakom1213/graph-editor/workflows/CI/badge.svg)](https://github.com/kentakom1213/graph-editor/actions?workflow=CI)
 
-Graph Editor は，競技プログラミング用のグラフを直感的に作成・編集できるアプリです．
+Graph Editor is a graph creation and visualization tool for competitive programming and AtCoder.
+
+Demo: https://kentakom1213.github.io/graph-editor/
+
+Graph Editor は，競技プログラミング用のグラフを直感的に作成・編集できるグラフエディタです．
 
 頂点や辺をマウスで編集し，辺リスト形式でコピーしたり，PNG / SVG 画像として出力したりできます．
 
+It is useful as a graph editor, graph visualization tool, and graph creation tool for programming contest inputs.
+
 ![demo](./images/graph-editor-demo-v6.gif)
 
 ## 使い方
diff --git a/docs/improve-seo/00-plan.md b/docs/improve-seo/00-plan.md
new file mode 100644
index 0000000..1e8468b
--- /dev/null
+++ b/docs/improve-seo/00-plan.md
@@ -0,0 +1,287 @@
+# SEO 改善メモ for graph-editor
+
+## 背景
+
+現在，`https://kentakom1213.github.io/graph-editor/` は `site:` 検索では見つかるため，Google にまったく認識されていないわけではない．
+
+一方で，通常の検索語，たとえば `Graph Editor` や `グラフエディタ` では上位に出てこない．主な原因は次の 2 点と考えられる．
+
+- `Graph Editor` が一般名詞に近く，競合が非常に多い
+- WASM / SPA アプリのため，クローラから見える初期 HTML の本文が薄い
+
+そのため，検索エンジンに対して「これは競技プログラミング向けのグラフ作成ツールである」と静的に伝わるようにする．
+
+## 目的
+
+この修正の目的は，以下の検索語で見つかりやすくすることである．
+
+- `competitive programming graph editor`
+- `graph editor for competitive programming`
+- `AtCoder graph editor`
+- `競プロ グラフエディタ`
+- `競技プログラミング グラフ 作成`
+- `AtCoder グラフ 作成`
+
+`Graph Editor` 単体での上位表示は競合が強いため，まずは用途を含むロングテール検索での流入を狙う．
+
+## 修正方針
+
+### 1. HTML の title を用途込みにする
+
+現在の `<title>` が単に `Graph Editor` のようになっている場合，検索語として一般的すぎる．
+
+次のように，競技プログラミング向けツールであることを含める．
+
+```html
+<title>Graph Editor - Competitive Programming Graph Tool</title>
+```
+
+日本語寄りにする場合は次でもよい．
+
+```html
+<title>Graph Editor - 競技プログラミング向けグラフ作成ツール</title>
+```
+
+英語検索も拾いたいので，基本は英語を含めた前者が無難．
+
+### 2. meta description を追加する
+
+`index.html` の `<head>` に `meta description` を追加する．
+
+```html
+<meta
+  name="description"
+  content="Graph Editor is a graph creation and visualization tool for competitive programming. Create, edit, and export graphs for AtCoder and programming contests."
+/>
+```
+
+日本語も入れるなら，少し長くなるが次のようにする．
+
+```html
+<meta
+  name="description"
+  content="Graph Editor is a graph creation and visualization tool for competitive programming. 競技プログラミング向けにグラフを作成・編集・可視化できるツールです。"
+/>
+```
+
+### 3. 初期 HTML に静的な説明文を入れる
+
+WASM / SPA アプリでは，JavaScript 実行後に UI が描画されるため，検索エンジンから見える初期 HTML の本文が薄くなりやすい．
+
+`index.html` の `<body>` 内に，静的な説明文を追加する．
+
+例：
+
+```html
+<main id="app">
+  <section>
+    <h1>Graph Editor</h1>
+    <p>
+      Graph Editor is a graph creation and visualization tool for competitive
+      programming. It helps users create directed and undirected graphs, edit
+      vertices and edges, and export graphs in programming-contest input
+      formats.
+    </p>
+    <p>
+      競技プログラミング向けのグラフ作成・可視化ツールです。
+      頂点や辺を直感的に編集し、AtCoder などで使いやすい入力形式に変換できます。
+    </p>
+  </section>
+</main>
+```
+
+既存の WASM 起動処理が `#app` などを使っている場合は，既存の構造を壊さないように注意する．
+
+もし WASM 側が `body` 全体や特定の DOM を置き換える場合でも，初期 HTML に一度は説明文が含まれていればよい．
+
+### 4. noscript に説明文を入れる
+
+JavaScript が実行されない環境向けに，`<noscript>` も追加する．
+
+```html
+<noscript>
+  <section>
+    <h1>Graph Editor</h1>
+    <p>
+      Graph Editor is a graph creation and visualization tool for competitive
+      programming. Please enable JavaScript to use the interactive editor.
+    </p>
+    <p>
+      競技プログラミング向けのグラフ作成・可視化ツールです。
+      インタラクティブなエディタを利用するには JavaScript を有効にしてください。
+    </p>
+  </section>
+</noscript>
+```
+
+### 5. OGP / Twitter Card を追加する
+
+SNS やブログから共有されたときに内容が伝わりやすいように，OGP を追加する．
+
+```html
+<meta
+  property="og:title"
+  content="Graph Editor - Competitive Programming Graph Tool"
+/>
+<meta
+  property="og:description"
+  content="Create, edit, and visualize graphs for competitive programming and AtCoder."
+/>
+<meta property="og:type" content="website" />
+<meta
+  property="og:url"
+  content="https://kentakom1213.github.io/graph-editor/"
+/>
+```
+
+Twitter Card も追加する．
+
+```html
+<meta name="twitter:card" content="summary" />
+<meta
+  name="twitter:title"
+  content="Graph Editor - Competitive Programming Graph Tool"
+/>
+<meta
+  name="twitter:description"
+  content="Create, edit, and visualize graphs for competitive programming and AtCoder."
+/>
+```
+
+画像がある場合は，次も追加する．
+
+```html
+<meta
+  property="og:image"
+  content="https://kentakom1213.github.io/graph-editor/ogp.png"
+/>
+<meta
+  name="twitter:image"
+  content="https://kentakom1213.github.io/graph-editor/ogp.png"
+/>
+```
+
+### 6. canonical URL を追加する
+
+URL の正規化のため，`canonical` を追加する．
+
+```html
+<link rel="canonical" href="https://kentakom1213.github.io/graph-editor/" />
+```
+
+末尾スラッシュありに統一する．
+
+### 7. README から GitHub Pages へのリンクを目立たせる
+
+GitHub リポジトリ側は検索に出やすいため，README の上部にデモリンクを置く．
+
+例：
+
+```markdown
+# Graph Editor
+
+Graph Editor is a graph creation and visualization tool for competitive programming.
+
+Demo: https://kentakom1213.github.io/graph-editor/
+
+## Features
+
+- Create and edit vertices and edges interactively
+- Visualize directed and undirected graphs
+- Export graphs for programming contest inputs
+- Useful for AtCoder and competitive programming
+```
+
+README にも次の語を自然に含める．
+
+- `competitive programming`
+- `AtCoder`
+- `graph editor`
+- `graph visualization`
+- `graph creation tool`
+
+### 8. サイト内に GitHub リポジトリへのリンクを置く
+
+アプリ画面内，または初期 HTML の説明文中に GitHub リポジトリへのリンクを置く．
+
+```html
+<p>
+  Source code is available on
+  <a href="https://github.com/kentakom1213/graph-editor">GitHub</a>.
+</p>
+```
+
+これにより，GitHub Pages と GitHub リポジトリの関連が検索エンジンに伝わりやすくなる．
+
+### 9. sitemap.xml を追加する
+
+`public/sitemap.xml` など，ビルド後にルートへ配置される場所に sitemap を追加する．
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://kentakom1213.github.io/graph-editor/</loc>
+  </url>
+</urlset>
+```
+
+### 10. robots.txt を追加する
+
+`robots.txt` を追加し，クロールを許可する．
+
+```txt
+User-agent: *
+Allow: /
+
+Sitemap: https://kentakom1213.github.io/graph-editor/sitemap.xml
+```
+
+## 期待する変更ファイル
+
+想定される変更ファイルは次の通り．
+
+```txt
+index.html
+public/sitemap.xml
+public/robots.txt
+README.md
+```
+
+プロジェクト構成によっては，`index.html` や `public/` の位置は適宜読み替える．
+
+## 実装時の注意
+
+既存の WASM / eframe / trunk の起動処理を壊さないこと．
+
+特に，次の点に注意する．
+
+- WASM が mount する要素の `id` を変更しない
+- 既存の `script` タグを削除しない
+- `base` タグがある場合，GitHub Pages のサブパス `/graph-editor/` で壊れないようにする
+- `og:url`，`canonical`，`sitemap.xml` の URL は末尾スラッシュありで統一する
+
+## 完了条件
+
+次の状態になっていれば完了とする．
+
+- `index.html` に適切な `<title>` がある
+- `index.html` に `meta description` がある
+- 初期 HTML に，競技プログラミング向けグラフエディタであることを説明する静的本文がある
+- OGP / Twitter Card が設定されている
+- `canonical` が設定されている
+- `sitemap.xml` が追加されている
+- `robots.txt` が追加されている
+- README の上部から公開ページへリンクされている
+
+## 修正後に行うこと
+
+修正をデプロイした後，Google Search Console で以下を行う．
+
+1. `https://kentakom1213.github.io/graph-editor/` を URL 検査する
+2. インデックス登録をリクエストする
+3. `sitemap.xml` を送信する
+4. 数日後に `site:kentakom1213.github.io/graph-editor` で反映を確認する
+
+検索順位の改善には時間がかかるため，デプロイ直後に通常検索で上位表示されるとは限らない．
+まずは `site:` 検索で title / description が期待通りに見えるかを確認する．
diff --git a/index.html b/index.html
index 2b35856..bdff646 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,34 @@
 <!DOCTYPE html>
-<html>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-  <!-- Disable zooming: -->
-  <!-- <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1.0, user-scalable=no"
-  /> -->
-
+<html lang="en">
   <head>
-    <!-- change this to your project name -->
-    <title>Graph Editor</title>
+    <meta charset="utf-8" />
+    <!-- Disable zooming: -->
+    <!-- <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    /> -->
+
+    <title>Graph Editor - Competitive Programming Graph Tool</title>
     <meta
       name="description"
-      content="A graph creation and visualization tool for competitive programming. Create directed/undirected graphs with ease.｜競技プログラミング向けのグラフ作成・可視化ツール。直感的な操作で有向・無向グラフを作成できます。"
+      content="Graph Editor is a graph creation and visualization tool for competitive programming. Create, edit, and export graphs for AtCoder and programming contests."
     />
     <meta
       name="keywords"
       content="graph editor, competitive programming, algorithm, visualization, test case generator, directed graph, undirected graph, グラフエディタ, 競技プログラミング, 競プロ, アルゴリズム, 可視化, テストケース, 有向グラフ, 無向グラフ"
     />
+    <link rel="canonical" href="https://kentakom1213.github.io/graph-editor/" />
     <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
 
     <!-- OGP設定 -->
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="Graph Editor" />
+    <meta
+      property="og:title"
+      content="Graph Editor - Competitive Programming Graph Tool"
+    />
     <meta
       property="og:description"
-      content="Simple graph generation application"
+      content="Create, edit, and visualize graphs for competitive programming and AtCoder."
     />
     <meta
       property="og:url"
@@ -39,10 +41,13 @@
 
     <!-- Twitter用のmetaタグ (X) -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Graph Editor" />
+    <meta
+      name="twitter:title"
+      content="Graph Editor - Competitive Programming Graph Tool"
+    />
     <meta
       name="twitter:description"
-      content="Simple graph generation application"
+      content="Create, edit, and visualize graphs for competitive programming and AtCoder."
     />
     <meta
       name="twitter:image"
@@ -58,6 +63,8 @@
 
     <link data-trunk rel="copy-file" href="assets/sw.js" />
     <link data-trunk rel="copy-file" href="assets/manifest.json" />
+    <link data-trunk rel="copy-file" href="public/sitemap.xml" />
+    <link data-trunk rel="copy-file" href="public/robots.txt" />
     <link
       data-trunk
       rel="copy-file"
@@ -196,6 +203,41 @@
   </head>
 
   <body>
+    <main id="seo-content">
+      <section>
+        <h1>Graph Editor</h1>
+        <p>
+          Graph Editor is a graph creation and visualization tool for
+          competitive programming. It helps users create directed and
+          undirected graphs, edit vertices and edges, and export graphs in
+          programming-contest input formats.
+        </p>
+        <p>
+          競技プログラミング向けのグラフ作成・可視化ツールです．頂点や辺を直感的に編集し，AtCoder
+          などで使いやすい入力形式に変換できます．
+        </p>
+        <p>
+          Source code is available on
+          <a href="https://github.com/kentakom1213/graph-editor">GitHub</a>.
+        </p>
+      </section>
+    </main>
+
+    <noscript>
+      <section>
+        <h1>Graph Editor</h1>
+        <p>
+          Graph Editor is a graph creation and visualization tool for
+          competitive programming. Please enable JavaScript to use the
+          interactive editor.
+        </p>
+        <p>
+          競技プログラミング向けのグラフ作成・可視化ツールです．インタラクティブなエディタを利用するには
+          JavaScript を有効にしてください．
+        </p>
+      </section>
+    </noscript>
+
     <!-- The WASM code will resize the canvas dynamically -->
     <!-- the id is hardcoded in main.rs . so, make sure both match. -->
     <canvas id="the_canvas_id"></canvas>
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..8cf434a
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://kentakom1213.github.io/graph-editor/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 0000000..69b399b
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://kentakom1213.github.io/graph-editor/</loc>
+  </url>
+</urlset>

From 1f9a599196b273006b8159a1d432c06957a42a69 Mon Sep 17 00:00:00 2001
From: kentakom1213 <kentakom1213@gmail.com>
Date: Wed, 27 May 2026 14:14:21 +0900
Subject: [PATCH 2/2] fix: modify index.html

---
 README.md                     |   4 +-
 docs/improve-seo/01-modify.md | 303 ++++++++++++++++++++++++++++++++++
 index.html                    |  20 +--
 3 files changed, 312 insertions(+), 15 deletions(-)
 create mode 100644 docs/improve-seo/01-modify.md

diff --git a/README.md b/README.md
index 7590e03..3ce0136 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,12 @@
 
 [![Build Status](https://github.com/kentakom1213/graph-editor/workflows/CI/badge.svg)](https://github.com/kentakom1213/graph-editor/actions?workflow=CI)
 
-Graph Editor is a graph creation and visualization tool for competitive programming and AtCoder.
+Graph Editor is a graph creation and visualization tool for competitive programming.
 
 Demo: https://kentakom1213.github.io/graph-editor/
 
+Useful for creating graphs for AtCoder and programming contests.
+
 Graph Editor は，競技プログラミング用のグラフを直感的に作成・編集できるグラフエディタです．
 
 頂点や辺をマウスで編集し，辺リスト形式でコピーしたり，PNG / SVG 画像として出力したりできます．
diff --git a/docs/improve-seo/01-modify.md b/docs/improve-seo/01-modify.md
new file mode 100644
index 0000000..da639b2
--- /dev/null
+++ b/docs/improve-seo/01-modify.md
@@ -0,0 +1,303 @@
+# PR-37 追加 SEO 修正指示
+
+## 背景
+
+PR-37 により，`https://kentakom1213.github.io/graph-editor/pr-37/` の初期 HTML に，検索エンジンから読める静的な説明文が追加された．
+
+現在，初期 HTML から次の内容が確認できる．
+
+- `Graph Editor` の見出し
+- 英語の説明文
+- 日本語の説明文
+- GitHub リポジトリへのリンク
+- JavaScript 無効時向けの説明
+- `Loading…`
+
+これは，修正前に比べてかなり良い状態である．一方で，通常説明と `noscript` 用説明がどちらもテキストとして見えており，`Graph Editor` の見出しと説明文がやや重複している．また，PR プレビュー URL と本番 URL の扱いを明確にしておく必要がある．
+
+## 目的
+
+この追加修正では，以下を目的とする．
+
+- 静的説明文の重複を減らす
+- 本番 URL を canonical として明示する
+- PR プレビュー URL が検索結果に出ないようにする
+- `sitemap.xml` と `robots.txt` を本番 URL 基準で整える
+- 既存の WASM / trunk / eframe の起動処理を壊さない
+
+## 追加修正 1: 通常説明と noscript 説明の重複を整理する
+
+現在，初期 HTML 上で `Graph Editor` 見出しが 2 回出ている．
+
+通常の静的説明と `noscript` 説明がほぼ同じ内容になっているため，検索エンジンから見た本文がやや重複気味である．
+
+通常表示用の説明は詳しめに残し，`noscript` 側は短くする．
+
+例：
+
+```html
+<main id="app">
+  <section class="seo-description">
+    <h1>Graph Editor</h1>
+    <p>
+      Graph Editor is a graph creation and visualization tool for competitive
+      programming. It helps users create directed and undirected graphs, edit
+      vertices and edges, and export graphs in programming-contest input
+      formats.
+    </p>
+    <p>
+      競技プログラミング向けのグラフ作成・可視化ツールです．
+      頂点や辺を直感的に編集し，AtCoder などで使いやすい入力形式に変換できます．
+    </p>
+    <p>
+      Source code is available on
+      <a href="https://github.com/kentakom1213/graph-editor">GitHub</a>.
+    </p>
+  </section>
+</main>
+
+<noscript>
+  <p>
+    Please enable JavaScript to use Graph Editor. JavaScript を有効にすると
+    Graph Editor を利用できます．
+  </p>
+</noscript>
+```
+
+重要なのは，`noscript` 内に再度 `<h1>Graph Editor</h1>` を置かないこと．
+`h1` は通常説明側の 1 個に寄せる．
+
+## 追加修正 2: canonical URL を本番 URL に固定する
+
+PR プレビュー URL は，
+
+```txt
+https://kentakom1213.github.io/graph-editor/pr-37/
+```
+
+である．
+
+しかし，検索エンジンに正規ページとして扱ってほしいのは本番 URL である．
+
+```txt
+https://kentakom1213.github.io/graph-editor/
+```
+
+そのため，`index.html` の `<head>` に次を入れる．
+
+```html
+<link rel="canonical" href="https://kentakom1213.github.io/graph-editor/" />
+```
+
+PR プレビューでも本番でも，canonical は本番 URL を指すようにする．
+
+## 追加修正 3: PR プレビューを noindex にする
+
+PR プレビューは確認用であり，検索結果に出てほしくない．
+
+可能であれば，PR プレビュー環境のみ次を追加する．
+
+```html
+<meta name="robots" content="noindex, nofollow" />
+```
+
+ただし，本番ページにはこのタグを入れてはいけない．
+
+本番ページに `noindex` が入ると，検索結果から除外される可能性がある．
+
+実装方針は，ビルド時の環境変数で切り替えるのがよい．
+
+例：
+
+```html
+<!-- PR preview only -->
+<meta name="robots" content="noindex, nofollow" />
+```
+
+もし環境ごとの HTML 差し替えが難しい場合は，少なくとも canonical を本番 URL に向ける．
+
+優先度は次の通り．
+
+1. 本番に `noindex` を絶対に入れない
+2. PR プレビューには `noindex` を入れる
+3. すべての環境で canonical は本番 URL に向ける
+
+## 追加修正 4: OGP URL も本番 URL に固定する
+
+`og:url` が PR プレビュー URL になっている場合，本番 URL に修正する．
+
+```html
+<meta
+  property="og:url"
+  content="https://kentakom1213.github.io/graph-editor/"
+/>
+```
+
+合わせて，タイトルと説明は次のようにする．
+
+```html
+<meta
+  property="og:title"
+  content="Graph Editor - Competitive Programming Graph Tool"
+/>
+<meta
+  property="og:description"
+  content="Create, edit, and visualize graphs for competitive programming and AtCoder."
+/>
+<meta property="og:type" content="website" />
+<meta
+  property="og:url"
+  content="https://kentakom1213.github.io/graph-editor/"
+/>
+```
+
+Twitter Card も同様に設定する．
+
+```html
+<meta name="twitter:card" content="summary" />
+<meta
+  name="twitter:title"
+  content="Graph Editor - Competitive Programming Graph Tool"
+/>
+<meta
+  name="twitter:description"
+  content="Create, edit, and visualize graphs for competitive programming and AtCoder."
+/>
+```
+
+## 追加修正 5: sitemap.xml を本番 URL だけにする
+
+`sitemap.xml` は本番 URL のみを載せる．
+PR プレビュー URL は載せない．
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://kentakom1213.github.io/graph-editor/</loc>
+  </url>
+</urlset>
+```
+
+配置先は，ビルド後に次でアクセスできる場所にする．
+
+```txt
+https://kentakom1213.github.io/graph-editor/sitemap.xml
+```
+
+## 追加修正 6: robots.txt を本番 URL 基準にする
+
+`robots.txt` はクロールを許可し，sitemap を明示する．
+
+```txt
+User-agent: *
+Allow: /
+
+Sitemap: https://kentakom1213.github.io/graph-editor/sitemap.xml
+```
+
+配置先は，ビルド後に次でアクセスできる場所にする．
+
+```txt
+https://kentakom1213.github.io/graph-editor/robots.txt
+```
+
+ただし，GitHub Pages のサブパス配信では，`robots.txt` の扱いがルートパスと混ざる可能性があるため，実際にデプロイ後の URL でアクセスできるか確認すること．
+
+## 追加修正 7: hidden にしすぎない
+
+静的説明文を完全に `display: none` にすると，検索エンジンから不自然に見える可能性がある．
+
+WASM 起動前に表示され，起動後にアプリ UI に置き換わる程度なら問題ない．
+
+避けたい例：
+
+```css
+.seo-description {
+  display: none;
+}
+```
+
+許容しやすい例：
+
+```css
+.seo-description {
+  padding: 1rem;
+}
+```
+
+または，WASM の初期化後にアプリが自然に置き換える構造にする．
+
+## 追加修正 8: README のデモリンク文言を検索語に寄せる
+
+README の冒頭に，本番ページへのリンクを置く．
+
+```markdown
+# Graph Editor
+
+Graph Editor is a graph creation and visualization tool for competitive programming.
+
+Demo: https://kentakom1213.github.io/graph-editor/
+
+Useful for creating graphs for AtCoder and programming contests.
+```
+
+`Demo` だけでなく，`competitive programming`，`AtCoder`，`graph creation` が自然に入るようにする．
+
+## 期待する変更ファイル
+
+想定される変更ファイルは次の通り．
+
+```txt
+index.html
+public/sitemap.xml
+public/robots.txt
+README.md
+```
+
+プロジェクト構成によっては，`public/` のパスは実際の trunk / GitHub Pages の配置に合わせて読み替える．
+
+## 完了条件
+
+次を満たせば完了とする．
+
+- 初期 HTML に静的な英語説明と日本語説明がある
+- `<h1>Graph Editor</h1>` が重複していない
+- `<meta name="description">` がある
+- `<link rel="canonical">` が本番 URL を指している
+- `og:url` が本番 URL を指している
+- PR プレビューに `noindex` を入れられる場合は入っている
+- 本番ページには `noindex` が入っていない
+- `sitemap.xml` に PR プレビュー URL が含まれていない
+- `robots.txt` が sitemap を指している
+- README 冒頭に本番デモリンクがある
+
+## 確認コマンド例
+
+デプロイ後，次を確認する．
+
+```bash
+curl -L https://kentakom1213.github.io/graph-editor/ | grep -i "canonical"
+curl -L https://kentakom1213.github.io/graph-editor/ | grep -i "description"
+curl -L https://kentakom1213.github.io/graph-editor/ | grep -i "noindex"
+curl -L https://kentakom1213.github.io/graph-editor/sitemap.xml
+curl -L https://kentakom1213.github.io/graph-editor/robots.txt
+```
+
+本番ページで `noindex` が出てこないことを必ず確認する．
+
+```bash
+curl -L https://kentakom1213.github.io/graph-editor/ | grep -i "noindex"
+```
+
+このコマンドで何も出なければよい．
+
+## 優先度
+
+最優先は次の 3 点である．
+
+1. 本番ページに `noindex` を入れない
+2. canonical / OGP / sitemap を本番 URL に統一する
+3. 静的説明文の重複を減らす
+
+この 3 点ができていれば，PR-37 の SEO 改善としては十分に良い状態になる．
diff --git a/index.html b/index.html
index bdff646..67bf2dd 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@
     />
 
     <!-- Twitter用のmetaタグ (X) -->
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:card" content="summary" />
     <meta
       name="twitter:title"
       content="Graph Editor - Competitive Programming Graph Tool"
@@ -204,7 +204,7 @@
 
   <body>
     <main id="seo-content">
-      <section>
+      <section class="seo-description">
         <h1>Graph Editor</h1>
         <p>
           Graph Editor is a graph creation and visualization tool for
@@ -224,18 +224,10 @@ <h1>Graph Editor</h1>
     </main>
 
     <noscript>
-      <section>
-        <h1>Graph Editor</h1>
-        <p>
-          Graph Editor is a graph creation and visualization tool for
-          competitive programming. Please enable JavaScript to use the
-          interactive editor.
-        </p>
-        <p>
-          競技プログラミング向けのグラフ作成・可視化ツールです．インタラクティブなエディタを利用するには
-          JavaScript を有効にしてください．
-        </p>
-      </section>
+      <p>
+        Please enable JavaScript to use Graph Editor. JavaScript を有効にすると
+        Graph Editor を利用できます．
+      </p>
     </noscript>
 
     <!-- The WASM code will resize the canvas dynamically -->