Skip to content

SEO対策: メタタグ・OGP・構造化データの追加 (#55)#56

Merged
sugama-satsuki merged 2 commits intomainfrom
update/55-seo-meta-tags
Mar 17, 2026
Merged

SEO対策: メタタグ・OGP・構造化データの追加 (#55)#56
sugama-satsuki merged 2 commits intomainfrom
update/55-seo-meta-tags

Conversation

@sugama-satsuki
Copy link
Collaborator

@sugama-satsuki sugama-satsuki commented Mar 17, 2026

Summary

Closes #55

  • <html lang="en"><html lang="ja"> に変更
  • <title> を「GeoJSON Maker - 地図上でGeoJSONを作成・編集」に改善
  • <meta name="description"> でアプリの説明を追加
  • OGP タグ(og:title, og:description, og:type, og:url)を追加しSNS共有時の表示を改善
  • Twitter Card メタタグを追加
  • <link rel="canonical"> で正規URLを指定
  • JSON-LD の WebApplication 構造化データを追加し検索エンジンでのリッチスニペット表示に対応
  • <meta name="theme-color"> でブラウザのテーマカラーを設定

影響範囲

  • index.html のみの変更で、アプリケーションの動作には影響なし
  • og:image は今回スキップ(後日対応予定)

Test plan

  • E2E テスト: SEOメタタグの存在を検証する新規シナリオが全パス
  • 既存の E2E テスト 60シナリオ全パス
  • ユニットテスト 98件全パス
  • lint パス
  • build パス

Summary by CodeRabbit

リリースノート

  • 新機能

    • サイトのSEO強化:ページ言語を日本語に設定し、ページタイトル・メタ説明・Canonical・テーマカラー・Open Graph・Twitterカード・JSON-LD構造化データを追加しました。
  • テスト

    • 追加のE2Eテストを導入し、ページlang、タイトル、各種メタタグ(description/OGP/Twitter)およびJSON-LDの存在と基本内容を検証します。

- html lang属性をjaに変更
- titleを説明的なものに改善
- meta description, theme-color, canonical を追加
- OGPタグ (og:title, og:description, og:type, og:url) を追加
- Twitter Card メタタグを追加
- JSON-LD WebApplication 構造化データを追加
- SEOメタタグ検証用のE2Eテストを追加
@coderabbitai
Copy link

coderabbitai bot commented Mar 17, 2026

📝 Walkthrough

Walkthrough

index.html に日本語のメタ情報(html lang, タイトル、description、canonical、theme-color、OGP、Twitter Card、JSON-LD)を追加し、対応するCucumberフィーチャーと Playwright ベースのステップ定義でこれらを検証する E2E テストを追加しました。

Changes

Cohort / File(s) Summary
HTML メタデータ
index.html
<html lang="ja"> に変更、タイトルを日本語に更新、meta descriptionmeta theme-colorlink rel="canonical"、OGP (og:title, og:description, og:type, og:url)、Twitter Card (twitter:card, twitter:title, twitter:description) を追加。JSON-LD(WebApplication スキーマ)を追加。
E2E テスト: フィーチャー
e2e/features/seo-meta.feature
SEO メタデータの存在と内容(lang、タイトル、meta、OGP、Twitter、JSON-LD)を検証する日本語フィーチャーファイルを追加。
E2E テスト: ステップ定義
e2e/step-definitions/seo-meta-steps.ts
Playwright の Page API と CustomWorld を用いた Cucumber の Then ステップを追加(lang 属性検証、タイトル包含検証、meta 名称検証、OGP property 検証、JSON-LD 存在と @type 検証)。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 メタの畑でぴょんぴょんと、
日本語の光をちりばめたよ。
OGP と JSON-LDが踊り、
検証の耳で響くホップ、
検索も喜ぶ小さな祝祭。

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR title 'SEO対策: メタタグ・OGP・構造化データの追加' clearly and specifically describes the main change: adding SEO metadata including meta tags, OGP, and structured data.
Linked Issues check ✅ Passed All required objectives from #55 are implemented: html lang changed to 'ja', descriptive title added, meta description added, OGP tags (og:title, og:description, og:type, og:url) added, Twitter Card tags added. Recommended items also completed: canonical link, JSON-LD WebApplication schema, and theme-color meta tag all added.
Out of Scope Changes check ✅ Passed All changes are directly related to the SEO metadata objectives in #55. Files modified (index.html, seo-meta.feature, seo-meta-steps.ts) are all within scope for implementing and testing SEO enhancements.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch update/55-seo-meta-tags
📝 Coding Plan
  • Generate coding plan for human review comments

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
e2e/features/seo-meta.feature (1)

13-14: Twitter Card の検証範囲をもう一段広げると回帰防止が強くなります。

現状は twitter:card のみ確認していますが、index.html で追加した twitter:titletwitter:description も同シナリオで確認しておくと、SEO変更の取りこぼしを防ぎやすいです。

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@e2e/features/seo-meta.feature` around lines 13 - 14, このシナリオは現在 'かつ
メタタグ"twitter:card"が設定されている' のみを検証しているため、同じシナリオに 'かつ メタタグ"twitter:title"が設定されている'
と 'かつ メタタグ"twitter:description"が設定されている' のステップを追加して、index.html
に追加したメタタグも確認するようにしてください;該当するステップ定義(既存のメタタグ検証ロジックがあるならそれを再利用)に対して "twitter:title"
と "twitter:description" を渡して存在と内容(期待値またはページの title/description
と一致すること)を検証するよう修正してください。
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@e2e/step-definitions/seo-meta-steps.ts`:
- Around line 15-23: The assertions in the step definitions for meta tags (the
Then handlers that retrieve content via
this.page.locator(...).getAttribute('content')) use toBeTruthy(), which allows
strings of only whitespace; update both handlers to assert the trimmed content
length instead (e.g. ensure content is not null/undefined and
content.trim().length > 0 or use
expect(content?.trim().length).toBeGreaterThan(0)) so that values like "   "
fail; refer to the two functions handling meta[name="${name}"] and
meta[property="${property}"] and the local variable content when making this
change.

---

Nitpick comments:
In `@e2e/features/seo-meta.feature`:
- Around line 13-14: このシナリオは現在 'かつ メタタグ"twitter:card"が設定されている'
のみを検証しているため、同じシナリオに 'かつ メタタグ"twitter:title"が設定されている' と 'かつ
メタタグ"twitter:description"が設定されている' のステップを追加して、index.html
に追加したメタタグも確認するようにしてください;該当するステップ定義(既存のメタタグ検証ロジックがあるならそれを再利用)に対して "twitter:title"
と "twitter:description" を渡して存在と内容(期待値またはページの title/description
と一致すること)を検証するよう修正してください。

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dda7e72d-828d-42b4-b704-51750c17bff0

📥 Commits

Reviewing files that changed from the base of the PR and between 629a551 and aff12f0.

📒 Files selected for processing (3)
  • e2e/features/seo-meta.feature
  • e2e/step-definitions/seo-meta-steps.ts
  • index.html

- toBeTruthy() を trim().length > 0 に変更し空白文字列を検出
- twitter:title と twitter:description のE2Eテストステップを追加
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
e2e/features/seo-meta.feature (1)

8-16: SEO メタ情報の回帰防止として、検証対象の拡張を推奨します。

Line 8-16 では主要タグは確認できていますが、今回の変更範囲にある theme-color と canonical の検証も追加すると、将来の回帰検知が安定します。

🧪 提案差分(canonical は対応ステップ定義の追加が必要)
     かつ メタタグ"twitter:card"が設定されている
     かつ メタタグ"twitter:title"が設定されている
     かつ メタタグ"twitter:description"が設定されている
+    かつ メタタグ"theme-color"が設定されている
+    かつ canonicalリンクが設定されている
     かつ JSON-LD構造化データが存在する
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@e2e/features/seo-meta.feature` around lines 8 - 16, The feature currently
checks major SEO tags but omits verification for the theme-color meta and
canonical link; update the scenario in e2e/features/seo-meta.feature to add
steps that assert a meta[name="theme-color"] exists and a link[rel="canonical"]
(or add a new step for canonical if your step definitions lack it), and
implement or extend the step definitions used by the scenario so that the test
queries document.querySelector('meta[name="theme-color"]') and
document.querySelector('link[rel="canonical"]') and fails if they are missing or
empty.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@e2e/features/seo-meta.feature`:
- Line 7: Change the loose title assertion that currently checks for partial
match of "GeoJSON" (the step text: ページタイトルに"GeoJSON"が含まれている) to a strict
equality check against the expected full title; update the feature step to
assert the exact title string (or change the step definition used by that step
to use an equality or anchored regex match instead of a contains matcher) so the
test fails when the full title diverges from the expected value.

---

Nitpick comments:
In `@e2e/features/seo-meta.feature`:
- Around line 8-16: The feature currently checks major SEO tags but omits
verification for the theme-color meta and canonical link; update the scenario in
e2e/features/seo-meta.feature to add steps that assert a
meta[name="theme-color"] exists and a link[rel="canonical"] (or add a new step
for canonical if your step definitions lack it), and implement or extend the
step definitions used by the scenario so that the test queries
document.querySelector('meta[name="theme-color"]') and
document.querySelector('link[rel="canonical"]') and fails if they are missing or
empty.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4a143bfd-290e-4ea6-9024-5e7c09d8a471

📥 Commits

Reviewing files that changed from the base of the PR and between aff12f0 and b74e799.

📒 Files selected for processing (2)
  • e2e/features/seo-meta.feature
  • e2e/step-definitions/seo-meta-steps.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • e2e/step-definitions/seo-meta-steps.ts

シナリオ: ページにSEOメタタグが設定されている
前提 アプリケーションが表示されている
ならば ページのlang属性が"ja"である
かつ ページタイトルに"GeoJSON"が含まれている
Copy link

@coderabbitai coderabbitai bot Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

タイトル検証が緩く、回帰を見逃す可能性があります。

Line 7 は "GeoJSON" の部分一致のみのため、期待タイトルが崩れても通る余地があります。期待文言に寄せて厳密化してください。

🔧 提案差分
-    かつ ページタイトルに"GeoJSON"が含まれている
+    かつ ページタイトルに"GeoJSON Maker - 地図上でGeoJSONを作成・編集"が含まれている
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
かつ ページタイトルに"GeoJSON"が含まれている
かつ ページタイトルに"GeoJSON Maker - 地図上でGeoJSONを作成・編集"が含まれている
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@e2e/features/seo-meta.feature` at line 7, Change the loose title assertion
that currently checks for partial match of "GeoJSON" (the step text:
ページタイトルに"GeoJSON"が含まれている) to a strict equality check against the expected full
title; update the feature step to assert the exact title string (or change the
step definition used by that step to use an equality or anchored regex match
instead of a contains matcher) so the test fails when the full title diverges
from the expected value.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai ご指摘ありがとうございます。こちらは意図的な設計判断として部分一致のままとします。

理由:

  • このテストの目的は「SEOメタタグが消えていないことの回帰検出」であり、タイトル文言の厳密性検証ではありません
  • 完全一致にするとタイトル文言の変更のたびにテストの更新も必要になり、二重管理のメンテナンスコストが発生します
  • "GeoJSON" の部分一致で「ブランド名が含まれている」ことを検証すれば、回帰テストとしては十分です

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sugama-satsuki ご説明ありがとうございます。おっしゃる通り、回帰検出が目的であれば "GeoJSON" の部分一致で十分ですね。ご判断を尊重します。


✏️ Learnings added
Learnt from: sugama-satsuki
Repo: geolonia/geojson-maker PR: 56
File: e2e/features/seo-meta.feature:7-7
Timestamp: 2026-03-17T11:24:42.299Z
Learning: In the repository geolonia/geojson-maker, the E2E feature file `e2e/features/seo-meta.feature` intentionally uses a partial match (`"GeoJSON"`) for the page title assertion rather than a full title match. This is a deliberate design decision: the test's purpose is SEO meta tag regression detection (verifying the brand name is present), not strict title wording validation. Using a full match would require updating the test every time the title wording changes, creating dual-maintenance overhead.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

@sugama-satsuki sugama-satsuki merged commit 7c6121d into main Mar 17, 2026
2 checks passed
@sugama-satsuki sugama-satsuki deleted the update/55-seo-meta-tags branch March 17, 2026 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SEO対策: メタタグ・OGP・構造化データの追加

1 participant