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

HTMLのmetaタグ完全解説！メタ情報を定義する各種metaタグの使い方

<meta>タグとは

<meta>タグは、HTMLドキュメント内にメタデータ（ページに関する付加情報）を定義するために使用されるタグです。具体的には、ページの説明文、キーワード、作成者名などの情報を記述できます。また、HTML5以降では、<meta>タグを使ってスマートフォンなどのモバイルデバイス向けに「ビューポート（viewport）」を設定することも可能になりました。

<meta>タグは<head>セクション内に記述し、ブラウザや検索エンジンに対してページの情報を伝える重要な役割を果たします。

ここからは、代表的なメタ情報の追加方法と、<meta>タグの使い方をそれぞれ紹介します。

1. 作成者（Author）を指定する

Webページの作成者（作者）を追加するには、次のように記述します。

<meta name="author" content="Amit">

2. ページの説明（Description）を指定する

Webページの概要や説明文を定義する場合は、以下のように書きます。この説明は検索結果のスニペットとして表示されることもあるため、SEOの観点でも重要です。

<meta name="description" content="Learn from Text and Video Tutorials">

3. キーワード（Keywords）を指定する

Webページに関連するキーワードを設定するには、カンマ区切りで複数のキーワードを指定します。

<meta name="keyword" content="Java, WordPress, Drupal, Android, iOS">

4. ビューポート（Viewport）を設定する

ビューポートは、モバイルブラウザ上でのレイアウト表示を制御するための仕組みです。<meta>タグ内でviewportを指定すると、Webページの幅や拡大縮小の倍率などをブラウザに指示できます。レスポンシブデザインには欠かせない設定です。

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

上記のコードでは、「width=device-width」でデバイスの画面幅に合わせるよう指定し、「initial-scale=1.0」で初期表示時のズーム倍率を100%に設定しています。

実装例

以下のコードを実行すると、<meta>タグの実際の動作を確認できます。すべてのメタ情報が<head>タグ内にまとめて記述されている点に注目してください。

<!DOCTYPE html>
<html>
   <head>
      <meta name="description" content="Learn from Text and Video Tutorials">
      <meta name="keywords" content="Java, WordPress, Drupal, Android, iOS">
      <meta name="author" content="Amit">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <p>これはデモテキストです。headタグ内にはすべてのメタ情報が含まれています。</p>
   </body>
</html>

まとめ

<meta>タグを使えば、ページの説明・キーワード・作成者などのメタ情報を簡単に定義でき、さらにHTML5ではモバイル対応に不可欠なビューポート設定も行えます。SEO対策とレスポンシブデザインの両面で重要な要素なので、正しく活用しましょう。

  1. HTMLドキュメントで最も重要なタグとは？DOCTYPE・html・head・bodyの基本を解説

    HTMLには、コンテンツの書式設定、見出しの作成、レイアウトの調整、セクションの追加など、Webサイトを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントにとって特に重要なのが「DOCTYPE」「<html>」「<head>」「<body>」の4つです。本記事では、それぞれの役割と正しい記述方法をわかりやすく解説します。 1. DOCTYPE宣言（ドキュメントタイプ宣言） DOCTYPEは「ドキュメントタイプ宣言」と呼ばれるもので、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるために使われます。現

  2. HTMLドキュメントに不可欠な基本タグとは？必須タグの役割を解説

    HTMLドキュメントに不可欠な基本タグとは？ HTMLには、コンテンツの書式設定や見出しの作成、レイアウトの調整、セクションの追加など、ウェブページを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントを成立させるうえで欠かせないのが、DOCTYPE宣言、<html>、<head>、<title>、<body>の5つです。 1. DOCTYPE宣言 DOCTYPE宣言は、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるための宣言です。HTML5では、次のように一行で記述します。 <