A Little Each Day

note to self

<head>タグ内に最低限書くものまとめ

こんにちは。本日はhead内に書くタグのまとめです。

タグの種類はたくさんあって、設定しておいたほうがいいタグと設定しなくても問題ないタグがあります。

今回は最低限書くものと、書いてあるとメリットがあるタグをまとめてみました。

最低限書くもの

headタグに必ず書くべきタグを以下まとめてみました。

<!-- 文字コード -->
<meta charset="utf-8">

<!-- ビューポート -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!-- タイトル -->
<title>タイトル</title>

<!-- スタイルシート読み込み -->
<link rel="stylesheet" href="style.css">


とりあえずこれらが最低限書くものかと思います。


上記以外にも必須ではないけど、書いておいて損はないタグもあるので見ていきましょう。


IE対策

IEで常に標準モードにするために指定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">


IEはバージョンごとにレンダリングが異なり、互換モードになってしまう場合があるので、IE対策はしておいたほうが良さそうです。


description

descriptionタグはサイトの説明を検索結果に表示するためのタグですが、必ずしも必要というわけではありません。

<meta name="description" content="">


仮に指定しない場合、Google側で自動でサイト内のテキストを拾い表示します。

自分でサイトの説明を指定したい場合は書きましょう。


keywords

keywordsを指定すればGoogleでそのワードで検索した場合引っかかりやすくなるようになると言われています。

<meta name="keywords" content="">


しかしながら、Googleはkeywordsを見ないので、指定しても結局seo的に意味がほぼないのが現状です。


canonical

URLを正規化するために使われるのがcanonicalタグです。

<link rel="canonical" href="">


「www」のあり・なしなど違うURLでも同じ内容のサイトにアクセスできてしまう場合は指定しておいたほうがいいです。

URLの正規化はseoの観点からみても大切です。


icon

ファビコンを指定するためのタグです。

<link rel="icon" href="">


ブラウザのタブにサイトのファビコンを表示できます。


apple-touch-icon

こちらはApple製品でサイトのアイコンを指定するためのタグです。

<link rel="apple-touch-icon" href="">


サイトをホーム画面やお気に入りに登録した場合、そのアイコンを表示できます。


Open Graph Protocol

OGP(Open Graph Protocol)とは、Twitter・Facebookなどでシェアされた時に、指定した情報を表示するために使うタグです。

<meta property="og:title" content="タイトル">
<meta property="og:url" content="url">


SNSでシェアされた際、サイトや記事のタイトル・URL・画像など表示するとユーザーに情報が直感的に伝わりやすく、多くの人に記事を見てもらえるかもしれません。

他にもimage・description・site_nameなどもあります。



他にもたくさんのタグがありますが、基本的には上記のタグを書けば大丈夫だと思います。

他にもタグが気になる人は調べてみるのもいいかもしれませんね。



本日は以上です。