HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLドキュメントにメタデータを含める方法|metaタグの属性と使い方を解説

HTMLの<meta>タグは、HTMLドキュメントに関するメタデータ(文書情報)を宣言するために使用されます。メタデータはページのセクション内に記述し、検索エンジンやブラウザに対して文書の情報を伝える役割を果たします。

metaタグの主な属性一覧

metaタグで使用できる主な属性とその役割は以下の通りです。

属性説明
name author
description
keywords
generator
revised
others
プロパティ(メタ情報)の名前を指定します。
content テキスト http-equiv属性またはname属性に関連付けるメタ情報を定義します。
http-equiv content-type
expires
refresh
set-cookie
content属性の内容をHTTPヘッダーに関連付けます。
scheme テキスト content属性の値を解釈するために使用する形式(スキーム)を定義します。

なお、scheme属性はHTML5では廃止されているため、現在のWeb制作ではほとんど使用されません。また、name属性には「viewport」を指定してレスポンシブ対応の設定を行うことも一般的です。

metaタグの記述例

以下のコードを実行して、HTMLドキュメントにメタデータを含める方法を確認してみましょう。

<html>
   <head>
      <title>HTML meta tag</title>
      <meta name = "keywords" content = "HTML, meta tag, metadata" />
      <meta name = "description" content = "Description of the document" />
      <meta http-equiv = "refresh" content = "10" />
   </head>
   <body style = "background-color:gray">
      Document content goes here
   </body>
</html>

この例では、name属性を使ってキーワード(keywords)と文書の説明(description)を指定しています。さらに、http-equiv属性に「refresh」を設定することで、10秒後にページが自動的に再読み込みされるようになっています。

  1. HTMLの<meta>タグとは?メタデータの設定方法と主な属性を解説

    HTMLの<meta>タグとはHTMLの<meta>要素は、ページの説明文(description)、キーワード、文書の作者名などのメタデータ(メタ情報)を記述するために使用します。メタデータはページ上には表示されませんが、検索エンジンやWebブラウザなどがページの内容を理解するために利用されます。<meta>タグは<head>要素内に記述する空要素で、終了タグは不要です。viewportの設定方法また、<meta>タグではviewport(ビューポート)を設定することも可能です。これにより、スマートフォンやタブレットなど、各デバイス

  2. HTMLリンク(ハイパーリンク)の基本!aタグの構文とtarget属性の使い方を解説

    HTMLのリンク(ハイパーリンク)とは、クリックすると別のドキュメントへジャンプできる要素のことです。Webページ同士をつなぐ役割を担っており、HTMLにおいて最も重要な機能の一つといえます。基本構文HTMLリンクは、<a>タグを使って以下のように記述します。<a href=URL target=値>リンクテキスト</a>href属性には、リンク先のアドレス(URL)を指定します。ローカルファイルへのパスでも、外部サイトのURLでも指定可能です。また、target属性は、リンク先のドキュメントをどこに開くかを指定する属性で、以下の4つの値を設定できます。値説