header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

検索エンジンと同様の方法でページのソースコードを表示する

3分
Wix サイトはサーバーサイドレンダリング(SSR)を使用して、ページの HTML コードを訪問者のブラウザに表示されるバージョンに変換します。
SSR は、検索エンジンがページのすべてのコンテンツをクロールし、インデックスに登録する際にも役立つ機能です。これには、ページのソースコードに存在するメタタグなど、SEO に役立つコンテンツが含まれます(これらのタグはレンダリングされたページでは表示されません)。
ブラウザの設定でユーザーエージェントを変更することで、検索エンジンと同様の方法でページのソースコードを表示することができます。ユーザーエージェントは、使用しているブラウザを特定するために役立ちます。Googlebot などの Web クローラーボットをユーザーエージェントに選択すると、ボットがクロールした内容を正確に閲覧することができます。
この記事では、下記の項目について説明します:

Google Chrome でページのソースコードを表示する

Google Chrome のデベロッパーツールを使用すると、検索エンジンと同じようにページのソースコードを表示できます。

Google Chrome でソースコードを表示する方法:

  1. Google Chrome でサイトの該当するページを開きます。
  2. ページのソースコードビューを開きます:
    • Windows:ページを右クリックし、「ページのソースを表示」(または「ソースを表示」)を選択します。または、キーボードの Ctrl + U キーを押します。
    • Mac:キーボードの「Cmd + Option + U」キーを押します。
  3. デベロッパーツールを開きます:
    • Windows:キーボードの「F12」キーを押します。
    • Mac:キーボードの「Cmd + Option + I」キーを押します。
  4. 右上の「Dev Tools のカスタマイズと管理」アイコン  をクリックします。
  5. その他のツール」にマウスオーバーし、「Network conditions(ネットワーク状況)」を選択します。
Google Chrome のデベロッパーツールで「その他のツール」を選択しています
  1. ユーザーエージェント」下の「ブラウザのデフォルトを使用」の選択を解除します。
  2. ドロップダウンメニューから「Googlebot」を選択します。
Google Chrome でユーザーエージェントとして Googlebot を選択しています
  1. ページを更新します。

Safari でページのソースコードを表示する

Safari の「開発」タブを使用すると、検索エンジンと同じようにページのコードを表示できます。

Safari でソースコードを表示する方法:

  1. トップメニューの「Safari」をクリックします。
  2. 設定」を選択します。
  3. 詳細」を選択します。
  4. Web デベロッパ用の機能を表示」チェックボックスを選択します。
「Web デベロッパ用の機能を表示」チェックボックスが選択された Safari の設定パネルのスクリーンショット。
チェックボックスを選択すると、トップメニューに「開発」が表示されます。
Safari ブラウザでトップメニューに「開発」が表示されたスクリーンショット
  1. Safari でサイトの該当ページを開きます。
  2. トップメニューの「開発」をクリックします。
  3. ユーザーエージェント」にマウスオーバーします。
  4. 下部にある「その他」を選択します。
  5. フィールド内のテキストを次のテキストに置き換えます:Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36
  6. OK」をクリックして確定します。
Google Chrome のデベロッパーツールで「その他のツール」を選択しています
Google Chrome でユーザーエージェントとして Googlebot を選択しています
「Web デベロッパ用の機能を表示」チェックボックスが選択された Safari の設定パネルのスクリーンショット。