この記事の対象読者
- SEO に効果的なメタタグを正しく設定したい人
- OGP や Twitter Card の設定方法を知りたい人
- canonical URL の使い方を理解したい人
meta description
meta description は、Google 検索結果のタイトル下に表示される 説明文 です。直接的なランキング要因ではありませんが、クリック率（CTR）に大きく影響します。
HTML
<meta name="description" content="Pythonの基礎から実践まで解説。変数、関数、クラスの使い方をサンプルコード付きで紹介します。">効果的な description の書き方
- 70〜120文字 が目安（これ以上は検索結果で省略される）
- ページの内容を 具体的に 要約する
- 対象キーワードを自然に含める
- ユーザーが「クリックしたくなる」表現にする
- 各ページで 固有の内容 にする（使い回し厳禁）
canonical URL
canonical URL は、同じコンテンツが複数の URL でアクセスできる場合に、正規の URL を Google に伝えるタグです。
HTML
<link rel="canonical" href="https://example.com/article/python/variables/">canonical が必要な場面
| 場面 | 例 |
|---|---|
| URL パラメータの違い | /article/?page=1 と /article/ |
| www あり/なし | www.example.com と example.com |
| http/https の混在 | http:// と https:// |
| 末尾スラッシュの有無 | /article と /article/ |
canonical を設定しないと
同じコンテンツが複数の URL でインデックスされ、評価が分散してしまいます。全ページに canonical を設定するのがベストプラクティスです。
OGP（Open Graph Protocol）
OGP は、SNS でページが共有された時に表示される タイトル・説明・画像 を制御するメタタグです。Facebook が策定した規格ですが、X（Twitter）、LINE、Slack など多くのサービスが対応しています。
HTML
<meta property="og:type" content="article">
<meta property="og:title" content="Pythonの基礎を学ぼう">
<meta property="og:description" content="変数、関数、クラスの使い方を解説">
<meta property="og:url" content="https://example.com/article/python/variables/">
<meta property="og:image" content="https://example.com/images/python-og.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">主な OGP プロパティ
| プロパティ | 内容 | 注意点 |
|---|---|---|
og:type | ページの種類 | トップは website、記事は article |
og:title | タイトル | 40文字以内推奨 |
og:description | 説明文 | 80文字以内推奨 |
og:image | サムネイル画像 | 1200x630px 推奨、絶対URLで指定 |
og:url | ページの正規URL | canonical と合わせる |
記事ページ専用の OGP
og:type が article の場合、追加のメタタグが使えます。
HTML
<meta property="article:published_time" content="2026-01-15T09:00:00+09:00">
<meta property="article:modified_time" content="2026-02-01T10:30:00+09:00">
<meta property="article:section" content="Python">
<meta property="article:tag" content="プログラミング">Twitter Card
Twitter Card は、X（旧Twitter）でリンクを共有した時の表示形式を制御します。
HTML
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@your_account">カードタイプ
| タイプ | 表示 | 用途 |
|---|---|---|
summary | 小さい画像 + テキスト | ブログ記事全般 |
summary_large_image | 大きい画像 + テキスト | 視覚的なコンテンツ |
meta robots
meta robots は、検索エンジンのクローラに対してページの扱い方を指示します。
HTML
<!-- インデックスさせない（検索結果に出さない） -->
<meta name="robots" content="noindex, follow">
<!-- リンクを辿らせない -->
<meta name="robots" content="index, nofollow">noindex にすべきページ
- ログインページ（
/login/） - 検索結果ページ（
/search/） - 管理画面（
/admin/） - エラーページ（404、500）
- 個人情報を含むページ
完全な設定例
ブログの記事ページに必要なメタタグをすべてまとめた例です。
HTML - head内
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>記事タイトル - サイト名</title>
<meta name="description" content="記事の説明文（70〜120文字）">
<link rel="canonical" href="https://example.com/article/slug/">
<!-- OGP -->
<meta property="og:type" content="article">
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:url" content="https://example.com/article/slug/">
<meta property="og:image" content="https://example.com/images/og.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="article:published_time" content="2026-01-15T09:00:00+09:00">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@your_account">
</head>まとめ
- meta description: クリック率に直結。各ページ固有の内容を70〜120文字で
- canonical URL: 重複コンテンツの評価分散を防止。全ページに設定
- OGP: SNS 共有時の見栄えを制御。og:image は1200x630px
- Twitter Card: X での表示形式を最適化
- meta robots: 不要なページを noindex で検索結果から除外