メインコンテンツへスキップ

​
Lovable における SEO と GEO の仕組み

Lovable では高い柔軟性があり、ページやコンテンツ、機能を作成するときに Lovable Agent が生成するコードから、Search Engine Optimization (SEO) と Generative Engine Optimization (GEO) が生まれます。 Agent は、あなたのプロンプトに基づいてタイトルやディスクリプション、タグなどの要素を追加する場合がありますが、これは体系的なものではなく、完全または正しい実装が保証されるわけではありません。 そのため、SEO と GEO はコードと同様に扱うべきです。意図的にレビューし、テストし、改善していく対象ということです。このガイドでは、何をどう指示し、どのように検証すればよいかを具体的に解説します。

​
組み込みの Speed ツール

Lovable には、Google Lighthouse を利用した組み込みの Speed ツールも含まれています。公開済みサイトのパフォーマンス、アクセシビリティ、ベストプラクティス、SEO チェックの概要をすばやく確認できます。 Lovable Speed Tool これはサイト全体の健全性を把握するための優れた第一歩ですが、Lighthouse はクロール可能性、構造化データ、メタデータの正確性、ソーシャルプレビューといった重要な要素までは検証しません。このガイドは、そうした不足を補うためのものです。

​
独自ドメイン

独自ドメイン を使うことは、SEO と GEO の両面で非常に重要なステップのひとつです。ブランド化されたドメインを利用することで、検索エンジンがあなたのサイトを理解しやすくなり、時間が経っても被リンクの価値を維持でき、すべてのトラフィックを 1 つの正規 URL に集約できます。 Lovable では次のことができます:
  • 自分のドメインまたはサブドメインを接続する
  • 1 つの プライマリドメイン を選択する（他のすべてのドメインはそこへリダイレクトされます）
独自ドメインを設定したら、Google が正しいドメインをクロールしてインデックスできるように、Google Search Console で検証 してください。詳細なセットアップ手順については、独自ドメイン を参照してください。

​
Lovable のアーキテクチャを理解する

Lovable は React と Vite を使ってモダンな Web アプリケーションを構築しており、あなたのアプリは クライアントサイドレンダリング（CSR） の シングルページアプリケーション（SPA） になります。ページごとに別々の HTML ファイルを配信する代わりに、ブラウザは小さな初期 HTML シェルを読み込み、その後のルーティングとレンダリングを JavaScript で処理します。 従来のプラットフォーム（WordPress や Webflow など）は、URL ごとに完全に組み立てられた HTML ページをブラウザへ送信します。 Lovable は、各ビューを構築するためのコードと命令を送り、あなたのデバイス側でそれを使って画面を組み立てます。すべての「ページ」は、実際には同じアプリケーションの異なる状態にすぎません。 訪問者にとっては、これにより高速なナビゲーション、即時の画面遷移、シームレスな体験が実現します。

​
SEO と GEO にとっての意味

検索エンジン、ソーシャルプラットフォーム、AI クローラーにとって、このアーキテクチャはコンテンツの見つけられ方を変えます。 Google と従来型の検索エンジン: Google は CSR サイトをインデックスできますが、2 段階のプロセスになります:
  1. 最初の HTML をクロールしてページ構造を収集する
  2. 後から再度アクセスして JavaScript (JS) をレンダリングし、ページ全体のコンテンツを取得する
この 2 ステップのプロセスは安定して動作しますが、次のような点があります:
  • インデックス作成に 少し時間がかかる（数時間ではなく数日かかることがある）
  • 新しいページが検索結果に表示されるまで時間がかかることがある
  • ランキング自体に悪影響が出ることはなく、影響するのはインデックス作成の速度だけ
ソーシャルメディアプラットフォームと AI システム:
  • Facebook、X/Twitter、LinkedIn などのプラットフォームは、コンテンツがレンダリングされるのを待たないため、初期の HTML ページ構造しか取得しません。
  • すべてのページが同じ基本タイトルとプレビュー画像を共有している場合、ソーシャルリンクには汎用的または誤った情報が表示されることがあります
  • 多くの AI システムは動的にレンダリングされたコンテンツを確実には取得できないため、ページを見逃したり、一部のコンテンツしか認識できないことがあります
現在の検索エンジンは CSR を適切に処理できます。 CSR 自体がインデックス作成やランキングを妨げることはなく、実装方法とコンテンツの品質のほうが重要です。 このガイドのベストプラクティスに従って、Lovable サイトが検索エンジン、ソーシャルプラットフォーム、AI システム向けに最適化され、十分に競争力を発揮できるようにしましょう。

​
基本設定: サイトをクロール可能にする

これらの手順により、検索エンジンが Lovable アプリ内の重要なページすべてにアクセスし、検出し、インデックス登録できるようにします。

​
XML サイトマップ

サイトマップは、検索エンジンがサイト上のすべてのページを見つけるのに役立ちます。これは、クローラーがすべてのルートを簡単に見つけられない CSR（クライアントサイドレンダリング）サイトでは特に重要です。Lovable Agent は、リクエストに応じて、すべての公開ルートを含む sitemap.xml を生成できます。
プロンプト例
すべての公開ルートを列挙した XML サイトマップを /sitemap.xml に作成してください。lastmod 日付と優先度を含めてください。ホームページ 1.0、主要ページ 0.8、ブログ記事 0.6 とします。
検証
  • サイトマップファイルが公開されるようにプロジェクトを公開する
  • https://yourdomain.com/sitemap.xml でアクセス可能か確認する（XML が返されること）
  • 主要なルート（ホーム、主要ページ、ブログ、商品）がすべて含まれているか確認する
  • コンテンツが変更されたら lastmod を更新する
  • priority を使って重要度を示す（0.0～1.0）
  • Google Search Console と Bing Webmaster Tools に送信する
  • ページを追加・削除したら、サイトマップを再生成して再送信する（自動ではありません）。たとえば、次のようにプロンプトします:
    sitemap.xml を更新して /new-page を追加し、/old-page を削除したうえで、Google Search Console に再送信してください。
sitemap.xml の例
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>2025-01-15</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/about</loc>
    <lastmod>2025-01-15</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

​
Robots.txt

robots.txt は、検索エンジンに対してサイト内のどの範囲をクロールしてよいかを伝えるファイルです。Google がページを正しくレンダリングするために必要な重要なリソースをブロックしないことが重要です。Lovable Agent に依頼すれば、robots.txt ファイルを作成できます。
プロンプト例
/public/robots.txt に、すべてのクローラーを許可し、Sitemap: https://yourdomain.com/sitemap.xml を参照し、AI の可視性のために GPTBot と PerplexityBot を許可する robots.txt を作成してください。
検証
  • https://yourdomain.com/robots.txt でアクセスできることを確認する
  • CSS、JavaScript、または /assets/ フォルダを絶対にブロックしない
  • サイトマップを指し示す Sitemap: 行を含める
  • 戦略に基づいて AI ボット（GPTBot、PerplexityBot）へのアクセスを制御する
robots.txt の例
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml

User-agent: GPTBot
Allow: /

​
カノニカルタグ

カノニカルタグは、ページの「公式」バージョンとなる URL を検索エンジンに伝え、重複コンテンツの問題を防ぐのに役立ちます。Lovable Agent は、リクエストに応じてカノニカルタグを生成できます。
プロンプト例
すべてのページに、そのページ自身の URL を指すカノニカルタグを追加してください。末尾にスラッシュを付けず、https://yourdomain.com 形式を使用してください。
確認
  • 各ページを確認し、ブラウザのコンソールに次を貼り付けます： 
    console.log('Canonical:', document.querySelector('link[rel="canonical"]')?.href);
  • 1ページにつきカノニカルタグが ちょうど1つ 存在することを確認します。
  • 希望するドメインと URL のバリアント（HTTPS、末尾スラッシュの有無）と一致していることを確認します。
  • 意図的な場合（例: フィルタ済みの商品ビュー）を除き、異なるページが同じカノニカルを指すようにしないでください。

​
クリーンなURLとルーティング

検索エンジンはページ内容を理解するためにURLに依存しているため、クリーンで内容がわかりやすいURLは、クロールしやすさとランキングの両方の向上に役立ちます。Lovable Agentは通常、React Router を使ってクリーンなルートを自動生成します。
プロンプト例
すべてのルートを確認し、URLがクリーンで内容をよく表していることを確認してください。単語の区切りにはハイフンを使用し、クエリパラメータは避けてください。
検証方法
  • 各ルートにアクセスし、ブラウザーのコンソールにエラーがないか確認する
  • URLは安定していて、内容を表しており、ランダムなIDを含まないこと
  • サイト全体で形式を統一する（末尾スラッシュの有無、www の有無）
  • すべてのルートがJavaScriptエラーなしで読み込まれること

​
内部リンク

内部リンクはページ同士をつなぎ、ユーザーと検索エンジンのどちらもがサイト内をスムーズに移動できるようにします。検索エンジンはこれらのリンクを使ってコンテンツを発見し、トピック間の関係を理解し、サイト全体にページのオーソリティを分配します。 Lovable Agent は、ナビゲーション/フッターリンクを作成できるほか、リクエストに応じてコンテキストに沿ったリンクを提案または作成できます。
プロンプト例
関連ページへのコンテキストに沿った内部リンクを 3〜5 個追加してください。「ここをクリック」ではなく、内容を表す説明的なアンカーテキストを使ってください。
検証
  • リンクがクロール可能であることを確認します。数はナビゲーションとコンテンツから想定されるリンク数とおおよそ一致しているはずです。 
    console.log('Links:', document.querySelectorAll('a[href]').length);
  • onClick ハンドラーではなく、実際の <a href> タグを使用すること
  • 重要なページには、複数の内部リンクが集まっていること
  • サイト全体に表示されるよう、最も重要なページへのリンクをフッターに含めること
  • アンカーテキストは、「click here」のような文言ではなく、キーワードを含んだ内容がわかるものにすること
    • 良いアンカーテキスト: organic dog food benefits
    • 良くないアンカーテキスト: click here, read more
  • ホームページから 3 クリック以内で深い階層のページに到達できること

​
オンページSEO：検索エンジンがコンテンツを理解できるようにする

これらの施策によって各ページの内容が明確になり、検索エンジンがコンテンツを解釈し、適切に順位付けしやすくなります。

​
ページタイトル

ページタイトルは、重要なオンページのランキング要因です。検索結果やブラウザのタブに表示され、クリック率に大きな影響を与えます。Lovable Agent は、ページの目的に基づいて title タグを生成できます。
プロンプト例
すべてのルートのページタイトルを更新してください。各ページの目的に合った、わかりやすく説明的なタイトルを使用し、60文字以内に収めてください。
検証
  • 各ページのタイトル内容と文字数を確認します。ブラウザのコンソールに次を貼り付けます: 
    console.log('Title:', document.title, '| Length:', document.title.length);
  • 各ルートごとに固有で説明的なタイトルがあり、「Home」のような汎用的なタイトルがどこでも使われていないこと
  • 60文字未満にして、検索結果でタイトルが省略されないようにすること
  • 主要キーワードに加えてブランド名を含めること

​
メタディスクリプション

メタディスクリプションは、検索結果でページタイトルのすぐ下に表示されます。直接のランキング要因ではありませんが、クリック率に強く影響します。Lovable Agent は、必要に応じてメタディスクリプションを追加できます。
プロンプト例
主要なすべてのページごとに、一意のメタディスクリプションを作成してください。各メタディスクリプションは明確で役立つ内容にし、140〜160文字の範囲に収めてください。
検証方法
  • 各ページのディスクリプションと文字数を確認します。次をブラウザコンソールに貼り付けて実行します: 
    console.log('Desc:', document.querySelector('meta[name="description"]')?.content, '| Length:', document.querySelector('meta[name="description"]')?.content.length);
  • 各ページに一意のディスクリプションがあること（140〜160文字）
    • 悪い例: Welcome to our website （汎用的で、繰り返し使われている）
    • 良い例: Premium organic dog food delivered fresh to your door. Free shipping over $50.（158文字）
  • 利点、差別化ポイント、控えめな行動喚起が含まれている
  • ページごとに重複していない

​
見出し構造（H1 → H3）

明確な見出し構造（H1〜H3）は、検索エンジンがコンテンツの構成と、どのセクションがもっとも重要かを理解するのに役立ちます。Lovable Agent に指示すれば、適切な H1 タグと論理的な階層を生成できます。
プロンプト例
各ページの見出し構造を確認してください。ページの先頭に H1 を 1 つ、その下に主要なセクション用の H2、入れ子になったコンテンツ用の H3 を使用します。見出しレベルを飛ばさないでください。
検証
  • H1 タグが 1 つだけであることを確認します。ブラウザのコンソールに次を貼り付けます。1 が返されるはずです： 
    console.log('H1s:', document.querySelectorAll('h1').length);
  • 見出しの内容を確認します。ブラウザのコンソールに次を貼り付けます： 
    console.log('H1:', document.querySelector('h1')?.textContent);
  • H1 に主要なキーワードが含まれており、ページの目的が明確に示されていること
  • 見出しが論理的な順序になっていること（H1 → H2 → H3 の順で、レベルを飛ばさない）
  • 見出しをスタイル目的だけで使用していないこと

​
セマンティック HTML

セマンティック HTML は、コンテンツの意味に沿ったタグを使ってページを構成し、検索エンジンやスクリーンリーダーがページ構造を理解しやすくします。Lovable Agent は通常、<main>、<nav>、<section> などのセマンティック要素を追加します。
プロンプト例
HTML の構造を見直し、適切な箇所にセマンティックタグを使用してください。メインコンテンツは <main>、ナビゲーションは <nav>、セクションは <section>、フッターコンテンツは <footer> に配置してください。
検証
  • ブラウザのコンソールに次を貼り付けます。該当する場合は true が返ります:
console.log('Has <main>:', !!document.querySelector('main'));
console.log('Has <nav>:', !!document.querySelector('nav'));
console.log('Has <footer>:', !!document.querySelector('footer'));
console.log('Has <section>:', !!document.querySelector('section'));
  • 各ページで次を確認してください:
    • 単一の <main> が主要コンテンツを囲んでいる
    • ナビゲーションが <nav> 内にある
    • フッターコンテンツが <footer> 内にある
    • 関連コンテンツが <section> と <article> タグ内にある

​
画像の最適化

画像を最適化するとアクセシビリティが向上し、トピックとの関連性が強まり、画像検索結果にも表示されやすくなります。効率的な形式と適切なサイズの画像を使うことでページ速度も向上し、これは重要なランキング要因です。Lovable Agent は必要に応じて alt テキストを追加し、遅延読み込みを有効にできます。
プロンプト例
すべての画像を確認し、わかりやすく具体的な alt テキストを追加してください。各画像に width と height 属性があり、高速表示のために適切に圧縮されていることを確認してください。
検証
  • すべての画像に alt テキストがあることを確認します。これをブラウザコンソールに貼り付けて実行し、返り値が 0 になることを確認します: 
    console.log('Missing alt:', document.querySelectorAll('img:not([alt])').length);
  • alt テキストの品質を評価します — 関連するキーワードを含んだ具体的な説明になっている必要があります
    • 悪い例: alt="image"、alt="photo"、alt=""
    • 良い例: alt="Golden retriever eating organic grain-free dog food from a bowl"
  • 適切なファイル形式を使用し、ファイルサイズを小さく保ちます:
    • 写真やイラストには WebP
    • ロゴ、アイコン、シンプルな図には SVG
    • 画像は 200KB 未満に圧縮
  • width と height 属性が設定されていること（レイアウトシフトを防止）

​
オフページSEO：被リンクで権威性を高める

検索エンジンは、あなたのコンテンツがどれだけ信頼できて権威があるかを判断する際に、他の信頼性の高いサイトからのリンクに大きく依存しています。競合の激しいキーワードでは、強力な被リンクが、どんなオンページ最適化よりも重要になることがあります。 被リンクは、あなたの Lovable サイトに次のような効果をもたらします：
  • ターゲットキーワードでの順位を上げる
  • より早くインデックスされる
  • テーマに関する専門性・権威性を高める
  • より大きな、または古いサイトと競合できるようにする
  1. リンクしたくなるコンテンツを作成する
  • 詳細なガイド、チュートリアル、リサーチ
  • データ、統計情報、または独自のインサイト
  • インタラクティブなツール、計算ツール、ROI試算ツール
  • テンプレート、チェックリスト、ダウンロード可能なアセット
  1. ゲスト投稿を公開する
  • あなたのニッチ領域のブログに記事を寄稿する
  • サイトへの文脈に合ったリンクを盛り込む
  • 著者プロフィールでブランドの信頼性を強調する
  1. 補完関係にあるビジネスと提携する
  • コンテンツを共同制作する（記事、ウェビナー、各種リソース）
  • 関連ページ同士でクロスリンクする
  1. ディレクトリやリソースページに掲載してもらう
  • 業界ディレクトリ
  • ローカルビジネスリスティング
  • スタートアップ向けリスティング
  • あなたのプロダクトに関連するキュレーションリソース
  1. コンテンツをプロモートする
  • ソーシャルプラットフォームで共有する
  • ニュースレターに追加する
  • インフルエンサー、ブロガー、顧客に言及してもらう
  • 大きなアップデートやローンチ時には PR アウトリーチを行う
被リンク品質チェックリスト検索エンジンは、次のような被リンクを優先して評価します：
  • 関連性が高い（同じトピックまたは業界）
  • 権威性がある（信頼できるドメイン）
  • 編集によって掲載が決まっている（お金ではなく、評価されて獲得したリンク）
  • アンカーテキストが説明的（関連キーワードを自然に含んでいる）
  • コンテキスト内に配置されている（実際のコンテンツ内で使われ、ランダムなフッターやサイドバーのリンクではない）
  • スパム的な手法を避ける（リンクファーム、低品質ディレクトリ、有料リンクスキームなど）。これらはランキングを下げる原因になります。
これらの機能拡張により、ページがリッチリザルトの対象となり、ソーシャルプラットフォームや検索結果ページで高品質なプレビューが表示されるようになります。

​
構造化データ（JSON-LD スキーマ）

JSON-LD スキーマで実装された構造化データは、コンテンツに関する追加情報を検索エンジンに伝え、星評価、商品詳細、FAQ のドロップダウンなどのリッチリザルトを有効にできます。Lovable Agent は、リクエストすればスキーママークアップを生成できます。 よく使われるスキーマタイプには次のようなものがあります：
  • Product: 価格、在庫状況、レビュー、評価
  • Article: 著者、公開日、アイキャッチ画像
  • FAQPage: 質問と回答
  • LocalBusiness: 住所、電話番号、営業時間などのビジネス情報
プロンプト例
Product スキーマを商品ページに追加し、名前、説明、価格、在庫状況、画像、ブランド、評価の詳細を含めてください。
検証
  • 主要なページ（例：ホーム、商品ページ、ブログ記事、FAQ ページ）で構造化データが入っているか確認します。次のコードをブラウザコンソールに貼り付けて実行します。意図的に複数のスキーマタイプを追加していない限り、1 が返されるはずです：
console.log('Schema:', document.querySelectorAll('script[type="application/ld+json"]').length);
  • Google リッチリザルトテスト で検証する
  • エラーや必須項目の不足を修正する
  • スキーマデータをページ上に表示されているコンテンツと常に一致させておく

​
ソーシャルメディア最適化：Open Graph と Twitter Cards

Open Graph（OG）タグ、Twitter Cards、OG 画像は、ページがソーシャルメディアで共有されたときの見え方を制御します。高品質なプレビュー画像は、シェアの成果を大きく高め、ブランドへの信頼構築にもつながります。 Lovable Agent ではデフォルトで基本的な OG と Twitter メタデータが含まれていますが、各ページごとに画像・タイトル・説明文をカスタマイズする必要があります。 ほとんどのソーシャルプラットフォーム（Facebook、Twitter/X、LinkedIn）は JavaScript を実行しないため、初期 HTML に Open Graph と Twitter Card のメタデータを明示的に設定しないと、リンクのプレビューが汎用的なものになったり、不完全な状態で表示されたりする可能性があります。
プロンプト例
すべての重要なページに固有の Open Graph と Twitter メタデータを追加してください。各ルートごとにカスタムのタイトル、説明、URL、ソーシャル画像を設定します。各ページにつき 1 枚の 1200×630 JPG 画像を使用し、og:image と twitter:image をそれに合わせて更新してください。
検証項目
  • 任意の URL を共有する前に、次で表示内容を確認する：
  • 重要な各ページの HTML に固有の og:title、og:description、og:image、og:url が設定されている
  • タグに twitter:card と twitter:image が含まれている
  • プレビューに正しいタイトル、説明、画像が表示される
  • 画像は 1200×630px で、1MB 未満である
  • ブランドと視覚的に一貫性がある
  • すべてのページで 1 つの汎用画像を使い回さない
Open Graph と Twitter Card メタデータの例
<meta property="og:title" content="Organic Dog Food Delivery | PetFood Co" />
<meta property="og:description" content="Premium grain-free dog food delivered fresh to your door." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/products" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg" />

​
パフォーマンスとモバイル：読み込み速度とユーザー体験を向上させる

これらの最適化により、実際の表示速度、モバイルでの使いやすさ、そして Google によるコンテンツの効果的なレンダリングが向上します。

​
Core Web Vitals とパフォーマンス

ページ速度は、検索順位に影響することが確認されているランキング要因です。高速なサイトほど検索順位が高くなり、コンバージョン率も向上します。Lovable Agent は、遅延読み込みやコードの最小化などの最新の最適化パターンを使って、高速なレンダリングをサポートします。
  • Lovable の 組み込み Speed ツール（Google Lighthouse 搭載）を使って、サイトのパフォーマンス、アクセシビリティ、ベストプラクティス、SEO チェックを分析します。
  • Google Search Console を使って Core Web Vitals を検証します。これは、読み込みパフォーマンス、インタラクティビティ、ページの視覚的安定性に関する実際のユーザー体験を測定する一連の指標です。
プロンプト例
画像を圧縮し、width/height 属性を追加し、必須ではないスクリプトの読み込みを遅らせ、重要なアセットをプリロードして、ホームページのパフォーマンスを改善してください。Lighthouse の Performance スコア 90 以上を目標にしてください。
検証
  • Lovable で Speed ツールを実行（Google Lighthouse 監査）
  • 目標スコア:
    • Performance: 90+
    • Accessibility: 90+
    • Best Practices: 90+
    • SEO: 100
  • パフォーマンススコアが低いページを改善
  • GSC で Core Web Vitals の目標値を確認・修正:
MetricTargetWhat it measuresHow to fix
LCP (Largest Contentful Paint)2.5 秒未満読み込みパフォーマンス（メインコンテンツが表示されるまでの時間）ヒーロー画像を圧縮する、WebP を使用する、重要なリソースをプリロードする、サーバーレスポンス時間を短縮する
INP (Interaction to Next Paint)200 ミリ秒未満ユーザー操作に対してページがどれだけ素早く反応するかJavaScript の実行時間を短縮する、重要ではないスクリプトを遅延読み込みする、長時間タスクを分割する
CLS (Cumulative Layout Shift)0.1 未満読み込み中の視覚的な安定性すべての画像に width/height を指定する、動的コンテンツ用のスペースを確保する、ファーストビュー内への読み込み後の挿入を避ける

​
モバイル最適化

検索の 60%以上はモバイルで行われています。Google はモバイルファーストインデックスを採用しており、モバイル版のページが検索順位を決定します。Lovable Agentは viewport タグ付きのレスポンシブレイアウトを生成します。モバイル向けの適切なスケーリングには viewport タグが必須です。
プロンプト例
モバイルでのユーザー体験を確認してください。タップ領域のサイズを最低 48x48px に拡大し、インタラクティブ要素同士の間に余白を追加し、テキストは最小 16px にし、小さい画面で発生する横スクロールをすべて解消してください。
検証
  • Chrome DevTools と 実機 を使って、複数のデバイスサイズで主要ページをテストする — iPhone、Android、タブレットサイズでテストする
  • すべての主要なフローがモバイルでスムーズに動作することを確認する
  • どのページでも横スクロールが発生しない
  • ズームしなくてもテキストが読める（フォントサイズは最低 16px）
  • ボタンとリンクは少なくとも 48×48px で、間に余白があり、タップしやすいこと
  • フォームがタッチデバイスで正しく動作する（大きめの入力欄、わかりやすいラベル）
  • ナビゲーションにアクセスしやすい（ハンバーガーメニューが正常に機能している）
  • 画像や動画が画面幅に収まっている
  • viewport タグが存在することを確認する。 ブラウザコンソールに次を貼り付ける: 
    document.querySelector('meta[name="viewport"]')?.outerHTML
    すると次のように表示されます:  
    <meta name="viewport" content="width=device-width, initial-scale=1">

​
GEO: コンテンツを AI／LLM に最適化する

Generative Engine Optimization（GEO）は、ChatGPT、Perplexity、Gemini、Claude のような AI システムがあなたのコンテンツを発見し、引用しやすくするための手法です。生成エンジンは検索エンジンとは異なる方法で情報を抽出します。多くは JavaScript を実行しないため、静的 HTML とスキーマに大きく依存します。 GEO のベストプラクティスの多くは、適切な SEO 対策を発展させたものです。前のセクションの内容に従い、ここで紹介する追加ポイントも実践すれば、AI にコンテンツを見つけてもらい、引用してもらううえで有利なポジションを取ることができます。

​
AI 向けのセマンティック HTML とスキーマ

AI クローラーは、JavaScript を実行せずに HTML を直接読み取ります。明確な構造とスキーマがあると、引用用の事実を抽出しやすくなります。Lovable Agent はセマンティックな HTML 構造を提供し、リクエストに応じてスキーマを追加できます。
プロンプト例
重要な情報が、見出しが明確なプレーン HTML で記述されていることを確認するために、ホームページをチェックしてください。名前、説明、URL、ロゴ、ソーシャルメディアのリンクを含む Organization スキーマを追加してください。
検証
  • 主要な事実は静的 HTML に記述する（例：何をしているか、誰向けか、料金）
  • 情報の構造化には明確な見出し（H2、H3）を使用する
  • 網羅的なスキーマを追加する：Organization、Product、FAQPage、Article
  • AI が解析・引用しやすい、明確で事実ベースの文章で記述する
  • サイト全体、スキーマ、外部プロフィール間で事実を一貫させる

​
AI ボットのアクセス (robots.txt)

どの AI システムが、学習や質問への回答のためにあなたのコンテンツへアクセスできるかを制御します。Lovable Agent では、リクエストに応じて robots.txt を設定し、必要なボットのみを許可できます。
プロンプト例
robots.txt を更新して、GPTBot、PerplexityBot、Claude-Web を許可し、Google-Extended と CCBot をブロックしてください。標準的な検索エンジンのクローラーはすべて許可されたままにします。
検証手順
  • 公開戦略を決める: AI による引用を許可するか、AI 学習をブロックするか
  • 戦略に基づいて、ボットを明示的に許可またはブロックする
    • よく利用されるボット: GPTBot (ChatGPT)、PerplexityBot、Claude-Web、Google-Extended (training)、CCBot
  • 変更後に再確認し、必要なボットが誤ってブロックされていないことを確認する
robots.txt の例
User-agent: *
Allow: /

User-agent: GPTBot
Allow: /

User-agent: Google-Extended
Disallow: /

​
LLM が引用しやすいコンテンツパターン

AI システムは、明確で構造化されていて、引用しやすいコンテンツを好みます。この形式で情報を提供すると、正確に引用される可能性が高まります。Lovable Agent は、リクエストに応じて FAQ セクションや構造化されたコンテンツを生成できます。
プロンプト例
FAQ の回答を、短く、端的で、AI が引用しやすい形に更新してください。最初に主な回答を書き、具体的な事実を含め、あいまいなマーケティング表現は削除してください。
検証項目
  • FAQ/Q&A 形式で、よくある質問に対して明確な回答を書く
  • “X is [clear definition]” のような、引用しやすい定義パターンを使う
  • あいまいなマーケティング文言を避ける
  • 読み取りやすいように、リストや箇条書きを作成する
  • 可能であれば、出典付きの統計情報を含める
例
  • 悪い例: Amazing transformative solutions
  • 良い例: USDA-certified organic dog food delivered weekly. Plans start at $45/month with free shipping over $50.

​
静的な LLM 向け要約ページ

専用の要約ページがあると、AI システムがあなたの会社の重要な情報を理解し、引用しやすくなります。Lovable Agent は、リクエストに応じて、主要な情報をクロール可能な形式でまとめた専用の要約ページを作成できます。
プロンプト例
public フォルダー配下に静的な llm.html ページを作成し、会社が何をしているのか、何を提供しているのか、他社との違い、料金の概要、FAQ、連絡方法を分かりやすく説明してください。Organization と FAQPage のスキーマを追加し、ページをシンプルな H2/H3 見出しで構成してください。この新しい URL を sitemap.xml に含めてください。
検証
  • ページが /llm.html や /about-ai.html などの分かりやすい URL で作成されている。
  • ページが sitemap.xml に含まれている。
  • コンテンツが分かりやすい H2/H3 見出しで構造化されている。
  • ページに含まれるべき主要情報: 会社概要、プロダクト/サービス、差別化要因、料金モデル、連絡先情報、FAQ。
  • AI システムが構造化された事実を抽出できるように、Organization と FAQPage のスキーマが設定されている。
  • コンテンツが事実に基づいており、簡潔で引用しやすいものである（マーケティング的な誇張は避ける）。
  • 提供内容の変更に合わせて情報が最新の状態に保たれている。

​
監視とメンテナンス: SEO と GEO を健全に保つ

効果的な SEO と GEO のためには、継続的な監視が欠かせません。Google Search Console と定期的な状況確認を活用して、サイトを良好な状態に保ち、インデックスを維持し、長期的に高いパフォーマンスを発揮できるようにしましょう。

​
Google Search Console (GSC) の設定

Google Search Console は、Google がサイトをどのようにクロール・インデックス・ランキングしているかを確認できるツールです。SEO パフォーマンスを追跡し、技術的な問題を発見するための重要なツールです。
独自ドメイン を使っている場合は、必ず Google Search Console で ドメインの所有権を登録・確認（ベリファイ） してください。サイト所有権の確認（いずれか 1 つの方法を選択）ドメインを確認して、Google がサービスを提供する前に、サイトの所有者であることを証明します。Google はこの確認情報を使って、本番ドメインのインデックス、サイトマップの状態、検索パフォーマンスを追跡します。
  • DNS TXT レコード（推奨）：ドメインプロバイダの DNS 設定に TXT レコードを追加
  • メタタグによる確認：Lovable にメタタグを追加するようプロンプトする
GSC の確認用メタタグを追加: <meta name=‘google-site-verification’ content=‘YOUR_CODE’ /> を <head> に追加
  • HTML ファイルのアップロード：Google の確認ファイルをアップロードし、Lovable にサイトルート（通常は /public）に配置するよう依頼
サイトマップを送信する
  1. GSC で Sitemaps に移動
  2. サイトマップ URL を入力：https://yourdomain.com/sitemap.xml
  3. Submit をクリック
 Google が処理してレポートを出すまでに 24〜48 時間 かかる場合があります。URL 検査ツールを使うこのツールを使って、次のことを行います：
  • Google が実際のコンテンツ（空白ページではないもの）を見ているか確認する
  • CSR（クライアントサイドレンダリング）の問題を診断する
  • 重要なリソース（JavaScript や CSS）がブロックされていないか確認する
任意の URL について：
  1. URL Inspection バーに URL を入力
  2. Test Live URL をクリック
  3. View Tested Page を開き、次を確認：
    • Googlebot が見ているスクリーンショット
    • レンダリング後の HTML
    • コンソールエラー
    • ブロックされているリソース
  4. 新規または更新されたページについては Request Indexing をクリック（レート制限あり）
毎週モニタリングすべきレポート
  • Coverage/Page indexing（カバレッジ／ページのインデックス登録）:
    • インデックス済みページと除外されたページ
    • クロールエラーと除外理由
    • インデックス状況の推移
  • Performance（search results／検索パフォーマンス）:
    • 表示回数、クリック数、CTR、平均掲載順位
    • 上位のクエリとページ
    • 可視性が向上・低下しているページ
  • Core Web Vitals:
    • 実環境での LCP、INP、CLS
    • 低速または問題のあるページの特定
    • モバイルとデスクトップのパフォーマンスを比較
  • Mobile usability（モバイルユーザビリティ）:
    • タップターゲット、ビューポート、コンテンツ幅に関する問題
    • エラーを修正してモバイル検索順位を維持

​
推奨メンテナンススケジュール

SEO と GEO を良好な状態に保つには、定期的なチェックが必要です。次の継続的なチェック用スケジュールを使って、インデックス周りの問題、パフォーマンスの変化、コンテンツ更新を先回りして把握しましょう。
毎週
  • GSC の「カバレッジ」で新しいエラーと新規インデックス済みページを確認する
  • 検索パフォーマンスのトレンドをざっと確認する
  • 新たに重要になった URL に対して URL 検査を実行し、必要に応じてインデックス登録をリクエストする
毎月
  • ページが変わった場合は sitemap.xml を更新する
  • 成果が出ていないタイトルとディスクリプション（CTR が低いページ）を見直す
  • 組み込みの Speed tool（Lighthouse 監査） を実行する
  • 小規模なコンテンツ改善や被リンク獲得（リンクビルディング）を行う
四半期ごと
  • より深い技術的なサイト監査を行う：正規 URL 設定（canonical）、robots.txt、スキーマ、内部リンク、モバイルユーザビリティ
  • キーワードのパフォーマンスと主要なランディングページを確認する
  • 古いコンテンツやパフォーマンスが落ちているコンテンツをリフレッシュする

​
よくある質問

はい。Lovable で作成したアプリは、最新の JavaScript サイトと同様に検索結果で上位表示される可能性があります。コンテンツが正しく読み込まれ、重要なリソースがブロックされていなければ、Google はページをクロール、レンダリング、インデックスし、ランキングできます。現在、良好な結果が出ている例:最良の結果を得るには、このガイドで紹介している技術面およびコンテンツ面の推奨事項、特にメタデータ、パフォーマンス、サイトマップ設定に関する内容に従ってください。
検索パフォーマンスは、コンテンツの品質、被リンク、競合状況、検索ランキングアルゴリズムなど、Lovable の制御範囲外の要因にも左右されます。
Lovable で強力な SEO と GEO の成果を得るには、このガイドで説明するベストプラクティスに従ってください。特に次のポイントを必ず押さえましょう。コンテンツとオンページ対策
  • 独自性があり高品質なコンテンツを書く
  • 明確な検索意図とロングテールキーワードを狙う
  • 必要に応じて網羅的なページを作成する
  • コンテンツを常に最新かつ関連性の高い状態に保つ
  • 見出し構造を整理し、セマンティックな HTML を使う
  • 重要なページには JSON-LD スキーマを追加する
画像
  • 容量の大きな画像は圧縮する
  • 説明的な alt テキストを追加する
  • 効率的な形式（WebP/AVIF、SVG）を使用する
内部リンク
  • 説明的でキーワードを含んだアンカーテキストを使う
  • 関連するページ同士をリンクする
  • 重要なページには複数の内部リンクが集まるようにする
技術面
  • Core Web Vitals を最適化する
  • 組み込みの Speed ツール を使ってパフォーマンスの劣化を早期に検知する
  • モバイルでも問題なく利用できるようにする
  • すべてのページに正しいメタデータを設定する
  • 正確な sitemap と robots.txt を維持する
  • 独自ドメイン を使用し、それを プライマリドメイン に設定する
  • Google Search Console でドメインの所有権を確認する
バックリンク
  • ガイド、ツール、調査など、リンクしたくなるコンテンツを作成する
  • 関連サイトにゲスト投稿を書く
  • 補完関係にあるビジネスと提携する
  • 信頼できるディレクトリにサイトを掲載する
  • ニュース性のあるアップデートを共有し、コミュニティと積極的に交流する
インデックス作成には通常、数時間から数日かかります。次の方法でインデックス作成を早められます。
  • GSC にサイトマップを送信する
  • URL 検査でページをテストする
  • 優先度の高いページでは インデックス登録をリクエスト を利用する
ページが検索結果に表示されない場合は、まず次の基本事項を確認してください：
  • Coverage レポートまたは URL 検査を使って、GSC 上でインデックス状況を確認する
  • サイトマップを送信済みで、その URL が含まれていることを確認する
  • コンテンツの品質、検索意図との整合性、タイトル・ディスクリプション・見出し・内部リンクなどのオンページ SEO を見直す
  • 技術的な健全性を確認する：パフォーマンススコアが良好であること、モバイルで問題なく利用できること、JavaScript や CSS がブロックされていないこと
Lovable は、多くの SEO および GEO のシナリオでうまく機能します。とくに、メタデータ、内部リンク、サイトマップを戦略的に管理できる、小規模から中規模のサイトに向いています。

​
適しているシナリオ

  • マーケティングサイトやランディングページ
  • スタートアップやビジネス向けのウェブサイト
  • シンプルなブログやドキュメントサイト（約 200 ページまで）
  • ポートフォリオサイトや個人サイト
  • 内部ツールやダッシュボード（SEO 不要）
  • 認証の裏側にあるアプリ（インデックスさせるべきではない）
  • メタデータ管理が容易な小規模サイト（5〜20 ページ）
  • リファラル、ソーシャルトラフィック、広告チャネル、プロダクト主導型グロースに依存するプロジェクト
  • 継続的にメンテナンスされるコンテンツ主導のブログ（記事数 約 50 本以上）
  • メタデータを丁寧に管理できる中規模 EC サイト（数百点のプロダクト）
これらのケースで SEO と GEO がうまく機能しやすい理由
  • ページ数が管理可能な範囲で、メタデータやサイトマップを正確に保てる
  • Google は CSR（クライアントサイドレンダリング）サイトも安定してレンダリングするため、コンテンツはインデックスおよびランキング可能
  • Lovable 上でのパフォーマンスとモバイル最適化がシンプル
  • タイトル、ディスクリプション、スキーマ、OG タグ、内部リンクなど、重要な要素を手動で維持できる

​
SSR やプリレンダリングが有効になる場合

一部の大規模または競争の激しいプロジェクトでは、サーバーレンダリングやプリレンダリングされたページを Lovable と組み合わせて活用することで、クロール効率やプレビューの信頼性を高めることができます。
  • 非常に大規模なサイト（数百〜数千ページ、大規模カタログ、膨大なブログライブラリなど）
  • オーガニック検索が主な成長チャネルであるプロジェクト
  • 競争が激しい、または時間依存性の高い分野（ニュース、金融、法務）
  • AI / LLM での最大限の可視性が優先事項となるプロジェクト
これらが SSR やプリレンダリングの恩恵を受けやすい理由
  • 大規模サイトでは、メタデータやサイトマップの自動化が不可欠
  • SSR / プリレンダリングは、検索エンジンによる初回コンテンツ発見を高速化できる
  • JavaScript を実行しないソーシャルや AI クローラーでも、完全なプレビューを即座に取得できる
はい。次のようなことを重視するなら、独自ドメインへの切り替えは最も効果的なアップグレードの1つです。
  • オーガニック検索からのトラフィック
  • 強力で長期的なブランディング
  • 競争力のある SEO
  • 時間とともに価値が高まる被リンク
  • テクニカル SEO を自在にコントロールできること
Lovable では次のことが行えます：
  • 自分のドメインまたはサブドメインを接続する
  • 1つのプライマリドメインを選ぶ（他のすべてのドメインはそこへリダイレクトされます）
独自ドメインを設定したら、Google が正しいドメインをクロールしてインデックスできるように、Google Search Console で検証してください。詳細な設定手順については、カスタムドメインを参照してください。lovable.app サブドメインは次のような用途に適しています：
  • MVP やデモ
  • 一時的または実験的なランディングページ
  • 社内ツール
  • 主にソーシャル経由や広告からのトラフィックに依存するプロジェクト
多くの AI クローラーは通常 JavaScript を実行しないため、最初に取得できる HTML に依存します。つまり、クライアントサイドでレンダリングされるコンテンツは認識されない可能性があります。次の点を押さえることで、こうしたクローラーからもコンテンツへアクセスしやすくできます。
  • 重要な事実を静的コンテンツとして含めた、クリーンでセマンティックな HTML
  • 包括的な schema マークアップ
  • /llm.html や /about-ai.html といった LLM 向けの専用サマリーページ（sitemap にも含める）
  • 明確で引用しやすいコンテンツ（定義、FAQ、簡潔な事実ベースの回答）
  • サイトマップ: URL が変更されたタイミング、またはアクティブなサイトでは少なくとも月に 1 回更新します。
  • メタデータ（タイトルとディスクリプション）: 毎月見直して、クリック率が低いページを改善します。
  • パフォーマンス: 月に 1 回 Lighthouse チェックを実行し、Core Web Vitals（LCP、INP、CLS）を確認して、速度やユーザビリティの問題を早期に発見します。
  • 技術監査: カノニカル、robots.txt、スキーマ、内部リンク、リダイレクト、モバイルユーザビリティを四半期ごとにレビューします。
  • コンテンツ: 重要なコンテンツは四半期ごと、またはランキングやトラフィックが下がった場合はそれより早く更新または拡充します。
Prerendering（dynamic rendering とも呼ばれます）は、ボット向けの静的な HTML スナップショットを生成しつつ、人間の訪問者には引き続き JavaScript で動作するアプリを表示する仕組みです。これにより、検索エンジンや AI クローラーがコンテンツをよりすばやく理解できるようになります。Prerendering は、特に次のような場合に有効です：
  • コンテンツ量の多いサイト
  • 新しいページを頻繁に公開するサイト
  • SEO を重視した、競合の激しいニッチ領域
  • より速いインデックス登録が必要なプロジェクト
  • 多くのクローラーが JavaScript を実行せず、完全にレンダリングされた HTML から恩恵を受けるため、AI／LLM 向けの可視性を高めたい場合
Lovable には Prerendering が標準では含まれていませんが、ホスティングやプロキシ側で、次のような外部サービスを使って追加できます。
  • Prerender.io：広く使われている信頼性の高いオプション
  • DataJelly：シンプルなセットアップで同様の機能を提供
  • Rendertron：オープンソースの代替手段（セルフホスト型）
クライアントサイドレンダリング（CSR）は多くのサイトでうまく機能しますが、SEO、GEO、プレビューの挙動を最適化するために注意すべき点がいくつかあります。以下のように対応しましょう。
  • インデックス登録は SSR より少し遅くなる場合があります → サイトマップを送信し、優先度の高いページには URL Inspection ツールを使いましょう。
  • 多くの AI クローラーや一部のボットは JavaScript を実行しません → セマンティックな HTML と適切なスキーマを使い、必要に応じて LLM 向けの要約ページの追加も検討してください。
  • ソーシャルプラットフォームはリンクプレビューのために JavaScript を実行しません → 静的 HTML に直接 Open Graph と Twitter/X Card タグを追加してください。
  • ルート間でメタデータが自動更新されません → Lovable に react-helmet-async のインストールを依頼し、各ページごとに一意の title と description を設定してください。