Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<meta name="description"> / OGP

<meta name="description"> / OGP

『meta name="description"』はページの概要を検索エンジンに伝えるメタ情報で、OGP（Open Graph Protocol）はSNSでシェアされた際のタイトル・画像・説明を指定する仕組みです。

構文

<!-- 検索エンジン向けdescription -->
<meta name="description" content="ページの概要を120〜160文字程度で記述します。">

<!-- OGP（Facebook・一般的なSNS向け） -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="シェア時に表示される説明文。">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="Twitter でシェアされた際の説明文。">
<meta name="twitter:image" content="https://example.com/ogp.png">

主なOGPプロパティ一覧

プロパティ / name	概要
og:title	SNSシェア時に表示されるタイトルを指定します。
og:description	SNSシェア時に表示される説明文を指定します。
og:image	シェア時のサムネイル画像URLを指定します。推奨サイズは1200×630px です。
og:url	ページの正規URLを指定します。
og:type	コンテンツの種類を指定します。トップページは「website」、記事ページは「article」を指定します。
og:site_name	サイト名を指定します。
twitter:card	Twitterカードの表示形式を指定します。「summary」「summary_large_image」「app」「player」があります。
twitter:site	サイト運営者のTwitterアカウント名（@付き）を指定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 検索エンジン向けdescription -->
  <meta name="description"
        content="HTMLとCSSの基本から応用まで、初心者にやさしく解説するプログラミング学習サイトです。">

  <!-- OGP: Facebook・LINEなどSNSシェア向け -->
  <meta property="og:title" content="HTML入門 | やさしいプログラミング">
  <meta property="og:description"
        content="HTMLとCSSの基本から応用まで、初心者にやさしく解説します。">
  <meta property="og:image" content="https://example.com/images/ogp.png">
  <meta property="og:url" content="https://example.com/html/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="やさしいプログラミング">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML入門 | やさしいプログラミング">
  <meta name="twitter:description"
        content="HTMLとCSSの基本から応用まで、初心者にやさしく解説します。">
  <meta name="twitter:image" content="https://example.com/images/ogp.png">

  <title>HTML入門 | やさしいプログラミング</title>
</head>
<body>
  <h1>HTML入門</h1>
</body>
</html>

実行結果

ブラウザ上での表示は通常と変わりませんが、GoogleのSERP（検索結果ページ）ではdescriptionがスニペットとして表示されます。SNSにURLを貼り付けると、OGPで指定した画像・タイトル・説明がカードとして展開されます。

<!-- Google検索結果のスニペットイメージ -->
HTML入門 | やさしいプログラミング
https://example.com/html/
HTMLとCSSの基本から応用まで、初心者にやさしく解説するプログラミング学習サイトです。

<!-- SNSシェア時のカードイメージ -->
┌──────────────────────────────┐
│  [OGP画像 1200×630px]        │
├──────────────────────────────┤
│ HTML入門 | やさしいプログラミング │
│ HTMLとCSSの基本から応用まで...  │
└──────────────────────────────┘

概要

『meta name="description"』はGoogleなどの検索エンジンに対してページの内容を伝えます。検索結果のスニペット（説明文）として表示されることが多く、クリック率（CTR）に直結するため、ページの内容を端的に表す120〜160文字程度のテキストを記述することが推奨されています。descriptionはランキング要因（SEOの直接評価対象）ではありませんが、ユーザーがクリックするかどうかを左右するため、省略せず丁寧に記述することが大切です。

OGPはFacebook社が策定した仕様で、現在はLINE・Slack・Discordなど多くのプラットフォームでも採用されています。『og:image』に指定する画像は1200×630px（アスペクト比1.91:1）が推奨サイズで、小さすぎると表示されないか縮小されます。画像URLは必ず絶対URLで指定してください。

Twitterは独自の「Twitter Card」仕様を持っており、『twitter:card』の値で表示形式が変わります。「summary_large_image」は大きなサムネイル画像付きのカードで最もよく使われます。OGPと重複する情報（タイトル・descriptionなど）は、Twitter Card タグで上書き指定しない場合はOGPの値が使われることが多いですが、明示的に両方記述することが確実です。正規URLの管理については『link rel="canonical"』も合わせて確認してください。