HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎42. title要素とmeta descriptionの使い方

      2018/02/22   hatano

title要素のSEO対策

title要素は「検索結果の見出し」と「お気に入り(ブックマーク)のラベル」に使用されるテキストを指定します。SEO対策で最も重要な対策の1つです。テキストは検索で優先したいキーワードを先頭にからめた内容にします。サイトのタイトルではなく、ページごとのタイトルを指定する必要があり、すべてのページのtitle要素のテキストが違うことが重要です。

titleタグ内に入れる文字数は、PCとスマホとも全角で約30文字までが検索結果に表示されます。文字数をオーバーした場合、あふれた部分は「…」で表示されます。

meta descriptionとは

meta descriptionは、検索結果でのページの説明文が表示されます。指定は、headタグ内に<meta name="description" content="説明文">を記述します。

meta descriptionのSEO的な対策

meta descriptionを指定しない場合

meta descriptionを指定しない場合、検索サイトはページの先頭のテキストを使い説明文を生成します。そのため意図しない説明文になる可能性があります。必ず設定しておきましょう。

meta descriptionの頻度と内容

サイト全体の説明文ではなく、ページごとの説明文を入れていきます。検索サイトは、トップページ以外も検索結果として表示します。ページの内容が把握しやすい説明文にしましょう。

meta descriptionの文字数

PCとスマホで検索結果に表示される文字数が違います。文字数を超えた部分は、「…」で表示されます。下記は文字数の目安です。

  • PCの場合…全角で約120文字
  • スマホの場合…全角で約50文字

「meta keywords」はSEO対策で重要か

meta keywordsは、ページ内のキーワードを列挙する指定で、古いSEO対策で重要視されていました。現在、Google, Bingなど検索サイトは、meta keywordsを重要視しないと表明しています。使っても問題はないですが、入れることで順位の変動はないと思ってください。

Googleのmeta keywordsの扱いについて(英語)
Google does not use the keywords meta tag in web ranking

下記は「meta keyword」の指定方法です。meta descriptionと同様、headタグに記述します。各キーワードはカンマで区切ります。カンマの前後にスペースを入れてはいけません。

ここまでのまとめ

初級では、PCサイトの制作が最低限、作成できる内容でまとめています。最後に、ここまでの内容の作業が行えるようにindex.html, reset.css, style.cssと各フォルダをまとめた基本フォーマットを下記からダウンロードできるようにしてあります。
基本フォーマット

まとめ

  • meta descriptionは検索一覧に表示される説明文
  • meta descriptionの内容は、ページごとの説明になるようにする
  • 同じくtitile要素も、ページごとのタイトルになるようにする

広告

 - HTML・CSS