初心者でもわかるhead要素の基本

 

head要素で、記載する内容

  • 本文概要を示すもの
  • 本文以外の情報を制御するもの

以上の物を総称したものをヘッダ情報と呼びます。head要素内にはユーザーだけでなく、Google検索エンジン向けの情報も記載できます。SEOでの重要な要素になります。

title要素

title要素は、HTML文書のタイトルを指定する要素です。開始タグ<title>と終了タグ</title>の間に、ページのタイトルを記載します。

title要素の記述方法

<title>ファッション通販サイト</title>

title要素で記載したタイトルは、検索結果のリンクテキストやブラウザのタイトルバー、ブックマークのタイトルとして表示されます。

検索結果でのリンクテキストにtitle要素が表示される

検索結果でのリンクテキストにtitle要素が表示される

 

ブラウザのタイトルバーにtitle要素が表示される

ブラウザのタイトルバーにtitle要素が表示される

 

検索キーワードによっては、Goolgeの検索エンジン側で調整されて、title要素で記載したテキスト以外のテキストが表示される場合があります。

title要素で指定するタイトルテキストでは、注意することがあります。

  • ページの内容を端的に表す
  • 31文字以内に収める
  • WEBサイト内全てのページではユニークなテキストを記載する

seo-taro.hatenablog.com

ページの内容を端的に表す

タイトルは検索結果やタイトルバーに表示され、ユーザーの目にする最初の内容でsるので、ページの内容を端的に表現している必要があります。

  • タイトルの先頭にページ内容を端的に表す単語を記述する
  • 単一キーワードよりもユーザーへの訴求力が高い文章の形式にする

title要素の記載例

  • ファッション通販サイト〇〇
  • メンズのシャツ|ファッション通販サイト〇〇
  • メンズのシャツでおすすめはこれ|ファッション通販サイト〇〇

title要素の不適切な記載例

  • トップページ
  • バックもコスメもサンダルも旅行も格安でご紹介

31文字以内に収める

タイトルの文字数は全角で31文字いないに収まるようにしましょう。 検索結果に表示される文字数が31文字以上になると省略されてしまいます。

検索結果ページで省略されたタイトル

検索結果ページで省略されたタイトル

 

タイトルが全角32文字以上の場合でも、検索エンジンは問題なく評価します。検索結果に表示されるタイトルは、32文字以降が表示されないので、ユーザーに訴求したい内容は31文字いないで記載する必要があります。 タイトルとして確実に表示される文字数は、全角と半角、記号の組み合わせ、さらにブラウザの種類やデバイスなどで違うため、おおよそ31文字程度としてタイトルを作成しましょう。

WEBサイト内全てのページではユニークなテキストを記載する

ページ内容を把握でき、WEBサイト内の全てのユニークなタイトルにする必要があります。 全てのページタイトルがサイト名で記載されていると、ユーザーは各ページの具体的な内容を判別できなくなってしまいます。

 

seo-taro.hatenablog.com

 

meta要素

meta要素とは、HTML文書の情報を定義しています。ページの説明文やコンテンツ作成者など、ページの各種情報を設置することが可能です。 meta要素の情報は、ブラウザがHTMLをWEBページとして表示するときは、画面に表示されません。ユーザーが目にすることはないです。しかし、検索エンジンはmeta要素の情報をページ内容を判断する材料として利用しているので、SEO観点から重要になります。

meta要素の基本記載例

<meta 属性=”属性値”>

meta要素の属性の種類は下記があり、1タグに付き1属性が指定できます。

  • name
  • charset
  • http-equiv
  • itemprop

meta description

meta descriptionとは、ページ内容の要約説明を記述します。 meta要素のname属性でdescriptionを指定し、content属性でページの説明を記載します。

設置したdescriptionは、検索結果ページタイトル下部にサイト説明文として表示されます。これを「スニペット」と呼びます。(snippet=断片)

検索結果でのdescriptionの表示部分

検索結果でのdescriptionの表示部分

 

記載したdescriptionは、常にそのまま検索結果に表示されるわけではありません。WEBページのテキスト情報より、descriptionの記載がよりユーザーにとって適切だと検索エンジンが判断した場合に、descriptionの情報が採用されます。 description記載は、検索結果でユーザーがページコンテンツを理解する重要な手段であることは変わりません。直結したSEO効果は少ないものの、検索エンジンもdescriptionの記述をページ内容の把握に使用しています。

descriptionは、ページ内容を要約・訴求した文章であることが必要です。

注意点

  • キーワードを含める
  • 80文字以内に収める
  • ページごとにユニークな内容にする

キーワードを含める

descriptionに検索キーワードと同じキーワードを含める場合、検索結果に表示される際、スニペットで該当するキーワードが太文字で表示されます。 ユーザーにとって、求める情報がページ内に存在していることを確認できます。

80文字以内に収める

検索結果画面に表示されるスニペットの文字数を考慮して、descriptionの文字数を80文字以内に収めることをおすすめします。 モバイルのdescriptionはPCよりも短くなります。80文字程度まで圧縮される場合があります。スニペットに表示される文章は検索エンジンが自動的に修正することもあるので、そのまま表示されることも考慮して、title要素と同じく前半部分に重要なテキストを配置しましょう。

クリック率を向上させるために、ユーザーがページを「閲覧したい」と思うよう、必要以上に情報を記述しないことも手段としてあります。

ページごとにユニークな内容にする

title要素と同じく、各ページごとの要約を記載するので、全ページが同一になることはありません。descriptionは各ページの内容を要約し、結果としてページごとにユニークにします。

 

seo-taro.hatenablog.com

 

どうしても全ページが同じdescriptionになってしまうのであれば、検索結果エンジンはページ内容からスニペットを自動で保管してくれるため、descriptionを記載しない選択肢も考えられます。 しかし、検索エンジンが自動保管したスニペットは、必ずしも適切な文章であるとは限らないので、重要なページは個別にdescriptionを設定することが望ましいです。

meta Keywords

meta Keywordsは、ページの内容を表すキーワードを半角カンマ(,)で区切って設置します。ページ内の文章で特に重要と考えるキーワードを設置します。

  • キーワードの数は、目安3〜6個程度
  • 無関係なキーワードは評価を下げる可能性がある

現在では、meta Keywordsは検索順位を決める要素には使用されていません。 meta Keywordsにキーワードを記述しても検索結果のランキングには影響はありません。