Conversation
- 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テストを追加
📝 WalkthroughWalkthroughindex.html に日本語のメタ情報(html lang, タイトル、description、canonical、theme-color、OGP、Twitter Card、JSON-LD)を追加し、対応するCucumberフィーチャーと Playwright ベースのステップ定義でこれらを検証する E2E テストを追加しました。 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
e2e/features/seo-meta.feature (1)
13-14: Twitter Card の検証範囲をもう一段広げると回帰防止が強くなります。現状は
twitter:cardのみ確認していますが、index.htmlで追加したtwitter:titleとtwitter: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
📒 Files selected for processing (3)
e2e/features/seo-meta.featuree2e/step-definitions/seo-meta-steps.tsindex.html
- toBeTruthy() を trim().length > 0 に変更し空白文字列を検出 - twitter:title と twitter:description のE2Eテストステップを追加
There was a problem hiding this comment.
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
📒 Files selected for processing (2)
e2e/features/seo-meta.featuree2e/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"が含まれている |
There was a problem hiding this comment.
タイトル検証が緩く、回帰を見逃す可能性があります。
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.
| かつ ページタイトルに"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.
There was a problem hiding this comment.
@coderabbitai ご指摘ありがとうございます。こちらは意図的な設計判断として部分一致のままとします。
理由:
- このテストの目的は「SEOメタタグが消えていないことの回帰検出」であり、タイトル文言の厳密性検証ではありません
- 完全一致にするとタイトル文言の変更のたびにテストの更新も必要になり、二重管理のメンテナンスコストが発生します
"GeoJSON"の部分一致で「ブランド名が含まれている」ことを検証すれば、回帰テストとしては十分です
There was a problem hiding this comment.
@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.
Summary
Closes #55
<html lang="en">を<html lang="ja">に変更<title>を「GeoJSON Maker - 地図上でGeoJSONを作成・編集」に改善<meta name="description">でアプリの説明を追加<link rel="canonical">で正規URLを指定<meta name="theme-color">でブラウザのテーマカラーを設定影響範囲
index.htmlのみの変更で、アプリケーションの動作には影響なしTest plan
Summary by CodeRabbit
リリースノート
新機能
テスト