今回はhead内に書いておいたほうがいいタグや、その意味を総まとめしていきます！
headとは
今ご覧のこのページも含め、WebページはHTMLにより作られています。HTMLは、大きくheadと、bodyに分けることができます。
head
headは画面に表示されない部分です。
- 検索エンジンに伝えたいこと
- コンピューターに伝えたいこと
など、Webページの情報をここに記述します。
body
bodyは画面に表示される部分です。
- 文章
- 画像
など、webサイトに表示したいhtmlタグを書きます。
あなたが今見ている文章や画像は、全てbodyに記述されています。
headタグはなぜ必要なの？
「SEO対策」という言葉を聞いたことがありますよね。SEO対策とは、検索順位を上位表示するための対策のことです。headに書く情報は、このSEO対策に大きく関係してきます。
検索順位の決定はGoogleが行なっています。そのため、headに適切にwebページの情報を書いていると
Googleページの情報が分かりやすい！このwebページの評価を上げよう！
と評価され、検索上位に表示することができます。
headタグに書くものは主に２種類！
headタグに書けるものはたくさんあるんですが、実は２種類に分かれます。
metaタグ
- 文字コード
- 説明文
- 検索エンジンへの掲載有無
linkタグ
- CSSファイルの読み込み先
- javascriptファイルの読み込み先
- ページ同士の関係性を
metaタグ、linkタグともにたくさんの種類があるので、コーディングしている時に「どれを入れるべきなのか」「どれがSEO的に良いものなのか」と悩んでしまうことも多いかと思います。
必ず書いておきたいもの
まずはwebページの製作にあたり、必ず書いておきたいタグを解説していきます。
文字コード
<meta charset="utf-8">webページの文字コードを指定するためのmetaタグです。日本語のサイトであれば、必ず書いておきましょう。
charset="●●"には他にも記載できるものはありますが、html5で推奨されているUTF-8を書きましょう。
Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>InternetExplorerには、
- 互換モード（古いバージョンで表示）
- 標準モード（最新バージョンで表示）
という、2つの表示方法があります。
互換モードだとレイアウトが崩れることがあるため、常に標準モードで表示するよう設定します。
タイトル
<title>ページのタイトル</title>ここに書いたテキストは、検索結果やブラウザのタブ名に使用されます。
viewport
<meta name="viewport" content="width=device-width,initial-scale=1">スマホやタブレット表示に対応した、レスポンシブデザインのwebページを作る際に必要です。
近年ではスマホでのアクセスが増えたため、今後webページを作成する中で「パソコン表示のみ」ということはほとんどないと思います。忘れず記入しましょう。
OGPタグ・twitterカード
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL">
<meta name="twitter:card" content="カード種類">
<meta name="twitter:site" content="@Twitterユーザー名">OGPとは、facebookやTwitterなどのSNSでwebページがシェアされた時の表示設定です。
より魅力的に表示させる、SNSからの流入を伸ばすために必須です。
必要に応じて書くもの
ここからは必須ではないけれど、必要に応じてあったほうがいいタグをご紹介します。
これら全てのタグを使用してしまうと、無駄なコードが増えてしまいます。意味をしっかりと理解し、必要に応じて適切なタグを使用しましょう。
説明文
<meta name="description" content="ページの概要">ここに書いたテキストは、検索結果の説明文に使用されます。
ファビコン
ファビコンとは、ブラウザのタブに表示されるアイコンのことです。自分の好きな画像を設定することができるので、webサイトを表す画像にしましょう。
<link rel="shortcut icon" href="ファビコンのファイル名.ico">「.ico」という特殊なファイルを使用します。
「.icoファイル」の作成方法
ファビコンにしたいpngファイルを準備しましょう。
CSS・JavaScriptファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL">
<script src="JavaScriptファイルのURL"></script>外部ファイルのCSSやJavaScriptの読み込みもhead部分で行います。
Googleの検索結果へ表示させたくない場合
<meta name="robots" content="noindex">Googleに対して「このページを検索結果に表示しないで！」という指示をします。表示して欲しい場合には、何も書かなくてOKです。
電話番号・メールアドレスのリンク変換設定
<meta name="format-detection" content="email=no,telephone=no,address=no">特定のブラウザでは電話番号やメールアドレス、住所を自動でリンクに変換します。
リンクにして欲しくないという場合はこちらのmetaタグを指定しましょう。
headタグまとめ
- 検索エンジンに伝えたいこと・コンピューターに伝えたいことを書く
- 適当に丸っとコピペするのではなく、意味をしっかりと理解する
- 重要なタグは全て書く
- その他のものは必要に応じて書く
以上がheadタグの解説です。webページを製作する上で避けては通れない道です。分からなくなったらその都度調べ、少しずつ理解して適切なタグを使っていきましょう！
