レンダリングされたページのソースを表示する

概要

ウェブページにアクセスすると、ウェブサイトから HTML コードがブラウザに送信されます。多くの場合、このソースコードにはスクリプトなどの HTML コード以外のリソースが含まれています。それらのリソースは表示時に読み込む必要があり、それによってページのコードが変更されることがあります。

一般的には、[ソースを表示] を右クリックすると、スクリプトなどのリソースが読み込まれて実行される前の、ブラウザに返された元のページのコードのみが表示されます。しかし、特にページのトラブルシューティングを行う場合など、すべてのリソースが読み込まれてスクリプトが実行された後、つまりブラウザでレンダリングされた後のページの最終的なコードを確認したいこともあります。次に例を示します。

• 確認で使用されている Google アナリティクス タグまたは Google タグ マネージャーのタグを見つける場合。
• ページの読み込みと表示に関する問題をデバッグする場合（つまり、読み込む必要があるすべてのライブラリと他のリソースが実際に読み込まれていることを確認する場合）。
• 表示されたページで構造化データを確認する場合。

レンダリングされたソースを表示する方法

ウェブページのレンダリングされたソースコードを表示する方法は次のとおりです。

• Chrome ブラウザの場合: ページの任意の部分を右クリックして [検証] を選択すると、レンダリングされたページの HTML がすべて表示されます。Ctrl+F キー（Windows）または Command+F キー（Mac）を使用して、レンダリングされた HTML 内の項目を検索できます。
• 自サイト内のページの場合: 
  1. URL 検査ツールに URL を直接入力するか、ほとんどの Search Console レポートに表示される URL の横にある検査リンクアイコン をクリックして、URL を検査します。
  2. [公開 URL をテスト] > [テスト済みのページを表示] をクリックします。
  3. [HTML] タブに、ページのレンダリングされた HTML が表示されます。
• 任意のサイトのページの場合（所有するサイトも含む）:
  1. モバイル フレンドリー テストを開きます。
  2. ページの URL を入力します。対象のページは、Google がログインなしでアクセスでき、robots.txt でブロックされていない必要があります。
  3. [テスト済みのページを表示] をクリックします。
  4. [HTML] タブに、ページのレンダリングされた HTML が表示されます。