検索エンジンと同様の方法でページのソースコードを表示する
読了時間:3分
Wix サイトはサーバーサイドレンダリング(SSR)を使用して、ページの HTML コードを訪問者のブラウザに表示されるバージョンに変換します。
SSR は、検索エンジンがページのすべてのコンテンツをクロールし、インデックスに登録する際にも役立つ機能です。これには、ページのソースコードに存在するメタタグなど、SEO に役立つコンテンツが含まれます(これらのタグはレンダリングされたページでは表示されません)。
ブラウザの設定でユーザーエージェントを変更することで、検索エンジンと同様の方法でページのソースコードを表示することができます。ユーザーエージェントは、使用しているブラウザを特定するために役立ちます。Googlebot などの Web クローラーボットをユーザーエージェントに選択すると、ボットがクロールした内容を正確に閲覧することができます。
この記事では、下記の項目について説明します:
Google Chrome でページのソースコードを表示する
Google Chrome のデベロッパーツールを使用すると、検索エンジンと同じようにページのソースコードを表示できます。
Google Chrome でソースコードを表示する方法:
- Google Chrome でサイトの該当するページを開きます。
- ページのソースコードビューを開きます:
- Windows:ページを右クリックし、「ページのソースを表示」(または「ソースを表示」)を選択します。または、キーボードの Ctrl + U キーを押します。
- Mac:キーボードの「Cmd + Option + U」キーを押します。
- デベロッパーツールを開きます:
- Windows:キーボードの「F12」キーを押します。
- Mac:キーボードの「Cmd + Option + I」キーを押します。
- 右上の「Dev Tools のカスタマイズと管理」アイコン
をクリックします。
- 「その他のツール」にマウスオーバーし、「Network conditions(ネットワーク状況)」を選択します。
![Google Chrome のデベロッパーツールで「その他のツール」を選択しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/13/170fce88-9a87-456a-95a0-9dd502a0148f/bd6b0664-6d4f-4d6e-ba0f-7499c359c342.png)
- 「ユーザーエージェント」下の「ブラウザのデフォルトを使用」の選択を解除します。
- ドロップダウンメニューから「Googlebot」を選択します。
![Google Chrome でユーザーエージェントとして Googlebot を選択しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/13/4227a5c5-ca61-4d7e-9fb0-77ed15179e50/134d1974-1ad1-404f-8dcd-b9d5d136009a.png)
- ページを更新します。
Safari でページのソースコードを表示する
Safari の「開発」タブを使用すると、検索エンジンと同じようにページのコードを表示できます。
Safari でソースコードを表示する方法:
- トップメニューの「Safari」をクリックします。
- 「設定」を選択します。
- 「詳細」を選択します。
- 「Web デベロッパ用の機能を表示」チェックボックスを選択します。
![「Web デベロッパ用の機能を表示」チェックボックスが選択された Safari の設定パネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/13/df24b82d-991f-4ebe-91ab-efb1415adf13/331a41c4-09f1-4238-ada0-209c5e8f4ad1.jpg)
チェックボックスを選択すると、トップメニューに「開発」が表示されます。
![Safari ブラウザでトップメニューに「開発」が表示されたスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/13/ff10d9ea-000f-45b1-a65a-88e74616bebf/1257ea41-e463-40e5-b766-221bed1beaf7.jpg)
![Safari ブラウザでトップメニューに「開発」が表示されたスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/02/13/ff10d9ea-000f-45b1-a65a-88e74616bebf/1257ea41-e463-40e5-b766-221bed1beaf7.jpg)
- Safari でサイトの該当ページを開きます。
- トップメニューの「開発」をクリックします。
- 「ユーザーエージェント」にマウスオーバーします。
- 下部にある「その他」を選択します。
- フィールド内のテキストを次のテキストに置き換えます:Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36
- 「OK」をクリックして確定します。
お役に立ちましたか?
|