「headについてはあまり意識した事がない。」
「何がhead内の必要要素なの、いまいち分かっていない。」
このような思いは、HTMLの学習を始めたばかりの人にとっては自然です。head内の書き方よりもbody内のコーディングに注意が向きがちで、改めて「head」を詳しく調べてみようという気持ちは強くはないでしょう。ついつい学習がおろそかになりがちなのが今回の「head」です。
ですが、敢えて今回は「head」に焦点を当てます。実は、「head」は縁の下の力持ち的にサイトの運用において一定のをサポートしてくれる「ありがたい」存在なのです。確かにデザイン上の効果はありませんが、実際にサイトの運用で重要な働きをするため理解は必須です。
今回は、学習の一歩を踏み出した人に「headの役割」についてお伝えします。これを読めば、「head」についてあまり深く考えていなかった人でもある程度の知識を得る事ができます。逆に、経験者は必要に応じて読み飛ばしてください。
headとは?
headとは、以下のようにHTML内で、headタグに囲まれた箇所を指します。これは他のタグと異なり、たった1度だけ使用します。つまり、HTMLファイルには必ず1個のheadしかない、ということです。くれぐれも「headerタグ」と間違わないようにしてください。headerタグは複数の使用が可能です。
これはHTML開始タグのすぐ下に置き、bodyタグと順番を入れ替えることはできません。ただし、仮にこのタグを削除して表示したとしても、デザイン上は問題なく表示されます。つまり、headタグの役割はデザイン上の重要性を持っているというよりも、サイトの構成や運用上重要だという事です。
[code lang=”html”]
<!DOCTYPE html>
<html lang=”en”>
<head>
ここにmetaタグなどの要素を置く。
</head>
<body>
ここにコンテンツ要素を置く。
</body>
</html>
[/code]
headの役割とは?
headの役割は、閲覧者にサイトを見てもらうための環境を整えるものと言えるでしょう。せっかく閲覧者に意味のあるサイトを作っても、サイトに訪問してもらい、見てもらわなければ意味がありません。このアクションにつなげるために、検索エンジンにサイトの情報を提供したり(indexの指示を出したり、titleやdescriptionでブラウザにサイトの情報を提供します)するのがheadの役割です。それ以外にもCSSやJsなどの外部ファイルを読み込んだりします。
headの書き方とSEOの関係
headの決まった書き方はありません。サイトのターゲットや運営方針によって必要になるタグは変わります。ですが、よく使われるhead内のタグ4つについてはぜひ知っておいてください。また書き方としては順番は決まっているわけではありませんが、metaタグの一つであり、文字コードを指定する「charset」はheadタグ内の最上位に配置してください。
- title
- description
- meta
- link
特に、検索エンジンにサイトの情報を渡すのはmetaタグを使います。検索エンジンにクローラーの巡回を求めたり、逆にそれを控えさせたりといった指示ができますし、スマートフォン向けの表示方法を指定できます。
よく、metaタグの詳細な設定はSEO対策として有効というお話を聞きますが、今やそれはmetaタグの過大評価です。現在は、閲覧者にとって本当に意味のある情報を提供することが重視され、結果、コンテンツの充実が優先されます。コンテンツの充実を軽視し、いくらmetaタグを詳細に書いても、SEO的意味は相対的に低いものがあります。もちろん、過大評価は禁物ですが、逆に過小評価するべきでもありません。コンテンツの補助的役割は依然あるわけですから、コンテンツを充実させることと同時に、metaタグもおろそかにせずしっかり書いおくべきでしょう。
head内の書き方
先ほど、決まったheadの書き方はないと伝えましたが、学習上は一つの型を知っておくと便利です。サイトの方向性に応じてその型に追加したり、削ったりできます。そこで、まずはその型を紹介します。
[code lang=”html”]
<head>
①基本的metaタグ
<!– 文字コードの指定 –>
<meta charset=”utf-8″>
<!– IEで常に標準モードで表示させる –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!– viewport(レスポンシブ対応) –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– 公開前は検索エンジンにインデックスさせず、他のページの巡回を促す。 –>
<meta name=”robots” content=”noindex,follow”>
<!– 電話番号の自動リンク化を無効 –>
<meta name=”format-detection” content=”telephone=no”>
②SEO対策の補助的措置
<!– サイトのタイトル –>
<title>サイトのタイトルをここに書く</title>
<!– キーワード –>
<meta name=”keywords” content=”キーワード1,キーワード2,キーワード3…body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。”>
<!– サイトの説明 –>
<meta name=”description” content=”ページの要約。130文字以内(目安)”>
<!– 重複するURLを一本化 –>
<link rel=”canonical” href=”正規化するURL”>
③SNS対策
<meta property=”og:site_name” content=”サイト名をここに書きます。”>
<meta property=”og:title” content=”上記titleと同じとする。”>
<meta property=”og:description” content=”上記descriptionと同じとする。”>
<meta property=”og:type” content=”website(トップページ)/article(下位ページ)”>
<meta property=”og:url” content=”サイトのURL”>
<meta property=”fb:app_id” content=”AppID”>
<meta name=”twitter:card” content=”summaryあるいは、summary_large_imageの指定ができます。”>
<meta name=”twitter:site” content=”サイトのURLを記載します。”>
</head>
④その他の指定
<!– faviconの指定 –>
<link rel=”icon” href=”favicon.ico”>
<!– 外部のCSSファイル –>
<link rel=”styleshee” href=”CSSファイルのURL”>
<!– 外部のJsファイル –>
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20src%3D%22JavaScript%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AEURL%22%3E%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
</head>
[/code]
headの役割は主に、検索エンジンやブラウザやSNSに向けて必要な情報を提供することです。
では、これからそれぞれの意味を確認していきましょう。
文字コードの指定
[code lang=”html”]
<head>
<meta charset=”utf-8″>
</head>
[/code]
この文字コードの指定は必須と考えてください。文字コードとは、コンピューターが文字を表現するためのコードであり、検索エンジンもこの文字タイプを読みます。これがないと文字化けの原因になります。これらは、大文字で書いても小文字で書いても認識されます。つまり、「UTF-8」(大文字)であっても「utf-8」(小文字)でも構いません。
日本語を表示したい時に使われる代表的なコードは以下の3つです。
- UTF-8
- SHIFT_JIS
- EUC-JP
この中でも特に「UTF-8」はHTML5も推奨しています。また、Googleなどの検索エンジンがHTMLファイルをクロールする際に確認するデータになります。
過去のIEのバージョンへの対応
[code lang=”html”]
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
</head>
[/code]
Internet Explorer(IE)は、ブラウザーの中では最も古いブラウザですが、そのため、以前に作られたWebサイトが最新のバージョンで見た時に正常に表示されないことがありました。そこで、IEは以前のバージョンで開発されたWebコンテンツであっても正常に動作させる仕組み、つまり、過去のバージョンで表示させる機能を作りました。これを設定すれば、最新のバージョンで見た時でも、以前のバージョンが見れるようになるのです。
例えば、IE7を最新のブラウザで表示させるには、head内に「meta http-equiv=”X-UA-Compatible” content=”IE=7″」と書けば、IE7を指定できます。特に、「content=”IE=7″」の部分を「content=”IE=edge”」と書けば、使用しているIEの最新バージョンの標準モードを表します。そして、「content=”IE=edge”」の「edge」は、「インストールされているIEの中で最新のものを選んでWebサイトを表示しなさい」という指示です。そして、この指示は、cssやjsなどの外部のファイルへのリンクより前に配置してください。
ただし、IE11では、これは完全に不要になりました。ただし、互換表示設定がないと挙動がおかしくなるケースも依然ありますので、念のために置いておく、くらいの認識で良いでしょう。
レスポンシブ対応
[code lang=”html”]
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
[/code]
これは重要なmetaタグです。これがないと、モバイルやタブレットの横幅の変動に対応できません。「」と書きます。「content=”width=device-width」は、ディバイスの横幅に柔軟に対応しなさいという指示と理解しておけば良いでしょう。「initial-scale=1.0」はズーム効果です。もしここを「2.0」と書けば、2倍のズームで拡大表示されます。一般的には「1.0」としておけば問題ありません。
インデックスの禁止
[code lang=”html”]
<head>
<meta name=”robots” content=”noindex,follow”>
</head>
[/code]
例えば、ブログページはGoogleに掲載し、検索の対象としたい。でも、ある特定のページは掲載したくないとします。そんな時には、「meta name=”robots” content=”noindex”」を設置します。これはページを巡回する検索エンジンに対して「このページをインデックス（掲載）しないでください。」という指示です。「meta name=”robots” content=”noindex,follow”」とすると、「ページを掲載しないでください、でも、ページの巡回はしてください」という指示になります。巡回はするので、ページのリンクも辿ります。
ただし、「noindex」が長く続けば、いずれページの巡回も行わなくなります。従って、長期的には「meta name=”robots” content=”noindex,follow”」は「meta name=”robots” content=”noindex,nofollow”」と同じになります。
電話番号の自動リンクを無効化
[code lang=”html”]
<head>
<meta name=”format-detection” content=”telephone=no”>
</head>
[/code]
iOSのSafariはページ内の電話番号を探して、自動的にリンク化します。これでは電話番号以外の番号も誤って認識される可能性があり、この自動リンク機能を無効にする設定が「meta name=”format-detection” content=”telephone=no”」です。電話番号リンク化したい場合はaタグ内に「href=”tel:000000000″」を入れて、電話番号のリンクを作りましょう。
サイトのタイトル
[code lang=”html”]
<head>
<title>サイトのタイトルをここに書く</title>
</head>
[/code]
これは必ず書いてください。そのページを代表するタイトルをつけます。このタイトルは、ブラウザ上の検索一覧のタイトルとして使われます。従って閲覧者が検索した時に一番最初に目にするのがタイトルです。だいたい30文字以内でタイトルをつけてください。
keywords(任意)設定
[code lang=”html”]
<head>
<meta name=”keywords” content=”キーワード1,キーワード2,キーワード3…body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。”>
</head>
[/code]
この設定は必須ではありません。また、SEO上の効果もありません。ですが、もしページのコンテンツ内に書ききれないキーワードがあれば、それは書いておくと良いでしょう。絶対的な効果はありませんが、補助的にGoogleのページ検索を助けてくれます。キーワードは、複数を「,（カンマ）」で区切って表記してください。
サイトの説明
[code lang=”html”]
<head>
<meta name=”description” content=”ページの要約。130文字以内(目安)”>
</head>
[/code]
これを設置したからといって、検索順位があがるといったSEO的な効果はありませんが、タイトル同様閲覧数に対する効果は期待できます。というのも、これはページがブラウザに掲載された時にタイトルの補助的役割としてタイトルの下に表示されます。そこで、閲覧者が求めているキーワードなどで文章を作れば、それをクリックする人が増えるかもしれません。
ただし、これは必須ではありませんのでなくても大丈夫です。しかし、あったほうが閲覧者にとっては見やすいページということになるので、設置しておくほうが良いでしょう。設置する場合は、120-130文字位で、内容を正しく反映した記述を心がけましょう。
複数URLの回避措置
[code lang=”html”]
<head>
<link rel=”canonical” href=”正規化するURL”>
</head>
[/code]
同じサイトに複数のURLが生まれるケースがあります。例えば、以下の二つのURLは同じサイトです。
- http://www.example.com
- http://www.example.com/index.html
しかし、同じページに異なるURLが生まれた場合、検索エンジンがどれが正しいURLか判断がつかないことがあります。これは「重複コンテンツ」と言われる問題です。しかし、内容が同じでれば評価は統一されたいと思うはずです。この問題を解決するために、URLの正規化というリンクタグを設置します。URLの正規化とは、検索エンジンに正しいサイトのURLを認識させることです。そのための措置が以下のLinkタグです。
[code lang=”html”]
<link rel=”canonical” href=”統一させたいURLをここに書く”>
[/code]
ここに書かれたURLを認識しなさいという指示というよりは、正しいURLを特定するための大きな手がかりとして使われます。
SNS対策
OPGとはサイトがSNS(Twitterやfacebookなd)で共有された時に、タイトルや画像を綺麗に表示してくれる機能です。head内にmetaタグとして設定します。つまり、これが設定されていないとSNSで正しい表示ができないということになります。
書き方としては、content属性と一緒に使います。
[code lang=”html”]
<meta property=”og:url” content=”ページのURLを書きます。”>
<meta property=”og:title” content=”ここは、metaタグの「title」と同じとしてください。”>
<meta property=”og:type” content=”ページのタイプを書きます。websiteなど”>
<meta property=”og:description” content=”metaタグ「description」と同じ記載内容にしてください。”>
<meta property=”og:image” content=”画像のURL”>
<meta name=”twitter:card” content=”カード種類を書きます。大きく2種類あり、summaryとsummary_large_imageがあります。”>
<meta name=”twitter:site” content=”Twitterユーザー名(twitterのアカウントを持っている場合のみ書いてください。)”>
[/code]
ファビコンの指定
ファビコンはブラウザのタブなどに用事される小さいアイコンのことです。例えば、gmailのファビコンは、以下ですね。
この指定には以下のlinkタグを使います。
[code lang=”html”]
<link rel=”icon” href=”faviconのURLをここに”>
[/code]
スマートフォン用のアイコン表示
このファビコンをモバイルやタブレットで表示したい時にファビコンを指定のタグを設定します。
このようなアイコンをスマートフォンやタブレットに表示したい時に以下を設定します。
iOS向け
[code lang=”html”]
<link rel=”apple-touch-icon” href=”./images/apple-touch-icon.png” sizes=”180×180″>
[/code]
アイコン画像は正方形にしておきます。また、4方の角は自動的に丸くなります。
Andoroid向け
[code lang=”html”]
<link rel=”icon” type=”image/png” href=”./images/android-touch-icon.png” sizes=”192×192″>
[/code]
外部のCSS/Jsファイル
これは、CSSファイルやjsファイルをHMTLと関連づけるためのlinkタグです。外部ファイルとしてCSSやjsを作成した場合は、HTMLとの関連付けを行わない限り、反映されません。以下が基本的な書き方です。
CSSの場合
[code lang=”html”]
<link href=”@@@.css” rel=”stylesheet”>
[/code]
jsの場合
[code lang=”html”]
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20src%3D%22%40%40%40.js%22%3E%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
[/code]
jsの場合は、head内に設置することもできますが、body内に設置することも可能です。jsは、HTMLを読み込んでから作動するため、head内に記載した場合その反映速度が遅くなる場合があります。そこで、bodyの閉じタグの直前に置いておいてください。また、scriptの閉じタグは間違って消さないように注意してください。
まとめ
ここまで読んでいただきありがとうございました。headの重要性について理解していただけたと思います。学習を始めたばかりはどうしてもデザイン重視、コーディングに慣れることに集中し、headの機能的側面に注意が向かないことがほとんどです。ですが、この設定がブラウザや検索エンジンと会話を行う方法なので、正確に機能を理解しておかないと、対象としているユーザーに情報が届かないということも起こります。特にSNSを利用して対象者にアプローチしたい場合はSNS用のmetaタグは理解しておいた方が良いでしょう。
