それぞれのタグの使い方(文書のメタデータ編)

Last updated at 2024-01-05Posted at 2024-01-05

文書のメタデータに利用するタグ

文書のメタデータは、文書自体に関する情報で、通常はコンテンツの内容そのものではなく、その文書についての情報を提供します。これは、ウェブページや他の文書に関する情報であり、コンピュータや検索エンジンが文書を理解しやすくするために使われます。そのため、表示内容には反映されません。しかしWebブラウザが内容を理解する＝検索結果に直接影響を与える部分となるので、できる限り充実させることが重要(やりまくれば良いというわけではないのがむずがしいところですが…)です。

具体的な文書のメタデータには、以下のようなものがあります：

タイトル: 文書のタイトルは、その文書の内容を簡潔に表します。例えば、ウェブページの場合、ブラウザのタブに表示されるタイトルや検索エンジンの検索結果で表示されるタイトルなどに使われます。
文字エンコーディング: 文書内のテキストがどのような文字コードでエンコードされているかを示します。これにより、ブラウザやアプリケーションが正しくテキストを解釈できます。
概要や説明: 文書の内容を要約したり、簡単に説明したりするためのメタデータです。検索エンジンがこれを利用して、検索結果ページに表示される説明文を生成することがあります。
キーワード: 文書の内容を表すための単語やフレーズのリストです。検索エンジンが文書の内容を理解し、関連する検索結果に表示するのに役立ちます。
作成者や著者: 文書の作成者や著者に関する情報も入力することができます。
関連するファイルやスタイルシートのリンク: 他のファイルやスタイルシートとの関連性を示すメタデータです。例えば、外部のCSSファイルやJavaScriptファイルへのリンクを記述することで、そこに記述されている内容をページに反映することができます。

続いて、具体的なタグとともに、その利用方法を示します。

具体的なタグとその利用方法

<head>

HTML文書内で文書の情報、つまりメタデータ自体を提供するためのコンテナです。この要素は実際のコンテンツではなく、ウェブページや文書に関するメタデータや設定を含むために使用されます。
実際に以下のように利用され、その内側にメタデータを記述するための具体的なタグを書き連ねていきます。

書き方の例

<head>
    <title>ページのタイトル</title>
    <meta charset="UTF-8">
    <meta name="description" content="ページの概要や説明">
    <!-- 他のメタデータ要素もここに追加 -->
</head>

<head>内のメタデータは、検索エンジンがウェブページを理解し、適切にインデックスするのに役立ちます。ページの説明、キーワード、タイトルなどは、検索結果に影響を与える重要な情報です。
SEO(検索エンジン最適化)対策の観点からも非常に重要な要素となるため、<head>内を充実させることはWebページを作成する上で非常に重要です。

<title>

ウェブページのタイトルを定義するために使用されます。このタグは検索結果ページやブラウザのタブなどで表示され、ユーザーがページの内容を把握するのに役立ちます。

書き方の例

<title>タロウのBlog</title>

このようにタイトルを<title>と<\title>で囲むようにして書きます。

注意点

一貫性と魅力的な表現: タイトルはページの内容を簡潔に表すべきですが、同時にユーザーの興味を引くような魅力的な表現も求められます。タイトルがページの内容を反映し、ユーザーの期待に応えることが重要です。
適切な長さ: タイトルは検索結果ページで表示される文字数に制限があります。情報を詰め込みたくなりますが、30文字程度にしましょう。長すぎると省略されることがあるため、簡潔かつ要点を押さえたタイトルを意識しましょう。
キーワードの適切な配置: タイトルにはページの重要なキーワードやキーフレーズを適切に配置することがSEO上重要です。ただし、キーワード stuffing（無理なキーワードの詰め込み）は避け、自然な文言で表現することが大切です。
ページごとのユニークなタイトル: 各ページにはユニークなタイトルを持たせることが望ましいです。同じタイトルを使いまわすと、検索結果で区別されず、ユーザーにとって混乱を招く可能性があります。
ページ内容との一致: タイトルはページの内容を適切に表現する必要があります。タイトルが内容と一致していないと、ユーザーが混乱し、ページに留まらず離脱してしまう可能性があります。
HTMLドキュメント内での配置: <title>要素は<head>内に配置されます。<title>要素は1つのHTMLファイルの中に1つだけで、複数個の<title>を含めることはできません。

<base>

<base>要素はHTML文書内の相対URLの基準となるベースURLを指定するために利用されます。

書き方の例

<!-- 基準となるURLを指定 -->
<base href="https://example.com/">

注意点

1つの<base>要素のみが有効: HTML文書内には1つだけ<base>要素を置くことが推奨されます。複数の<base>要素がある場合、ブラウザがどの基準を使うか混乱する可能性があります。
相対URLの基準としての適切な指定: <base>要素のhref属性には、文書内の相対URLの基準となるURLを指定します。例えば、<base href="https://example.com/">とすることで、その文書内の相対URLはhttps://example.com/を基準にリンク先を決定します。
相対URLの適切な使用: <base>要素を使うことで相対URLが解釈されるため、文書内で相対URLを使う際には、その基準に応じた形で記述する必要があります。間違った基準を指定すると、リンクやリソースの参照が誤って解釈される可能性があります。
<base>要素の位置: <base>要素は<head>内に配置される必要があります。
ブラウザの互換性: 古いブラウザや一部の特定の状況下では、<base>要素が正しく解釈されないことがあります。特にJavaScriptを使って動的に文書を変更する場合には、注意が必要です。

相対リンクのためページ内リンクは次のように記述します。

書き方の例

<head>
    <base href="https://example.com/">
</head>
<body>
    <h1>ページのコンテンツ</h1>
    <p><a href="about.html">Aboutページへのリンク</a></p>
    <p><a href="contact/index.html">Contactページへのリンク</a></p>
</body>
</html>

上記の例ではそれぞれ、
https://example.com/about.html
https://example.com/contact/index.html
へのリンクとなります。
外部へのリンクを利用したい場合は

書き方の例

<a href="https://www.external.com">外部サイトへのリンク</a>

のように絶対URLを利用します。

<base>は必須のタグではない

<base>は必須のタグではないので、必ず入れないといけないわけではありません。なので次に挙げるデメリットを気にしないのであれば利用する必要はありません。

デメリット1: 相対URLの解釈が困難に

<base>要素を使用しない場合、文書内の相対URLは現在のページのURLを基準にして解釈されます。これは、リンクが文書を参照する際の正確なパスを提供する必要があることを意味します。相対URLが複数のページで使われる場合、ページ間でリンクを正しく解釈するのが困難になる可能性があります。

デメリット2: URLの変更に弱い

サイトのURL構造を変更する際に、相対URLを使っている場合、多くのリンクを変更する必要が生じます。特に大規模なサイトの場合、手間がかかる可能性があります。

<link>

<link>要素は外部リソースをHTML文書に関連付けるために使用されます。主にCSSファイルやファビコン、スタイルシートなどの外部リソースを読み込む際に利用します。

リレーションシップ属性の選択

<link>要素のrel属性はリソースと文書との関係を定義します。例えば、スタイルシートの場合はrel="stylesheet"を指定します。

書き方の例

<head>
    <!-- スタイルシートの読み込み -->
    <link rel="stylesheet" href="styles.css" type="text/css">
    <!-- ファビコンの読み込み -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

このように<link>は<head>内に複数個記述できます。
以下に<link>で利用できるリレーションシップ属性の一覧を示します。

rel="stylesheet": スタイルシートとして関連付けるための属性です。
rel="icon": ファビコン（ウェブサイトのアイコン）を指定します。
rel="preconnect": リソースの事前接続を指定します。
rel="prefetch": リソースのプリフェッチを指定します。
rel="preload": リソースのプリロードを指定します。
rel="dns-prefetch": DNSプリフェッチを指定します。
rel="manifest": アプリケーションのマニフェストを指定します。
rel="alternate": 代替バージョンを指定します（多言語対応や異なるメディア形式など）。
rel="canonical": カノニカルURLを指定します。
rel="author": 著者を指定します。
rel="next": 次のページを指定します。
rel="prev": 前のページを指定します。
rel="search": 検索の結果ページを指定します。
rel="pingback": Pingbackサーバーを指定します。
rel="license": コンテンツのライセンスを指定します。
rel="help": ヘルプページを指定します。
rel="home": ホームページを指定します。
rel="tag": タグ付けされたリソースを指定します。
rel="me": 自身を指定します。
rel="noopener": target="_blank"を使用する場合に、新しいウィンドウで開いた場合にセキュリティを向上させます。
rel="noreferrer": リファラ情報を含まないようにします。
rel="ugc": ユーザ生成コンテンツを指定します。
rel="payment": 決済関連のリソースを指定します。

media属性の利用

media属性を利用することで、特定のデバイスや条件ごとにスタイルシートを適用することができます。

書き方の例

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

上記の場合、スタイルシートを画面表示に適用するという意味になります。一般によく利用されるものを示します。

all: すべてのデバイスに適用される（デフォルト値）。
screen: デスクトップやノートパソコン、スマートフォンなどの画面表示に適用される。
print: 印刷時に適用されるスタイル。
speech: 音声ブラウザ向けに適用されるスタイル。

また、メディア属性を使ってより詳細な条件を指定することもできます。例えば、特定の幅以下の画面に適用する場合は以下のように指定できます：

書き方の例

<link rel="stylesheet" href="styles.css" type="text/css" media="screen and (max-width: 768px)">

この例では、幅が768px以下の画面に適用されるように条件を指定しています。
他にも特定の幅や高さ、解像度、色深度などの条件に基づいてスタイルを適用することが可能です。

最小解像度が300dpi以上

<link rel="stylesheet" href="styles.css" type="text/css" media="screen and (min-resolution: 300dpi)">

最低でも16色以上の色深度があるデバイス

<link rel="stylesheet" href="styles.css" type="text/css" media="screen and (min-color: 16)">

crossorigin属性

crossorigin属性は、<link>要素や<script>要素、<img>要素などの外部リソースを読み込む際に、クロスオリジンリソースの取得方法を制御するための属性です。クロスオリジンリソースとは、異なるオリジン（ドメイン、ポート、プロトコル）から提供されるリソースのことです。

anonymous: クロスオリジンリソースを匿名で取得します。リクエストにはクッキーや認証情報は含まれません。これがデフォルト値です。
use-credentials: クロスオリジンリソースをユーザーの認証情報を含む状態で取得します。リクエストには認証情報が含まれます。ただし、サーバー側の設定でアクセスを許可された場合にのみ有効です。

書き方の例

<script src="https://example.com/script.js" crossorigin="anonymous"></script>

crossorigin属性は<link>以外にも、<script>・<img>などで利用が可能です。

type属性

type属性は、<link>要素や<script>要素などで使用され、リソースの種類やMIMEタイプを指定するための属性です。この属性はブラウザに対してリソースのファイル形式を示し、ブラウザがそれを適切に解釈するのに役立ちます。

type="text/css": CSSスタイルシートを指定する際に使用されます。
type="application/rss+xml": RSSフィードを指定する際に使用されます。
type="application/json": JSONファイルを指定する際に使用されます。
type="application/javascript": JavaScriptファイルを指定する際に使用されます。
type="image/png", type="image/jpeg", type="image/gif": それぞれPNG、JPEG、GIF形式の画像を指定する際に使用されます。
type="font/woff2", type="font/woff": WOFFやWOFF2形式のフォントを指定する際に使用されます。
type="text/html": HTML文書を指定する際に使用されます。
type="application/xhtml+xml": XHTML文書を指定する際に使用されます。
type="application/xml": XML文書を指定する際に使用されます。
type="application/atom+xml": Atomフィードを指定する際に使用されます。
type="application/pdf": PDFファイルを指定する際に使用されます。
type="application/zip": ZIPアーカイブを指定する際に使用されます。
type="text/plain": テキストファイルを指定する際に使用されます。
type="image/svg+xml": SVG画像を指定する際に使用されます。
type="audio/mpeg": MP3音声ファイルを指定する際に使用されます。
type="video/mp4": MP4動画ファイルを指定する際に使用されます。
type="application/vnd.ms-fontobject": Internet Explorer向けの特定のフォント形式を指定する際に使用されます。
type="application/octet-stream": 未知のバイナリデータを指定する際に使用されます。
type="application/ogg": OGGファイルを指定する際に使用されます。
type="application/ld+json": JSON-LD（JSON for Linking Data）を指定する際に使用されます。

typeはブラウザがそのファイルを適切に解釈するために利用するものなので、CSSファイルにtype="text/javascript"を指定するなどの間違いがあってはなりません。

type属性は特定の場合においてはブラウザが適切なデフォルト値を選択するため、上略することも可能ですが、HTML5ではCSSファイルのtype属性の省略は推奨されていません。

<style>

<style>要素はHTML内で直接CSSスタイルを記述するために使用されます。この要素を使うことで、特定のHTML文書内にスタイルを適用することができます。文法などは通常のCSSと同様となります。

書き方の例

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }

    h1 {
        color: blue;
    }
</style>

<style>要素は自己完結型の要素ではなく、終了タグが必要です（<style></style>）

<meta>

<meta>要素はHTML文書内にメタデータ（データの情報を説明するデータ）を定義するために使用されます。主に文書のメタ情報や検索エンジンに対する情報提供、ビューポート設定などに利用されます。

<meta>要素の利用方法と主な属性は以下の通りです：

文字エンコーディングの指定:

書き方の例

<meta charset="UTF-8">

文書の文字エンコーディングを指定するために使用されます。charset属性により、文書がどの文字エンコーディングで書かれているかを指定します。

ビューポートの設定:

書き方の例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

モバイルデバイスなどの画面のビューポートを制御するために使用されます。viewportメタタグを利用して、デバイスの幅に合わせてページを表示させたり、初期拡大率を設定したりします。

説明やキーワードの設定:

書き方の例

<meta name="description" content="ページの説明文">
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">

ページの概要や説明文、検索時に用いるキーワードを指定するために使用されます。これらの情報は検索エンジンでページの説明やキーワード検索に使用されることがあります。

著作権や著作者の指定:

書き方の例

<meta name="author" content="著作者名">
<meta name="copyright" content="Copyright">

ページの著者や著作権に関する情報を指定するために使用されます。

その他のメタ情報:

書き方の例

<meta name="robots" content="index, follow">

robotsメタタグは検索エンジンのクローラーに対して、ページのクロール許可やインデックス許可の指示を与えるために使用されます。

name属性

application-name: アプリケーションの名前
author: 著者名
description: ページの説明文
generator: HTMLドキュメントを生成したソフトウェアの名前
keywords: ページに関連するキーワード
robots: 検索エンジンのクローラーに対する挙動を指定するためのディレクティブ（index, noindex, follow, nofollowなど）
viewport: ビューポート設定（レスポンシブデザインなど）
format-detection: 電話番号やメールアドレスなどの自動認識機能を有効または無効にするための指定
apple-mobile-web-app-title: iOSデバイスでのホーム画面に表示されるアプリ名
apple-mobile-web-app-capable: iOSデバイスでのWebアプリの表示モードを指定
apple-mobile-web-app-status-bar-style: iOSデバイスでのステータスバーのスタイル
msapplication-TileColor: Windowsのタイルカラー
msapplication-TileImage: Windowsのスタートメニューのタイルに使用される画像のURL
theme-color: モバイルブラウザでのテーマカラーの指定

すべてのブラウザで完全にサポートされているわけではなく、特に特定の属性は特定のプラットフォーム（iOS、Android、Windowsなど）でのみ機能することがあります。

Open Graph Protocol

Open Graph Protocol（OGP）は、ウェブページがソーシャルメディア上で共有された際に、そのページの内容を明示的に示すためのプロトコルです。主にFacebookが開発し、他のソーシャルメディアプラットフォームでも広くサポートされています。
これにより、特定の情報（タイトル、説明、画像など）を含むメタデータを定義し、ソーシャルメディアプラットフォームがページを共有した際に適切なプレビューが表示されるようにします。

例えばURLを共有した際に表示されるサムネイルの設定にはog:imageを利用します。

og:imageの利用例

<meta property="og:image" content="https://example.com/image.jpg">

利用できるpropatyの一覧を以下に示します。

og:title: ページのタイトル
og:type: コンテンツの種類（website, article, videoなど）
og:image: ページのプレビューイメージのURL
og:url: ページのURL
og:description: ページの概要や説明文
og:site_name: サイトの名前
og:locale: ページの言語や地域設定
og:video: 動画コンテンツのURL
og:audio: 音声コンテンツのURL
og:determiner: コンテンツの冠詞（a, an, theなど）
og:locale:alternate: 別の言語バージョンのURL
og:article:author: 記事の著者
og:article:published_time: 記事の公開日時
og:article:modified_time: 記事の修正日時
og:article:section: 記事のセクション
og:book:author: 書籍の著者
og:book:isbn: 書籍のISBN
og:book:release_date: 書籍の発売日
og:book:tag: 書籍のタグ
og:profile:first_name: プロフィールの名前（名）
og:profile:last_name: プロフィールの名前（姓）
og:profile:username: プロフィールのユーザー名
og:video:actor: 動画の出演者
og:video:director: 動画の監督
og:video:writer: 動画の脚本家
og:video:tag: 動画のタグ
og:audio:album: 音声のアルバム
og:audio:creator: 音声の制作者
og:audio:artist: 音声のアーティスト
og:audio:tag: 音声のタグ

Open Graph ProtocolはSEOに直接的な影響を与えるものではありませんが、URLが共有された際のクリック率やブランド認知度の観点から適切に設定することが望ましいです。

まとめ

<head>タグ内のメタデータの使い方についてまとめてきました。

メタデータの重要性について

SEO向上: 適切なmeta情報やタイトル、キーワードが含まれることで検索エンジンにページの内容を理解させやすくなり、検索結果でのランキング向上に繋がる可能性があります。
ユーザーエクスペリエンス: ページのタイトルやアイコン、スタイルシートやJavaScriptの読み込み指示などが含まれることで、ページの読み込み速度や表示の改善が期待できます。
ソーシャルメディアシェア: Open Graph Protocolなどのメタデータを含めることで、ソーシャルメディアでのシェア時に適切な情報が表示され、ユーザーの興味を引きやすくなります。

メタデータはデザインなどに影響を与える部分ではないので、記述するのが面倒に感じがちですが、そのサイトが実際にWeb上で検索された際などの検索結果など、そのページに辿り着いてもらうためには必要不可欠な要素に大きく影響を与えます。またSEOについては仕様が変更される時があり、その都度最適な対策を行うことが重要です。

長くなってしまいましたが、最後まで読んでいただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up