この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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の技術の進歩とともに新たに登場するタグも日々出てきますので、情報をキャッチアップしていきましょう。
