サイトタイトルとメタディスクリプションを簡単に確認する方法
サイトのタイトルとメタディスクリプションは、検索エンジンで表示されるタイトルと説明文に反映されるSEO上基本的な情報ですよね。
でも、記事を書いてから検索結果に反映されるまでは時間がかかりますから、実際に思惑通りのタイトルとディスクリプションになっているのか知らないままの人も多いんじゃないでしょうか？
せっかく作って公開するページですから、検索結果に出る前に念のために確認しておきたいですよね。
本記事では、サイトタイトルとメタディスクリプションを簡単に確認する方法を紹介します。
初心者に多いサイトタイトルが思惑と違うパターン
初心者で結構多いのは、サイトのタイトル形式が思っていたのと違う場合です。
例えば、固定ページをサイトのトップページにする場合、おそらくその固定ページのページタイトルを”トップページ”とか”TOP”とかしていることが多いと思います。
でもこの場合、もしサイトタイトルの形式として”ページタイトル”を指定していると、検索結果のサイトタイトルに”トップページ”とか”TOP”と出てしまうことがあるんですね。
だから、検索結果に反映する前に、どう設定されているかを念のために確認しておくほうがよいんです。
メタディスクリプションもそうでよね。使っているテーマやプラグインによっては、メタディスクリプションを自分で記述できるようになっています。でもせっかく記述したのに、実際に検索結果の説明文に反映されていないとショックですから。
サイトタイトルとメタディスクリプションのHTMLでの記述形式
サイトタイトルとメタディスクリプションは、当然ですがホームページの内容を記述する、HTMLの中に書かれています。
サイトタイトルは
<title>○○○○</title>
メタディスクリプションは
<meta name="description" content="○○○○">
という記述となります。
したがって、これらの記述を探せば、目的のページのサイトタイトルとメタディスクリプションがどうなっているかを確認することができるわけですね。
サイトタイトルとメタディスクリプションの確認手順
それでは、確認手順を紹介していきます。サイトタイトルもメタディスクリプションも手順は同じです。Google Chromeの開発者ツールを使っていきます。
サイトタイトルの確認手順
手順概要は
１．Google Chromeの開発者ツールを開ける
２．CTR+F（MacならCommand+F）をクリックして検索ボックスを開く
３．検索ボックスに”title”と入力する
４．検索された結果をの記述を確認する（複数ある場合は、たいてい1番目）
とこれだけです。では１つずつ解説画像つきで紹介していきます。
１．Google Chromeの開発者ツールを開ける
タイトルを確認したいページをGoogle Chromeで表示させておきます。この状態で、マウスを右クリックして”検証”をクリックしてください。
ショートカットキーはCTRL+SHIFT+I（MacではCommand+SHIFT+I）またはWindowsではF12キーでも同じことができます。
そうすると開発者ツールが画面右（または画面下）に開いて表示されます。
ちなみに、上の例では画面右に開いていますが、例えば画面下に表示位置を変更したければ、開発者ツール右上の3点メニューをクリックすると、表示位置を選択して変更できます。
また、開発者ツールの表示ウィンドウが小さくて見にくいと思えば、マウスでウィンドウ縁をつかんで引き延ばすこともできます。
２．検索ボックス開く
次にCTR+F（MacではCommand+F）をクリックして検索ボックスを開きましょう。
３．”title”で検索
開いた検索ボックスに、”title”と入力します。入力するだけで、HTMLの中の該当箇所が黄色でハイライトされ、その数も検索ボックス右に表示されます。
４．検索結果からタイトル記述箇所を確認する
上の画像では、黄色くハイライトされた部分が、<title>○○○○</title>の形式となっているため、この〇〇〇〇部分を見ればこのページのサイトタイトルが確認できます。
すなわち,
”ワードプレス Gutenberg（ブロックエディター）で文字修飾 ｜ Web-Children”
がサイトタイトルだということですね。
今回はすぐに<title></title>の記述形式が見つかりましたが、該当箇所が複数ある場合、すぐに表示されていないかもしれません。その場合は、検索ボックス右の矢印をクリックして順番に検索該当箇所を表示して確認していきましょう。
メタディスクリプションの確認手順
メタディスクリプションの確認手順もサイトタイトルの場合と基本的には同じです。サイトタイトルではtitleで検索しましたが、メタディスクリプションはdescriptionで検索するだけです。
１．Google Chromeの開発者ツールを開ける
２．CTR+F（MacならCommand+F）をクリックして検索ボックスを開く
３．検索ボックスに”description”と入力する
４．検索された結果をの記述を確認する（複数ある場合は、たいてい1番目）
それでは、手順の１、２は省略して、手順３から紹介しましょう。
検索ボックスに”description”と入力して確認
検索ボックスに、”description”と入力します。
該当箇所が3カ所見つかりました。この中から、<mete name="description" ・・・・>を探しますと1つ目に見つかりました。
メタディスクリプションは、
”ワードプレスのGutenbergエディター（通称ブロックエディター）では、意外に文字装飾がしにくい、という声をよく聞きます。たしかに、以前のクラシックエディターでは簡単にできた文字．．．”
だということですね。
ちなみに、次のような記述も見つかるかもしれません。似ていますが、メタディスクリプションではないので注意しましょう。
実際の検索結果と比較してみる
今回の事例では、
サイトタイトルは
”ワードプレス Gutenberg（ブロックエディター）で文字修飾 ｜ Web-Children”
メタディスクリプションは
”ワードプレスのGutenbergエディター（通称ブロックエディター）では、意外に文字装飾がしにくい、という声をよく聞きます。たしかに、以前のクラシックエディターでは簡単にできた文字．．．”
となりました。これを実際の検索結果と比較してみましょう。
Google検索での表示はは次の通りです。
注意しなければならないのは、検索エンジンの表示では文字数に制限があることです。タイトルは32文字までしか表示されませんので、<title>タグのタイトルが長いと途中で切れてしまうのですね。
また、メタディスクリプションも文字制限があります。パソコンでは100文字程度ですが、スマホ表示だと60文字程度までしか表示されないことに注意しましょう。
まとめ
サイトタイトルとメタディスクリプションは、Google開発者ツールを使えば、簡単に確認できることを紹介してきました。
基本的な手順は
１．Google Chromeの開発者ツールを開ける
２．CTR+F（MacならCommand+F）をクリックして検索ボックスを開く
３．検索ボックスに"title"または”description”と入力する
４．検索された結果をの記述を確認する（複数ある場合は、たいてい1番目）
となります。
自分の作成したページがどのように検索エンジンで表示されるのか、確認してみましょう。
