HTML の `` 要素以外のメタデータ指定方法

2024-05-09

HTML の <meta name> 要素:完全ガイド

<meta name> 要素は、HTML ドキュメントに関するメタデータを指定するために使用されます。これは、ページのタイトル、説明、キーワード、およびその他の重要な情報を検索エンジンやその他の Web ブラウザに伝えるために役立ちます。 <meta name> 要素は、<head> セクション内に配置する必要があります。

<meta name> 要素の基本的な構文は次のとおりです。

<meta name="name" content="value">

この例では、name 属性はメタデータの名前を指定し、content 属性はメタデータの値を指定します。

よく使用される meta name 属性

以下の表は、最もよく使用される meta name 属性とその説明を示しています。

属性名説明
authorページの作成者<meta name="author" content="John Doe">
descriptionページの説明<meta name="description" content="This is a website about cats.">
keywordsページに関連するキーワード<meta name="keywords" content="cats, kittens, pets">
viewportデバイスのビューポートを設定<meta name="viewport" content="width=device-width, initial-scale=1.0">
robots検索エンジンによるインデックス作成とクロールを制御<meta name="robots" content="index, follow">

カスタム meta name 属性

上記以外にも、カスタムの meta name 属性を作成して、独自のメタデータを指定することができます。 カスタム属性を使用する場合は、属性名と値を慎重に選択する必要があります。 検索エンジンやその他の Web ブラウザがカスタム属性を認識できるように、適切なスキーマを使用することも重要です。

meta name 要素は、Web 開発において重要な役割を果たします。 これらの要素を使用して、検索エンジンにページに関する貴重な情報を提供し、ページのランクを上げることができます。 また、ユーザーエクスペリエンスを向上させるために、ページのタイトルや説明を制御するのにも役立ちます。

<meta name> 要素は、HTML ドキュメントに関するメタデータを指定するための強力なツールです。 これらの要素を正しく使用することで、検索エンジンでのランキングを上げ、ユーザーエクスペリエンスを向上させることができます。



HTML の <meta name> 要素のサンプルコード

このセクションでは、さまざまな <meta name> 属性のサンプルコードを示します。

基本的な例

以下の例は、最も一般的な <meta name> 属性の使用方法を示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Webpage</title>
  <meta name="description" content="This is a website about cats.">
  <meta name="keywords" content="cats, kittens, pets">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  </body>
</html>

このコードは、次のメタデータを指定します。

  • 文字コード: UTF-8
  • ページタイトル: My Webpage
  • ページの説明: This is a website about cats.
  • ページのキーワード: cats, kittens, pets
  • ページの作成者: John Doe
  • デバイスのビューポート: デバイスの幅に合わせてスケーリング

カスタム属性

以下の例は、カスタム <meta name> 属性を使用して、ソーシャル メディアの共有ボタン用のメタデータを指定する方法を示しています。

<!DOCTYPE html>
<html>
<head>
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@johndoe">
  <meta name="twitter:title" content="My Webpage">
  <meta name="twitter:description" content="This is a website about cats.">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
  </body>
</html>

このコードは、次のソーシャル メディア共有ボタン用のメタデータを指定します。

  • カードの種類: summary
  • Twitter サイト: @johndoe

robots 属性

以下の例は、robots 属性を使用して、検索エンジンによるページのインデックス作成とクロールを制御する方法を示しています。

<!DOCTYPE html>
<html>
<head>
  <meta name="robots" content="noindex, nofollow">
</head>
<body>
  </body>
</html>

このコードは、検索エンジンに次のことを指示します。

  • このページをインデックスに登録しないでください。
  • このページからのリンクをたどらないでください。

これらは、<meta name> 要素の使用方法を示すほんの一例です。 利用可能な属性と値については、MDN Web ドキュメントを参照してください。



HTML の <meta name> 要素以外にも、Web ページにメタデータを指定する方法はいくつかあります。

以下はその例です。

HTTP ヘッダーを使用して、メタデータを Web サーバーから送信することができます。 これらのヘッダーは、ページのコンテンツ エンコーディング、言語、キャッシュ コントロールなどの情報を指定するために使用できます。

例:

Content-Type: text/html; charset=UTF-8
Content-Language: en-US
Cache-Control: no-cache

マイクロデータは、HTML に埋め込まれた属性を使用して、構造化データを指定する方法です。 検索エンジンやその他のアプリケーションがこのデータを使用して、ページの内容をよりよく理解することができます。

例:

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">My Product</h1>
  <p itemprop="description">This is a great product.</p>
  <span itemprop="price">$19.99</span>
</div>

JSON-LD は、JavaScript オブジェクトを使用して構造化データを指定する方法です。 マイクロデータよりも柔軟で強力ですが、実装も複雑になります。

例:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "My Product",
  "description": "This is a great product.",
  "price": 19.99
}
</script>

OpenGraph は、ソーシャル メディア プラットフォームが Web ページをどのように表示するかを制御するために使用されるメタデータのセットです。

例:

<meta property="og:title" content="My Webpage">
<meta property="og:description" content="This is a website about cats.">
<meta property="og:image" content="https://example.com/image.jpg">

使用する方法は、ニーズによって異なります。

  • HTTP ヘッダー: コンテンツ エンコーディング、言語、キャッシュ コントロールなどの基本的なメタデータを指定する必要がある場合は、HTTP ヘッダーが最良の選択肢です。
  • マイクロデータ: 構造化データを指定する必要がある場合は、マイクロデータが最良の選択肢です。 マイクロデータは比較的簡単に実装でき、多くの Web ブラウザと検索エンジンでサポートされています。
  • JSON-LD: より柔軟で強力な構造化データを指定する必要がある場合は、JSON-LD が最良の選択肢です。 ただし、実装は複雑になる可能性があります。
  • OpenGraph: ソーシャル メディア プラットフォームでの Web ページの表示方法を制御する必要がある場合は、OpenGraph が最良の選択肢です。

<meta name> 要素は、Web ページにメタデータを指定する最も一般的な方法ですが、他の方法もあります。 最適な方法は、ニーズによって異なります。