headタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

目次

headタグとは?

HTMLのheadタグは、HTML文書に関するメタ情報を記述するためのタグです。
head内の内容はページが読み込まれた後も表示されず、ページのタイトル情報やCSSやファビコンへのリンク、ページの著者情報などの情報が記述されています。headタグにはページを正しく読み込むための情報を定義すると同時に、検索エンジン向けのキーワードや説明などが含まれるため、非常に重要なタグです。

headタグでよく使うメタタグ・リンクタグ

<head>内に記載できる主なものをご紹介します。

文字コードを指定

 <meta charset=”UTF-8″>

charsetは文字コードを指定する属性で、文字化け対策です。

日本では、「UTF-8」、「Shift_JIS」、「EUC-JP」のいずれかが使用されているケースが多いです。なお、HTMLでは UTF-8 を使用することが推奨されています。UTF-8は世界中のほとんどの言語の文字を含んでいます。

タイトル

  <title></title>

ページのタイトルを記述します。検索結果画面のサイト名として表示されますので、これは必ずつけてください。文字数は30文字以内推奨です。

サイトの説明(ディスクリプション)

<meta name=”description” content=”ここに説明文を入力します”>

description は検索エンジンの検索結果ページにも使われる重要なmeta要素です。
ページの概要や要約をキーワードとともに指定します。検索順位に直接影響を与えませんが、検索結果の画面をみたユーザーの流入を促す重要な要素です。文字数は120文字以内に収めます。

インデックスの禁止

  <meta name=”robots” content=”noindex,follow”>

「noindex」は検索エンジンに対し、インデックスしないように要求する記述です。インデックスされなければ、そのページは検索結果画面に表示されません。

「follow」は検索エンジンの巡回を許可する値です。「noindex, follow」であれば「検索エンジンの巡回は許可するが、インデックスしないでください」という意味になります。「nofollow」とすれば、検索エンジンの巡回も来なくなります。巡回が来ないとサイト内のリンクをたどることもなくなります。

noindexタグについての詳しい記事はこちら。

電話番号、メールアドレスの自動リンクを無効化

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

モバイルデバイスでは、サイト内に電話番号、メールアドレス、住所などの記載があると、リンクに自動変換されてしまいます。この機能を防ぐために指定します。

「content=”telephone=no, email=no, address=no”」を指定すればすべての自動リンクがオフになります。

URLの正規化

<link rel=”canonical” href=”正規化するURL”>

複数のURLが存在する状態を正規化するための記述です。

Webサイトでは同一のサイトに複数のURLでアクセスできる場合があります。この場合、検索エンジンに別のページなのに全く同じ内容が記述されている、「重複コンテンツ」と認識される可能性があり、SEO的に問題があります。

例:
https://speever.jp                (wwwなし、httpsなし)
https://www.speever.jp        (wwwあり、httpsなし)
https://speever.jp              (wwwなし、httpsあり)
https://www.speever.jp      (wwwあり、httpsあり)

これらは全部同じ内容が表示されますが、このままでは検索エンジンは、同じ内容の4サイトが存在すると認識するため、

<link rel=”canonical” href=”https://speever.jp“>

とすることで、https://speever.jpに正規化され、重複コンテンツ問題を回避できます。

canonicalタグについてはの詳しい記事はこちら。

レスポンシブ対応

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

PCやモバイルデバイスの画面サイズにデザインを最適化させるためのviewport設定です。

「width=device-width」でviewportの幅を端末画面の幅や各種ブラウザのウィンドウの横幅に設定されます。逆に「width=1024」など数値を入れれば、viewportの横幅を固定することもできますが、非推奨です。

「initial-scale=1.0」では初期のズーム倍率を指定できます。

iOSのホーム画面用アイコン

 <link rel=”apple-touch-icon” href=”apple-touch-icon.png”>

apple-touch-iconはiOSでホーム画面に追加した時のアイコンです。

ファビコン

<link rel=”icon” type=”image/png” href=”favicon.png”>

こちらはファビコンの設定です。

RSSフィード

<link rel=”alternate” type=”application/rss+xml” href=”RSSのURL”>

RSSフィードのURLです。

外部ファイル読み込み

<link rel=”stylesheet” href=”/style.css”>

上記では読み込むスタイルシートを指定しています。

まとめ

headタグの内容はユーザーには直接見えませんが、ブラウザやデバイス、検索エンジンに対して重要な情報が記述されています。

今回紹介した以外にもたくさんの種類のタグがあります。今後Webの技術の進歩とともに新たに登場するタグも日々出てきますので、情報をキャッチアップしていきましょう。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次