ブログ
- ブログ
- <head>タグの中には何を書くの？
<head>タグの中には何を書くの？
- コーディング
こんにちは、道洋行東京支店Web制作スタッフのR.T.です。突然、社内でWeb担当に任命されてしまった方や、Web制作に興味を持ち始めたばかりの方にとって、「HTMLファイルの構造」は少し取っつきにくく感じられるかもしれません。でも安心してください。基本さえしっかり押さえれば、Webページ作成の土台がしっかりと築けます。
本記事では、Web制作初心者の方や未経験の社内Web担当者を対象に、<head>タグ内に必要な最小限のタグについて、解説をしています。
前回の記事ではHTMLファイル全体の基本構造について解説いたしました。
今回はそれを踏まえ、構造のうち<head>に記述される要素を解説していこうと思います。
もくじ
- 1 <head>の役割とは
- 2 <head>内に記述されるタグ
- 2.1 <meta charset="UTF-8">
- 2.2 <title>ページタイトル</title>
- 2.3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 2.4 <meta name="description" content="ページの説明文">
- 2.5 <meta name="keywords" content="キーワード1, キーワード2">
- 2.6 <link rel="stylesheet" href="style.css">
- 2.7 <link rel="icon" href="/favicon.ico">
- 3 まとめ
<head>の役割とは
前回の記事でも書いた通り、<head>には主にメタ情報を入力します。
この「メタ情報」とは、例えるなら「そのデータが何を意味しているかを説明するためのデータ」です。
噛み砕いて言うと、ブラウザに「このWEBページは、こういう仕様として読んでくれ」とか、あるいはGoogleボットに「このページのタイトルはこれで、こういう趣旨のページです」と説明するための情報です。
ここをおろそかにすると、いかに記事の中身が良くても検索にヒットしなかったり、あるいはコーダーの意図しない見え方でブラウザに表示されたり、というトラブルに繋がってしまいます。
転じて、<head>の中身はサイト製作者の意図に応じて、それぞれに異なる内容を設定しなければなりません。
ゆえにコーダーは、自分の今作っているサイトがどういう意図でどういう設計になっているか、きちんと理解した上で適切なメタ情報を設定する必要があるわけです。
<head>内に記述されるタグ
前述の通りあくまで一例であり、サイトによってはもっと多量のタグがずらりと並びますし、小規模な個人サイトではもっと少なくもなります。
今回は初学者向けの解説ということもありますので、要素を絞って解説していきましょう。
<meta charset="UTF-8">
ページの文字コードを指定するタグです。
PCやスマホの環境によらず、意図した日本語を正しく表示するために必須のタグになります。
ちなみにUTF-8というのはUnicodeを意味しており、PCの母語設定などによらずあらゆるPC環境で同じ文字を表示させるための指定となります。
かつてはShift_JISやEUC-JPを使っていたこともありましたが、今は原則としてUTF-8を使っておけば問題ないでしょう。
そう言ってしまって良いレベルで、UTF-8が当たり前になっています。
<title>ページタイトル</title>
ブラウザのタブや検索結果に表示されるタイトルです。
今も、あなたの閲覧しているブラウザにこのページのタイトルである「<head>タグの中には何を書くの？」が表示されているのではないでしょうか。
特にSEOで重要な意味を持ち、Googleの検索結果一覧に表示されるのもこのタイトルです。
検索してあなたのサイトを表示させたとき、そのままページを開いてくれるかどうかはタイトルタグにかかっていると言えるでしょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewportは、スマホやタブレットでの表示最適化のために必要なタグです。
これはまたここで説明しきれる程度の情報量ではないので詳しくは説明できない（しきれない）のですが、もっとも一般的な設定がwidth=device-width, initial-scale=1.0です。
他、たとえばwidth=1024などのように数値で指定すると、スマホは表示させた横幅を1024pxと算定して表示させます。
レスポンシブ（画面幅に応じてレイアウトが変わるデザイン）でない場合、数字を固定したWEBページは管理が楽になるでしょう。
<meta name="description" content="ページの説明文">
descriptionはWEBページの説明文を入力するタグです。
これもGoogle検索でとても重要な役割を持っており、検索結果のタイトル下に表示されるテキストはこれを参照しています。
SEO対策にも大きな影響を与えるものですので、内容を熟考して入力しましょう。
<meta name="keywords" content="キーワード1, キーワード2">
続けてkeywords。これもdescriptionとともに長くSEOの大前提として扱われていたのですが、Googleは2009年にGoogle検索結果のランキングにおいて、keywordを参照していませんと明言しました。
詳しくはこちらの記事を参照してください。
今ではおまじない的に設定されていることが多く、あまり重要視されていません。
<link rel="stylesheet" href="style.css">
CSSファイルの読み込みです。
WEBページの見た目を装飾するためのCSSファイルを読み込みます。
いつかCSSについても個別に解説したいところですが、ひとまずは「.cssという外部ファイルをHTMLに紐づけるための記述」ということがわかっていれば大丈夫でしょう。
<link rel="icon" href="/favicon.ico">
ファビコンという、WEBサイトのアイコンを設定するためのタグです。
検索結果のこの位置に表示されるアイコンであったり、ブックマークの先頭に表示されるアイコンを設定します。
なくてもサイトの閲覧自体には困りませんが、ここに手抜きがあると、せっかく力を入れて作ったサイトがチープに見えてしまうこともあります。
また、ワードプレスサイトでは、ファビコンを設定しない場合、ワードプレスのロゴが表示されてしまいます。
特に企業HPの場合、「きちんとしている感」を出すためにも、きっちり設定しましょう。
まとめ
今回は<head>タグのうち、最小の範囲で必須と言えるものについてまとめてきました。
他にも、検索エンジンにヒットしないように設定するタグや、Javascriptを読み込ませるタグ、SNSに貼り付けたときの見え方を設定するタグなど、多彩な機能が複数存在しています。
今後も一緒に勉強をして、各種タグを使いこなせるように頑張りましょう。
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。
お問い合わせフォーム
