meta description(メタ ディスクリプション)をHTMLファイルに記述するとウェブサイトのページが検索結果に表示するときにページの説明文を表示することができます。
meta descriptionをHTMLファイルに記述するために必要な「書き方」「記述場所」そしてmeta descriptionをHTMLファイルに記述した後の「表示場所」「確認方法」をまとめました。
ウェブサイトの説明文を検索結果に表示したい人の参考になればと思います。
meta descriptionの書き方
はじめにmeta descriptionをHTMLファイルに記述するための書き方を説明します。
meta descriptionの書き方に必要なのはHTMLの「metaタグ」「name属性」「content属性」です。
<meta name="description" content="説明文">
まずHTMLのmetaタグを記述します。metaタグに開始タグは必須ですが、終了タグは必要なしです。
記述したmetaタグ内にはname属性を記述してname属性値にdescriptionを指定します。この書き方によって「メタデータの名前はdescriptionですよ」と定義することができます。
次にname=”description”に半角スペースを空けてcontet属性を記述します。content属性値でページの説明文を書きます。
説明文になるcontent属性値の書き方は、meta descriptionを記述するHTMLファイルがウェブページとして検索結果に表示されたときの「ページの説明文」を書きます。
「そのページを読むと得られる結果」などを説明文でセールストークするような考え方をしたdescriptionの書き方でも良いかもしれませんね。
meta descriptionをHTMLファイルに記述
前述したmeta descriptionの書き方を使ってHTMLファイルにページの説明文を記述します。
meta descriptionはHTMLファイルのhead要素に記述します。
<haed>
<meta name="description" content="ページ説明文をここに書きます。">
</haed>
meta descriptionを記述するHTMLファイルは、例えばウェブサイトのトップページにindex.htmlを使用しているなら、index.htmlファイルのhead要素にmeta descriptionを記述し、content属性値に「トップページに対してのページ説明文」を記述します。
トップページ以外のHTMLファイルもhead要素にmeta descriptionを記述し、そのページに対しての説明文を書きます。
また、HTMLファイルに記述するmeta descriptionの説明文は60文字〜120文字を目安に記述します。
meta descriptionをHTMLファイルのhead要素に記述することによってcontent属性値に書いたページの説明文が、そのページの説明文として表示されるようになります。
一方でmeta descriptionをHTMLファイルに記述しない場合には、そのHTMLファイル内に記述している文章の中からGoogle側が適切だと思えた文章部分を抜粋して検索結果の説明文として表示します。
meta descriptionが表示する場所
meta descriptionが表示する場所は検索エンジンのChromeやSafariなどの「検索結果」です。
検索結果のページタイトルの下にmeta descriptionで記述した説明文が表示します。
meta descriptionが表示する場所の検索エンジンの検索結果では、検索ユーザーがキーワードを入力して検索キーワードにヒットした検索結果の一覧が表示した際には、その検索キーワードと同じキーワードがmeta descriptionに書いてあると太字で強調されます。
さらに検索ユーザーが検索結果の一覧でキーワードをcommand+Fで検索し絞り込んだ場合でも、meta descriptionの説明文に一致するキーワードがあればハイライトするので、meta descriptionが表示する場所でのページ説明文は目に止まりやすくなります。
meta descriptionの確認
meta descriptionの確認方法も説明します。3つの確認方法です。
検索結果で確認
meta descriptionを記述しているページのタイトルを検索エンジンで検索してmeta descriptionを直接確認することができます。
検索結果でsite:サイトURLで確認
検索エンジンの検索窓にsite:ドメイン(例：site:example.com)とサイトのURLを入力することでGoogleにインデックスしているサイトのページ全てを一覧表示できるので、全てのページのmeta descriptionを確認することができます。
meta descriptionを使用していないページを確認したり、meta descriptionが不要なページを確認する場合などに役立ちます。
ソースコードで確認
meta descriptionをソースコードで確認する場合は目的のページをブラウザで表示しマウスを右クリックして表示するコンテキストメニューの「検証」か「ページのソースを表示」で確認できます。
「検証」と「ページのソースを表示」どちらでmeta descriptionを確認する場合でもHTMLファイルのhead要素がmeta descriptionを記述する場所なので、headを目印にするとmeta descriptionが探しやすくなります。
meta descriptionが必要だと実感した例
meta descriptionは一覧記事のページには必要になる場合が多いかもしれません。
meta descriptionをHTMLファイルに記述することなく、テストサイトの一覧記事だけを表示してるトップページを検索結果に表示してみたらmeta descriptionをHTMLファイルに記述する必要があるなぁ。と実感できました。
上の画像はサイトの記事一覧として個々の記事タイトルを表示しているだけのページ説明文を検索結果で見た場合です。説明文で「かなり暇なとき何やるか考え中なんだな？」は伝わるけど「くどい」の域を超えてました。
meta descriptionを記述していないため、個々のページタイトル「暇なとき何やるか考え中」の文章をGoogleがページの説明文として60文字〜120文字にまとめて検索結果で表示したりする場合もあるのです。
上記は極端な例でしたがmeta descriptionが必要なことは確実です。
説明文としてコンテンツに文章が不足がちなページの場合、Googleが適切な文章を抜粋するのが難しくなる可能性が高いです。そんなときにもmeta descriptionをHTMLファイルに記述するようにします。
