headの主要タグ一覧

HTML

<head>内に記述する主要なタグをまとめました。書式はHTML5です。

文字エンコーディング

<meta charset="utf-8">

HTMLを記述している文字エンコーディングを指定します。この指定がないとHTMLが正しく表示されない場合があります。

<title>{タイトル}</title>

ページのタイトルを指定します。ブラウザのタブに表示されたり、検索されたときにタイトルとして表示されます。SEO対策においても重要なタグでキーワードを入れることを意識しましょう。検索結果で表示される全角30文字以内で記述することがおすすめです。

<meta name="description" content="{概要}" />

ページの概要を指定します。そのページがどういう内容のページなのかを簡単に説明した文章を記述します。検索結果のページ説明に使われたり、RSSに使われたりもします。

<meta name="keywords" content="{キーワード},{キーワード},{キーワード}" />

ページに関連したキーワードをカンマ区切りで指定します。以前はSEO対策として効果があった指定ですが、最近ではあまり重要視されなくなってきました。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

viewportは主にレスポンシブ対応をおこなう場合に使われるもので、画面サイズに対してどう表示するかを指定するものです。最近ではスマートフォンでの閲覧者も多い為、レスポンシブ対応をしていると検索エンジンからの評価も高まります。

viewportの設定

<link rel="icon" type="image/x-icon" href="{icoファイルのパス}">
<link rel="apple-touch-icon" href="{pngファイルのパス}" sizes="180x180">

サイトのアイコンであるファビコンの指定です。iphoneなどで使われる180×180のpngファイルの指定もおこなっています。ファビコンの設定については以下のページで詳しく解説していますのでご参照ください。
ファビコンの設定

<link rel="altarnate" type="application/rss+xml" title="sitemap" href="{サイトマップXMLのパス}" />

xml形式のサイトマップファイルを指定します。

RSS2.0

<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="{RSSフィードのパス}" />

ATOM

<link rel="alternate" type="application/atom+xml" title="Atom" href="{RSSフィードのパス}" />

ブログなどでRSSフィードがあるに指定します。RSSには、RSS2.0やATOMなどの形式がありますので形式に沿ったタグを指定します。両方ある場合は両方記載できます。

<link rel="stylesheet" href="{CSSファイルのパス}">

CSS（スタイルシート）の指定をおこないます。この指定をおこなうことでHTMLとCSSをリンクさせることができます。

<script src="{スクリプトファイルのパス}"></script>

スクリプトファイル（jsなど）の指定をおこないます。JQueryなどのスクリプトファイル読込に使います。スクリプトファイルの読込は<body>内に記述することもできます。

<meta name="robots" content="all">

クローラーに対するインデックス登録やリンクをたどるかなどを指定ができます。検索結果に表示されたくないページはインデックス登録をさせなくするなどのことができます。基本的に検索結果に表示させたいページはこのタグは記載する必要はありません。

設定一覧（複数設定する場合はカンマ区切り）