ChatGPTに「このサイトを改善してください」と相談しても、材料が少ないと答えはぼんやりしやすくなります。
まず確認したいのが、自分のページで実際に出力されているHTMLソースです。
とくに、title、meta description、canonical、OGP、noindexなどは、WordPressやSEOプラグインの設定が反映されているかを確認する入口になります。
この記事では、view-source: を使って、自分のサイトのHTML・SEO設定を確認する基本を、初心者向けに整理します。
- view-source: の基本的な使い方
- title、description、canonical、OGP、noindexの見方
- WordPressやAIOSEOの設定が反映されているか確認する方法
- ChatGPTにサイト改善を相談するときに渡すべき情報
- view-source: と開発者ツールの違い
- HTMLソース確認で分かること・分からないこと
view-source: は、他人のサイトを見る裏技ではありません。
自分のWordPressサイトで、SEO設定やOGP設定が実際にHTMLへ出力されているかを確認するための基本チェックです。
先に結論：AIに相談する前に、自分のサイトのHTMLソースを確認すると改善精度が上がる
ChatGPTにサイト改善を頼むとき、「何を見てほしいのか」が曖昧だと、回答も一般論になりやすいです。
たとえば、SEOタイトルがどう出ているのか。
meta descriptionが空になっていないか。
OGP画像が意図したURLになっているか。
noindexが誤って入っていないか。
こうした情報を先に確認しておくと、ChatGPTにも具体的に相談しやすくなります。
「サイトを改善してください」だけだと、ChatGPTはページの実際の出力を確認できません。
そのため、一般的なSEOアドバイスに寄りやすくなります。
title、description、canonical、OGP、robotsなどを抜き出して渡すと、具体的な確認がしやすくなります。
「どこを見るべきか」が明確になります。
view-source: は、SEO順位を直接上げる魔法ではありません。
ただし、AIでサイト改善を進める前の現状確認としては、かなり実用的です。
view-source:とは？ページのHTMLソースを見るための基本機能
view-source: は、WebページのHTMLソースを表示するためのブラウザ機能です。
WordPressで記事を書いた場合、実際のページには、テーマやプラグインが出力したHTMLタグが含まれます。
その中には、SEOタイトル、meta description、canonical、OGP、構造化データなども含まれます。
つまり、view-source: を使うと、WordPress管理画面で設定した内容が、実際にページ上へ出力されているか確認できます。
view-source: は、自分のサイトの確認やHTML理解のために使うものです。
他人のサイトのデザインやコードをコピーするためのものではありません。
view-source:の使い方
view-source: の使い方は難しくありません。
基本的には、PCのブラウザで確認するのが分かりやすいです。
URL欄に view-source: を付けて確認する
一番分かりやすい方法は、ブラウザのURL欄に view-source: を付ける方法です。
view-source:https://example.com/自分の記事URLの前に view-source: を付けてアクセスすると、そのページのHTMLソースを確認できます。
右クリックから「ページのソースを表示」を使う
Chromeなどのブラウザでは、ページ上で右クリックして「ページのソースを表示」を選ぶ方法もあります。
ブラウザによって表現は少し違いますが、基本的には「ソースを表示」「ページのソースを表示」のような項目から確認できます。
スマホでも確認できる場合はありますが、HTMLソースは横に長くなりやすいため、最初はPCで見る方が扱いやすいです。
まず見るべきSEO・SNS表示に関係する場所
HTMLソースを開くと、最初は文字が多くて分かりにくく見えます。
ただ、初心者が最初に見るべき場所は限られています。
まずは、title、meta description、canonical、OGP、noindex、構造化データを確認できれば十分です。
検索結果やブラウザタブに関係
検索結果の説明文候補
正規URLの指定
SNS表示に関係
検索に出すかの指定
ページ情報を検索エンジンに伝える
titleタグ
<title>記事タイトル｜サイト名</title>
titleタグは、検索結果やブラウザタブに関係する重要な要素です。
WordPressの記事タイトルと、SEOプラグインで設定するSEOタイトルが違う場合もあります。
AIOSEOなどでSEOタイトルを設定している場合、その内容が実際に反映されているかを確認できます。
meta description
<meta name="description" content="この記事の説明文">meta descriptionは、検索結果の説明文として使われることがある要素です。
ただし、Googleが必ずそのまま表示するとは限りません。
それでも、空になっていないか、記事内容とズレていないかを確認する価値はあります。
canonical
<link rel="canonical" href="https://example.com/sample-page/">
canonicalは、検索エンジンに正規URLを伝えるための要素です。
URLの重複対策に関係します。
自分が公開しているURLとcanonicalのURLが大きくズレていないか確認しておくと安心です。
OGPタグ
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事説明">
<meta property="og:image" content="https://example.com/image.jpg">OGPタグは、X、Facebook、LINEなどでページがシェアされたときの表示に関係します。
とくに og:image は、SNSで表示される画像に関係します。
OGP画像が意図した画像URLになっているかを確認することで、SNS表示のトラブルに気づきやすくなります。
noindexの有無
<meta name="robots" content="noindex">noindexは、検索結果に出したくないページに入れる指定です。
意図して入れているなら問題ありません。
ただし、公開したい記事に誤って noindex が入っていると、検索に出にくくなる可能性があります。
固定ページ、タグページ、カテゴリページ、公開直後の記事などでは、確認しておく価値があります。
構造化データ
<script type="application/ld+json">
構造化データは、検索エンジンにページ情報を伝えるためのデータです。
記事、パンくず、FAQなどで使われることがあります。
初心者が中身をすべて理解する必要はありません。
まずは、構造化データが出力されているかどうかを確認できれば十分です。
WordPress運営者がview-source:で確認すると便利なこと
WordPressでは、管理画面で設定した内容が、実際のHTMLにどう出ているかが重要です。
とくに、AIOSEOなどのSEOプラグインを使っている場合、設定画面だけ見て安心するのではなく、実際のページ出力も確認した方が確実です。
- AIOSEOのSEOタイトルが反映されているか
- meta descriptionが空でないか
- OGP画像が正しいURLになっているか
- noindexが意図せず入っていないか
- canonicalが公開URLと合っているか
- 構造化データが出力されているか
WordPressは、テーマ、SEOプラグイン、キャッシュ、SNS設定などが重なって表示を作ります。
view-source: で確認すると、設定が最終的にどうHTMLへ出ているかを見られます。
SEO設定やOGP設定で違和感があるときは、管理画面だけでなく、実際のHTML出力を見ることが大切です。
ChatGPTにサイト改善を相談するとき、何を見せればいいか
ChatGPTにサイト改善を相談するとき、HTMLソース全体を貼る必要はありません。
むしろ、長すぎるソースをそのまま貼ると、見るべき場所がぼやけます。
まずは、SEOやSNS表示に関係する部分だけを抜き出すのがおすすめです。
- ページURL
- titleタグ
- meta description
- canonical
- OGPタグ
- robots / noindex周辺
- 構造化データの一部
- HTMLソース全体をそのまま貼る
- 何を確認してほしいか書かない
- ページURLを渡さない
- SEOなのかOGPなのか目的を分けない
ChatGPTに渡すときのプロンプト例
相談するときは、次のように「何を確認してほしいか」を明確にすると使いやすくなります。
以下は自分のWordPress記事のHTMLソースから抜き出したSEO関連タグです。
title、meta description、canonical、OGP、noindexの有無について、
SEO設定として気になる点がないか確認してください。
【ページURL】
https://example.com/sample-page/
【HTMLソース抜粋】
<title>...</title>
<meta name="description" content="...">
<link rel="canonical" href="...">
<meta property="og:title" content="...">
<meta property="og:image" content="...">このように必要な部分だけを渡すと、ChatGPTも確認ポイントを絞りやすくなります。
サイト改善案やSEO確認を複数AIで比べたい場合は、
複数AIを同時比較するメリットとは？
も参考になります。
ChatGPTとClaudeの使い分けは、
Claude vs ChatGPT比較記事
で整理しています。
view-source:と開発者ツールの違い
view-source: と開発者ツールは、どちらもページ確認に使えます。
ただし、見る目的が少し違います。
初心者がSEOタグを確認するなら、まずは view-source: で十分です。
CSSの表示崩れ、JavaScriptの動き、通信エラーまで見るなら、開発者ツールが向いています。
| 確認したいこと | view-source: | 開発者ツール |
|---|---|---|
| titleやdescription | 確認しやすい | 確認できる |
| OGPタグ | 確認しやすい | 確認できる |
| CSSの表示崩れ | 向いていない | 向いている |
| JavaScriptの動き | 分かりにくい | 向いている |
| 通信エラー | 分からない | 確認しやすい |
SEOタグやOGPの確認は view-source:。
表示崩れや動作確認は開発者ツール。
このように使い分けると分かりやすいです。
HTML確認や管理画面の考え方からAIツール開発にも広げたい方は、 AIツール個人開発の始め方 や AIツール開発で最初に作るべき管理画面 も参考になります。
view-source:で分かること・分からないこと
view-source: は便利ですが、万能ではありません。
分かることと分からないことを分けておくと、過度に期待しすぎずに使えます。
- SEOタグの出力
- OGPタグ
- canonical
- noindexの有無
- 構造化データの有無
- HTML上の基本情報
- 検索順位が上がるかどうか
- 実際にGoogleがどう表示するか
- ページ速度の詳細
- CSSの崩れ原因
- JavaScript実行後の状態
- コンテンツの質そのもの
view-source: は、あくまで確認の入口です。
SEO改善やサイト改善では、HTML出力、記事内容、内部リンク、表示速度、ユーザー体験などを総合的に見る必要があります。
注意：他人のサイトのコードをコピーするために使わない
view-source: は、確認や学習のための機能です。
他人のサイトのデザインやコードをそのままコピーするためのものではありません。
とくに、テーマ独自のHTML、CSS、JavaScript、画像、文章、構成をそのまま流用するのは避けるべきです。
自分のサイトのSEO設定を確認する。
自分のWordPress記事のHTML出力を確認する。
ChatGPTにサイト改善を相談するための材料を整理する。
この範囲で使うのが安全で実務的です。
AIでブログ改善するなら、HTMLソース確認は最初の一歩
AIでブログ改善を進めるなら、まず現状を確認することが大切です。
titleがどう出ているか。
descriptionが空になっていないか。
OGP画像が意図したものになっているか。
noindexが入っていないか。
こうした事実を見たうえでChatGPTに相談すると、改善案の精度は上がりやすくなります。
WordPress運営では、設定画面だけを見て終わらせず、実際のページ出力を確認することが重要です。
ChatGPTにサイト改善を相談する前に、何を整理しておくべきかをまとめる記事へつなげると自然です。
公開後は「AIでブログ改善する方法｜ChatGPTに相談する前に整理すべき情報」へのリンクに差し替えてください。
まとめ：view-source:は裏技ではなく、サイト改善前の確認作業
view-source: は、初心者でも使えるHTML確認の入口です。
WordPressやAIOSEOで設定したSEOタイトル、meta description、canonical、OGP、noindexなどが、実際にページへ出力されているかを確認できます。
ChatGPTにサイト改善を相談するときも、HTMLソースの必要な部分を抜き出して渡すことで、より具体的に相談しやすくなります。
ただし、view-source: は検索順位を上げる魔法ではありません。
あくまで、自分のサイトを改善するための基本確認として使いましょう。
