seo-best-practices

Name: seo-best-practices
Author: asyrafhussin

github.com/asyrafhussinマーケティング・グロース95750 回インストール9 週間前に更新

リポジトリ

seo-best-practices について

Laravel Blade と Laravel + Inertia.js + React 向けの SEO スキルです。31 のルールを備え、プロジェクト構成に応じてパフォーマンス、構造化データ、モバイル SEO などを確認します。

主な機能

018 分野、31 の SEO ルール
02参照と監査の 2 モード
03Laravel の構成を判定
04PASS・FAIL・N/A で報告
05優先修正項目を要約

活用シーン

01Laravel ページの SEO レビュー
02Core Web Vitals と読み込み性能の確認
03構造化データとソーシャルメタデータの追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/asyrafhussin/agent-skills --skill seo-best-practices

インストール後、Claude Code で/seo-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md

metadata.json

README.md

rules/

_sections.md

_template.md

cwv-cls.md

cwv-inp.md

cwv-lcp.md

mobile-content-parity.md

mobile-ux.md

mobile-viewport.md

onpage-headings.md

onpage-images.md

onpage-internal-linking.md

onpage-semantic-html.md

perf-font-loading.md

perf-image-formats.md

perf-lazy-loading.md

perf-resource-hints.md

schema-article.md

schema-breadcrumb.md

schema-faq.md

schema-graph.md

schema-json-ld.md

schema-product.md

schema-validation.md

social-open-graph.md

social-twitter-cards.md

spa-meta-management.md

spa-rendering-strategy.md

詳細

SEO のベストプラクティス

React と Laravel で構築されたウェブアプリケーション向けの、包括的な SEO パターンです。Core Web Vitals、テクニカル SEO、構造化データ、パフォーマンス、ソーシャル共有、モバイルファーストインデックス登録を網羅する、8 カテゴリーにわたる 31 のルールが含まれています。コーディングリファレンスと監査モードの両方に対応しています。

メタデータ

バージョン： 1.2.0
対象範囲： Laravel Blade および Laravel + Inertia.js + React
ルール数： 8 カテゴリーにわたる 31 のルール
ライセンス： MIT

監査方法

ユーザーが「SEO を監査」「SEO をチェック」「SEO をレビュー」と依頼した場合は、以下のチェックリストをコードベースに対して実行してください。

監査ステップ 1：対象範囲を決定する

引数が指定されている場合（$ARGUMENTS）：指定されたページまたはファイルのみを監査します
引数が指定されていない場合：コードベース内のすべてのページとレイアウトを監査します

監査ステップ 2：プロジェクトの種類を検出する

以下の「ステップ 1：プロジェクトの種類を検出する」にある検出ロジックを使って、Laravel Blade と Laravel + Inertia + React のどちらかを判定します。

監査ステップ 3：SEO チェックリストを実行する

以下の項目をすべて確認します。それぞれについて、次の内容を出力してください。

合格 — 検証した内容を簡潔に確認します
不合格 — 正確な file:line、問題の説明、修正の推奨事項を記載します
該当なし — プロジェクトに該当しないチェック項目の場合

Core Web Vitals

ヒーロー画像／スクロールせずに見える範囲の画像に fetchpriority="high" を指定し、プリロードする（LCP < 2.5s）
インタラクションを妨げる、実行時間の長い JavaScript タスクがない（INP < 200ms）
すべての画像と埋め込み要素に明示的な width／height 属性がある（CLS < 0.1）
予約済みのスペースを確保せずにレイアウトをずらす、動的に挿入されるコンテンツがない

テクニカル SEO

各ページに固有の <title> タグがある（50～60 文字）
各ページに <meta name="description"> がある（150～160 文字）
各ページに正しい URL を指す <link rel="canonical"> がある
robots.txt が存在し、重要なページをブロックしていない
XML サイトマップが存在し、インデックス登録可能なすべてのページを含んでいる
URL が簡潔で、小文字とハイフンを使用している — インデックス登録可能なページにクエリパラメーターを使っていない

オンページ SEO

各ページに、主要キーワードを含む <h1> が 1 つだけある
見出しの階層が順序どおりになっている（h1 → h2 → h3）— レベルを飛ばしていない
画像に内容を説明する alt テキストがある（空欄、「image」、ファイル名ではない）
内部リンクに内容が分かるアンカーテキストを使っている（「こちらをクリック」ではない）
セマンティック HTML を使用している（<article>、<section>、<nav>、<main>）

構造化データ

重要なページに JSON-LD 構造化データがある（Article、Product、FAQ、BreadcrumbList）
複数のスキーマタイプを組み合わせる場合、JSON-LD で @graph を使用している
構造化データが Google Rich Results Test で検証され、エラーがない
ホームページに Organization／WebSite スキーマがある

パフォーマンス SEO

画像にフォールバックを用意したモダンな形式（WebP／AVIF）を使用している
スクロールしないと見えない範囲の画像に loading="lazy" を指定している
フォントに font-display: swap または optional を使用している
重要なリソースに <link rel="preconnect"> または <link rel="preload"> を使用している

ソーシャル共有

Open Graph タグがある（og:title、og:description、og:image、og:url、og:type）
og:image のサイズが 1200x630px 以上である
Twitter Card タグがある（twitter:card。最低限 summary_large_image）

React／SPA SEO（該当する場合）

インデックス登録可能なページに SSR または SSG が設定されている — クライアントサイドのみではない
ルート変更時にメタタグが更新される（<Head> コンポーネントまたは同等の仕組みを使用）
重複するメタタグを防ぐため、head-key 属性を使用している（Inertia.js）

モバイルファースト

<meta name="viewport" content="width=device-width, initial-scale=1"> がある
モバイルとデスクトップでコンテンツが一致している（非表示のコンテンツがない）
タッチターゲットが少なくとも 48x48px で、十分な間隔がある

監査ステップ 4：概要

監査の最後に、次を記載してください。

## SEO Audit Summary
- **PASS**: X checks
- **FAIL**: X checks
- **N/A**: X checks
- **Top Priority Fixes**: (list the 3 most impactful FAIL items)

適用する場面

次の場合に、これらのガイドラインを参照してください。

コードベースの SEO 監査を実施する場合
メタタグ（<title>、description、canonical、robots）を追加する場合
構造化データ（JSON-LD / Schema.org）を実装する場合
Core Web Vitals（LCP、INP、CLS）を最適化する場合
Open Graph と Twitter Card のメタタグを設定する場合
サイトマップと robots.txt を作成する場合
SEO に適した React SPA を構築する場合
Laravel の SEO ミドルウェアとパッケージを設定する場合
検索向けに画像、フォント、読み込みパフォーマンスを最適化する場合

ステップ 1：プロジェクトの種類を判別する

アドバイスをする前に、必ずプロジェクトのスタックを確認してください。 スタックによって、必要な SEO 対策は異なります。

package.json とプロジェクト構造を確認します。

シグナル	プロジェクトの種類
依存関係に `@inertiajs/react` がある	Laravel + Inertia + React
`resources/views/*/.blade.php` のみ（React なし）	Laravel Blade（サーバーサイドレンダリング）

Laravel Blade の場合： tech-、onpage-、schema-、perf-、social-、mobile- のルールを適用します。メタタグは Blade レイアウトに記述します。サイトマップには spatie/laravel-sitemap を使用します。ページはすでにサーバーサイドでレンダリングされているため、spa- のルールはスキップします。

Laravel + Inertia + React の場合： すべてのルールを適用します。メタタグは、Blade レイアウトの @inertiaHead と、React ページの @inertiajs/react の <Head> コンポーネントを使って設定します。SSR を利用するには、@inertiajs/react/server の createServer を使用して resources/js/ssr.jsx を作成し、Vite の設定に ssr: 'resources/js/ssr.jsx' を追加します。vite build && vite build --ssr でビルドし、php artisan inertia:start-ssr を実行します。レイアウトとページの間で重複しないよう、メタタグに head-key 属性を使用します。schema-、social-、perf- のルールを重点的に確認します。

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	Core Web Vitals	重大	`cwv-`
2	テクニカル SEO	重大	`tech-`
3	ページ内 SEO	高	`onpage-`
4	構造化データ	高	`schema-`
5	パフォーマンス SEO	高	`perf-`
6	ソーシャル共有	高	`social-`
7	React/SPA SEO	高	`spa-`
8	モバイルファースト	中	`mobile-`

クイックリファレンス

1. Core Web Vitals（重大）

cwv-lcp - Largest Contentful Paint の最適化（<2.5s）
cwv-inp - Interaction to Next Paint の最適化（<200ms）
cwv-cls - Cumulative Layout Shift の防止（<0.1）

2. テクニカル SEO（重大）

tech-meta-tags - 必須の HTML メタタグ（title、description、canonical）
tech-canonical-urls - canonical URL の実装
tech-robots-txt - Robots.txt の設定
tech-sitemap-xml - XML サイトマップの生成
tech-url-structure - SEO に適した URL のパターン

3. ページ内 SEO（高）

onpage-headings - 見出しの階層と構造
onpage-semantic-html - SEO とアクセシビリティのためのセマンティック HTML
onpage-internal-linking - 内部リンクの戦略
onpage-images - 画像の最適化と代替テキスト

4. 構造化データ（高）

schema-json-ld - JSON-LD 構造化データの基本
schema-article - Article と BlogPosting のマークアップ
schema-product - E コマース向け Product スキーマ
schema-breadcrumb - BreadcrumbList ナビゲーションのマークアップ
schema-graph - @graph を使った複数のスキーマタイプの組み合わせ
schema-faq - FAQ ページのスキーママークアップ
schema-validation - 構造化データの検証と監視

5. パフォーマンス SEO（高）

perf-image-formats - 最新の画像形式（WebP/AVIF）
perf-lazy-loading - 遅延読み込みの実装
perf-font-loading - Web フォントの読み込み戦略
perf-resource-hints - Preconnect、preload、prefetch

6. ソーシャル共有（高）

social-open-graph - Open Graph メタタグ
social-twitter-cards - Twitter/X Card メタタグ

7. React/SPA SEO（高）

spa-rendering-strategy - SEO 向けの SSR と CSR と SSG の比較
spa-meta-management - 動的メタタグの管理
spa-routing - SPA のルーティングとクロール可能性

8. モバイルファースト（中）

mobile-viewport - ビューポートとレスポンシブ設定
mobile-content-parity - モバイルとデスクトップ間のコンテンツの同等性
mobile-ux - SEO に必要なモバイル UX

基本パターン

メタタグ（HTML）

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page Title — Site Name</title>
  <meta name="description" content="Concise 150-160 character description of page content." />
  <link rel="canonical" href="https://example.com/page" />

  
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social sharing." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  
  <meta name="twitter:card" content="summary_large_image" />
</head>

JSON-LD 構造化データ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2026-03-14",
  "dateModified": "2026-03-14",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

React のメタデータ管理（Inertia.js）

import { Head } from '@inertiajs/react'

interface Post {
  title: string;
  slug: string;
  excerpt: string;
  image: string;
}

function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <Head>
        <title>{post.title} — Blog</title>
        <meta head-key="description" name="description" content={post.excerpt} />
        <link rel="canonical" href={`https://example.com/blog/${post.slug}`} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.image} />
        <meta property="og:type" content="article" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <article>{/* content */}</article>
    </>
  )
}

Core Web Vitals のクイックチェック

LCP  < 2.5s   Preload hero image, use fetchpriority="high"
INP  < 200ms  Break long tasks, yield to main thread
CLS  < 0.1    Set width/height on images, reserve space for dynamic content

画像の最適化


<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="Descriptive alt text for the image"
    width="1200"
    height="630"
    fetchpriority="high"
  />
</picture>


<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  src="photo-800.webp"
  alt="Descriptive alt text"
  width="1200"
  height="800"
  loading="lazy"
/>

使用方法

詳しい説明とコード例については、各ルールファイルをお読みください。

rules/tech-meta-tags.md
rules/schema-json-ld.md
rules/cwv-lcp.md
rules/spa-rendering-strategy.md
rules/social-open-graph.md

各ルールファイルには、次の内容が含まれています。

メタデータを含む YAML フロントマター（タイトル、影響度、タグ）
重要な理由の簡単な説明
解説付きの誤った例
解説付きの正しい例
フレームワーク固有の例（React、Laravel）

参考資料

Google Search Central - Google の公式 SEO ドキュメント
web.dev Core Web Vitals - CWV の測定と最適化
Schema.org - 構造化データの語彙
Open Graph Protocol - ソーシャル共有用メタタグ
Google Rich Results Test - 構造化データの検証

完全版ドキュメント

すべてのルールを展開した完全なガイドについては、AGENTS.md をご覧ください。

Markdown 対応

ログインしてコメント

基本情報

作者: asyrafhussin
リポジトリ: asyrafhussin/agent-skills
カテゴリ: マーケティング・グロース
インストール数: 750
GitHub スター: 95

問題を報告