ページのソースを見る簡単な方法をお探しですか？
WordPressでウェブサイトを作り始めたばかりの頃は、ページのソースを見ることがなぜ重要なのか、またそれがどれほど簡単なことなのかも知らなかった。多くのウェブサイト所有者と同じように、他の開発者がページのソースコードをチェックすることについて話しているのを耳にすることはあったが、それは上級プログラマーだけが心配する必要があることだと思っていた。
いくつかのWordPressサイトを管理し、クライアントのSEO向上を支援してきた結果、ページソースを表示することが実はシンプルだが強力なツールであることを発見した。技術的なSEOの問題を発見したり、メタタグが正しく機能しているかどうかをチェックしたり、競合サイトの成功例から学んだりするのに役立つ。
また、HTMLコードを見たことがない人でも、この知識を使ってウェブサイトのSEOを改善できる実践的な方法も紹介する。信じてほしい。私がこれを学べたのだから、あなたにもできるはずだ。数分でマスターする価値がある。
ページソースを見る メソッドを使えば、誰でもウェブページのコードにアクセスできる。そして、これがSEOに役立つ理由がいくつかある。
このガイドでは、どんなウェブページのソースコードでも見ることができる、超簡単な方法を紹介する！
この記事で
ウェブページのソースコードとは？
ウェブページはコードファイルである。そしてウェブサイトは、フォルダに整理されたコードファイルの集合体である。
このコードはページのフォーマット、スタイル、インタラクティブ性を提供します。
例えば、こうだ、
- HTMLは見出しや段落などの書式を提供する。
- CSSは、色やレイアウトなどのスタイリングを提供します。
- JavaScriptは ポップアップのようなインタラクティブな要素を提供します。
ブラウザはこれらのコードファイルを即座に読み込んで解釈し、目に見えるウェブページをレンダリングする。
誰でもウェブサイトのソースコードを見ることができる。マーケティング担当者やウェブ開発者は、"view page source "を使用する人々の一人である。
簡単なSEOチェックにも使える。
Google Chromeでページのソースを表示する方法
ここでは、ブラウザの中で最大のシェアを誇るGoogle Chromeを例に挙げる。また、Chromeで紹介するキーボードショートカットは、Apple SafariやBraveを含む他のほとんどのブラウザでも使えます。
Chromeでウェブページのコードを表示する方法はいくつかあります。ここでは、最も簡単な方法から3つを紹介します。
方法1：キーボードショートカット
- Mac:⌘+ option + u
- Windows/LinuxCtrl + U
方法2：右クリック、選択
- ウェブページを右クリックする。(Macbookではタッチパッドを両指で押す）。
- 表示されたポップアップ・ウィンドウから「View Page Source」を選択する。
方法3：アップルのアプリメニュー
- Chromeを開いた状態で、Apple App Menuに移動し、Viewを 選択します。ドロップダウンメニューから、開発者 " ソースを表示を選択します。
改行と検索コードの使用
コードページが新しいタブで開いたら、左上の「line wrap」と書かれたボックスにチェックを入れてください。これにより、コードを表示するために横方向にスクロールする必要がなくなります。
コードの検索ボックスを開くには、⌘ + fを使用します。
Chromeデベロッパーツールでページソースを表示する方法
Chrome のデベロッパー ツールでは、ソース コードの 1 ページを表示するだけでなく、任意の Web ページからアクセスし、より詳細なコード情報を取得できます。ウェブデザイナーやデベロッパーはこれらのツールを使用します。
Chrome 開発者ツールにアクセスするには、Chrome を使用してウェブページに移動します。
それから適切なキーボードショートカットを使う：
- マック：⌘＋オプション＋i
- Windows/LinuxF12 または Control + Shift + I
そうすると、同じブラウザのタブに新しいウィンドウが開き、ページの背後にあるコードが明らかになる。
このビューは、特にCSSとJavaScriptのイベント・リスナーを表示する。
ヒントMozilla FirefoxやMicrosoft Edgeなど、主要なウェブブラウザにはすべて「dev tools」ウィンドウがあり、Chromeと同じショートカットが使えます。
ページソースを表示する一般的な使い方
開発者でない人がページのソースコードを見たいと思う一般的な理由は2つあります。
ひとつはゲスト投稿のバックリンクをチェックするため。そしてもう1つは好奇心で、HTMLでメタタグがどのように見えるかを見るためだ。
利用法1：ゲスト投稿のバックリンクをチェックする
バックリンク（他のサイトからあなたのサイトへのリンク）はランキング要因のひとつです。
ウェブサイトがバックリンクを得る一般的な方法は、リンクと引き換えに他のサイトにゲスト記事を書くことである。
このバックリンク戦略は、個人のオンラインプレゼンスを高め、専門知識を伝えるのに役立つ。
しかし、入手したすべてのリンクのコードをチェックすることは重要だ。なぜか？サイトオーナーが誤って "sponsored"や "nofollow "のようなリンク属性を追加してしまうことがある。
これらのリンク属性はタグとも呼ばれ、ページのソースコードでのみ見ることができます。
リンク属性のHTMLをチェックする方法：方法1
- あなたのページにリンクされているページに移動する。
- ページの任意の領域を右クリックします。
- "ページソースを見る "を選択する。
ページのHTMLコードが新しいウィンドウで開きます。
アンカーテキストを検索し、周囲のリンクにnofollow、スポンサー リンク、UGC リンクの属性がないかチェックする。
例として、ReadWrite.comの記事を使う。
この記事の一番下までスクロールすると、ゲスト執筆者の経歴に、彼のウェブサイト『Ditto Transcripts』へのリンクが含まれていることがわかる。
ページ上の任意の場所で右クリックし、ページソースの表示を選択します。
そうすると、ページのHTMLコードが新しいタブで開きます。(行の折り返し」にチェックを入れるのを忘れずに）。
このページで "Ditto Transcripts "を検索してください。このように表示される。
このリンクは、SEOに最適な「dofollow」リンクである。リンクコードにnofollow、sponsored、UGC属性がないことに注目してほしい。
リンク属性のHTMLをチェックする方法：方法2
Chrome Developer Toolsを使用してリンクコードにアクセスすることもできます。ただし、このツールではより詳細なコードが表示されるため、初心者の方は混乱するかもしれませんのでご注意ください。
ここでは、Chrome Dev Toolsを使ってリンクをチェックする方法を説明します。
- あなたのページにリンクされているページに移動する。
- バックリンクを右クリック。
- 表示される小さなポップアップからInspectを選択する。
Chrome Developer Toolsが開きます。
便利なことに、このアクションはリンクを強調表示（青色）するので、どこを見ればいいのかよくわかる。
ここでは、例と同じReadWrite.comを使用する。
リンクのコードを見るには、リンクを右クリックしてポップアップから「Inspect」を選択する。
Inspect」を選択すると、Chrome Developer Toolsが開きます。リンクが青くハイライトされます。
ハイライト部分を拡大してみよう。
このリンクコードにはあなたが理解できないものが含まれているかもしれないが、そこにはnofollow、sponsored、UGCタグがないことがわかるだろう。
利用法2：メタタグがどのように見えるかを見る
開発者でない人がページソースを表示する2つ目の理由は、metaタグがコード上でどのように見えるか興味があるからです。
タイトルタグと メタディスクリプションがSEOにとって重要であることは聞いたことがあるかもしれない。
All in One SEO（AIOSEO）のようなプラグインを使えば、これらの編集や最適化が簡単にできる。
しかし、この2つのメタタグがソースコード上ではどのように見えるのか、不思議に思うかもしれない。
それを知るために、
- ページに移動する。
- ページのソースを表示する。
- 左上の "line wrap "にチェックを入れる。
- Use ⌘ + f to search for <title or <meta name=”description”.
以下はタイトルタグの例です。
そして、これが同じ記事のメタディスクリプションだ。
オール・イン・ワンSEO（AIOSEO）でメタタグを最適化する
WordPress用のAll in One SEO（AIOSEO）プラグインを使えば、これらのメタタグを最適化するのは簡単だ。
また、メタタグをチェックするためにページのソースを見る必要もない。
この定評あるプラグインは、WordPress.orgで何千もの5つ星レビューを獲得し、300万人以上のユーザーを抱えている。
AIOSEOは初心者の方にも使いやすく、プロのような結果をもたらします。
All in One SEOはこちらからダウンロードできます。
Googleの検索結果にタイトルとメタディスクリプションのプレビューが表示されます。
また、meta descriptionを決められた長さ内に収めるなど、これらのタグを最適化する簡単な方法も得られる。
さらに、All in One SEOは、個々のウェブページのSEOを改善するための推奨事項を提供します。
その他のメリット
- ローカルSEOのための簡単なセットアップ（中小企業向け）。
- フォーカスキーワードの使用に関する推奨事項。
- ボタンを数回クリックするだけで、ページをリッチスニペットに変えることができます。
ページを見るに関するQ&A ソース
Safariでページのソースを見るには？
Safariでページソースを表示するには、ページを右クリックして「ページソースを表示」を選択します。または、ブラウザのメニューで、開発 "ページソースを表示 を選択します。
Option + Command (⌘) + Uで、Developer Tools ウィンドウが開きます。
ウェブサイトのHTMLとCSSコードを見つけるには？
ウェブサイトのHTMLとCSSコードを見つけるには、いくつかの方法があります。HTMLを見つけるには、ここで説明するさまざまなページ・ソースの表示方法を使用できます。
HTMLとCSSのコードを見るには、ウェブブラウザのデベロッパーツール機能を使います。
クリック可能なCSSコードファイルは、HTMLのhead要素の中にもあります。
次はどうする？
この記事が、ページのソースコードを見る方法と、人々がなぜソースコードを使うのかを理解する一助となれば幸いである。
また、SEOにおけるバックリンクの役割についてもっと学び、有料リンクや リンク構築についての洞察を得たいと思うかもしれない。そして、リードを獲得することもお忘れなく。
この記事がお役に立ちましたら、SEOチュートリアルのYouTubeチャンネルにご登録ください。また、Twitter、LinkedIn、Facebookでフォローして、常に最新情報を入手することもできます。
AIOSEOを無料で試したいですか？
AIOSEO LiteをインストールするWordPressサイトのURLを入力してください。
情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。
