Alejandro Rioja.
Scripts

ウェブサイトのソースコードにアクセスする方法：クイックガイド

Alejandro Rioja
Alejandro Rioja
2 分で読める
TL;DR

Ctrl/Cmd+U またはアドレスバーに view-source: を付けることで任意のページの生HTMLを開けます。DevTools（F12）はレンダリング済みDOM・CSS・ネットワークリクエストのライブ検査に使います。SEOで確認すべき5要素：タイトルタグ、メタディスクリプション、H1見出し、画像のalt属性、アナリティクスのトラッキングスニペット。

無料ニュースレター

毎週水曜。28,400人以上の読者。無駄なし。

目次

2026年5月更新

TL;DR: Ctrl/Cmd+U またはアドレスバーに view-source: を付けることで任意のページの生HTMLを開けます。DevTools（F12）はレンダリング済みDOM・CSS・ネットワークリクエストのライブ検査に使います。SEOで確認すべき5要素：タイトルタグ、メタディスクリプション、H1見出し、画像のalt属性、アナリティクスのトラッキングスニペット。

結論

ウェブサイトのソースコードは、すべてのグラフィック・見出し・行動喚起の裏側に存在します。検索エンジンはそのコードを読み取り、特定のクエリに対してページのランキングを決定します。開発者でなくても自分でそれを読めるようになることは、トラフィックを失う前にSEOのミスを発見する最速の方法の一つです。

このガイドでは、2026年のすべての主要ブラウザとOSでソースコードを表示する方法、二つの主要な手法（View Source と DevTools）の使い分け、そして確認後に監査すべき5つのSEO要素を説明します。

ソースコードの表示方法

ここには二つの異なるツールがあります。どちらを使うかを把握しましょう：

現代のサイトの多くは部分的または完全にJavaScriptレンダリングされているため、私はほとんどの時間をDevToolsで費やしています。

view-source: ショートカット（全ブラウザ共通）

アドレスバーで任意のURLの直前に view-source: と入力します — 例：view-source:https://example.com — Enterキーを押します。Chrome、Firefox、Edge、Operaで動作します。Safariは最初にDevelopメニューを有効にする必要があります（下記参照）。

PCのキーボードショートカット

Chrome（Windows / Linux）

Firefox（Windows / Linux）

Microsoft Edge（Windows）

Opera（Windows / Linux）

Macのキーボードショートカット

Chrome（macOS）

Firefox（macOS）

Safari（macOS）

Safariはデフォルトで開発者ツールを非表示にしています。一度有効にします：

  1. Safari → 設定（古いmacOSでは環境設定）→ 詳細 タブを開く。
  2. 「Webデベロッパ用の機能を表示」 にチェックを入れる（Safari 17以降、旧「Developメニューを表示」チェックボックスに替わるものです）。
  3. 開発 → ページのソースを表示（Cmd+Option+U）と 開発 → Webインスペクタを表示（Cmd+Option+I）が使えるようになります。右クリック → 要素の詳細を表示 も機能します。

Microsoft Edge（macOS）

モバイル

確認すべき重要なSEO要素

ソースを表示できるようになったら、Ctrl+F / Cmd+F を使って生HTMLで以下のスニペットを検索しましょう。

1. タイトルタグ

<title を検索します。各ページには正確に1つのタイトルタグが必要で、その内容はサイト全体でユニークである必要があります。タイトルタグは、ユーザーと検索エンジンの両方にページの内容を伝える最も重要なオンページシグナルです。重複または欠落したタイトルタグは、監査中に最もよく見つけるSEOミスの一つです。

2. メタディスクリプション

<meta name="description" を検索します。content属性は、Googleが検索結果で表示するスニペットです — 約160文字以内に収めましょう。直接のランキング要因ではありませんが、クリック率に影響し、それが重要です。2つのページが同じディスクリプションを共有していないことを確認してください。

3. H1見出し

<h1 を検索します。ベストプラクティスはページあたりH1を1つにすることです。主要なトピックを明確に説明し、主要キーワードを自然に含める必要があります。H1に複数のキーワードを詰め込むと、ユーザーとアルゴリズムの両方にスパムと見なされます。

4. 画像のaltタグ

<img を検索します。各画像には、その内容を説明する alt 属性が必要です。alt テキストはスクリーンリーダーが視覚障害のあるユーザーに読み上げるものであり、検索エンジンが画像コンテンツを理解するための唯一のシグナルです。不足しているaltタグは簡単に修正できます — 洗い出して記入しましょう。

5. アナリティクスのトラッキングコード

GA4の測定ID（形式：G-XXXXXXXXXX）またはGoogle Tag ManagerのコンテナID（GTM-XXXXXXX）を検索します。古いUniversal Analyticsの UA- フォーマットを使用している場合、Googleは2023年7月に標準UAプロパティを停止しました — これらのIDはもうデータを収集していません。GA4または代替ツール（Plausible、Fathom、PostHogなど）に移行済みであることを確認してください。

ウェブサイトのソースコードを読む理由

このスキルから価値を得るために開発者である必要はありません。私が戻ってくる主な理由はこちらです：

1. メタロボットタグの確認

たった一つの誤った <meta name="robots" content="noindex"> でページが静かにインデックスから除外されます。ソースで robots を検索して、ページのクロールを誤ってブロックしていないことを確認してください。

2. 見出し構造の監査

適切な見出し階層（H1 → H2 → H3）はアクセシビリティとSEOの両方に役立ちます。view-sourceでのスキャンにより、見出しが論理的にネストされているか、純粋にスタイリング目的でHタグが使用されているかがすぐにわかります。

3. 画像の最適化確認

altタグ以外に、src 属性を確認しましょう。画像はCDNから配信されていますか？モダンなフォーマット（WebP、AVIF）が使われていますか？width と height 属性は設定されていますか（レイアウトシフトの防止）？これらの詳細はソースで明確に確認できます。

4. 非表示または注入されたコンテンツの発見

プラグイン、サードパーティスクリプト、または悪意のある行為者が、レンダリングビューでは見えないが検索エンジンには見えるコンテンツをページに注入することがあります。一般的なパターン：キーワードスパムが詰め込まれた display:none のdiv、画面外に隠されたリンク、または背景色に合わせたテキストです。生のソーススキャンでこれらを発見できます。

5. 内部リンク構造の検証

<a href= を検索してリンク先をスキャンします。壊れた相対パス、誤ってnofollow設定された内部リンク、またはサイト階層内のリダイレクトチェーンは、静かにPageRankを損なう可能性があります。簡単な確認が必要な時は、Screaming Frogの完全なクロールを待つよりView Sourceの方が速いです。

結論

ソースを表示することは、高コストなSEO問題が複合する前に発見できる30秒の習慣です。生HTMLに Ctrl+U を使うか、ライブDOMにDevToolsを使うかは、ページがサーバーサイドレンダリングかJavaScriptレンダリングかによって異なります — 2026年のほとんどのサイトでは両方が必要です。

SEOに役立つこちらの記事もご覧ください：

ウェブサイトソースコードの表示 — 2026年FAQ

view-sourceはJavaScriptレンダリングのサイトでも機能しますか？

部分的に機能します。view-source: はサーバーが送信したHTMLを表示します — React、Next.js、Astro（クライアントのみ）などのフレームワークでは、スクリプトタグがほぼ空のシェルになることが多いです。レンダリングされたコンテンツはライブDOMに存在し、DevTools → Elementsパネルからアクセスします。サーバーサイドレンダリング（SSR）または静的生成されたサイトでは、HTMLがブラウザに届く前に完成しているため、view-source: でページ全体のコンテンツが表示されます。

ログインが必要なページのソースは表示できますか？

はい、ブラウザのセッションが認証済みであれば可能です。view-source: とDevToolsはどちらもブラウザが既に読み込んでいるものを対象に動作します。ページが見えていれば、そのソースを検査できます。読み込んでいないページのソースは表示できません。

他人のソースコードを閲覧することは合法ですか？

ほぼすべての法域において、ウェブサーバーが自発的にブラウザに送信するHTMLを読むことは合法です — サーバーがそれを送信することを選択したのです。大規模な自動スクレイピング、アクセス制御の回避（例：ペイウォールの迂回）、またはライセンスなしにソースコードを商業的に使用することは、異なる法的回答がある別の問題です。日常的なSEO監査や競合調査において、公開されているソースを読むことは標準的で問題のない行為です。

2026年にサイトが特定の技術を使用しているかを確認する最速の方法は？

3つのオプションがあります：(1) 特徴的な文字列でソースを確認する（例：Next.jsなら __NEXT_DATA__、Astroなら astro-island、WordPressなら wp-content）；(2) フレームワーク、CDN、アナリティクスツール、そして2025年からはいくつかのAIスタックコンポーネント（LangChain、LlamaIndexなど）を識別するWappalyzerブラウザ拡張機能をインストールする；(3) URLをBuiltWithに通して詳細な技術スタックレポートを取得する。

関連記事：

このガイドは alejandrorioja.com の一部です — Alejandro Rioja が執筆し、 現在は 創業者向けのAIエージェントシステム を構築しています。このサイトを最新に保つエージェントも含めて。仕組みを見る →

2026年5月版アップデート

この記事の具体的なアドバイスに関する2026年のアップデート：

続きを読む

AIプレイブックをメールでお届け

毎週水曜。28,400人以上の読者。無駄なし。

⌕
↵ ↵ すべての結果を見る esc esc で閉じる