模写修行メディア

【2021年版】HTMLのheadタグの書き方を全て解説!

HTMLのheadタグに書く内容はどんなサイトでも共通のものが多く、テンプレ化しておくととても楽です。

この記事では、headタグに書くことと、それぞれどんな役割かを紹介します。

【コピペ用】HTML の head タグの書き方の結論!

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>ページタイトル</title>
        <meta name="description" content="ページの説明" />
        <meta name="format-detection" content="telephone=no" />

        <!-- favicon/webclipicon -->
        <link rel="icon" href="favicon.ico" />
        <link rel="icon" href="favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="webclip.png" />

        <!-- ogp -->
        <meta property="og:site_name" content="サイト名" />
        <meta property="og:url" content="URL" />
        <meta property="og:type" content="website or article" />
        <meta property="og:title" content="ページのタイトル" />
        <meta property="og:description" content="ページの説明" />
        <meta property="og:image" content="URL" />
        <meta property="og:locale" content="ja_JP" />
        <!-- <meta property="fb:app_id" content="AppID"> -->
        <meta name="twitter:card" content="summary_large_image or summary" />
        <!-- <meta name="twitter:site" content="@moshamusha2010" /> -->
        <meta name="twitter:description" content="ページの説明" />
        <meta name="twitter:image:src" content="URL" />

        <!-- css -->
        ...
        <link rel="stylesheet" href="css/style.css" />

        <!-- js -->
        ...
        <script src="js/main.js" defer></script>

        <!-- 場合によって必要 -->
        <!-- <meta name="robots" content="noindex,nofollow"> -->
    </head>

    <body>...</body>
</html>

初めに結論です。これらの情報を入れておけば、多くの場合問題ないと思います。これ以降のセクションで、上のコードが何を意味しているのか紹介します。

サイトによって必要ないコードもあるので、コードの意味も理解すると良いです。

headタグとは?

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- 検索エンジン / ブラウザ / 各種SNS などコンピューターに伝える情報 -->
    </head>
    <body>
        <!-- ブラウザに表示させてユーザーに伝える(見せる)情報 -->
    </body>
</html>
  • head内に書く内容
  • body内に書く内容

HTMLは上の2つに分けることができます。

head内に書く内容
検索エンジン / ブラウザ / 各種SNS などコンピューターに伝える情報
body内に書く内容
ブラウザに表示させてユーザーに伝える(見せる)情報。

今回紹介するheadタグに書く内容はSEO / 検索結果 / SNSでシェアされた時のクリック率になどに影響することもあるので、とても重要です。

headタグの書き方を全て紹介!

冒頭で紹介した全コードについて、どんな役割があるのか紹介します。

ページ情報

<!DOCTYPE html>

DOCTYPE宣言というもので、最新のHTMLで書く場合は上のように書きます。現在は特別な理由がない限り、上のように書いておけば問題ありません。


<html lang="ja">...</html>

lang属性はそのページの言語を指定します。日本語はja、英語はenなど、決められた値を入れます。

Googleはlang属性を見ていなと、公式に発言していますが、スクリーンリーダーの中にはlang属性がないと正しく読み上げされないものもあます。必ず入れておきましょう。


<meta charset="utf-8" />

文字コードの設定です。utf-8以外にはshift_jisなどもありますが、特別な理由がない限りutf-8を使います。

正しく設定されていないと文字化けする可能性があるので注意しましょう。


<meta name="viewport" content="width=device-width,initial-scale=1" />

レスポンシブ対応するためには上のように書きます。特別な理由がない限り、これ以外の書き方はしません。

※ initial-scale=1は必要ないかもしれませんが、念の為入れています。


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

タイトルは検索結果やブラウザのタブに表示されます。SEO的にも重要な項目で、不自然にならないのであれば、狙いたいワードをなるべくタイトルの前半に含んだ方が良いです。

また、記事などでは、クリックしたくなるような工夫も出来ればなお良いです。

例えばこの記事は、『html head 書き方』で検索した時に上位に表示されることを狙っています。【2021年版】はクリックされやすいように情報の鮮度をアピールしています。

表示される文字数は、アップデートなどで変わりますが、SP / PC共におおよそ30文字程度だと思っておけば良いでしょう。

Googleのアルゴリズムで、自動でタイトルが書き換えられることもあります。


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

ディスクリプションは検索結果に表示されます。SEOには関係ないと言われていますが、クリック率には関係あると言われています。

クリックしたくなるようなページの説明を記入すると良いです。

表示される文字数は、60~120字文字程度です。SPでは画像が表示される場合もあり、ディスクリプションの文字数は様々です。

指定しないと検索エンジンが抜粋して入れてくれます。また、指定しているのにその文章が入らず、Googleによる自動生成した抜粋が採用されるケースもあります。


<meta name="format-detection" content="telephone=no" />

iPhoneでは、電話番号らしき文字列があると自動検出してリンクになってしまいます。上のコードはそれを防ぐためのものです。

リンクにしたい場合は、href="tel:"で対応しましょう。

ファビコンとウェブクリップアイコン

💡 ファビコン

<link rel="icon" href="favicon.ico" />
<link rel="icon" href="favicon.svg" type="image/svg+xml">

ファビコンはブラウザのタブなどに表示されます。上でicoとsvgの2つを指定したのは、svgが対応しているブラウザでは svg、それ以外ではicoにするためです。

ルートディレクトリにファビコンファイルを置く場合は、上の1行目のコードがなくてもブラウザが自動で表示してくれます。ただし、svgやpngは非対応、icoファイルでないといけません。

svgを使うメリットは、解像度に依存せずに綺麗に表示される点やダークモード実装時に自動で切り替えができる点です。ただし、Safariでは複数の色を使うことが出来ません。IEは完全に対応していません。


💡 ウェブクリップアイコン

<link rel="apple-touch-icon" href="webclip.png" />

ウェブクリップアイコンはスマホのホーム画面に登録した際などに表示されます。

正方形で150pxくらいで用意しましょう。背景を透明にすると、iPhoneでは背景が黒になってしまうので注意が必要です。

OGP関連

OGP関連のコードはSNSなどでシェアされた時に表示される情報です。LINEやSlackなど、様々なところで表示されます。

FacebookとTwitterはよくシェアされるSNSなので、デバッカーで確認することをおすすめします。

公式のページも紹介しておきます。


<meta property="og:site_name" content="サイト名" />

サイト名を設定します。ページ名ではなくサイト名です。

このサイトであれば全てのページで、『サイト名 = 模写修行メディア』になります。


<meta property="og:url" content="URL" />

ページURLを設定します。絶対パスで記入します。


<meta property="og:type" content="website or article" />

トップページであればwebsite、それ以外はarticleにします。


<meta property="og:title" content="ページのタイトル" />

ページタイトルを設定します。


<meta property="og:description" content="ページの説明" />

ページの説明を設定します。


<meta property="og:image" content="URL" />

シェアされた時に表示したい画像を設定します。絶対パスで記入します。

  • 1200px × 630pxの画像
  • 画像の中の主要なコンテンツは正方形内に納める

必須ではありませんが、上の2点を意識すると、多くのサイトで綺麗に表示されます。正方形内に納める理由はLINEなどは、表示される画像が正方形にトリミングされるためです。


<meta property="og:locale" content="ja_JP" />

日本語で書かれた、日本人がターゲットのサイトであれば、上のように指定します。デフォルトはen_USです。


<!-- <meta property="fb:app_id" content="AppID"> -->

個人的に入れることが少ないのでコメントにしています。Facebookインサイトという、トラフィックに関する分析機能を使う場合に必要になります。

この記入がないとデバッカーでエラーが出ますが、問題なく表示されるので、気にしなくても大丈夫です。


<meta name="twitter:card" content="summary_large_image or summary" />

Twitter専用の記述です。

多くの場合summary_large_imageかsummaryを指定します。summary_large_imageは大きな画像で表示されます。


<!-- <meta name="twitter:site" content="@moshamusha2010" /> -->

Twitter専用の記述です。

運営サイトのアカウントがある場合設定しておいても良いです。必須でなく、アカウントがない場合も多いのでコメントにしています。


<meta name="twitter:description" content="ページの説明" />

Twitter専用の記述です。ページの説明を設定します。


<meta name="twitter:image:src" content="URL" />

Twitter専用の記述です。シェアされた時に表示したい画像を設定します。絶対パスで記入します。

CSSとJavaScript

💡 CSS

<!-- css -->
...
<link rel="stylesheet" href="css/style.css" />

CSSファイルの読み込みです。


💡 JavaScript

...
<script src="js/main.js" defer></script>

JavaScriptファイルの読み込みです。

JavaScriptはbodyの閉じタグの直前で読み込んだ方が良いと解説している書籍や webサイトもありますが、defer属性を付ければむしろhead内に書いた方が良いです。

その他

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

noindexは検索結果にインデックス(表示)させたくないページに指定します。nofollowはクローリングされたくないページに指定します。

上のコードはnoindexもnofollowも指定していますが、片方だけにしたい場合は、content="noindex"のように書けば良いです。

webサイトはサイト全体として、質が高いと検索エンジンに判断された方が、SEO的に良いです。従って、質の低いページにはnoindexやnofollowを使用します。


  • Google Analyticsや広告の計測タグの設定
  • 重複ページがある場合の設定(canonicalによる正規化)
  • RSSの設定
  • 1つの記事を分割している場合の設定
  • PWA対応する場合の設定
  • さらに細かいショートカットアイコンの設定

場合によっては上のような設定も必要になります。Google Analyticsの計測タグはかなりの頻度で入れることになると思いますが、それ以外はあまり設定する機会はないかもしれません。

実は必要ないコード

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="...">
<meta name="author" content="...">

これらはたまに目にすることもありますが、現在特になくても良い項目です。webは日々進化するので、最新の情報をキャッチアップすることは大切です。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材