ページソースを簡単に表示する方法をお探しですか？
WordPressサイトを作り始めた頃、ページソースを表示することの重要性や、それがどれほど簡単なのかを知りませんでした。多くのウェブサイト所有者と同じように、他の開発者がページソースコードを確認することについて話しているのを聞いたことがありますが、それは高度なプログラマーだけが気にするべきことだと思っていました。
いくつかのWordPressサイトを管理し、クライアントのSEO改善を支援する中で、ページソースを表示することが実際にはシンプルでありながら強力なツールであることを発見しました。コーディングの専門家でなくても、技術的なSEOの問題を発見したり、メタタグが正しく機能しているか確認したり、さらには成功している競合サイトから学んだりするのに役立ちます。
HTMLコードを一度も見たことがない方でも、この知識をウェブサイトのSEO改善に活用できる実践的な方法もご紹介します。信じてください、私がこれを学べたなら、あなたにもできます。そして、習得するのに数分しかかからない価値があります。
ページソースを表示する方法を使えば、誰でもウェブページのコードにアクセスできます。そして、それがSEOに役立ついくつかの良い理由があります。
このガイドでは、あらゆるウェブページのソースコードを表示する方法を正確にお見せします。しかも、とても簡単です！
この記事では
ウェブページのソースコードとは？
ウェブページはコードファイルです。そして、ウェブサイトはフォルダに整理されたコードファイルの集まりです。
このコードは、ページのフォーマット、スタイル、インタラクティビティを提供します。
例えば、
- HTMLは、見出しや段落などのフォーマットを提供します。
- CSSは、色やレイアウトを含むスタイリングを提供します。
- JavaScriptは、ポップアップのようなインタラクティブな要素を提供します。
ブラウザはこれらのコードファイルを瞬時に読み込み、解釈して、表示可能なウェブページをレンダリングします。
ウェブサイトのソースコードは誰でも表示できます。「ページソースを表示する」機能は、マーケターやウェブ開発者などが利用しています。
あなたも簡単なSEOチェックのために利用できます。
Google Chromeでページソースを表示する方法
ここでは、最も市場シェアの高いブラウザであるGoogle Chromeを例に使用します。また、Chromeで共有するキーボードショートカットは、Apple SafariやBraveを含むほとんどの他のブラウザでも機能します。
Chromeでウェブページのコードを表示するにはいくつかの方法があります。ここでは3つの方法を、最も速いものから順にリストアップします。
方法1：キーボードショートカット
- Mac：⌘ + option + u
- Windows/Linux：Ctrl + U
方法2：右クリックして選択
- ウェブページを右クリックします。（MacBookの場合は、タッチパッドを2本指でタップします。）
- 表示されるポップアップウィンドウでページソースを表示を選択します。
方法3：Appleアプリメニュー
- Chromeを開いた状態で、Appleアプリメニューに移動し、表示を選択します。そのドロップダウンメニューから、開発者»ソースを表示を選択します。
行折り返しとコード検索を使用する
コードページが新しいタブで開かれたら、左上にある「行折り返し」というボックスをオンにします。これにより、コードを表示するために水平スクロールする必要がなくなります。
コードの検索ボックスを開くには、⌘ + f を使用します。
Chrome開発者ツールを使ってページソースを表示する方法
ソースコードの1ページを表示するだけでなく、どのウェブページからでもChromeデベロッパーツールにアクセスして、より詳細なコード情報を取得できます。ウェブデザイナーや開発者はこれらのツールを使用します。
Chromeデベロッパーツールにアクセスするには、Chromeを使用してウェブページに移動します。
次に、適切なキーボードショートカットを使用します。
- Mac: ⌘ + オプション + i
- Windows/Linux: F12 または Control + Shift + I
これにより、同じブラウザタブ内に新しいウィンドウが開き、ページの背後にあるコードが表示されます。
このビューには、CSSやJavaScriptイベントリスナーなどが表示されます。
ヒント: Mozilla FirefoxやMicrosoft Edgeを含むすべての主要なウェブブラウザには「デベロッパーツール」ウィンドウがあり、Chromeと同じショートカットがこれらでも機能します。
ページソース表示の一般的な用途
開発者以外がページのソースコードを見たいと思う一般的な理由は2つあります。
1つはゲスト投稿のバックリンクを確認すること、もう1つはHTMLのメタタグがどのように見えるかを知りたいという好奇心です。
用途1：ゲスト投稿のバックリンクを確認する
バックリンク（他のサイトからあなたのサイトへのリンク）は、ランキング要因です。
ウェブサイトがバックリンクを獲得する一般的な方法の1つは、リンクと引き換えに他のサイトにゲスト投稿を書くことです。
このバックリンク戦略は、個人のオンラインプレゼンスを高め、専門知識を伝えるのに役立ちます。
ただし、獲得したすべてのリンクのコードを確認することが重要です。なぜなら、サイト所有者が誤って「スポンサー」や「nofollow」のようなリンク属性を追加してしまうことがあり、SEO上の価値が無効になる可能性があるからです。
これらのリンク属性は、タグとも呼ばれ、ページのソースコードでのみ確認できます。
リンクのHTMLを確認する方法：方法1
- あなたのサイトにリンクされているページに移動します。
- ページの任意の領域を右クリックします。
- 「ページのソースを表示」を選択します。
ページのHTMLコードが新しいウィンドウで開かれます。
アンカーテキストを検索し、周囲のリンクでnofollow、sponsored、またはUGCのリンク属性を確認します。
例として、ReadWrite.comの記事を使用します。
この記事の最下部までスクロールすると、ゲスト著者のプロフィールに、彼のウェブサイトであるDitto Transcriptsへのリンクが含まれていることがわかります。
ページ上の任意の場所を右クリックし、「ページのソースを表示」を選択します。
これにより、ページのHTMLコードが新しいタブで開かれます。（「行折り返し」ボックスにチェックを入れるのを忘れないでください。）
次に、「Ditto Transcripts」を検索できます。これが私たちが見ているものです。
リンクは「dofollow」リンクであり、SEOに最適です。リンクコードにnofollow、sponsored、またはUGC属性がないことに注意してください。
リンクのHTMLを確認する方法：方法2
Chrome開発者ツールを使用してリンクコードにアクセスすることもできます。ただし、このツールはより詳細なコードを表示するため、初心者には混乱を招く可能性があることに注意してください。
Chrome開発者ツールを使用してリンクを確認する方法を次に示します。
- あなたのサイトにリンクされているページに移動します。
- バックリンクを右クリックします。
- 表示される小さなポップアップからInspectを選択します。
これにより、Chrome開発者ツールが開きます。
都合の良いことに、この操作によりリンクが（青色で）ハイライトされるため、どこを確認すればよいかが正確にわかります。
ここでは、例としてReadWrite.comを使用します。
リンクのコードを表示するには、リンクを右クリックしてポップアップから「Inspect」を選択します。
「Inspect」を選択すると、Chrome開発者ツールが開きます。リンクは青色でハイライトされます。
ハイライトされた部分を拡大してみましょう。
このリンクコードには理解できないものが含まれているかもしれませんが、nofollow、sponsored、またはUGCタグがないことがわかります。
使い方2：メタタグの外観を確認する
開発者以外がページソースを表示する2番目の理由は、メタタグがコードでどのように見えるかを知りたいと思っているからです。
タイトルタグとメタディスクリプションがSEOにとって重要であると聞いたことがあるかもしれません。
そして、All in One SEO (AIOSEO)のようなプラグインを使用すると、これらを簡単に編集および最適化できます。
しかし、これらの2つのメタタグがソースコードでどのように見えるのか疑問に思うかもしれません。
確認するには、
- ページに移動します。
- ページソースを表示に移動します。
- 左上の「行折り返し」ボックスをオンにします。
- ⌘ + f を使用して、<titleまたは<meta name=”description”を検索します。
ここにタイトルタグの例を示します。
そして、同じ記事のメタディスクリプションは次のとおりです。
All in One SEO (AIOSEO)でメタタグを最適化する
WordPress用のAll in One SEO (AIOSEO)プラグインを使用すると、これらのメタタグの最適化が簡単になります。
そして、メタタグを確認するためにページソースを表示する必要はありません。
この確立されたプラグインは、WordPress.org で数千件の5つ星レビューを獲得し、300万人以上のユーザーが利用しています。
AIOSEO は初心者でも簡単に使えますが、プロの結果をもたらします。
All in One SEO はこちらからダウンロードできます。
Google検索結果で、タイトルとメタディスクリプションのプレビューが表示されます。
また、メタディスクリプションを設定された長さに収めるなど、これらのタグを最適化するための簡単な方法も提供されます。
さらに、All in One SEO は、個々のウェブページのSEOを改善するための推奨事項を提供します。
その他のメリットとしては
- ローカルSEO（中小企業向け）の簡単な設定。
- フォーカスキーワードの使用に関する推奨事項。
- 数回のクリックで、ページをリッチスニペットに変換します。
ソースコードの表示に関するQ&A
Safariでページソースを表示するにはどうすればよいですか？
Safariでページソースを表示するには、ページを右クリックしてページソースを表示を選択します。または、ブラウザメニューで開発»ページソースを表示を選択します。
Option + Command (⌘) + U を使用すると、開発者ツールウィンドウが開きます。
ウェブサイトのHTMLとCSSコードを見つけるにはどうすればよいですか？
ウェブサイトのHTMLとCSSコードを見つける方法はいくつかあります。HTMLを見つけるには、ここで概説されているさまざまなページソース表示方法を使用できます。
HTMLとCSSコードを表示するには、ウェブブラウザの開発者ツール機能を使用できます。
ウェブサイトのクリック可能なCSSコードファイルは、HTMLのhead要素内に見つけることもできます。
次にやること
この記事が、ページソースコードの表示方法とその理由の理解に役立ったことを願っています。
また、SEOにおけるバックリンクの役割についてさらに学び、有料リンクやリンクビルディングに関する洞察を得ることもできます。そして、リードを獲得することを忘れないでください。
この記事がお役に立った場合は、SEOチュートリアルのためにYouTubeチャンネルを購読してください。また、Twitter、LinkedIn、またはFacebookでフォローして最新情報を入手することもできます。
AIOSEO を無料で試してみませんか？
AIOSEO Lite をインストールするには、WordPress ウェブサイトの URL を入力してください。
開示：当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみをお勧めします。
