headタグの備忘録です。
headタグとは
headタグは、Webページのヘッダ情報を記述するHTMLのタグです。
headタグを設定することで、ウェブブラウザの挙動を制御したり、検索エンジンにWebサイト・Webページの情報を伝えたりすることができます。
headタグの記述の仕方
headタグはhtmlタグの直後に記述します。
headタグ内にはmetaタグ、linkタグ、titleタグなどのタグを設置し、WebサイトやWebページの情報を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>headタグに設置する可能なタグ
titleタグ
titleタグはWebページのタイトルを表すタグです。
検索エンジンの検索結果や、ブラウザにブックマークを登録する際のデフォルトの名称として表示されます。
titleタグはタグ内に直接テキストを記述します。
ページタイトルとサイト名などを併記する場合は「-（ハイフン）」や「|（パイプライン）」などの記号で区切るのが一般的です。
<title>ページタイトル | サイト名</title>metaタグ
metaタグはtitleタグやlinkタグで表すことのできない、ページの情報を記述するためのタグです。
charset属性
charaset属性に文字エンコードを宣言するための属性です。
主な文字エンコードとして「uft-8」「shift_jis」「euc-jp」などがありますが、HTML5以降は「utf-8」が推奨されており、特別な理由がない限りは「utf-8」を指定します。
指定した文字エンコードに対応していない文字列がWebページにあると文字化けが発生します。
<meta charset="utf-8" />なお、文字エンコーディングを宣言方法として、http-equiv属性とcontent属性を使って指定する方法もありますが、HTML5以降は一般的ではありません。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />content属性
content属性は後述するname属性で指定した属性値に関連付けられた値や文章を記述します。
name属性
name属性はmetaタグで定義するmeta情報を記述します。
name属性で定義可能な属性値として以下のようなものがあります。
viewport
viewportは画面上のコンテンツの表示領域を設定します。
レスポンシブデザインを採用する場合に設定する必要があります。
name属性に「viewport」と記述し、content属性に表示領域の設定を記述します。
一般的には「width=device-width, initial-scale=1.0」と記述することがほとんどで、これは横の解像度は端末の解像度に従い、等倍で表示させることを意味しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />description
descriptionはWebページの概要や要点を説明する文章を指定します。検索エンジンの検索結果のスニペットとして表示されます。
descriptionは検索順位にはほとんど影響を与えないため、スニペットに表示する文章を工夫してクリック率を上げるために記述します。ただし検索エンジンは必ずしもdescriptionをスニペットに使用するとは限りません。
name属性に「description」と記述し、content属性に説明文を記述します。
<meta name="description" content="ディスクリプションの文章。" />keywords
keywordsはWebページに関連するキーワードを記述します。
ただしGoogleをはじめとする主要な検索エンジンはkeywordsをサポートしていないため、SEO対策には意味はありません。
name属性に「keywords」と記述し、content属性にWebページに関連するキーワードを指定します。
複数のキーワードを追記する場合は「,（カンマ）」でキーワードを区切ります。
<meta name="keywords" content="キーワードA,キーワードB,キーワードC" />linkタグ
linkタグはWebページに関連するページや参照する外部ファイルなどを設定するタグです。
href属性
href属性はWebページの関連するページや参照するファイルのURLやパスを記述します。
rel属性
rel属性はWebページから見た関係を記述する属性です。
rel属性で指定可能な属性値として以下のようなものがあります。
icon
iconはファビコンを設定します。
ファビコンはタブやブックマークに表示されるアイコンです。
rel属性に「icon」と記述し、href属性にアイコン画像へのパスを記述します。
ルート相対パスで記述するのが一般的ですが、絶対パスでも問題ありません。
アイコン画像は32 x 32 ピクセル以上の正方形でPNG形式またはICO形式のファイルを設定します。またChrome・Edge・FirefoxではSVG形式も使用可能です。
sizes属性にはアイコン画像の解像度を記述します。解像度は横と縦のピクセルを「x」で区切って入力します。
<link rel="icon" href="/favicon.png" sizes="32x32" />canonical
canonicalはWebページの正規化したURLを指定します。
例えば「https://example.com」と「https://example.com/」と「https://example.com/index.html」はURLは異なりますが、表示されるページは同じです。しかし検索エンジンは別々のページとして認識するため、例えばそれぞれのURLに対するリンクは別々の被リンクと解釈し、評価が分散します。
canonicalで正規化したURLを指定すると、検索エンジンに認識させるURLが統一されるので、このような評価の分散を防ぐ効果があります。
rel属性に「canonical」と記述し、href属性に正規化したURLを記述します。
<link rel="canonical" href="https://example.com" />next prev
next prevは複数ページにまたがるコンテンツを集約します。
例えばブログの詳細ページを複数ページに分割した場合に、どのページが最初のページかや、何ページで構成されているかなどを検索エンジンに伝えることができます。検索エンジンはこれらの情報をもとに検索結果に最初のページを優先的に表示したり、分割したページそれぞれの被リンクを集約します。
rel属性に「next」または「prev」と記述します。
「next」のhref属性には次のページへのパスを記述し、「prev」のhref属性には前のページのパスを記述します。href属性には絶対パス（URL）または相対パスを記述します。
なお設置の仕方には注意が必要です。
分割したコンテンツの最初のページには「next」だけを設置し、間のページには「next」と「prev」の両方を設置、最後のページは「prev」だけ設置するというように、コンテンツの前後関係を正確に表す必要があります。
<link rel="next" href="https://example.com/page/1" />
<link rel="prev" href="https://example.com/page/2" />