デプロイとSEO対策

🔄 Quick Recall: 前のレッスンでは、デバッグとパフォーマンス最適化を学んだ——Core Web Vitals、画像最適化、アクセシビリティ監査。次はサイトを公開し、検索エンジンに見つけてもらう。

ホスティングプラットフォームの選択

静的ウェブサイト（HTML、CSS、JavaScriptでバックエンドなし）向け：

静的ウェブサイトのホスティングプラットフォーム選びを手伝って：

サイト：[説明：ポートフォリオ、ブログ、ビジネスランディングページなど]
ファイル：HTML、CSS、JavaScript（サーバーサイドコードなし）
予想トラフィック：[低 / 中 / 高]
カスタムドメイン：[はい/いいえ、持っているか？]
予算：[無料 / 最小限 / 柔軟]

以下を比較：
1. Netlify — メリット、デメリット、無料枠の制限
2. Vercel — メリット、デメリット、無料枠の制限
3. GitHub Pages — メリット、デメリット、制限
4. Cloudflare Pages — メリット、デメリット、無料枠の制限

自分の状況に最適なものとその理由を教えて。

デプロイチェックリスト

公開前にすべてを検証：

ウェブサイトのデプロイ前チェックリストを作成：

[サイト構造と機能を説明]

以下のカテゴリを確認：

コンテンツ：
- プレースホルダーテキストがすべて実際のコンテンツに置換済み
- すべてのリンクが動作する（404なし）
- 連絡先情報が正確
- 法的ページがある（プライバシーポリシー、必要なら利用規約）

技術：
- ファビコンとタッチアイコンの設定
- 404エラーページの作成
- HTTPSの有効化（SSL証明書）
- 古いURLのリダイレクト設定（移行の場合）
- アナリティクストラッキングのインストール
- コンソールにエラーと警告なし

パフォーマンス：
- 画像の最適化と遅延読み込み
- CSS・JavaScriptの縮小
- クリティカルCSSのインライン化
- フォントのプリロード

SEO：
- すべてのページにユニークなtitleとmeta description
- ソーシャル共有用のOpen Graphタグ
- sitemap.xmlの生成
- robots.txtの設定
- 構造化データの追加

公開前に作業できるチェックリストとして整理。

SEO最適化

すべてのページのメタタグ

このページのHTML headメタタグを書いてください：

ページタイプ：[ホーム / 会社概要 / ブログ記事 / 商品 / ポートフォリオ]
ページタイトル：[タイトル]
ページの説明：[このページについて]
主要キーワード：[ターゲット検索語]
ページURL：[完全なURL]

生成：
1. titleタグ（60文字以内、キーワードを先頭近くに）
2. meta description（150〜160文字、魅力的に、キーワード含む）
3. canonical URL
4. Open Graphタグ（og:title, og:description, og:image, og:url, og:type）
5. Twitter Cardタグ（twitter:card, twitter:title, twitter:description, twitter:image）
6. viewport metaタグ
7. 言語宣言

公開ページ用のrobots metaタグ（index, follow）も含める。

構造化データ（JSON-LD）

このページのJSON-LD構造化データを生成：

ページタイプ：[Article / FAQ / HowTo / Product / LocalBusiness / Person]
コンテンツ：[ページ内容を説明]

Articleの場合：
- headline、description、author、datePublished、dateModified
- ロゴ付きpublisher
- 画像（記事のメイン画像）

FAQページの場合：
- 各質問と回答のペア

HowToの場合：
- テキストとオプション画像付きのステップ
- 総所要時間、必要なツール

scriptタグで囲んだ有効なJSON-LDを出力。Googleの構造化データガイドラインに沿って検証。

✅ Quick Check: 構造化データをインラインのmicrodataではなくJSON-LD形式で置く理由は？

JSON-LDはGoogleの推奨フォーマット。HTMLとは分離されている——headにscriptブロックを追加するだけで、ページのマークアップはクリーンなまま。microdata（itemscope, itemtype, itempropを使う）はメタデータをHTML要素に混ぜ込み、マークアップが読みにくく保守しにくくなる。JSON-LDはAIでの生成も簡単：ただのJSONオブジェクトで、テンプレート全体に散在するHTML属性ではない。

サイトマップとrobots.txt

ウェブサイトのsitemap.xmlとrobots.txtを生成：

ページ：
- /（ホーム、週次更新）
- /about（静的、月次更新）
- /blog/（一覧ページ、週次更新）
- /blog/post-1/（記事、公開日[日付]）
- /blog/post-2/（記事、公開日[日付]）
- /contact（静的、まれに更新）
[全ページをリスト]

sitemap.xml：
- lastmod日付を含める
- changefreqを適切に設定
- priority設定（ホームに1.0、メインセクションに0.8、記事に0.6）

robots.txt：
- すべてのクローラーを許可
- 管理者やプライベートパスがあれば禁止
- サイトマップの場所を指定

ドメインとDNS設定

カスタムドメインのDNS設定を手伝って：

ドメインレジストラ：[お名前.com / ムームードメイン / Cloudflare / その他]
ホスティング：[Netlify / Vercel / GitHub Pages / その他]
ドメイン：[yourdomain.com]

ステップバイステップの手順：
1. ホスティングプラットフォームにドメインを追加
2. DNSレコードの設定（Aレコード、CNAMEなど）
3. wwwとnon-wwwのリダイレクト設定
4. HTTPS / SSL証明書の有効化
5. ドメインが正しく動作していることを確認

入力すべき具体的なDNSレコード値を含めて。

公開後のモニタリング

ウェブサイトの公開後モニタリングチェックリストを作成：

第1週：
- 初週に毎日チェックすべきこと
- 検索エンジンのインデックスを確認する方法（Google Search Consoleの設定）
- アナリティクスが正しくトラッキングしていることの確認方法

第1ヶ月：
- トラッキングすべき主要指標
- 公開後によくある問題と対処法
- フィールドでのCore Web Vitalsの確認タイミング（実ユーザーデータ）

継続的：
- 月次メンテナンスタスク
- リンク切れのモニタリング方法
- SEO鮮度のためのコンテンツ更新タイミング

✅ Quick Check: Core Web Vitalsでラボデータだけでなく「実ユーザーデータ」を確認する理由は？

ラボデータ（Lighthouse、PageSpeed Insights）は1つの場所から1つのデバイスで1つの回線速度でテストする。実ユーザーデータ（Chrome User Experience Report、Search Console）は実際の訪問者——遅いスマホ、地方の回線、古いブラウザ——のパフォーマンスを示す。Lighthouseで95点のサイトが、3G回線の実ユーザーでは60点かもしれない。実ユーザーデータが、実際のオーディエンスが体験するものを明かす。

演習：プロジェクトをデプロイ

ホスティングプラットフォームを選ぶ（初心者にはNetlifyまたはVercelを推奨）
デプロイ前チェックリストをプロジェクトに実行
すべてのページにメタタグとOpen Graphデータを追加
sitemap.xmlとrobots.txtを生成
サイトをデプロイしカスタムドメイン（または無料サブドメイン）で動作確認
Google Search Consoleにサイトマップを送信

Key Takeaways

meta descriptionは検索結果での営業トーク——150〜160文字でクリックするかどうかが決まる
構造化データ（JSON-LD）で検索結果にリッチスニペット（星、FAQ、ハウツーステップ）を表示——視認性が大幅に向上
テクニカルSEOの基盤（速度、モバイル対応、正しいHTML）がしっかりしていないとコンテンツ戦略も意味がない
すべてのページにターゲットキーワード付きのユニークなtitleタグ（60文字以内）とmeta descriptionが必要
NetlifyやVercelなどのプラットフォームで無料のHTTPS、CDN配信、シンプルなカスタムドメイン設定でデプロイ
公開後は実ユーザーのCore Web Vitalsをモニタリング——ラボスコアは実際のユーザー体験を反映しない

Up Next: 最終レッスンでは、完全なウェブサイトをゼロから構築する——学んだすべてを1つの実際のデプロイ可能なプロジェクトに統合。