こんにちは、ryusukeです。
今日はHTMLのheadタグ内に書くべき13個のタグとheadタグに関する基礎知識を
HTML初心者向けに解説していきます。
この記事を読むことでHTMLのheadタグに関する基礎的な知識は身につきます。
注：もし「headタグについては知ってるから、さっさと書くべきタグを教えてほしい」って
感じの人は次の2番の見出しまで読み飛ばしてください。
まずは、そもそもheadタグって何なのか解説していきます。
１ そもそもheadタグってなに？
まず、結論から言うとHTMLはheadタグとbodyタグに分かれていて、今見ているこの記事は
bodyタグで作られています。
なお、この記事はbodyタグに関する記事ではないのでbodyタグに関する説明は割愛します。
で、もう一方のheadタグはブラウザや検索エンジンに情報を伝えたりファイルを
読み込んだりするための情報が入っています。
基本的にheadタグ内の情報は「ページのソースを表示」などでソースコードを見ない限りは
headタグ内の情報をユーザーが見ることはできません。
その、headタグには大きく分けて【metaタグ】と【linkタグ】の2種類の種類があって
違いは以下のとおりです。↓
- metaタグ：文字コードの指定や、ブラウザや検索エンジンなどの設定をする
- linkタグ：ファイルの読み込みやページに関する設定を検索エンジンに伝える
これだけ聞いてもざっくりしすぎていてわかりにくいと思うので、この記事では、「ここで
紹介しているコードだけ貼っておけばOK」みたいな感じでheadタグ内に書いておくべき
13個のタグをまとめました。
ここから紹介するコードをすべてコピペして適用すればheadタグ内の設定は完了します。
２ headタグ内に書くべきタグ13選
ここからは、HTMLのheadタグ内に書くべき13個のタグを解説していきます。
実際に僕がHTMLでホームページを作成した時←(今は公開してない)には以下の13個の
headタグしか入れてませんでした。
なので、何度も書いていますがこの記事で紹介している13個のコードをHTMLファイルの
headタグ内にコピペすればOKです。
では、さっそく順番に解説していきます。
1：文字のエンコード指定
<meta charset="utf-8" />文字のエンコード指定は日本語版でサイトを作る際には必需なタグなので、日本語版ではないサイトを作る際以外には書くようにしてください。
このタグを入れていないと文章が文字化けしたりしてSEO面で評価を落とされたり
読者にとっても良くないページになります。
エンコード指定はかなり重要なタグなので一番上の部分に書いておくのがおすすめです。
2：Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
今は、そこまで使われていないですがブラウザの【インターネットエクスプローラー】では
過去のバージョンで表示させる「互換モード」があります。
サイトに来た人がこのモードを有効にしているとサイトのデザインが崩れる可能性があるので
このタグを使って防ぐようにします。
ただ、今は【インターネットエクスプローラー】はほとんど使われていないので「必要か？」
と言われると微妙ですが、書いておいて損することはないタグなので何か特別な理由が
ない限りは書いておくのがおすすめです。
3：ビューポート設定
<meta name="viewport" content="width=device-width,initial-scale=1" />
このタグを書いておくことでサイトをレスポンシブルデザインに設定することが
できるようになります。
ただ、このタグだけでは完全なレスポンシブルデザインにはならないので、別でCSSを
設定する必要はあります。
それでも、このタグを書いておくだけで簡易的なレスポンシブルデザインに設定することは
可能なので特別な事情がなければ書いておくのがおすすめです。
4：タイトルタグ
<title>ページのタイトルをここに書く</titile>タイトルタグはブラウザのタブの部分や検索結果に表示される非常にSEO面でも、読者に
とっても非常に重要なタグです。
ちなみに、ページのタイトルは32文字以内で書くのが良いとされています。
5：メタディスクリプションの設定
<meta name="description" content="ページの説明文を120文字前後でここに書く" />メタディスクリプションとは、Googleなどの検索エンジンなどで表示される検索結果の
タイトルの下の記事の内容文が書かれている部分のことです。
このメタディスクリプションの有無で記事のクリック率が変わってくるので特別な事情が
ない限りは書いておくのがおすすめです。
ちなみに、メタディスクリプションは120文字前後で書いておくのが良いとされています。
6：ページのURLの正規化設定
<link rel="canonical" href="正規化するURL" />このタグはSEO面で検索エンジンの評価が分散することを防ぐためのタグです。
少しわかりにくいと思うので例を出すと「PCページとスマホページでURLが異なる場合は
スマホページでPCページのリンクを正規化することでSEO面の評価を1つにまとめる」ことが
可能になります。
もちろん逆にスマホページを正規化することも可能です。
7：スマホ用のアイコン画像設定
<link rel="apple-touch-icon-precomposed" href="スマホ用のアイコン画像にする画像のURL" />スマホのホーム画面にページを保存しておく際に表示されるスマホ用のアイコン画像の設定を
しておく際にこのタグを利用します。
設定する画像は横150×縦150ぐらいに設定しておけばOKです。
8：CSSファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL" />外部のCSSファイルを読み込んでサイトのデザインをする際には上のコードでCSSファイルを
読み込んでデザインを適用します。
CSSを書く際にはHTMLに直接書いてデザインをすることも可能ですが、基本的にはCSSを
書く際にはこの形式で外部ファイルを読み込んでデザインをすることが多いです。
9：Javascriptファイルの読み込み
<script src="JavaScriptファイルのURL"></script>さっきのCSSファイルの読み込みとほとんど同じですが、JavaScriptファイルを読み込む際は
上のコードでJavaScriptファイルを読み込んで適用します。
JavaScriptのコードはHTMLファイルに直接書くこともできますが、この形式で外部の
ファイルを読み込んで使うことが多いです。
10：noindex設定
<meta name="robots" content="noindex,nofollow" />noindex設定はGoogleなどの検索エンジンに対して「ページを検索結果に掲載しないで」と
伝える際に利用します。
このnoindex設定を使う例として例えば「カテゴリ別の記事のリストのページ」や「月別の
記事のリストのページ」などが挙げられます。
ただ、搭載しても問題ないページの場合は設定しないでもOKです。
11：Windows用のタイルの設定
<meta name="msapplication-TileImage" content="タイル画像にする画像のURL" />
<meta name="msapplication-TileColor" content="カラーコード(例：#FFFFFF)"/>Windows８から誕生したWindowsのピン止め機能のタイル画像の設定と背景の色の設定を
このタグで行います。
このタグは基本的に書いておいて損することは無いタグなので特別な事情がない限りは
書いておくのがおすすめです。
12：サイトのアイコン画像の設定
<link rel="icon" href="画像URL" sizes="16x16" type="image/png" />
<link rel="icon" href="画像URL" sizes="32x32" type="image/png" />
<link rel="icon" href="画像URL" sizes="48x48" type="image/png" />
<link rel="icon" href="画像URL" sizes="62x62" type="image/png" />ブラウザのタブの部分に表示されるサイトのアイコンの画像の設定をこのタグを使って
設定することができます。
ブラウザによってアイコン画像のサイズが変わったりするので、4種類ぐらいに画像の
大きさを分けて設定するのが良いです。
アイコン画像は設定しておいた方が読者から好印象を持たれやすいサイトになるので、
設定しておくのがおすすめです。
13：Twitterカードの設定
<meta name="twitter:card" content="Twitterカードの種類の指定" />
<meta name="twitter:site" content="Twitterの@ユーザー名" />
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:image" content="カードの画像のURL" />TwitterカードはTwitterやFacebookなどのSNSに記事のURLが張り付けられた際に
表示されるカードに関する設定の事です。
実際にTwitterカードの有無で記事のクリック率が変わってくるというデータもあるぐらい
このTwitterカードは重要です。
なお、もしもTwitterのアカウントを持っていない場合は上から2番目のTwitter:siteの部分の
タグは書かなくても問題ないです。ただ、ほかの5つは書いておくようにしてください。
まとめ
以上がHTMLのheadタグ内に書くべき13種類のタグとheadタグに関する基礎的な
知識についての解説でした。
HTMLのheadタグに関する基礎的な知識はこの記事を読むことで一通り身につくので
ぜひ、参考にしてください。
おわり。
人気記事↓
