HTML

HTMLのmetaタグとは？使い方を解説

HTMLの<meta>タグは、HTMLドキュメントのメタデータ（ページ情報）を定義するために使用されます。メタデータは、ユーザーには表示されませんが、ブラウザ、検索エンジン、およびその他のウェブサービスがページを理解し、適切に表示するのに役立ちます。

<meta>タグの基本構造

<meta>タグは、単一のタグで自己完結しています。閉じタグは必要ありません。

<meta name="description" content="これはサンプルページです。">

<meta>タグの属性

<meta>タグにはいくつかの重要な属性があります。主なものを以下に説明します。

1. charset属性

ドキュメントの文字エンコーディングを指定します。一般的にはUTF-8が使用されます。

<meta charset="UTF-8">

2. name属性とcontent属性

特定のメタデータを指定します。name属性でメタデータの種類を指定し、content属性でその値を指定します。

  • description: ページの概要を指定します。検索エンジンの結果に表示されることがあります。

<meta name="description" content="これはサンプルページです。">

keywords: ページに関連するキーワードをカンマ区切りで指定します。

<meta name="keywords" content="HTML, CSS, JavaScript">

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

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

viewport: レスポンシブデザインのために、ビューポートの設定を指定します。

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

3. http-equiv属性とcontent属性

HTTPヘッダーと同様の情報を指定します。

  • refresh: ページを一定時間後にリロードまたはリダイレクトします。

<meta http-equiv="refresh" content="30"> <!-- 30秒後にリロード -->
<meta http-equiv="refresh" content="0; url=https://example.com"> <!-- 即座にリダイレクト -->

Content-Type: ドキュメントのMIMEタイプを指定します。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

X-UA-Compatible: Internet Explorerに互換モードを使用させるかどうかを指定します。

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

具体的な例

以下は、典型的なHTMLドキュメントの<head>セクションでの<meta>タグの使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="これはサンプルページです。">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="山田太郎">
    <meta http-equiv="refresh" content="30">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはサンプルページです。</p>
</body>
</html>

まとめ

  • <meta>タグは、HTMLドキュメントのメタデータを定義するために使用されます。
  • メタデータは、ブラウザや検索エンジンなどがページを理解し、適切に表示するのに役立ちます。
  • charset、name、content、およびhttp-equiv属性がよく使用されます。

<meta>タグは、ウェブページのSEOやレスポンシブデザインの設定などにおいて重要な役割を果たします。適切に使用することで、ページのパフォーマンスやユーザーエクスペリエンスを向上させることができます。

スポンサーリンク

-HTML