ソーシャルメディアで Web ページを共有するために `<meta name>` を使う方法

<meta name> 要素は、<head> セクション内に配置する必要があります。基本的な構文は次のとおりです。

<meta name="メタデータ名" content="メタデータ値">

この例では、"description" という名前のメタデータに "このページは HTML の meta要素について説明します" という値を設定しています。

重要な属性

content
メタデータの値を指定します。

http-equiv
HTTP ヘッダーと同等の情報を指定するために使用されますが、非推奨です。
charset
ドキュメントの文字エンコーディングを指定します。これは、charset 属性を持つ <meta> 要素が 1 つだけ許可されているため、特に重要です。

meta name の用途

コンテンツの表示
viewport メタデータを使用して、さまざまなデバイスでのページの表示を調整できます。
ソーシャルメディア
og: プレフィックス付きのメタデータを使用して、ソーシャルメディアでの共有時の Web ページの表示を制御できます。
検索エンジン最適化 (SEO)
description や keywords などのメタデータを使用して、検索エンジン結果ページ (SERP) での Web ページの説明を改善できます。

例

以下の例は、一般的な <meta name> 要素のいくつかを示しています。

ページの説明

<meta name="description" content="このページは HTML の meta要素について説明します">

キーワード

<meta name="keywords" content="HTML, meta, SEO, web development">

作者

<meta name="author" content="John Doe">

視覚ポート

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

Open Graph プロトコル (OGP)

<meta name="og:title" content="My Web Page Title">
<meta name="og:description" content="This is a description of my web page.">
<meta name="og:image" content="https://example.com/image.jpg">

注意事項

互換性を確保するために、HTML5 の新しい属性と値を使用するようにしましょう。
<meta name> 要素は、過剰に使用しないでください。関連性の高い必要な情報のみを含めるようにしましょう。

HTML 仕様書 - <meta> 要素

ページの説明

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML の meta 要素</title>
  <meta name="description" content="このページは HTML の meta 要素について説明します">
</head>
<body>
  <h1>HTML の meta 要素</h1>
  <p>このページでは、HTML の meta 要素について説明します。meta 要素は、検索エンジンやその他のブラウザに Web ページに関する情報を伝えるために使用されます。</p>
</body>
</html>

キーワード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML の meta 要素</title>
  <meta name="keywords" content="HTML, meta, SEO, web development">
</head>
<body>
  <h1>HTML の meta 要素</h1>
  <p>このページでは、HTML の meta 要素について説明します。meta 要素は、検索エンジンやその他のブラウザに Web ページに関する情報を伝えるために使用されます。</p>
</body>
</html>

著者

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML の meta 要素</title>
  <meta name="author" content="John Doe">
</head>
<body>
  <h1>HTML の meta 要素</h1>
  <p>このページでは、HTML の meta 要素について説明します。meta 要素は、検索エンジンやその他のブラウザに Web ページに関する情報を伝えるために使用されます。</p>
</body>
</html>

視覚ポート

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML の meta 要素</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>HTML の meta 要素</h1>
  <p>このページでは、HTML の meta 要素について説明します。meta 要素は、検索エンジンやその他のブラウザに Web ページに関する情報を伝えるために使用されます。</p>
</body>
</html>

Open Graph プロトコル (OGP)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Web Page Title</title>
  <meta name="og:title" content="My Web Page Title">
  <meta name="og:description" content="This is a description of my web page.">
  <meta name="og:image" content="https://example.com/image.jpg">
</head>
<body>
  <h1>My Web Page</h1>
  <p>This is my web page. It has some great content.</p>
</body>
</html>

これらの例はほんの一例です。<meta name> 要素を使用して、さまざまな種類のメタデータを指定できます。

実際の Web サイトで使用する場合、これらの例を独自のニーズに合わせて調整する必要がある場合があります。
コード例では、簡潔にするためにいくつかの省略形を使用しています。実際の HTML ドキュメントでは、すべてのタグを完全に閉じるようにしてください。

マイクロデータと itemprop 属性

例：

<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">HTML の meta 要素</h1>
  <p itemprop="description">このページは HTML の meta 要素について説明します。</p>
  <meta itemprop="author" content="John Doe">
  <meta itemprop="datePublished" content="2024-07-02">
</div>

JSON-LD と @context と @type プロパティ

JSON-LD (JavaScript Object Notation for Linked Data) は、構造化データを記述するためのもう 1 つの方法です。 @context と @type プロパティを使用して、メタデータ項目のコンテキストと種類を定義できます。 JSON-LD は、マイクロデータよりも柔軟で強力ですが、実装が複雑になる場合があります。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML の meta 要素",
  "description": "このページは HTML の meta 要素について説明します。",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "datePublished": "2024-07-02"
}
</script>

セマンティック HTML 要素

HTML5 には、article、header、footer、time、aside などの新しいセマンティック要素が導入されました。これらの要素を使用して、ページの構造と意味を明確に伝えることができます。検索エンジンは、これらの要素を理解して、ページをより適切にインデックスすることができます。

<article>
  <h1>HTML の meta 要素</h1>
  <p>このページは HTML の meta 要素について説明します。</p>
  <footer>
    <p>&copy; 2024 John Doe</p>
  </footer>
</article>

Open Graph プロトコル (OGP)

OGP は、ソーシャルメディアで共有される Web ページの表示を制御するために使用されるプロトコルです。 OGP メタタグを使用して、ソーシャルメディアプラットフォームにページのタイトル、説明、画像などの情報を提供できます。

<meta property="og:title" content="HTML の meta 要素">
<meta property="og:description" content="このページは HTML の meta 要素について説明します。">
<meta property="og:image" content="https://example.com/image.jpg">

カスタム属性

カスタム属性を使用して、独自のメタデータを定義することもできます。ただし、この方法を使用する場合は、その属性を認識して理解できるのは、独自の実装のみであることに注意してください。

<div data-my-meta-data="This is some custom metadata.">
  ...
</div>

適切な代替手段を選択する

オプション	長所	短所
マイクロデータ	簡単に実装できる	やや古い技術
JSON-LD	柔軟で強力	実装が複雑
セマンティック HTML 要素	検索エンジンに優しい	すべての要素が利用可能ではない
OGP	ソーシャルメディアに最適	特定の目的にのみ使用できる
カスタム属性	柔軟性が高い	独自の実装でのみ認識される

meta name タグは時代遅れになりつつあり、より新しい方法でメタデータを指定することをお勧めします。上記の代替手段を検討し、ニーズに合ったものを選択してください。

実際の Web サイトで使用する場合
上記の例はほんの一例です。それぞれの代替手段には、さらに多くのオプションと機能があります。