【HTML】<head>部分に記述できる要素

HTML

HTMLの<head>にはそのページの設定情報を入れ込むことができます。SEOに関連するものからSNSなどでのシェア、そしてCSSなどの外部ファイルの読み込み設定もあります。

<head>部分に記述できる要素一覧

<title>	ページのタイトル
<meta>	様々な種類の設定が可能
<link>	CSSなどの外部ファイルを読み込む
<script>	JavaScript関連の外部ファイルを読み込む

各要素の使い方

<title>

ページのタイトルを設定できます。この<title>に書かれたテキストが検索エンジンへ大きく影響するため非常に重要な要素です。<title>に書かれたテキストはブラウザのタブや、ブックマーク名にも使われます。

<meta>

多くの設定があります。

<!--  ページの文字コードを設定する。基本はutf-8。テキストエディタで設定している文字コードと違う場合に文字化けする -->
<meta charset="utf-8">

<!--  ページの著者を指定できる -->
<meta name="author" content="著者">

<!--  ページ概要として検索エンジンに参考にされる -->
<meta name="description" content="">

<!--  ページの重要なキーワードを設定できるがSEOとして効果が0になったので不必要な記述になった -->
<meta name="keywords" content="キーワード,キーワード">


<!--  OGP -->
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="タイプ名" />
<meta property="og:url" content="コンテンツURL" />
<meta property="og:image" content="シェア画像URL" />

<link>

外部ファイルを読み込む際に利用します。代表的な使い方はCSSの読み込みでしょう。

<!-- CSSを読み込む -->
<link　rel="stylesheet" href="ファイルURL">

<!-- ファビコンを指定できる -->
<link　rel="icon" href="ファイルURL">

<!-- iOSのホームに置かれた場合に利用されるアイコンを指定できる -->
<link　rel="apple-touch-icon-precomposed" href="ファイルURL">

<!-- そのページの正規URLを記載できる。例えば複数ページに分割されている場合に1P目のURLを指定すればページ評価の分散がなくなる -->
<link　rel="canonical" href="ページURL">

<script>

JavaScriptの実行ファイルを読み込めます。jQueryのようなライブラリを読み込むことも可能です。

<script src="ファイルURL"></script>

その他のインライン記述

CSSとJavaScriptは<head>内に書くことが可能です。読み込みを遅らせたい場合は<head>ではなく<body>の下の方に記述することもできます。

<style type="text/css">
    セレクタ{プロパティ:値;}
</style>

<script type="text/javascript">
    javascriptの記述
</script>