AIで作ったWebサイトのSEO：本当に重要なこと

AIで作ったWebサイトも、ほかのサイトと同じように検索順位を獲得できます。検索エンジンが評価するのは、ページに何が含まれているか、そしてそれが訪問者にどれだけ役立つかであり、コードを書いたツールではありません。問題は技術面にあります。多くのAIビルダーは、ほぼ空のHTMLファイルをブラウザに送り、JavaScriptでコンテンツを描画するシングルページアプリを生成します。これにより、クローラーがページを読み取ったり共有したりしにくくなります。プリレンダリングまたはサーバーサイドレンダリングで解決し、すべてのページに固有のタイトル、説明、URLを設定し、サイトマップを追加し、速度を保ってください。そのうえで、どのツールも代わりにはできない作業、つまり人々が検索しているコンテンツを書くことに取り組みましょう。

シングルページアプリが検索で苦戦する理由

従来のWebサイトは、各ページの全文をHTMLで送ります。一方、シングルページアプリ（SPA）は、多くのAIビルダーの標準的な出力です。通常はViteを使ったReactで、小さなHTMLの骨組み（空の<div id="root">のようなもの）とJavaScriptのバンドルを送ります。ブラウザがJavaScriptを実行すると、ページが構築されます。

これは検索において、次の3つの点で問題になります。

1. レンダリングは追加の工程です。 Googleは、JavaScriptを使うページの処理を3つの段階で説明しています。HTMLをクロールし、ヘッドレスのChromiumでレンダリングし、レンダリングされた結果をインデックスします。Googleの公式ガイダンスでも、サーバーサイドレンダリングやプリレンダリングは、ユーザーとクローラーの双方にとって速く、すべてのボットがJavaScriptを実行できるわけではないため、今でも有効な方法だとされています。
2. ほかのページの読み手はレンダリングを行いません。 チャットアプリやSNSのリンクプレビュー、そのほか多くのクローラーは、通常は最初のHTMLだけを読み取ります。タイトルやプレビュー画像が読み込み後にJavaScriptで設定される場合、それらのプレビューには空の骨組みのデフォルト値が表示されます。多くの場合、すべてのページで同じタイトルになってしまいます。
3. すべてが1つのHTMLファイルを共有しています。 アプリが更新しない限り、すべてのURLが同じ<title>と説明文を持つことになり、検索エンジンにはページごとの情報がほとんど伝わりません。

これはSPAがインデックスされないという意味ではありません。クローラーにより多くの作業を任せることになり、レンダリングしない読み手が何を見るかを制御できなくなるという意味です。

レンダリングの方法を選ぶ

クローラーに実際のHTMLを届けるには、主に4つの方法があります。アプリへの変更が大きい順に並べています。

実践的なルールは、サイトの公開されていて検索対象となる部分は静的またはプリレンダリングにし、その奥にあるログイン後のアプリは通常のSPAのままにしてよいというものです。ダッシュボードは、そもそも検索エンジンにインデックスさせるべきではありません。

ゼロから始める場合で、SEOが重要なら、最初のプロンプトでその旨を伝えて、AIが適切な構成を選べるようにしてください。

理学療法クリニックのマーケティングサイトを作ってください。ホーム、サービス（サービスごとに1ページ）、私たちについて、料金、お問い合わせのページを用意してください。SEOが重要なので、各ページは完全なコンテンツと固有のタイトルおよびメタディスクリプションを最初のHTMLに含めてください。クライアントのみで動くシングルページアプリではなく、静的またはプリレンダリングの構成を使ってください。

すでにViteのSPAがある場合は、公開ルートのプリレンダリングを依頼してください。

このReactアプリはそのままにして、公開ルート（/、/pricing、/about、/blog、各/blog/:slug）をビルド時に静的HTMLとしてプリレンダリングしてください。それぞれに固有のタイトル、メタディスクリプション、正規URL、Open Graphタグを設定してください。ログイン後の/appルートはクライアントでレンダリングしたままで構いません。

その後、結果を自分で確認してください。ページを開き、（レンダリング後のページを表示する開発者ツールのElementsパネルではなく）ページのソースを表示を選び、テキストとタイトルが生のHTMLに含まれていることを確かめます。

ページ内SEOの基本を押さえる

これらは、どのレンダリング方法を使う場合でも当てはまります。

タイトルとメタディスクリプション

• ページごとに固有の<title>を1つ用意し、ページの主要なトピックを先頭に置きます。検索結果では長いタイトルが途中で切れやすいため、約50〜60文字が一般的な目安です。
• ページごとに固有のメタディスクリプションを1つ用意します。キーワードの羅列ではなく、読者がクリックしたくなる一文にしてください。Googleが書き換えることもありますが、良い説明文はよく採用されます。
• メタキーワードは使わないでください。Googleは、このタグがインデックス登録やランキングに影響しないと明言しています。

URL、見出し、リンク

• 実際のページには実際のURLを。 コンテンツごとに独自のパス（/services/sports-massageなど）が必要です。クリックした後にだけ存在するタブやモーダルでは不十分です。インデックスしてほしいコンテンツには、#によるフラグメントのルーティングを避けてください。
• 1ページにつきh1は1つにし、その後に適切なh2/h3の構成を続けます。AIが生成したデザインでは、見出しをスタイル目的で使うことがあるため、意味的な見出しを使うよう依頼してください。
• クロールできるリンク。 ナビゲーションには実際の<a href>リンクを使ってください。リンクをたどるクローラーには、JavaScriptでページを切り替えるボタンは見えません。
• 正規URLのcanonicalタグ。 各ページの優先URLを指定し、?utm=付きのURLや末尾スラッシュの重複が競合しないようにします。
• 意味のある画像には、**内容を説明する代替テキスト（alt）**を付けます。

SNSでのプレビュー

すべての公開ページの最初のHTMLに、Open Graphタグ（og:title、og:description、og:image、og:url）を追加してください。リンクプレビューのボットはJavaScriptを実行しないため、SPAはここを最も誤りやすい部分です。

サイトマップとrobots.txt

サイトマップは、インデックスしてほしいURLを列挙したXMLファイルです。検索エンジンがページを見つけるのに役立ち、特に被リンクの少ない新しいサイトで効果があります。Googleのドキュメントによると、2026年9月時点で次のとおりです。

• 1つのサイトマップには、最大50,000件のURL、または圧縮されていない状態で50MBまで含められます。大規模なサイトは、サイトマップインデックスで分割してください。
• Googleは<priority>と<changefreq>を無視します。
• Googleは<lastmod>が一貫して正確な場合にのみ利用します。ビルドのたびではなく、実際のコンテンツが変わったときに更新してください。

robots.txtファイルは、クローラーにどのパスをクロールしないかを伝えます。/app、/admin、APIルートをクローラーから除外するために使い、そのファイル内でサイトマップの場所を示します。robots.txtがクロールを止めるものであり、インデックスを止めるものではないことにも注意してください。検索結果からページを除外したい場合は、noindexのrobotsメタタグを使い、そのページをクロールさせておく必要があります。

サイトが最終的なドメインに移ったら、Google Search Consoleにサイトマップを送信してください。Search Consoleでは、どのページがインデックスされているか、そしてほかのページがなぜされていないのかも分かります。無料のSEOツールとして最も役立つものです。

構造化データ

構造化データは、ページが何を表すかを記述した、機械が読める形式のマークアップです。対象は、組織、地域の店舗、商品、記事、イベントなどです。Googleは JSON-LD 形式を推奨しており、次の2点を明確にしています。

• ページをリッチリザルトの対象にできますが、表示を保証するものではありません。
• ページ上で見える情報を記述しなければなりません。訪問者が見られないレビュー、価格、FAQにマークアップしてはいけません。

適切な出発点は、トップページにOrganizationまたはLocalBusiness、商品ページにProduct、ブログ記事にArticle、深い階層のページにBreadcrumbListです。Googleのリッチリザルトテストで確認してください。

JSON-LDの構造化データを追加してください。トップページには、すでにページに表示されている住所、電話番号、営業時間を使ったLocalBusinessを、各ブログ記事にはArticleを設定してください。評価やレビューは追加しないでください。

速度とモバイル

GoogleはCore Web Vitalsを含むページエクスペリエンスのシグナルを使用しており、速度は訪問者にとって常に重要です。ページの読み込みの75パーセンタイルで測定したGoogleの「良好」の基準は次のとおりです。

AIで作ったサイトでよくある改善策は次のとおりです。

• 画像 — サイズを縮小し、圧縮し、最新の形式を使い、幅と高さを設定し（レイアウトのずれを防ぎます）、画面の下部にある画像は遅延読み込みにします。
• JavaScript — バンドルが大きいと、SPAのすべてが遅れます。プリレンダリングが役立ち、ルートごとにコードを分割することも効果があります。
• フォント — ファミリーとウェイトの数を絞り、ファーストビューで使うものだけをプリロードします。
• サードパーティのスクリプト — チャットウィジェットやトラッキングピクセルは、すべて速度を低下させます。実際に使っているものだけを残してください。

モバイルモードでPageSpeed InsightsまたはLighthouseを使い、公開中のURLをテストしてください。

それでもコンテンツが大切

テクニカルSEOは障害を取り除くものであり、需要を生み出すものではありません。ページが上位に表示されるのは、そのページが代わりの候補よりも検索に的確に答えているからです。小規模なサイトの多くでは、次のことを意味します。

• 人々が検索するトピックごとに1ページ。 配管工には、すべてのサービスを一覧にした「サービス」ページ1つではなく、サービスごと、対応地域ごとのページが必要です。
• 具体的で独自の詳細情報 — 価格、作業の流れ、実際の施工写真、顧客が電話で尋ねる質問への回答。
• 変更があったら更新する。 古い営業時間や古い価格は、すぐに信頼を失わせます。

AIは素早くページの下書きを作れるため、似たような薄いページを大量に公開したくなります。しかし、Googleのガイダンスが対象とするのは、どのように作られたかにかかわらず、人々の役に立つためではなく、主に順位を上げるために作られたコンテンツです。AIで下書きを作り、そのうえで自分だけが知っていることを加えてください。ディレクトリ型のサイトはこの問題に最も直面します。掲載ページをインデックスする価値のあるものにする方法については、ディレクトリサイトの作り方をご覧ください。

公開前のチェックリスト

• 公開ページは、完全なコンテンツを最初のHTMLに含んでいる（「ページのソースを表示」で確認）
• すべてのページに、固有のタイトル、メタディスクリプション、正規URLがある
• すべての公開ページに、Open Graphタグと共有用の画像がある
• 1ページにh1は1つ、実際の<a href>リンク、画像に代替テキストがある
• 実際のURLを含むsitemap.xmlがあり、robots.txtでアプリとAPIのパスをブロックしている
• 構造化データは表示されている内容だけを対象にし、テスト済みである
• モバイルでLCP、INP、CLSが「良好」の範囲にある
• サイトが最終的なドメインでHTTPSに対応し、Search Consoleに送信されている

SEOによる検索流入の獲得を始める前に、独自ドメインに移しておくと、後からのリダイレクトを避けられます。独自ドメインの接続方法をご覧ください。Webサイト制作全体の流れについてはAIでWebサイトを作る方法を、訪問者をコンバージョンさせるページについては成果の出るランディングページの作り方をお読みください。

MythexでのSEO

Mythexには独立したSEOのパネルはありません。チャットやコードでアプリを変更して、SEOを改善します。新しいWebアプリは、初期設定ではViteとReactのシングルページアプリになります。そのため、検索が重要な場合は、最初から静的またはプリレンダリングのサイト、あるいはNext.jsを依頼してください。タイトル、Open Graphタグ、サイトマップ、robots.txtのためのスターターのプロンプトは、ドキュメントのアプリのSEOにあり、コンテンツ中心のサイトについては静的サイトで説明しています。変更後は、公開サイトに反映されるように再度公開してください。独自ドメインはProプランで利用できます。

よくある質問