Webサイト基本ガイドライン

静的Webサイト全体に関わる、基本的なガイドラインや対応方針を記載します。

リソースの読み込み

内部リソース

リソースの更新時は、確実に更新された内容が反映されるようにしてください。静的Webサイトでは、Cache Bustingパラメータを付与し、別名扱いとして読み込みます。

<!-- ❌️ -->
<link rel="stylesheet" href="/assets/main.css" />

<!-- ✅️ -->
<link rel="stylesheet" href="/assets/main.css?v=20260607130130" />

外部リソース

外部リソースを利用する場合は、それがWebサイトやアプリケーションの基本的な動作の障害点にならないように実装して下さい。

内部リソース化の検討

不必要に外部リソース依存を増やす必要はありません。内部リソース化が可能な場合は、外部リソースではなく内部リソースとして管理・読み込みをして下さい。

<!-- ❌️ code.jquery.comがダウンした場合、Webサイトの動作に影響がある -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

<!-- ✅️ 外部リソースへの依存がない -->
<script src="/assets/jquery-4.0.0.min.js"></script>

外部リソースのFallback

外部リソースが正常に読み込めなかった場合でも、Webサイトの基本的な動作を担保するためにFallback対応を行います。

Google Fontsが読み込めなかった場合:
適切な代替フォントが表示されるように、CSSの font-family を指定して下さい。
外部APIが読み込めなかった場合:
「情報が取得できませんでした」文言を表示するなど、Fallback / Error Handling 対応をして下さい。
Google Analyticsタグが読み込めなかった場合:
Webサイトの基本的な動作には影響がないため、Fallback対応をする必要はありません。

共通リソースの読み込み / 順序

CSSやJavaScript等の共通リソースの読み込みは、適切に実行がされるように、また、可能な限りブラウザレンダリングをブロックしないように読み込んで下さい。

<!-- ✅️ 特に事情がなければ、CSSはJSより先に読み込みます -->
<link rel="stylesheet" href="/assets/main.css" />
<script type="module" src="/assets/main.js"></script>

<!-- ✅️ 外部リソースドメインへの事前接続が有効な場合は、preconnectを記述します -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet" />

<!-- ✅️ スクリプト実行時にDOM依存がある場合は、defer属性を付与します -->
<script type="module" src="/assets/main.js" defer></script>

<!-- ✅️ BuildバンドラがESMの場合は、type="module" を付与します -->
<script type="module" src="/assets/main.js"></script>

<!-- ❌️ </body> 直前でのリソース読み込みは古い手法です。<head> 内で読み込んで下さい -->
  <link rel="stylesheet" href="/assets/main.css" />
  <script type="module" src="/assets/main.js"></script>
</body>

計測タグ / スクリプトの読み込み

計測やマーケティング関連の外部リソースは、特に事情がない限り、Google Tag Manager（GTM）経由で読み込みます。

プロジェクトによっては、Adobe Launchなど、別のツールを利用する場合があります

構造化データ

Webサイトの情報を伝える構造化データはSEOやGEO（AIO）に効果的です。対応できるものは各ページに記述します。

記述形式が複数ありますが、JSON-LD形式を利用して下さい。
構造化データのチェックには、スキーママークアップ検証ツールを利用して下さい。

サイト名

実装リファレンス（Google 検索に対してサイト名を指定する）
TOPページのみの記述で問題ありません

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Site Name",
    "url": "https://xxxx.xxxx"
  }
</script>

パンくずリスト

実装リファレンス（パンくずリスト（BreadcrumbList）の構造化データ）

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": "https://xxxx.xxxx",
        "name": "サイト名称"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "ページタイトル"
      }
    ]
  }
</script>

その他の構造化データ

上記に記載のもの以外にも適用できる構造化データがあれば、記述を推奨します。

Google 検索がサポートする構造化データマークアップ

Speculation Rules

事前にリンク先ページを読み込んでおくことで、クリック時に即座に表示可能とするブラウザAPIです。JSONで投機的な先読みルールを記述します。

推奨設定

<script type="speculationrules">
  {
    // HTMLの先読みを行う "prefetch" を利用
    "prefetch": [
      {
        // 全ての内部リンクの<a>タグで実行
        "where": {
          "href_matches": "/*"
        },
        // リンクホバーで実行
        "eagerness": "moderate"
      }
    ]
  }
</script>

robots.txt

各Webサイトのドメイン直下には、検索クローラ動作を制御する robots.txt を設置します。

クロールを拒否したいディレクトリがある場合には、それを記述します
sitemap.xml のURLを明示的に記述します。複数存在する場合は、全て記述します
User-agent を指定することにより、特定のクローラに対してAllow / Denyを記述可能です
構文テストは、Google Search Consoleで可能です

User-agent: *
Allow: /
Disallow: /includes

Sitemap: https://xxxx.com/sitemap.xml
Sitemap: https://xxxx.com/news/sitemap.xml

sitemap.xml

検索クローラに、Webサイトのページリストを提供します。

構文テストは、Google Search Consoleで可能です
複数のXMLファイル（sitemap-child-site.xml 等）が存在しても構いません。その場合は、robots.txt に記載します。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://colsis.jp/</loc>
    <lastmod>2026-06-11T18:06:37+09:00</lastmod>
  </url>
  <url>
    <loc>https://colsis.jp/aboutus/</loc>
    <lastmod>2026-06-11T18:06:37+09:00</lastmod>
  </url>
  ...
</urlset>

noindexページの扱い

検索インデックスに不要なページは、sitemap.xml には記述しません。検索クローラ向けにページリストを提供しているにも関わらず、インデックスを拒否している場合、Search Console等で該当ページがエラー判定となります。

robots.txt でクロール拒否をしている
<meta name="robots" content="noindex" /> をページに付与している、等

動画がメインコンテンツとなるWebサイトの場合

sitemap.xml には、動画や画像情報を含めることが可能です。特に、オリジナル動画がメインコンテンツとして成立している場合は効果的です。

実装リファレンス（動画サイトマップとサイトマップの代わり）

rss.xml

ブログやニュースなどの更新性のあるコンテンツがある場合は、rss.xml を設置します。RSS Readerに更新情報を伝えることができるRSS Feedを提供します。

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>News｜株式会社COLSIS</title>
    <atom:link href="https://colsis.jp/news/rss.xml" rel="self" type="application/rss+xml" />
    <link>https://colsis.jp/news/</link>
    <description>株式会社COLSISのブログです。</description>
    <language>ja</language>
    <item>
      <title>東レACS株式会社様の実績を追加いたしました。 </title>
      <link>https://colsis.jp/works/toray-acs/disaster-recovery/</link>
      <pubDate>Thu, 23 Apr 2026 13:57:02 +0900</pubDate>
      <category>リリース</category>
      <media:thumbnail url="https://colsis.jp/assets/img/common/ogp.png" />
      <guid isPermaLink="true">https://colsis.jp/works/toray-acs/disaster-recovery/</guid>
      <description>株式会社COLSISはシステム開発とUXデザイン、人や組織、多岐にわたる技術を、つなげてつくりあげるウェブサイト・システム開発会社です。</description>
      <content:encoded>
      <![CDATA[
      ]]>
      </content:encoded>
    </item>
    ...
  </channel>
</rss>

URLのリダイレクト

リニューアルや改修でページやアセットのURLが変更となった際には、URLのリダイレクト設定を行います。

旧URLから新URLへは必ず 301リダイレクト（恒久的）
302（一時的）は、SEO評価が引き継がれないため、一時的、または、テスト用途にのみ利用します
できる限り 1対1 で対応します。旧URL → TOP等の大雑把なリダイレクトはSEO評価を捨てることになります

リダイレクトキャッシュ

WebブラウザやCDNは、リダイレクト結果をキャッシュします。特に、301リダイレクトは強くキャッシュを保持します。そのため、301リダイレクトを設定する場合は、キャッシュを保持しない302リダイレクトでの事前テストを強く推奨します。

リダイレクトチェーン

❌ 旧URL → 中間URL → 新URL（2段階）
✅ 旧URL → 新URL（1段階）

リダイレクトチェーンが発生するとPageRankの損失・表示速度の低下につながります。過去のリダイレクト設定が残ってる場合は統合を推奨します。

Webサイトの内部リンクや参照の更新

リダイレクト対応がされていれば、旧URLへのリンクや参照が残っていてもWebサイトの閲覧は可能です。しかし、メンテナンス性やリダイレクトチェーンを考慮して、Webサイトの内部リンクや参照を全て新URLへ書き換えて下さい。

あくまでも、リダイレクトは外部から参照された際のFallbackであり、Webサイト自体は常に最新の状態に保つ、という認識を持つことが大事です。

URLの正規化

同一コンテンツに複数のURLでアクセスできる状態は、SEO・分析・キャッシュに悪影響を与えます。そのため、一意のURLでアクセスされるように、URLの正規化を行います。

トレイリングスラッシュ（末尾スラッシュ）の統一

静的Webサイトでは、スラッシュありに統一し、スラッシュなしの場合は301リダイレクトします。

❌ https://example.com/about
✅ https://example.com/about/

Apache・Nginxのデフォルト挙動と合わせやすい
ディレクトリ構造を明示できる
スラッシュなしに統一する場合も可。どちらかに統一することが重要です
- 動的Webサイト・アプリケーションの場合は、スラッシュなし統一が一般的です

インデックスファイルの省略

index.html / index.php 等を含まないURLに統一し、含むURLは301リダイレクトします。

❌ https://example.com/about/index.html
✅ https://example.com/about/
✅ https://example.com/about/company.html

HTTPSへの統一

HTTPSに統一し、HTTPは301リダイレクトします。

❌ http://example.com/
✅ https://example.com/

wwwあり / なしの統一

どちらかに統一し、片方は301リダイレクトします。現代では、wwwなしが一般的です。

❌ https://www.example.com/
✅ https://example.com/

大文字 / 小文字の統一

すべて小文字に統一することを推奨します。

❌ https://example.com/About/
✅ https://example.com/about/

URLは大文字・小文字が区別される（case-sensitive）ため、リンクやサイトマップで表記ゆれが起きやすい
CMSやフレームワーク側で小文字強制する設定を入れることを推奨します

エラー画面の設置

Webサイトが正常動作ではない場合に、ユーザーに提供するエラー画面を設置します。

ステータス	意味	備考
404	ページが見つからない	必ず設置します
500	サーバー内部エラー	動的Webサイトの場合に必要です
403	アクセス禁止	実質的な振る舞いが変わらないため、404と同様の扱いとします
503	メンテナンス中	メンテナンス時に表示できるようにしておきます

エラー画面の設置場所

エラー画面（特に503）は、全てのリクエストをFallbackするために、CDNやエッジ・ネットワークレイヤー等から配信することがあります。その場合、オリジンサーバーのCSSファイル等は読み込むことができません。

プロジェクトのインフラ構成を踏まえて、どのレイヤーにどのエラー画面を設置すべきか確認・判断をして下さい。

オリジンサーバー以外から配信するエラー画面の作成

オリジンサーバーリソース依存をなくし、そのhtmlファイル単体で表示が成立するエラー画面を作成します。

利用する全ての画像・CSS・JavaScriptをインラインで埋め込みます
リッチな画面構成にする必要はありません。シンプルで軽量なページを作成します

コピーライト表記

慣習として様々なコピーライト表記がありますが、現代では法的意味は持ちません。そのため、シンプルな表記を推奨します。

✅ © COLSIS inc.

年表記（© 2020 - 2026 COLSIS inc. 等）を行う場合は、必ず最新年の表示を自動化して下さい。年をまたぐ度にWebサイト更新が必要になる実装はよくありません。

非公開環境の設定

cms環境や開発環境などの、グローバルに公開していない非公開ドメイン領域の設定についてです。

アクセス制限

必ず、固定IPやBasic認証などのアクセス制限を設定します。また、実際に適用されていることを確認します。

Response Header

Response Header自体に、非公開環境用の設定をします。

X-Robots-Tag: noindex, nofollow # noindex対応
Referrer-Policy: no-referrer # 外部Webサイトへreffererを送りません

noindex, nofollow は、robots.txt でも制御可能ですが、Response Headerで対応する方法が確実です

検索エンジンにインデックスされてしまった場合

諸事情により、非公開環境コンテンツがグローバルに公開されてしまい、検索エンジンにインデックスされてしまった場合の対処方法です。

主要な検索エンジンの管理ツールで、非表示リクエストを行うことができます。リクエストが承認・反映されるまで時間がかかる場合があります。

Google検索: Google Search Console
Bing検索: Bing Webmaster Tool

Open Graph Protocol（OGP）対応

各ページの<head>には、SNS等でURLがシェアされた際に表示されるOGP情報を記述します。

推奨設定

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/canonical-url" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@youraccount" />

og:image

Webサイトのデフォルト用のOG画像を作成し、全てのページに設定します
各ページでは、固有の画像を上書きで指定できるようにします
画像の推奨サイズは、1200×630px。拡張子は、JPEGまたはPNGを利用して下さい

Facebookは一度クロールしたページのOGP情報を強くキャッシュします。ページ側でOGP情報を更新した後も、古い情報がシェアされ続けます。新しい情報を反映するには、専用ツールでFacebook側のキャッシュをクリアする必要があります。

Facebook Sharing Debugger
「もう一度スクレイピング」ボタンを押すとキャッシュを強制更新できます
設定したOGP情報のプレビューやデバッグが可能です

Webサイトのリニューアル公開時、クライアントはSNSで告知を行ったりします。その際、「古いOGP情報でシェアされてしまう」という事例がよくあります。Webサイトリニューアルやキャンペーンページ作成のプロジェクト等では、公開後に主要ページのOGP情報のプレビューとキャッシュクリアを徹底して下さい。

Favicon / Touch Icon対応

ブラウザタブやiPhoneホーム画面に表示されるアイコンを <head> に指定します。

<!-- モダンブラウザ用PNG（96×96でブラウザタブはカバーできる） -->
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />

<!-- SVG favicon（ダークモード対応・Chrome/Firefox/Edge） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- レガシーブラウザ & PDFなどHTML以外のドキュメント用フォールバック -->
<link rel="shortcut icon" href="/favicon.ico" />

<!-- iOS ホーム画面 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest" />

アイコンアセットの作成

様々なアイコン形式や設定が存在するため、Favicon Generatorで一括で自動生成を行います。正方形のSVGファイルを作成し、元画像として登録します。その後、出力されたコードを設定します。

印刷対応

基本的には、印刷用のスタイル調整を行うことはあまりありません。機能リクエストや印刷崩れが発生している場合に対応します。

Webブラウザの印刷機能の利用時は、A4等の紙サイズ指定があります。そのため、Webブラウザで表示している見た目では印刷されず、紙サイズの横幅をウィンドウ幅としたレスポンシブレイアウトで印刷されます。そのため、スマートフォンで印刷を行った場合でも、A4基準のレイアウト（タブレットサイズ相当）で印刷されます。

レスポンシブレイアウトが対応されているWebサイトであれば、印刷時でも大きくレイアウトが崩れることはありません。

印刷スタイル

印刷時にスタイル崩れが発生する場合は、最低限の可読性が担保できるように印刷スタイルを対応して下さい。プロジェクトによっては、機能リクエストで印刷時に独自スタイルを適用する場合もあります。

CSSの @media (print) 構文で、印刷時専用のスタイル定義が可能です
Webブラウザごとに印刷時のスタイル適用に多少のズレがあります。完璧なコントロールはできません

メディアファイルの利用

画像・動画・音声・PDF等のメディアファイルは、ネットワーク転送量の殆どを占めます。これらは、元データのままではなく、サイズ・容量・品質が最適化されたものをWebサイトで利用します。

画像ファイル

画像ファイルは、Webサイトで最も利用されるメディアファイルです。その分、パフォーマンスに与える影響も大きいため、最適化の対応が重要になります。

適切なファイル形式

ファイル形式によって、圧縮率や画質に違いがあります。適切なファイル形式で画像を作成して下さい。

容量は軽い順から、SVG -> AVIF -> WebP -> JPEG -> PNG です。まずは、SVGから対応可能か判断して下さい

ファイル形式	透過	圧縮方式	用途
SVG	✅	-	ロゴ・アイコン・図・チャート等のシンプルなベクターグラフィクス
JPEG	❌	Lossy（非可逆圧縮）	写真や複雑なグラデーションを含む画像
PNG	✅	Lossless（可逆圧縮）	SVGでは表現できないグラフィクス
WebP	✅	Lossy / Lossless	JPEG・PNGの上位互換
AVIF	✅	Lossy / Lossless	JPEG・PNGの上位互換

適切な画像サイズ（DPR対応）

Webサイト上で横幅200pxの画像描写をしている場合、画像自体のサイズが1000pxである必要はありません。不必要に大きな画像サイズを利用すると、ネットワーク転送量が大きくなり、パフォーマンスに悪影響を与えます。適切なサイズの画像を作成し利用して下さい。

画像サイズは、DPR（Device Pixel Ratio）を考慮し、表示領域の1.5〜2倍を推奨します
SVGは、ベクター形式のためサイズを意識する必要はありません

容量削減

適切なファイル形式・画像サイズを対応した後は、最適化ツールによる容量削減を試みます。

人間の目にはわからないレベルで、画質を維持したまま容量が大きく削減されます。不要なメタデータ（EXIF情報など）も削除されます
逐一対応するのではなく、最後に一括で対応する、または、CLIやBuild Pipeline等で自動で処理します
手動利用で推奨するツールはImageOptimです。ローカルPCで完結ができるため、セキュリティが担保されます

動画ファイル

最も容量が大きいメディア形式です。リッチな表現が可能ですが、その分容量が大きいため、利用には注意が必要です。

コンテンツ用途

コンテンツ動画は、YoutubeやVimeo等の動画配信サービスにアップロードし、それをWebサイトに埋め込む形式を推奨します。

動画配信はライブ配信でなくとも、それ単体でネットワーク転送量・帯域コストが多くかかり、高負荷・高課金となってしまいます
動画配信サービスが利用できないプロジェクト要件がある場合は、インフラ担当と検討が必要です

背景・装飾用途

Webサイト上に直接表示する動画では、背景や装飾用途が一番多いです。

まずは、容量の削減を意識した動画ファイルを作成します。

10秒以内、5MB以下を目標
HD（1920x1080）は過剰で、1280x720サイズで十分なことが多いです
音声は不要です

<video autoplay muted loop playsinline preload="none" poster="/img/video-poster.jpg">
  <source src="/video/hero.webm" type="video/webm" />
  <source src="/video/hero.mp4" type="video/mp4" />
</video>

muted 属性を付与しミュート動画とします。Webブラウザの機能により、音声込みでは自動再生することができません
poster 属性で、動画が読み込まれるまでのFallback画像を設定します

音声ファイル

音声ファイルも動画ファイル同様に、まずは、動画配信サービスやSpotify等のPodcast配信サービスの利用を検討します。その後、Webサイトに埋め込みます。

装飾目的については、通常のWebサイトでは殆ど利用しないため説明は省略します。（ブラウザゲーム等では、音声ファイルを多用します）

PDFファイル

多くのPDFファイルは、クライアントから提供されます。こちら側で勝手に編集してはいけません。指摘事項がある場合は、その内容をクライアントに共有します。

PDFファイルを作成・編集する場合

こちら側でPDFを作成する場合は、Adobe Acrobat等のPDF編集ソフトの「Web用に書き出し」機能で出力されていれば問題ありません。自動で容量の削減がされます。

リソースの削減・圧縮

Webサイトで利用するリソースは、容量が大きいほど読み込み遅延が発生し表示パフォーマンスに影響を与えます。可能な限り容量を削減し、圧縮して配信を行います。

メディアファイル

画像・動画・音声等の、Webサイト表示においてネットワーク転送量の殆どを占めるファイルです。これらのファイルは、サイズ・容量・品質を最適化します。

ソースファイルの圧縮・分割

ViteなどのBuildツールを利用している場合、cssやjsファイルは、動作に影響がないレベルで容量の圧縮がされます。

Bundleファイルの容量が大きくなってしまった場合、chunk splitの仕組みを用いて、複数ファイルに分割することが可能です

圧縮配信

オリジンサーバーやCDNレイヤー等では、テキストファイルの圧縮配信が可能です。Webブラウザでは、対応する圧縮形式のファイルを受け取り、それを展開して読み込むことが可能です。これにより、Webサイトで利用されるリソースのネットワーク転送量を劇的に削減することができます。

Webサイト表示の高速化に繋がります
ネットワーク転送量が削減されることにより、CDN等の利用料金の削減に繋がります
対応する形式はテキストファイルであり、.html, .css, .js, .svg, .json .xml 等が該当します

全てのモダンWebブラウザでは、高圧縮率の Brotli 形式が対応されており、この圧縮形式の配信対応を推奨します。

GEO（AEO・AIO）

GEO（Generative Engine Optimization）・AEO（Answer Engine Optimization）・AIO（AI Optimization）等と呼ばれる、AIクローラ最適化対応についてです。「AI検索・LLMに引用・言及されやすくするための最適化」を目標とします。

現状では、日々ベストプラクティスが更新されるため、最新の情報も合わせて参照して下さい。

SEOとの関係

GEOはそれ独自の最適化手法がありますが、SEO対策も依然として有効です。相互に内容を補完する関係性にあります。

特にGEOでは、ファクト密度・構造化データ・引用されやすさ・権威性が重要視される傾向にあるようです
Google 検索の生成 AI 機能向けにウェブサイトを最適化する

計測指標

GEOは、施策対応の前後比較を計測しにくい状況にあります。現時点では、AI引用率（AI Citation Rate） が適していると言われています。

Ahrefs等のSEOサービスでは、各サービス独自のAI引用率を確認することができます

llms.txt

llms.txt は、AIクローラにWebサイトの重要コンテンツへの目次を提供します。ドメイン直下に配置します。

有用性に疑念がある情報もありますが、対応工数が低く、デメリットもないため、投機的な設置対応を推奨します
記述はMarkdown形式です

# 株式会社COLSIS

> Movable Typeを中心としたWeb制作・システム・プラグイン開発会社

## 重要コンテンツ

- [サービス概要](/service): MTを活用したWeb制作サービス
- [3rdFocus プラグイン](https://3rdfocus.jp): MT向けプラグインブランド
- [ブログ](/blog): MT・Web制作の技術情報
...

AIクローラの制御

検索クローラ同様にAIクローラも robots.txt が有効です。特別な理由がない限りは、Denyでブロックしないことを推奨します。

主要AIクローラーのUser Agent

GPTBot
ClaudeBot
PerplexityBot
Google-Extended
Applebot

Cloudflareは、新規ドメインについて、デフォルトでAIクローラをブロックする設定を有効化しています。全部乗せ系のプラットフォームについては、設定を確認することを推奨します

AIクローラのContent Visibility

主要なAIクローラは、クライアントサイドでのJavaScriptレンダリング（CSR）された動的コンテンツを認識することができません。例外として、Google関連のAIクローラは検索エンジンリソースを利用して認識が可能です。

現状では、AIクローラにとってCSRコンテンツは存在しないものと扱われます。メインコンテンツや重要な情報は、CSRは避けてHTMLソースに直接記述されるように実装することが重要です。

AI Content Visibility Checker: Adobe製のAIクローラのコンテンツ可読性チェッカー

`<head>`記述サンプル

基本となる <head> 記述のサンプルです。Webサイト毎に必要/不必要な記述を判断して利用して下さい。

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>Page Title</title>
  <meta name="description" content="Page Description" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="canonical" href="https://xxxx.xxxx/" />
  <meta name="robots" content="index, follow, max-image-preview:large" />

  <!-- ogp -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page Description" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/canonical-url" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta property="og:locale" content="ja_JP" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@youraccount" />

  <!-- icons -->
  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- rss -->
  <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />

  <!-- Google Tag Manager -->
  <script>
    ...
  </script>
  <!-- End Google Tag Manager -->

  <!-- resources -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/assets/bundle/main.css?v=20260607130130" />
  <script type="module" src="/assets/bundle/main.js?v=20260607130130" defer></script>

  <script type="speculationrules">
    {
      "prefetch": [
        {
          "where": {
            "href_matches": "/*"
          },
          "eagerness": "moderate"
        }
      ]
    }
  </script>
</head>

Webサイト基本ガイドライン

リソースの読み込み

内部リソース

外部リソース

内部リソース化の検討

外部リソースのFallback

共通リソースの読み込み / 順序

計測タグ / スクリプトの読み込み

構造化データ

サイト名

パンくずリスト

その他の構造化データ

Speculation Rules

推奨設定

robots.txt

sitemap.xml

noindexページの扱い

動画がメインコンテンツとなるWebサイトの場合

rss.xml

URLのリダイレクト

リダイレクトキャッシュ

リダイレクトチェーン

Webサイトの内部リンクや参照の更新

URLの正規化

トレイリングスラッシュ（末尾スラッシュ）の統一

インデックスファイルの省略

HTTPSへの統一

wwwあり / なしの統一

大文字 / 小文字の統一

エラー画面の設置

エラー画面の設置場所

オリジンサーバー以外から配信するエラー画面の作成

コピーライト表記

非公開環境の設定

アクセス制限

Response Header

検索エンジンにインデックスされてしまった場合

Open Graph Protocol（OGP）対応

推奨設定

og:image

Facebook Sharing Debugger（OGP Debugger）

Favicon / Touch Icon対応

アイコンアセットの作成

印刷対応

印刷スタイル

メディアファイルの利用

画像ファイル

適切なファイル形式

適切な画像サイズ（DPR対応）

容量削減

動画ファイル

コンテンツ用途

背景・装飾用途

音声ファイル

PDFファイル

PDFファイルを作成・編集する場合

リソースの削減・圧縮

メディアファイル

ソースファイルの圧縮・分割

圧縮配信

GEO（AEO・AIO）

SEOとの関係

計測指標

llms.txt

AIクローラの制御

主要AIクローラーのUser Agent

AIクローラのContent Visibility

<head>記述サンプル

`<head>`記述サンプル