COLUMN コラム

2021.10.25

【SEO対策】titleタグとmeta descriptionを最適化しよう!

HTMLの勉強を始めた時、SEO対策の基本としてhead要素のtitleにはページタイトル、meta descriptionにはページ内容の要約を記述しましょう、と学びますよね。
 
しかし、ただ言われた通りの内容を記述しておけばSEO対策はOK、というわけではありません。それぞれの要素がどの画面にどう表示されるのかを知ることで、注意すべきポイントというものが見えてきます。
 
今回はSEO対策の基本中の基本でもある、head要素のtitleタグとmeta descriptionの書き方についてご紹介します。

1. head要素の重要性

「head要素は本の表紙、body要素は本の中身」
 
HTMLを本に例えた時に使われる言葉です。head要素は本の表紙と聞いて、すぐに合点がいった人はSEO対策の基本を理解できている方だと思います。
 
HTMLの基本構造は大別すると、下記のように「DOCTYPE宣言」「head要素」「body要素」の3つの要素で構成されています。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>ページタイトル</title>
 <meta name="description" content="ページ内容の要約">
</head>
<body>
 ページの中身
</body>
</html>

サイトを閲覧する際、ブラウザ上で見ているのはbody要素の中身ですが、サイトに訪れる前の検索結果で見ているのはhead要素の中身です。Google検索結果に表示されるhead要素(titleやdescription)を見て、どのサイトを訪問しようか考えている時、それは平積みされた本の表紙だけを見て悩んでいる状態と似ています。
 
どんなに凝ったデザインのサイトを制作しても、サイト訪問がhead要素で判断されているということを考えると、titleタグやmeta descriptionもデザインと同じように重要な要素であるということが理解できます。

2. titleタグについて

titleタグはHTML文書のタイトルを指定する要素で、ページのタイトルを記述します。head要素を「本の表紙」とした場合、titleタグは「本のタイトル」に相当します。実際にtitleタグで指定したタイトルは、検索結果やブラウザのタブ、ブックマークのタイトルとして使われます。

<title>株式会社DOL</title>

これらの使用される場面を踏まえた上で、titleタグを指定する際に注意すべきポイントは次の3つです。
 
(1) シンプルにする
タイトルは検索結果やブックマークのタイトルなど、ページに訪問するユーザーが、最初に目にする内容です。ページ内容を端的に表現したわかりやすいテキストにしましょう。
 
(2) 31文字以内に収める
検索結果に表示される文字数は31文字が上限となっており、それ以降は省略されてしまいます。ユーザーに訴求内容を伝えるには、31文字以内で記述しましょう。
 
(3) サイト内でユニークにする
タイトルが重複しないように、ページ毎にユニークなタイトルを指定しましょう。タイトルが重複していると、ユーザーはページの内容をきちんと判別することができません。

3. descriptionタグについて

meta descriptionはページ内容の要約を記述します。本に例えた場合、titleタグが「本のタイトル」なら、descriptionは「本の裏表紙」に相当します。descriptionで指定した内容は、検索結果ページでタイトル下にサイト説明文として記述されます。

<meta name="description" content="ページ説明を記述する">

descriptionを指定する際に注意すべきポイントは次の3つです。
 
(1) キーワードを含める
descriptionに検索キーワードと同じキーワードが含まれていた場合、検索結果で該当キーワードが太字で表示されます。これによりユーザーが求めている情報がページ内にあることを明示することができます。
 
(2) 100文字以内に収める
検索結果の画面に表示される文字数は、Googleの仕様変更によって、ここ3〜4年の間にも100〜250文字までと大きく変動しています。どんな時にもユーザーに訴求したい内容を明示できるよう100文字以内に収めるようにしましょう。
 
(3) ページごとにユニークにする
descriptionは各ページの要約を記述するため、基本的にはユニークになるはずです。もし、各ページの要約を作成するのは工数がかかるから、全ページ同じ内容で記述しよう、とするのであれば検索エンジンによる自動補完に任せる選択もあります。(ただし、ユーザーにとっては適切な説明であるとは限りません)

4. おわりに

今回はSEO対策の基本であるtitleタグとmeta descriptionの最適化についてご紹介しました。
 
検索結果でなかなかクリックしてもらえないという悩みを抱えている場合は、body要素の中身をあれこれ改修するのではなく、head要素の記述を見直してみましょう。titleタグやmeta descriptionの書き方を修正するだけで検索結果の表示が変わり、クリック率が向上するケースもあります。
 
body要素のサイトデザインをしっかりと作り込んだのなら、head要素は本の表紙と思って、ユーザーに手に取ってもらいやすい記述を心がけましょう。
 
 

参考文献:
『現場のプロから学ぶ SEO技術バイブル』西山悠太朗・小林 睦 (著)
弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。
DOLに制作を相談する

表参道でWeb制作、
マーケティングするならDOL