<meta name="description"> / OGP

対応:		HTML5（2014）

『meta name="description"』はページの概要を検索エンジンに伝えるメタ情報で、OGP（Open Graph Protocol）はSNSでリンクを共有した際に、タイトル・説明・画像などを表示するためのメタデータ規格です。SNSでリンクを貼ると表示されるカードのような表示はOGPによって制御されています。

構文

<!-- 検索エンジン向け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アカウント名（@付き）を指定します。

サンプルコード

sample_meta_description_ogp.html

<!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://wp-p.info/images/ogp.png">
  <meta property="og:url" content="https://wp-p.info/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://wp-p.info/images/ogp.png">

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

実行結果

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

サンプルページはこちら

概要

『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"』も合わせて確認してください。

記事ページ向けOGP設定（og:type = article）

ブログ記事や技術記事などのコンテンツページでは、『og:type』を『article』にすることで追加のメタデータを指定できます。

<!-- 記事ページのOGP（og:type="article"） -->
<head>
  <meta charset="UTF-8">
  <title>HTMLの基本 | やさしいプログラミング</title>

  <!-- 基本OGP -->
  <meta property="og:title" content="HTMLの基本 | やさしいプログラミング">
  <meta property="og:description" content="HTMLタグの使い方を基礎から解説します。">
  <meta property="og:image" content="https://example.com/img/html-basics-ogp.png">
  <meta property="og:url" content="https://example.com/html/basics/">

  <!-- 記事固有のOGPプロパティ -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2025-01-15T09:00:00+09:00">
  <meta property="article:modified_time" content="2025-06-01T12:00:00+09:00">
  <meta property="article:author" content="https://example.com/about/">
  <meta property="article:section" content="HTML">
  <meta property="article:tag" content="HTML">
  <meta property="article:tag" content="フロントエンド">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@yourhandle">
</head>

OGPデバッグと確認方法

OGPの設定が正しく認識されているかを確認する方法と、よくある問題の対処法です。

確認ツール / 問題	対処法
Facebook シェアデバッガー	developers.facebook.com/tools/debug/ でURLを入力してOGPを確認・キャッシュ更新ができます。
Twitter Card Validator	cards-dev.twitter.com/validator でTwitter Card の見え方を確認できます。
og:imageが表示されない	画像が相対URLになっていないか・サイズが小さすぎないか（1200×630px推奨）を確認してください。
古い画像がSNSに表示される	SNSはOGP画像をキャッシュします。Facebook デバッガーで「スクレイプ」して強制更新してください。