今回はHTML文章には必ず記述するheadタグのお話です。
headタグに書く内容は、コピーをした内容を少し変更するという具合に使ってしまいがち。
本当は何を設定すればよいのだろう・・
WordPressなどのCMS（コンテンツマネジメントシステム）を使うとほぼ自動的にheadが記述されるので、理解しなくても良い場合があります。
しかしhead部分にはSEOや機能にかかわってくる内容もあります。
今回は、headタグの
・基本的な使い方
・headに書くべき内容や、なぜ書くのか
について説明します。
headタグとは
headタグの読み方
head は「ヘッド」と読みます。ヘッダーやヘッディングといった場合のヘッドと同じ意味です。
headタグにはWebページのヘッダー情報を記述します
headタグは、Webページのヘッダー情報を記述する部分に当たります。
そしてheadタグには主にmetaタグとlinkタグを記載します。
世の中にある様々な文章や通信の定型にヘッダーという部分があります。一般的にヘッダー部分にはそのあとに続く文章について、様々な属性等が書かれていて、その情報によりその文章が何が誰が書いたのか、何のために書かれたのか等を知ることが出来ます。
Webページはheadタグとbodyタグに分けることが出来ます
Webページではそのヘッダー情報はheadタグに記述し、文章の内容であるコンテンツをbodyタグに記述します。
実際のhtmlコードには下記のように、一番上位の層で大きくheadタグとbodyタグの二つに分けて記述します。
|
1 2 3 4 5 6 7 8 |
<html> <head> <!--Webページのヘッダー情報--> </head> <body> <!--Webページのコンテンツ--> </body> </html> |
headタグに書く内容は、その文章の属性を設定するtitleタグとmetaタグ、そしてcssファイルやscriptファイルへのリンクを設定するscriptタグを記述します。headタグには、基本的にはブラウザや検索エンジンにとって必要な情報を書くことが出来ます。
bodyタグには、文章の内容を記述します。この部分は主に人が見る部分を書きます。
headタグで利用できる属性
現在主流のhtml5では、全てのタグで利用できるグローバル属性以外に利用できる属性はありません。
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
headに記述すべき内容とその理由
headに記述するべきタグ
ここでは、headタグには特に理由がない限り必須で記述した方が良いタグがあります。titleタグ、文字コードを指定するメタタグ、viewportの設定がそれにあたります。それぞれサンプルと必要である理由を見ていきましょう。
titleタグ
ブラウザの上部などに表示されるWebページのタイトルを設定でき、下記のように記述します。
|
1 |
<title>Webページのタイトル</title> |
また、検索エンジンで検索した際の結果のタイトルにはこのtitleタグが表示されます。
そして、titleタグの内容はGoogleの検索アルゴリズムにも影響があると、ウェブマスター向けガイドラインにも明記されています。そのため、SEO視点からも重要なタグです。
Webページの文字コードを指定するmetaタグ
Webページの文字コードを指定するタグで、こちらの指定がないと、いわゆる文字化けをする可能性があります。基本的には下記のように記述します。
|
1 |
<meta charset="UTF-8"> |
そして、基本的にここでの文字コードはUTF-8にするのが良いとされています。UTF-8は国際標準的な文字コードで、且つASCIIコードとの互換性があるためです。
viewport設定
viewportは画面のサイズをどう扱うか設定するタグです。
現在では、いわゆるレスポンシブルサイトという作り方が一般的になっていて、画面サイズの大きさによって表示内容を変えることができます。viewportでは下記のように設定することが出来ます。
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
簡単に説明をすると、上記の設定では横幅は表示しているデバイスのサイズに合わせ、拡大縮小はしないという設定がされています。
今はスマホでもパソコンでもWebサイトを見るのがふつうであるため、この設定は基本的に必須に近い設定です。
headにできれば記述した方が良いタグ
必須ではないものの、基本的には書いた方が良いものがいくつかあります。
CSS
CSSはインラインとしてWebページにそのまま書く方法、外部ファイルとして読み込む方法があり、それぞれ下記のように記述します。
|
1 2 3 4 5 |
<style type="text/css"> /* CSSをここに記述していく */ </style> <link rel="stylesheet" href="外部ファイルのURL" type="text/css"> |
JavaScript
JavaScriptファイルを読み込む場合には下記のように記述します。
|
1 |
<script src="JavaScriptファイルのURL"></script> |
JavaScriptへのリンクはWebページのbodyをすべて読み込んだ後に読み込む方が良いとされています。
そのため、headタグには書かずにbodyタグを閉じる直前に読み込む方が良いという意見があります。
しかしdeferオプションというのを使うと、headに書いてもWebページをレンダリングした後にJavaScriptファイルを読み込ませることができます。その場合には下記のように記述します。
|
1 |
<script defer src="JavaScriptファイルのURL"></script> |
メタディスクリプション
ページの概要を記述することが出来るメタタグです。検索エンジンで検索した場合に、タイトルと一緒に表示される内容の一部で下記のように記述します。
|
1 |
<meta name="description" content="Webページの概要を表す文章"> |
一部、タイトルのみ表示される場合もありますがGoogleなどで検索した際には基本的に表示されます。
閲覧者はこの概要を見て、ページを開くか開かないかを決める場合もあるため、SEO的に重要なタグです。
Internet Explorerの互換モードを無効にする設定
Internet Explorerの一部のモードで表示が崩れないように設定するメタタグです。
Internet Explorerには、過去のバージョンのInternett Explorerと互換性を保つための、互換モードというモードがあります。
しかし、過去のバージョンのInternet Explorerはcssの解釈が違うためデザインが崩れて表示されることがあります。
このタグで指定されているとその互換モードにならないように指定できます。
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE-edge"> |
meta robots
このタグは、クローラーに対して指示を出すことが出来るタグです。
|
1 |
<meta name="robots" content="noindex,follow"> |
インターネット上に公開したページは、クローラーというプログラムが自動的に巡回をして情報を収集し蓄積しています。そのクローラーにそのページの扱いを指定できます。
SEO的には、検索結果ページなどの一覧ページは便宜上必要ですが、noindexとしてクローラーにインデックスしないように設定する方が良いとされています。
URLを正規化する
URLが異なるのに、同じページを表示することがあります。その際にURLが同じであることをクローラーに指定するためのタグがあり、下記のように記述します。
|
1 |
<link rel="canonical" href="WebサイトのURL"> |
現在はWordPressなどのCMSにより、自動的にWebページを表示させている場合が多くあります。
例えば、トップページから表示させた場合とカテゴリーなどで検索して表示した場合URLが異なるのに、同じWebページを表示することがあります。
クローラーはこの場合に別ページとして扱います。SEO的にはこの同じページが別のURLのままであることは好ましくないとされているので、このタグによりURLを一つに正規化するのが良いとされています。
ogpタグ
このタグを設定すると、SNSなどにURLを記述すると自動的に設定した内容が表示されます。
最近の多くのサービスでは、サイトのタイトルやサムネイルなどが自動で表示されますが、ここに設定した内容を使って表示をしています。
|
1 2 3 4 5 6 |
<meta property="og:url" content="WebページのURL" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:title" content="Webページのタイトル" /> <meta property="og:description" content="Webページのディスクリプション" /> <meta property="og:image" content="imageのURL" /> |
現在は検索エンジンの順位以外にもSNSなどでページを宣伝し引き込むことも多くなっているため、出来れば設定した方が良い情報です。
これ以外にもTwitter用のタグやfacebook用のタグもあります。
現在はheadに記述しなくても良いタグ
htmlや検索エンジンの歴史から、以前は重要でしたが、今では必要のないタグもいくつか存在します。
keywords
以前のクローラーはkeywordsというメタタグを評価に使っていたため、古いSEOの対策では効果があったようですが、現在では効果がないとGoogleが公式に明記しています。
そのため、keywordsタグは記述する必要がありません。
Webページの著者を書くauthorというメタタグがあります。現在では必要ありません。
まとめ
いかがでしたでしょうか。
headタグにはHTML文章に関するヘッダ情報にあたるタグ記述します。現在ではSEO的に重要な情報がおおくあります。
上記のまとめを見ていただき、とりあえずコピーして使うのではなく意味を把握して使えるようになります。
お役立ていただければ幸いです。
参考文献：ウェブマスター向けガイドライン
