HTMLのメタデータを詳しく解説！タグの一覧とSEO対策のポイント。

HTML5

この記事では、HTMLのメタデータについて詳しく説明したい。

メタデータはウェブページごとに設定されたページに関する情報や指示であり、通常、あまり意識することは無いかもしれないがセキュリティやSEO（サーチエンジン最適化）などの観点から重要な設定である。

Web系開発者はもちろんコンテンツマネージャーやブロガーの人にも、知っておいたほうがいい内容なのでぜひ最後まで目を通してほしい。

この記事はHTML5を標準として、執筆時点での最新のHTML規格に準拠している。

1. HTMLメタデータの基本
- 1.1. HTMLメタデータとは？
- 1.2. メタデータの記述方法
2. メタデータのタグ一覧
3. metaタグで指定する情報
4. SEO効果を高めるメタデータの記述方法

HTMLメタデータの基本

まずはメタデータの基本を確認していこう。

HTMLメタデータとは？

HTMLのメタデータ（メタ情報）はウェブページに関する情報や設定であり、ページのタイトル・文字コードの種類・コンテンツの著者名などが含まれる。

通常メタデータはウェブページのヘッダー内（<head>）に記述する。

メタデータの記述に使用するタグには<meta>を始め<title>や<script>などが挙げられる。

これらのメタデータはCMS（コンテンツマネージメントシステム）やアプリケーションのフレームワークなどによって自動で設定されるものも多いので、ウェブコンテンツの管理者は意識しない事も多いかもしれない。

しかし、ウェブページのブラウザ設定や検索エンジンでの評価などに大きな影響を与えるので時には見直したほうがいい。

メタデータの記述方法

メタデータの記述方法をサンプルのコードを見ながら確認したい。

以下はメタデータの記述の例だ。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My new application</title>
  <base href="/">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  ...
</body>
</html>

メタデータは通常HTMLページのヘッダー部分に記述する。<head>タグで囲まれた範囲がヘッダーに当たる。

より実践に近いメタデータの記述を見たい人は、ウェブサイトやブログの記事をデベロッパーツールで検証してみるといい。

メタデータのタグ一覧

次にメタデータの記述に使われるタグを確認しよう。

以下はメタデータの記述に使用するタグの一覧だ。

タグ	種類
<title>	ページのタイトル
<base>	ページのベースURL
<link>	外部リソースのURLリンク
<style>	スタイルシートの設定
<script><noscript><template>	スクリプトに関する設定
<meta>	その他のメタデータ

この章では<meta>タグを除くその他のメタデータタグについて簡単に紹介したい。

タイトル <title>

タイトルタグはページのタイトルを指定するのに使われる。

ここで指定したタイトルはブラウザのタブに表示されるほか、検索エンジンの検索結果などでも表示される。タイトルはひとつのページに対してひとつだけ指定できる。

<title>初心者のためのウェブページのタイトルの指定方法！</title>

ベースURL <base>

ベースURLタグではページのベースURLを指定できる。

ベースURLを指定しておいた場合は<link>や<script>タグにて相対パスでURLを記述することができる。

<base href="https://my-example-site.co.jp">

テンプレート <template>

テンプレートタグではHTMLのひな型を作成することができる。

<template id="list-item-temp">
  <li class="item">
    <span class="item-name"></span>
    <button class="remove-button">Remove</button>
  </li>
</template>

テンプレートタグ内に記述された内容はそのままではビューに表示されない。

使用する際は設定したIDなどを頼りにJavaScriptコードにて呼び出して使用する。その際に表示に必要な情報を動的にアサインすることができる。

スタイル設定 <style>

HTMLテンプレートに適用するCSSスタイルを設定する。

<style>
  h1 {
    font-size: 24px;
    color: blue;
  }
</style>

外部のCSSファイルを読み込みたい場合は<link>タグを使用する。

スクリプトタグ <script><noscript>

スクリプトタグはJavaScriptのコードをHTML内に記述する場合や、外部のJavaScriptファイルを読み込む際に使用する。

<!-- 外部スクリプトファイルの読み込み -->
<script src="jquery-1.2.3.min.js"></script>

<!-- 内部スクリプトの記述 -->
<script>
  document.getElementById("welcome-message").innerHTML = "Welcome to my page!!";
</script>

外部リソース情報 <link>

リンクタグはウェブページと関係のある外部リソースの種類とURLを指定するために使用される。

おもにCSSのスタイルシートをHTMLドキュメントにリンクする際に使われるが、他にも様々な用途がある。

<!-- CSSファイルのリンク -->
<link rel="stylesheet" href="styles.css">

<!-- アイコンのリンク -->
<link rel="icon" href="favicon.iso" type="image/x-icon">

<!-- マニフェストファイルのリンク -->
<link rel="manifest" href="manifest.json">

以下はリンクタグの記述に使用できる属性の一覧だ。

属性	説明
rel	リソースのタイプを指定する。よく使われるのは”`stylesheet`“で、CSSファイルをリンクする際に使用される。他にも`icon`や`manifest`などを指定できる。
href	リソースのURLを指定する。この属性はすべてのタグに必ず記述する必要がある。
type	リソースのMIMEタイプを指定する。よくある例としては画像ファイルの”`image/png`“が挙げられる。省略されることが多い。
media	リソースのメディアタイプを指定する。例としては”`screen`“や”`print`“が挙げられる。デフォルトは”`all`“。
sizes	アイコンのサイズを指定する。おもにリソースタイプが”`icon`“の際に使用される。

“rel”属性にて使用できるリソースのタイプは数多い。

以下の表は代表的なリソースタイプの一覧だ。なお、以下の値は<a>や<form>といったタグでも使用できる。

値	リンクタイプ
stylesheet	インポートするスタイルシートを指定する。
manifest	ウェブアプリのマニフェストファイルを指定する。
icon	現在のページのアイコンを指定する。
author	著者の情報が書かれたページを明記する。
alternate	現在のページの代替となるページを明記する。
help	ヘルプページを明記する。

metaタグで指定する情報

ここからは<meta>タグを使って指定するメタデータを見ていこう。

charset属性で記述する情報

charset属性を使用するメタデータはcharsetのみだ。

charsetは「character set」の略であり、HTMLファイルで使用している文字コードを指定する。

属性	説明	使用例
charset	ページの文字エンコーディングを指定します。	`<meta charset="UTF-8">`

代表的な文字コードには「UTF-8」が挙げられウェブページの多くにUTF-8が使用されている。

その他の文字コードには「US-ASCII」や「ISO-8859-1」がある。

name属性で記述する情報

name属性を使用して記述するメタデータは多くある。

以下はname属性を使用して記述するメタデータの一覧だ。

属性	説明	使用例
application-name	アプリケーションの名前を指定する。	`<meta name="application-name" content="アプリ名">`
author	ページの著者名を指定する。	`<meta name="author" content="著者名">`
description	ページの説明を指定する。	`<meta name="description" content="説明">`
keywords	ページのキーワード・テーマを指定する。	`<meta name="keywords" content="HTML, CSS, JavaScript">`
generator	ドキュメントの生成に使用したソフトウェアを指定する。	`<meta name="generator" content="Dreamweaver">`
referrer	リファラポリシーを宣言する。	`<meta name="referrer" content="same-origin">`
robots	検索エンジンのクローラーへの指示を指定する。	`<meta name="robots" content="noindex,nofollow">`
theme-color	ページのテーマカラーを指定する。	`<meta name="theme-color" content="#ffffff">`
viewport	モバイルデバイスでのビューポートの設定を指定する。	`<meta name="viewport" content="width=device-width">`

http-equiv属性で記述する情報

http-equiv属性を使用する設定も多い。

「http-equiv」は馴染みが薄いかもしれないがHTTPリクエストに関する設定を指定できる。

属性	説明	使用例
content-type	エンコードの種類を指定する。HTML5ではcharset属性を使用することが推奨される。	`<meta http-equiv="content-type" content="text/html; charset=utf-8">`
content-language	言語の種類を指定する。HTML5ではlang属性を使用することが推奨される。	`<meta http-equiv="content-language" content="en-US">`
default-style	優先的に使用するスタイルシートを指定する。	`<meta http-equiv="default-style" content="スタンダードスタイル">`
refresh	ページのリロードやリダイレクトを指定する。	`<meta http-equiv="refresh" content="60; url=https://example.com">`
content-security-policy	セキュリティ上の理由から特定サイトのリソースの処理のみを許可する。	`<meta http-equiv="content-security-policy" content="default-src 'self';">`

SEO効果を高めるメタデータの記述方法

最後にコンテンツ管理者やブロガーのために、SEO対策としてメタデータをどのように活用できるかをまとめてみた。

ページの基本的な情報設定

まずはページの基本的な情報にて気を付けるポイントを確認したい。

titleタグの設定

titleタグはページのタイトルが入力される。

WordPressを始めとしたCMSでは記事のタイトルがそのままtitleタグに表示される。タイトルの最後にWebサイトの名前を表示するケースもある。

タイトルは一般的に50～60文字に収めるのが理想的とされている。

descriptionタグの設定

descriptionはタグはページの内容を簡潔に説明するためにメタデータ。

ここで入力した文章は検索エンジンに表示されるので、手間になるが出来るだけ入力したほうがいい。

ユーザがおもわずクリックしたくなるような内容にまとめ、さらに記事で上位表示を狙っているキーワードを自然な範囲で含めるといい。

keywordタグの設定

keywordタグではページのテーマやキーワードを記述する。

以前はSEOにおける重要な情報だったが悪用されることも多かったために、現在では検索エンジンのランキングに影響しなくなっている。したがって特に特殊なケースで無ければ入力する必要はないだろう。

クローラーのためのRobotsタグ設定

robotsタグではページインデックスを制御するために使用する。

robotsタグをうまく活用することはひとつのSEO戦略として非常に重要だ。適切に設定することで、検索エンジンがサイトを正しく評価し、不要なページが検索結果に表示されないようにすることができる。

以下はRobotsタグで使用できる値の一覧だ。

値	説明
noindex	ページをインデックスさせないようにする。
nofollow	ページ内のリンクをクロールさせたくない、もしくはリンク先の評価を避けたい場合に使用する。
none	noindex + nofollow
noarchive	ページのスナップショットをキャッシュしないようにする。
nosnippet	検索結果ページにページのスニペットや要約が表示されないようにする。
noTranslate	ページを翻訳するかユーザに尋ねないようにする。
noImageIndex	ページに埋め込まれた画像をインデックスしないようにする。
unavailable_after	ページが特定の日時以降に利用できなくなることを検索エンジンに知らせる。

Open Graph Protocol（OGP）

SNSでページがシェアする際に重要となる「Open Graph Protocol（OGP）」について説明したい。

Open Graph Protocolとは？

Open Graph Protocol（OGP）は、Facebookによって策定されたウェブ規格の一つで、ウェブページがソーシャルメディア上で共有されたときに、どのように表示されるかを制御するメタデータを提供する。OGPを使用することで、FacebookやTwitterなどのプラットフォームにおいて、リンクがクリックされる可能性が高くなるような見栄えの良いプレビュー（タイトル、説明、画像など）を表示することができる。

OGPタグの使用手順

HTMLファイルの編集: 使用するOGPタグをHTMLのヘッダーに追加する。各タグの内容はページごとに設定する必要がある。
画像サイズの適正化: og:imageで指定する画像は推奨されるサイズに合わせると、表示が最適化される。例としてFacebookでは1200×630ピクセルが推奨されている。
検証ツールの利用: OGPタグが正しく設定されているかを確認するためにプレビューが正しく表示されるか検証する。検証にはFacebookの「Sharing Debugger」やTwitterの「Card Validator」などのツールを使用するといい。
キャッシュのクリア: ソーシャルメディア上で一度シェアされたリンクのメタデータはキャッシュされる場合がある。メタデータを更新する場合、キャッシュをクリアするために検証ツールを使用する必要がある。

OGPタグの記述と使用例

<head>
    <meta property="og:title" content="最新ニュース：技術革新の未来" />
    <meta property="og:description" content="このニュース記事では、最新の技術革新について解説しています。" />
    <meta property="og:image" content="https://example.com/news-image.jpg" />
    <meta property="og:url" content="https://example.com/news-article" />
    <meta property="og:type" content="article" />
</head>

執筆者：久野嘉樹

ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。 Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA（シングルページアプリケーション）のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。 2009年よりドイツに在住。ドイツ語能力はC1レベル。