MENU

headタグに書く内容を総まとめ!

2021 2/13
headタグに書く内容を総まとめ!

今回はhead内に書いておいたほうがいいタグや、その意味を総まとめしていきます!

目次

headとは

今ご覧のこのページも含め、WebページはHTMLにより作られています。HTMLは、大きくheadと、bodyに分けることができます。

head

head画面に表示されない部分です。

  • 検索エンジンに伝えたいこと
  • コンピューターに伝えたいこと

など、Webページの情報をここに記述します。

body

body画面に表示される部分です。

  • 文章
  • 画像

など、webサイトに表示したいhtmlタグを書きます。

あなたが今見ている文章や画像は、全てbodyに記述されています。

headタグはなぜ必要なの?

「SEO対策」という言葉を聞いたことがありますよね。SEO対策とは、検索順位を上位表示するための対策のことです。headに書く情報は、このSEO対策に大きく関係してきます。

検索順位の決定はGoogleが行なっています。そのため、headに適切にwebページの情報を書いていると

Google Google

ページの情報が分かりやすい!このwebページの評価を上げよう!

と評価され、検索上位に表示することができます。

headタグに書くものは主に2種類!

headタグに書けるものはたくさんあるんですが、実は2種類に分かれます。

metaタグ

  • 文字コード
  • 説明文
  • 検索エンジンへの掲載有無

linkタグ

  • CSSファイルの読み込み先
  • javascriptファイルの読み込み先
  • ページ同士の関係性を

metaタグ、linkタグともにたくさんの種類があるので、コーディングしている時に「どれを入れるべきなのか」「どれがSEO的に良いものなのか」と悩んでしまうことも多いかと思います。

この記事では、headタグ内に書くべきものを、meta、linkタグ合わせて総まとめします!

必ず書いておきたいもの

まずは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>

ここに書いたテキストは、検索結果やブラウザのタブ名に使用されます

Goolgeの検索結果に表示されるタイトルの文字数には制限があります。
日本語で30文字以内にしましょう。

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="ページの概要">

ここに書いたテキストは、検索結果の説明文に使用されます

<title>と同じように、表示される文字数に制限があります。100文字前後で書くようにしましょう。

ファビコン

クリック/タップで拡大

ファビコンとは、ブラウザのタブに表示されるアイコンのことです。自分の好きな画像を設定することができるので、webサイトを表す画像にしましょう。

<link rel="shortcut icon" href="ファビコンのファイル名.ico">

「.ico」という特殊なファイルを使用します。

「.icoファイル」の作成方法

CSS・JavaScriptファイルの読み込み

<link rel="stylesheet" href="CSSファイルのURL">
<script src="JavaScriptファイルのURL"></script>

外部ファイルのCSSやJavaScriptの読み込みもhead部分で行います。

Googleの検索結果へ表示させたくない場合

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

Googleに対して「このページを検索結果に表示しないで!」という指示をします。表示して欲しい場合には、何も書かなくてOKです。

noindexは「お問い合わせページ」や「プライバシーポリシー」など、価値が低いページに使用します。

電話番号・メールアドレスのリンク変換設定

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

特定のブラウザでは電話番号やメールアドレス、住所を自動でリンクに変換します。

リンクにして欲しくないという場合はこちらのmetaタグを指定しましょう。

headタグまとめ

  • 検索エンジンに伝えたいこと・コンピューターに伝えたいことを書く
  • 適当に丸っとコピペするのではなく、意味をしっかりと理解する
  • 重要なタグは全て書く
  • その他のものは必要に応じて書く

以上がheadタグの解説です。webページを製作する上で避けては通れない道です。分からなくなったらその都度調べ、少しずつ理解して適切なタグを使っていきましょう!

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる