← カテゴリ一覧に戻る

SEO用メタ情報

meta name=description

<meta name="description"> は検索エンジンの結果に表示されるページの説明文を指定する。 CTR（クリック率）に影響する重要なSEO要素。OGPやSNS共有にも活用される。

基本的なコード例

<head>
  <meta charset="UTF-8">
  <title>HTMLのメタ情報まとめ | UI Memo</title>

  <!-- ページの説明文（検索結果のスニペットに使われる） -->
  <meta name="description" content="HTMLのメタ情報について解説。charset、description、OGPタグなどの書き方とベストプラクティスを紹介します。">

  <!-- OGP（SNS共有時の説明） -->
  <meta property="og:description" content="HTMLのメタ情報について解説。">

  <!-- Twitter Card -->
  <meta name="twitter:description" content="HTMLのメタ情報について解説。">
</head>

検索結果でのイメージ

https://www.ui-memo.com › page-structure

HTMLのメタ情報まとめ | UI Memo

HTMLのメタ情報について解説。charset、description、OGPタグなどの書き方とベストプラクティスを紹介します。

← meta descriptionがスニペット（説明文）として表示される

推奨文字数と書き方

項目内容
推奨文字数全角50〜120文字（半角100〜240文字）が目安。それ以上は検索結果で省略される
キーワードページの内容に関連するキーワードを自然な文章の中に含める
行動を促す「〜を解説」「〜の方法を紹介」など、クリックしたくなる内容を書く
重複を避けるページごとにユニークなdescriptionを設定する

OGP（Open Graph Protocol）

SNSでシェアされたときの表示を制御する。og:description は meta description とは別に設定できる。

<!-- OGP基本セット -->
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文（SNSシェア時に表示）">
<meta property="og:image" content="https://example.com/ogp-image.png">
<meta property="og:url" content="https://example.com/page">
<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="ページタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="https://example.com/twitter-card.png">

TipsNext.js App Router での設定

Next.js App Router では metadata オブジェクトをエクスポートすることでメタ情報を管理できる。

// app/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'ページタイトル | サイト名',
  description: 'ページの説明文をここに書く。50〜120文字程度が目安。',
  openGraph: {
    title: 'ページタイトル',
    description: 'ページの説明文',
    images: [{ url: '/ogp-image.png' }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'ページタイトル',
    description: 'ページの説明文',
  },
};

export default function Page() {
  return <main>...</main>;
}

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<meta name="description">` の推奨文字数と、検索結果のスニペットに採用されやすい書き方を教えてください。
- OGP の `og:description` と `meta name="description"` は同じ内容にすべきですか？使い分けを教えてください。
- Next.js App Router で `metadata` オブジェクトを使って OGP・Twitter Card を設定する方法を教えてください。
- ページごとに異なる description を設定しないと SEO にどんな影響がありますか？
- description に主要キーワードを含めると CTR（クリック率）が上がりやすい理由と、自然な文章の例を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo