html: head タグの使い方

UB3/informatics/html/tag_head

このページの最終更新日: 2024/02/24

  1. 概要: head タグとは
  2. title タグ
  3. meta タグ
  4. link タグ

広告

概要: head タグの使い方

html で書かれたページは大きく head と body に分かれている (参考: html の概要: 文書の構造と基本的な作業)。head とはページのタイトル、スタイル、検索用キーワードなど、ページには表示されない情報を記述する場所である。body にはページの内容が記述される。

head タグは、head 部分を指定するタグである。<head> と </head> で囲まれた部分が head になる。このページでは、head タグ内に含めることのできる項目についてまとめる。ページの全体構造は、以下のような形になる。

<html>
    <head>
        <title>ページのタイトル</title>
        <meta>さまざまなメタ情報</meta>
        <link>他のページやファイルとの関係</link>
    </head>
     <body>
        <p> ここに記事の本文が記載される。p は段落を示すタグ。</p>
    </body>
</html>

title タグ

<title></title> で囲まれた部分がページのタイトルになる。これはブラウザのタブ、履歴および Google などの検索結果として表示されるページのタイトルである。長いと後半は表示されないので 30 文字程度 が目安。

  • タイトルは 1 つのページで 1 度だけ指定可能であり、かつ省略することができない。
  • タイトルに日本語を用いる場合は、その前に <meta charset="UTF-8"> のように文字コードの指定を行っておくことが推奨されている。

title tag は SEO 上非常に重要な意味をもつ。

  • 頻繁にページタイトルを変えるのは良くない。1 - 3 ヶ月に 5 回以上変えると Google 検索の圏外に飛ぶという記事も。ただし適切に変更すれば表示順位が上がるのも確かな模様 (1)。
  • つまり とにかく影響が大きい ので注意ということだろう。

meta タグ

meta で設定できる属性はいろいろある。

文字コード

記載例:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

このページでは UTF-8 という文字コードを用いており、このほか iso-2022-jp, euc-jp, Shift_JIS などが日本語の文字コードとして使われている。

キーワード

記載例:

<meta name="keywords" content="html,SEO,タグ,head">

3 - 5 個のキーワードを コンマ区切り で記載する。Google は 2009 年にこれを SEO に利用しないと宣言しており、現在では意味がないとされる (2,3)。

他の検索エンジンは利用するかもしれず、また Google が将来的にこれを絶対に使わないという保証はないので、このサイトではわざわざこの行を消すことはしない。ただし、新しいページでは設定しなくてもいいだろう。
ページの幅

記載例:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

レスポンシブにするための記述 (参考)。通常は initial-scale=1 までが推奨。viewport-fit=cover とすると、左右の余白が埋まる。
Referrer ポリシー

記載例:

<meta name="referrer" content="no-referrer-when-downgrade">

referrer のポリシーを指定する (参考)。ブラウザがリクエストを送るとき、送信元の URL 情報を付加している。これが Referrer で、たとえば Google 検索からあるページに飛んだ場合、Referer: https://www.google.com/ という情報が付加される。これによって、どのページから要求が来たのかわかるようになっている。

referrerpolicy 属性での指定が第一で、それがない場合に meta 要素での指定になるようだ。referrerpolicy 属性は、a, img, link, iframe, script などの要素として指定することができる。

自動リンクの設定

記載例:

<meta name="format-detection" content="telephone=no">

電話番号っぽい数字があったときに、リンクにしない設定。

ロボットによるクローリング設定

記載例:

<meta name="robots" content="noindex">

noindex は meta で設定できる SEO 上で有効な項目の一つである。

その他の要素、更新予定

base
isindex
nextid
object
script
style


Resource hint の設定

記載例:

<link rel="preconnect dns-prefetch" href="URL指定">

必要なリソースにあらかじめアクセスすることを強制する。表示が速くなる効果がある。

重複コンテンツの指定

記載例:

<link rel="alternate" type="application/rss+xml" title="ページタイトル" href="URL">

それを

URL は異なっているが、スマホ用に同じ内容のページがあるとき、

スタイルの指定

記載例:

<link rel="stylesheet" href="../../meta/css/style.css">

References

  1. タイトルタグ変更事例でわかった上位表示に必要な3つの共通点. Link: Last access 8/27/2017.
  2. SEO対策にmeta keywordsを設定すべきか否か？Googleの見解を交えて紹介するよ. Link: Last access 8/27/2017.
  3. メタキーワード（meta name=”keywords”）はSEOに重要なのか？ Link: Last access 8/27/2017.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

↑