模写修行メディア

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

HTML・CSS

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターやってます 👆

この記事の目次

【コピペ用】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でシェアされた時のクリック率になどに影響するので、とても重要です。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターは全員現役エンジニア 👆

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 書き方』で検索した時に上位に表示されることを狙っています。このタイトルに入っている【2024年版】は、クリックされやすいように情報の鮮度をアピールしています。

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

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

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

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

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

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

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

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

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

リンクにしたい場合は、個別にaタグの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では複数の色を使うことが出来ません。

参考記事

ウェブクリップアイコン

<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は日々進化するので、最新の情報をキャッチアップすることは大切です。

独学に限界を感じていませんか？

現役エンジニアによるメンタリングサービス作りました！

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！

当メディア運営メンバーでメンターやってます！👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材

詳しくはこちら