<head>内には、Webページの基本的な情報や設定が記載されています。これらは主に人間のためではなく、ブラウザに伝えるものであり表立って表示されるものではありません。
今回は私たちがよく使っている<head>内の基本的なタグをご紹介します。特別なことをしているわけでも無く、すべて基本的な項目となりますが、「ここではこういう風にしてるんだ〜」と参考にしてください。
全体としては以下のようになっています。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="ページの説明">
<meta property="og:title" content="ページタイトル">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/sample.jpg">
<meta property="og:type" content="article">
<meta property="og:description" content="ページの説明">
<meta property="og:locale" content="ja_JP">
<link href="#" rel="icon">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>一つづつ説明していきます。
<meta charset=”utf-8″>
文書の文字エンコーディングを指定します。
現在のHTML標準であるHTML Living Standardに準拠するためには、文字コードはutf-8を使用するルールになっているので、変更することはありません。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
viewportの設定を行います。
viewportというのは画面の表示領域のことで、現代における様々なデバイスに対応するために必要な設定です。ここでのwidth=device-widthは、「表示領域をデバイスの画面幅に合わせる」initial-scale=1は、「初期ズームレベルを1に設定する」ということです。通常レスポンシブ対応する場合には、この記述をすることが多いです。
いつも呪文のように書いていますが、意味を理解しようとするとわからなくなるので、結局毎回調べています。
<title>ページタイトル</title>
ページのタイトルを設定します。
<head>内で唯一、ブラウザ上で表示される要素です。Googleの検索結果として使用されることもあり、SEOの評価に使用されるもののひとつです。
<meta name=”keywords” content=”キーワード1,キーワード2″>
ページの内容に関連するキーワードを設定します。
GoogleはSEOの評価にこのタグを使用しないと名言しているので、不必要なタグとも言えます。
Google は keywords meta タグをウェブ検索のランキングで使用することはありますか
端的にいえば、使用しません。Google は Google 検索アプライアンスを販売していますが、そのプロダクトにはmeta タグの一致機能が備えられており、keywords metaタグが含まれる場合があります。ただし、これは企業向けの検索アプライアンスであり、Google のメインのウェブ検索とはまったく異なるものです。Google のウェブ検索（Google.com からアクセスできる、日々数多くのユーザーが使用する検索）では、keywords meta タグは完全に無視されます。現時点で Google 検索のランキングに影響が及ぶことはありません。
Google はウェブ ランキングにキーワード メタタグを使用しません
とは言え、逆に言えばあっても問題ないため、ページのSEOターゲットキーワードを管理するために使用することがあります。
<meta name=”description” content=”ページの説明”>
ページの簡単な説明文章を設定します。
こちらもkeywords と同様、SEOの評価には影響がありませんが、検索結果の文章として使用されることがあります。人が見てクリックしたくなるような、効果的な説明文章を設定します。
各種OGPタグ
OGPとは、ソーシャルメディアで共有された時にどのように表示されるかを制御するルールを定めたものです。例えばこのWebサイトのトップページを共有すると、以下のように表示されます。
<meta property=”og:title” content=”ページタイトル”>
OGPタグの設定の一つで、ソーシャルメディア共有用のページタイトルを設定します。
基本的には<title> タグと同じ設定で問題ありませんが、なるべく簡潔にした方がわかりやすくて良いかもしれません。
<!-- 中ページではサイト名も表示することが多い -->
<title>ページタイトル | Studio113</title>
<!-- SNSに共有された際にサイト名は必要ないので、ページタイトルのみにする -->
<meta property="og:title" content="ページタイトル"><meta property=”og:url” content=”https://example.com/”>
OGPタグの設定の一つで、ソーシャルメディア共有用のURLを設定します。
ページそのもののURLを指定することになることが多いですが、重複コンテンツが存在している場合は正規のURLを指定することにより、「いいね！」の統合などに役立ちます。
<meta property=”og:image” content=”https://example.com/sample.jpg”>
OGPタグの設定の一つで、ソーシャルメディア共有用の画像を設定します。
SNSの推奨画像比率は、1.91:1とされていますが、違いは僅かなので16:9で作成することが多いです。
<meta property=”og:type” content=”article”>
OGPタグの設定の一つで、ソーシャルメディア共有用のコンテンツタイプを設定します。
トップページにはwebsite を、それ以外にはarticle を指定します。それ以外にもたくさんのコンテンツタイプがあるようですが、使ったことはありません。
<meta property=”og:description” content=”ページの説明”>
OGPタグの設定の一つで、ソーシャルメディア共有用のページの説明を設定します。
description と同じものを設定します。
<meta property=”og:locale” content=”ja_JP”>
OGPタグの設定の一つで、ソーシャルメディア共有用の言語を設定します。
OGPのデフォルトはen_US となっているので、日本語のサイトであればja_JP とします。
<link href=”#” rel=”icon”>
ページのファビコン（ブラウザのタブに表示される小さなアイコン）などを設定します。
デバイスごとの設定が数多くあり、実際は複数行になります。ベストプラクティスが日々変わっていくので、定期的な見直しが必要です。実際はジェネレーターなどで対応することが多いです。
<link href=”style.css” rel=”stylesheet” type=”text/css” media=”all”>
外部のスタイルシートを読み込むためのタグです。
まとめ
以上が私たちがよく使っている<head> 内に書くタグ一覧となります。実際は案件ごとに調整したりもしますが、これらを基本として始めることが多いです。同じものを使いまわしているので、一つづつ見直すと必要/不必要なものがあったりするので、定期的に見直していくのは大切ですね。