ディスクリプションタグの書き方｜headに置く位置とページごとの設定

「ディスクリプションタグを書けば、その文が検索結果のタイトルの下に出る」。SEOプラグインの中には、入力した文を検索結果の見本の形で表示するものもあるため、書いた文がそのまま使われると思われがちです。ところが、Googleは検索結果の説明文を主にページの本文から作り、タグの文は本文よりページの内容を正確に表しているときに使います。タグはGoogleが読める位置に、そのページだけの文で1つ書きます。

本記事では、タグの書き方の見本から書いた後の確かめ方まで、記事制作会社の視点で順を追ってお伝えします。

ディスクリプションタグの書き方

ディスクリプションタグは、name属性に「description」、content属性に説明文を入れたmeta要素として、HTMLのheadの中に書きます。最小限の形は次のとおりです。

<head>
  <meta charset="utf-8">
  <meta name="description" content="ページの内容を要約した説明文">
  <title>ページのタイトル</title>
</head>

meta要素には終了タグがなく、1行で完結します。content属性のダブルクォートの間には、そのページの内容を要約した文を入れます。

1ページに書くディスクリプションタグは1つです。HTMLの仕様では、nameがdescriptionのmeta要素を、1つの文書に2つ以上置けません。

ディスクリプションタグを置く位置

ディスクリプションタグは、headの中で、imgやiframeなどの無効な要素より前に置きます。

imgやiframeより前

Googleは、headの中で無効な要素を見つけると、そこをheadの終わりとみなし、それより後ろの要素を読みません。headの中に置いてよい要素は、title、meta、link、scriptなど8種類に限られ、imgやiframeは無効な要素にあたります。

（参考：有効な HTML を使用してページ メタデータを指定する（Google 検索セントラル））

広告や計測のタグ、外部のウィジェットを貼り付けたときに、imgやiframeがheadに入ることがあります。headの中のimgより後ろにディスクリプションタグがあると、タグを正しく書いていてもGoogleには読まれません。

最初に返すHTMLの中

ディスクリプションタグは、サーバーが最初に返すHTMLのheadに書きます。JavaScriptで後から入れたり書き換えたりする作りは、できるだけ避けます。JavaScriptで入れたタグは、スクリプトを実行した後のHTMLにしか現れないからです。

（参考：Google がサポートしている meta タグと属性（Google 検索セントラル））

どうしてもJavaScriptで入れるときは、Googleが受け取ったHTMLにタグが入っているかを、Search ConsoleのURL検査ツールで確かめます。

ページごとに違う文を入れる方法

ディスクリプションタグの文は、ページごとに、そのページの内容を表すものに変えます。全ページに同じ文や似た文を入れると、検索結果に並んだときに、どのページに何が書いてあるかを読者が見分けられないからです。

（参考：検索結果のスニペットを管理する（Google 検索セントラル））

入力欄からの差し込み

CMSや自作のテンプレートで作るサイトでは、ページごとに説明文を入れる欄を用意し、共通のテンプレートでその値をcontent属性に差し込みます。テンプレートの書き方は仕組みごとに違いますが、形は次のようになります。

<meta name="description" content="{{ ページの説明文 }}">

入力欄が空のページに、全ページ共通の文を代わりに出す設定もしません。すべてのページに書く時間が取れないときは、トップページとよく読まれるページから書きます。WordPressでの入力場所は、WordPressのディスクリプションの設定方法にまとめています。

ページのデータからの自動生成

商品や店舗の情報を数千ページ並べるデータベース型のサイトでは、1ページずつ手で書く代わりに、商品名や価格などのページごとのデータから説明文をプログラムで組み立てて出力します。

<meta name="description" content="{{ 商品名 }}。{{ メーカー }}製、税込{{ 価格 }}円。{{ 発売年 }}年発売。">

説明文は文章の形でなくてもよく、価格や発売年のように本文のあちこちにある情報をまとめて載せると、読者は検索結果の段階で見比べられます。キーワードだけを並べた文は、検索結果の説明文に使われにくくなります。並べた語からはページの内容が伝わらないためです。

書いたディスクリプションタグの確かめ方

書いたディスクリプションタグは、ブラウザでページのソースを表示して、タグの位置と数を確かめます。

ソースの表示には無く、右クリックの「検証」で開く開発者ツールのHTMLにだけタグがあるときは、JavaScriptによる追加など、ブラウザ側でページの構造が変わった可能性があります。

タグが2つあるときにGoogleがどちらの文を使うかは、公式には確認できていません。

検索結果の説明文がタグと違う理由

検索結果の説明文がディスクリプションタグの文と違うのは、Googleが説明文を主にページの本文から作るからです。タグの文は、本文よりページの内容を正確に表しているとGoogleが判断したときに使われます。同じページでも、検索した言葉ごとに違う説明文が出ることがあります。

Web担当者

タグを書いたのに、検索結果の説明文が本文の一部になっています。タグの書き方が間違っているのでしょうか？

Writers-hub
編集部

書き方が正しくても、説明文が本文から作られることはあります。まずはソースで、タグがheadの中に1つだけあり、imgやiframeより前にあるかを確かめてください。

タグの位置と数に誤りがなければ、次に見直すのは、タグの文がページの内容を正確に要約しているかです。Googleは個々のサイトの説明文を手作業では変えないため、説明文の内容を改善するために見直すのは、タグの文とページの本文です。説明文の組み立て方と文字数の目安は、meta descriptionの書き方と文字数にまとめています。

ディスクリプションタグのよくある質問

文字数、keywordsのメタタグ、XHTMLの書き方のどれも、タグの基本の書き方を変える必要はありません。

何文字まで書いていい？

ディスクリプションタグの文字数に、Googleが決めた上限はありません。長い文は、検索結果では端末の画面の幅などに合わせて途中で切られます。

keywordsのメタタグも書く？

keywordsのメタタグは、Google検索では使われず、インデックス登録にも順位にも影響しません。新しく作るページに書き足す必要はありません。ほかのメタタグの書き方は、メタタグの意味と書き方にまとめています。

XHTMLの書き方でも読まれる？

Googleは、HTMLの書き方とXHTMLの書き方のどちらのmetaタグも読みます。末尾を「/>」で閉じる書き方でも、ディスクリプションタグとして扱われます。大文字と小文字も、基本的に区別されません。

まとめ｜ディスクリプションタグは読まれる位置に1つ書く

ディスクリプションタグは、headの中にmeta要素として、imgやiframeより前に1ページに1つ書きます。文はページごとに変え、テンプレートで作るサイトは、ページごとの説明文の欄から差し込みます。検索結果に出る説明文はGoogleが選ぶので、書き手が確かめるのは、タグが読める位置にあるかと、文がページの内容を正確に要約しているかです。

私たち合同会社Writers-hubは、累計8,000記事以上を制作してきた記事制作会社です。