「head要素」のまとめ

1年に1度くらい「head要素」に入れる内容を見直すようにしているのですが、年々「新しく入れた方がいい？」要素が増えたり、「もう古いから不要？」といったものが出てきます。
そこで、今回は後で見直せるように「head要素のまとめ」について書いていこうと思います。

Index

― 目次 ―

htmlのhead要素とは？
文字コードとレスポンシブ対応
SEO対策
SNS関連
favicon(ファビコン)
Webフォント
CSSとJavaScript
Google関連(Google AnalyticsやGoogle Search Console)

htmlのhead要素とは？

bodyタグ内には、ブラウザから見える情報を記述するのに対して、headタグ内には、Webサイトの各種情報を記述したり、Googleなどの検索エンジンのクローラーに認識してもらうための内容を記述していくため、重要な要素の1つとなります。
その内容は様々で、SEOに関する内容、FacebookやX(Twitter)などのSNSでシェアした際に、Webサイトのタイトル・イメージ画像・詳細などを正しく伝えるためのhtmlの要素でもあるOGP(Open Graph Protocol)、favicon(ファビコン)の情報、CSSやJavaScriptの情報などがあります。これらについて、「head要素のまとめ」としてご紹介していきます。

文字コードとレスポンシブ対応

metaタグのchrarset属性で「文字コード」を指定します。
chrarsetを指定していないと、海外のブラウザからアクセスした際、文字化けを起こす可能性があります。そのため、重要な要素の1つです。
文字コードには、世界的に普及している「utf-8」、Windowsで標準の「shift-jis」、UNIX系OSの「euc-jp」などがあります。「utf-8」は、WordPressを利用されている方には、お馴染みの文字コードかと思います。
レスポンシブ対応では、「デバイス幅で表示」「初期ズームの倍率」、「iPhoneの電話番号自動リンク機能を停止」などを記述します。
head内に以下のように記述します。

<!-- 文字コードの指定 -->
<meta charset="utf-8">

<!-- レスポンシブ対応：デバイス幅で表示・初期ズームの倍率 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- iPhoneの電話番号自動リンク機能を停止 -->
<meta name="format-detection" content="telephone=no">

[補足]
2行目が「utf-8」での文字コード指定。
※秀丸・サクラエディタ・Atomなど(文字コードを編集できるテキストエディタ)で、文字コードを指定してから保存
5行目が「width=device-width：デバイス幅で表示」「initial-scale=1：初期ズームの倍率(画面全体にコンテンツを表示)」です。
8行目が「iPhoneの電話番号自動リンク機能を停止」です。

SEO対策

ひと昔前までは「keywords属性は重要」と言われていましたが、現時点では不要です。
その理由は、Googleが「ウェブランキングにキーワードメタタグを使用しない」と10年以上前に公表しているためです。
※developers.google.comの「Google 検索セントラルブログ」より

SEO関連で必要なのは、以下の3つかと思います。

title(タイトル)：ページタイトル
description(ディスクリプション)：ページの説明
canonical(カノニカル)：URLの正規化

head内に以下のように記述します。

<!-- title -->
<title>ページのタイトル</title>

<!-- description -->
<meta name="description" content="ページの説明">

<!-- canonical -->
<link rel="canonical" href="URL">

<title>ページのタイトル</title>

[補足]
2行目がページのタイトル。ページタイトルの文字数は、30文字程度がよいとされています。
5行目がページの説明。ディスクリプションの文字数は、80文字程度がよいとされています。
※検索結果に表示される際、文字数が多過ぎると後半部分はカットされてしまいます
※以前と比べ、ページタイトル・ディスクリプション共に表示される文字数が少なくなっています
8行目がURLの正規化。
※URLを絶対リンク(https://URLの最後まで)で記述します

SNS関連

FacebookやX(Twitter)などのSNSでシェアされた際に生成されるリッチオブジェクト(Webサイトのタイトル・イメージ画像・詳細などの見え方)を設定できるOGP(Open Graph Protocol)を指定します。
head内に以下のように記述します。

<!-- OGP -->
<html lang="ja" prefix="og:https://ogp.me/ns#">
or
<head prefix="og:https://ogp.me/ns#">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:site_name" content="Webサイト名">
<meta property="og:image" content="表示したいイメージ画像のURL">
<meta property="og:image:width" content="表示したいイメージ画像の横幅">
<meta property="og:image:height" content="表示したいイメージ画像の高さ">
<meta property="og:locale" content="言語の指定">
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="X(Twitter)のユーザー名">

[補足]
4行目がOGPを使用することを宣言。
※2行目のように「html要素にprefix属性とその属性値を指定する」こともできます。
5行目がページのURL。
6行目がページの種類。
※article(記事)、blog(ブログ)、website(ウェブサイト:TOPページに使用)などを指定します。
7行目がページのタイトル。
8行目がページの説明。
9行目がWebサイト名。
10行目が表示したいイメージ画像のURL。
※png・jpg・gif・webp形式がサポートされています。
11行目が表示したいイメージ画像の横幅：数字のみで指定。
12行目が表示したいイメージ画像の高さ：数字のみで指定。
13行目が言語の指定。
※日本語の場合「ja_JP」と指定します。
14行目がX(twitter)専用のカードの種類。
※summary(Webページ)、summary_large_image(Webページ)、app(アプリ)、player(動画)の中から指定します。
15行目がX(twitter)専用のユーザー名：X(twitter)のユーザー名。
※X(twitter)での他の設定に関しては、13行目までの設定が適用されます。

favicon(ファビコン)

favicon(ファビコン)は、Favorite icon(お気に入りのアイコン)が派生してできたITやWebマーケティング用語です。
Google Chromeなどのブラウザを開いた際にブラウザのタブ、Webページをお気に入り・ホーム画面・ショートカットなどに設定した時に表示されます。
head内に以下のように記述します。

<!-- Icon -->
<link rel="icon" href="URL/favicon.ico">
↓
<!-- Icon：可変サイズ指定 -->
<link rel="icon" href="URL/favicon.ico" sizes="any">
or
<!-- Icon：ピクセルサイズ指定 -->
<link rel="icon" href="URL/favicon.ico" sizes="32x32">

<!-- Apple -->
<link rel="apple-touch-icon" href="/image/favicon/apple-touch-icon.png">

<!-- Android -->
<link rel="manifest" href="/image/favicon/manifest.json">
↓
<!-- manifest.json -->
{
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

↓

↓

{

"icons": [

{

"src": "android-chrome-192x192.png",

"sizes": "192x192",

"type": "image/png"

{

"src": "android-chrome-512x512.png",

"sizes": "512x512",

"type": "image/png"

}

"theme_color": "#ffffff",

"background_color": "#ffffff",

"display": "standalone"

}

[補足]
2行目が「favicon.ico」のパス。
サイズ指定する場合、5行目の「sizes=”any”」で可変サイズ指定(SVGなどのベクター形式の画像向け)、8行目の「sizes=”32×32″」でピクセルサイズ指定ができます。
11行目が「apple-touch-icon.png」のパス(Apple向け)。
14行目が「manifest.json」のパス(Android向け)。
「manifest.json」の中身は、17～33行目の内容になっています。

favicon(ファビコン)を作成する場合、「Favicon Generator. For real.」が便利です。必要な画像など一式を作成してくれます。
※ダウンロードしたファイル全てをサーバーにアップロードする必要はありません。私が見る限り、上記に記述したファイルくらいでよいかと思います。1つ注意点としては、「site.webmanifest」というファイルがダウンロードされるのですが、「manifest.json」にリネームしましょう(Chromeでエラーの原因となります)。概要については、以下参考サイトをご確認ください。

― §参考サイト ―
「ウェブアプリマニフェスト」参照

favicon(ファビコン)の設定が反映されると、以下のように表示されるようになります。

－「favicon(ファビコン)」の表示イメージ－

Webフォント

Google Fontsなどを使用している場合、そのパスを記述します。
例) Google Fontsの「Noto Sans Japanese」のR(レギュラー)を使用している場合
※フォントをダウンロードして、運用Webサーバーにアップロードして利用している場合
head内に以下のように記述します。

<!-- Web Font -->
<link rel="preload" href="/font/NotoSans-R" as="font" type="font/woff2" crossorigin>

1 2	<!-- Web Font --> <link rel="preload" href="/font/NotoSans-R" as="font" type="font/woff2" crossorigin>

[補足]
2行目がフォントプリロードの指定です。
Webフォントは、フォントが指定されているサイトのロードが始まった際に読み込まれますので、事前に先読みさせることで表示速度を速めることができます。「NotoSans-R」が使用しているフォント、「as=”font” type=”font/woff2″」属性は、このリソースをフォントとしてダウンロードするようブラウザに指示し、リソースキューの優先順位付けに役立ちます。「crossorigin」属性は、フォントが別のドメインから取得される可能性があるため、CORSリクエストでリソースを取得する必要があるかどうかを示しています。この属性がないと、プリロードされたフォントがブラウザで無視されますので注意してください。

― 参考サイト ―
「Google Fonts Noto Sans Japanese」
※Google翻訳で日本語を選択すると分かりやすいです

― Webフォントの使用について ―
Google Fontsでいうと、「埋め込みコードを取得」「フォントをダウンロード」の2つがあります。
私の場合、ダウンロードして利用する場合が多いのですが、この場合、「ライセンスの確認」「フォントのサブセット化」「Webフォント形式への変換」「CSSでの指定方法」「フォントのプリロード」など、手順が複雑になりますのでご注意ください(※そのうち、当ブログ記事でもWebフォントについて記事にしたいと思います)。

CSSとJavaScript

CSSとJavaScriptに関しては、Web制作に携わっておられる方なら、よくご存じだと思いますので簡単に説明します。
head内に以下のように記述します。

<!-- CSS -->
<link rel="stylesheet" href="/css/〇〇〇〇〇.css" media="all">
<!-- JavaScript -->
<script src="/js/〇〇〇〇〇.js"></script>

[補足]
2行目がCSSの外部ファイルのパス。「media」は任意のものを指定してください。
4行目がJavaScriptの外部ファイルのパス。
※JavaScriptに関しては、headタグ内ではなく「締めのbodyタグ直前」の方がよい場合も多々あります。

Google関連(Google AnalyticsやGoogle Search Console)

SEOでまずやっておかないといけない「Google Analytics」と「Google Search Console」。
head内に以下のように記述します。

<!-- Google Analytics(gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-××××××××××"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-××××××××××');
</script>

<!-- Google Search Console -->
<meta name="google-site-verification" content="Google Search Console経由で取得する英数字と-(ハイフン)" />

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'G-××××××××××');

</script>

[補足]
2～8行目がGoogle Analyticsのトラッキングコード。
※「G-××××××××××」には、ご利用のIDを入力してください
11行目がGoogle Search Console経由で取得するメタタグ。
※「Google Search Console経由で取得する英数字と-(ハイフン)」は、Google Search ConsoleでWebサイトの確認時に必要です

「head要素のまとめ」についてご紹介しました。
変更されることも多いhead要素(Webの進歩は早いな…)。1～2年おきには、見直しておきたい要素の1つですね。