HTMLのmetaタグの使い方！ページ情報を設定

html

HTMLのmetaタグについて書いています。

metaタグは、Webページのメタデータ（データに関するデータ）を記述するために使用され、<head>タグ内に配置されます。
metaタグ自体はWebページに直接表示されませんが、文字エンコーディング、キーワード、説明文、ビューポート設定、HTTPヘッダー情報など、ブラウザや検索エンジン、ソーシャルメディアなどがWebページを処理する上で重要な情報を提供します。

metaタグの基本的な使い方と配置

metaタグは、<head>タグ内に記述する空要素であり、終了タグは必要ありません。
主にname属性とcontent属性、またはhttp-equiv属性とcontent属性を組み合わせて使用します。

下記は設定例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="このWebページの説明文を記述します。SEO対策として重要です。">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

metaタグの主要な属性と値

metaタグでよく使用される主要な属性とその値について解説します。

charset属性

ドキュメントの文字エンコーディングを指定します。
通常はUTF-8を指定することが推奨されます。

<meta charset="UTF-8">

name属性とcontent属性

Webページのメタデータに関する名前と値を指定します。

name=”description”

Webページの説明文を記述します。
検索エンジンの検索結果スニペットに表示される可能性があり、SEOにおいて重要です。

<meta name="description" content="Webページの内容を簡潔に説明するテキスト。">

name=”keywords”

Webページのキーワードをカンマ区切りで指定します。
かつてはSEOに重要でしたが、現在の主要な検索エンジンでは重要度は低下しています。

<meta name="keywords" content="キーワード1, キーワード2, キーワード3">

name=”viewport”

スマートフォンやタブレットなどのモバイルデバイスでの表示を制御します。

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

一般的な値：

  • width=device-width: viewport の幅をデバイスの幅に合わせます。
  • initial-scale=1.0: ページの初期ズームレベルを 1.0 に設定します。
  • minimum-scale, maximum-scale, user-scalable などもあります。

name=”robots”

検索エンジンのクローラーの動作を制御するための指示を指定します。

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

一般的な値：

  • index: ページをインデックス（検索対象に含める）するかどうか。（noindex でインデックスしない）
  • follow: ページ内のリンクを辿るかどうか。（nofollow で辿らない）
  • noarchive: 検索エンジンのキャッシュを保存しない。
  • nosnippet: 検索結果にスニペットを表示しない。

name=”author”

Webページの作成者を指定します。

<meta name="author" content="山田 太郎">

http-equiv属性とcontent属性

HTTPヘッダーに関する情報を指定します。

http-equiv=”content-type”(非推奨)

charset 属性の代わりに文字エンコーディングを指定するために使用されていましたが、現在は charset 属性の使用が推奨されています。

<!-- 非推奨 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 推奨 -->
<meta charset="UTF-8">

http-equiv=”default-style”(非推奨)

デフォルトのスタイルシートを指定します。

http-equiv=”refresh”

指定した時間後にページをリロードしたり、別のURLにリダイレクトしたりします。注意して使用する必要があります。

<meta http-equiv="refresh" content="5;URL=https://example.com/">

http-equiv=”X-UA-Compatible”

Internet Explorerのレンダリングモードを指定します。
最新の標準モードを使用する場合は以下のように記述します。

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

SEOにおけるmetaタグの重要性

metaタグは、検索エンジンのクローラーがWebページの内容を理解し、適切に評価するために役立ちます。

  • <meta name="description">: 検索結果のスニペットとして表示され、クリック率に影響します。
  • <meta name="robots">: 検索エンジンのインデックス登録やリンクのクロールを制御します。
  • <meta name="viewport">: モバイルフレンドリーなWebサイトの構築に不可欠であり、モバイル検索のランキングに影響します。

アクセシビリティにおけるmetaタグの役割

metaタグは、Webページのアクセシビリティにも貢献します。

  • <meta charset="...">: 正しい文字エンコーディングを指定することで、スクリーンリーダーがコンテンツを正しく読み上げることができます。
  • <meta name="viewport">: レスポンシブデザインを適切に設定することで、様々なデバイスや画面サイズでコンテンツが利用しやすくなります。

ソーシャルメディアでの共有におけるmetaタグ

Open Graph Protocol（OGP）やTwitter Cardsなどのメタタグを使用することで、Webページがソーシャルメディアで共有された際の表示をカスタマイズできます。

  • Open Graph Protocol (OGP): Facebook、LinkedIn、Pinterest などで利用されます。 
    <meta property="og:title" content="共有するページのタイトル">
<meta property="og:description" content="共有するページの説明文">
<meta property="og:url" content="共有するページのURL">
<meta property="og:image" content="共有する画像のURL">
<meta property="og:type" content="website">
  • Twitter Cards: Twitter での共有表示をカスタマイズします。 
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ツイートに表示するタイトル">
<meta name="twitter:description" content="ツイートに表示する説明文">
<meta name="twitter:image" content="ツイートに表示する画像のURL">

metaタグを使用する際の注意点

  • <head> タグ内に記述する: <meta> タグは、必ずHTMLドキュメントの <head> タグ内に記述する必要があります。
  • 適切な属性と値: 各メタタグの目的を理解し、適切な属性と値を設定することが重要です。
  • 文字エンコーディングは最初に: <meta charset="..."> は、<head> タグ内の早い段階で記述することが推奨されます。
  • 不要なメタタグは避ける: 関連性の低いキーワードを大量に記述するなど、スパムと認識される可能性のある記述は避けるべきです。
  • http-equiv の使用: http-equiv 属性は、可能な限り対応するHTTPヘッダーで設定することが推奨されます。

metaタグの記述例

以下は、一般的な<head>タグ内のmetaタグの記述例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webページのタイトル - サイト名</title>
  <meta name="description" content="このWebページの説明文を記述します。SEO対策として重要です。">
  <meta name="keywords" content="キーワード1, キーワード2">
  <meta name="robots" content="index,follow">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta property="og:title" content="共有するページのタイトル">
  <meta property="og:description" content="共有するページの説明文">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:image" content="https://example.com/images/share.jpg">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@example_twitter">
  <meta name="twitter:title" content="ツイートに表示するタイトル">
  <meta name="twitter:description" content="ツイートに表示する説明文">
  <meta name="twitter:image" content="https://example.com/images/tweet.jpg">
</head>
<body>
</body>
</html>

まとめ

metaタグは、Webページの基本的な情報からSEO、アクセシビリティ、ソーシャルメディアでの共有設定まで、幅広い情報をブラウザや各種サービスに伝えるための重要な要素です。
各メタタグの役割を正しく理解し、適切に記述することで、Webページの品質とパフォーマンスを向上させることができます。

HTML
yasuaki

コメント