---
title: "OGPメタタグの設定方法｜SNSシェア時のタイトル・画像を最適化する"
description: "OGP（Open Graph Protocol）の基本と設定方法を解説します。Twitter/X・FacebookでのSNSシェア時に表示されるタイトル・説明・画像を正しく制御しましょう。"
date: 2026-05-10
tags: [OGP, SNS, SEO, Web制作]
related_tools: [ogp, http-status]
draft: false
---
SNSでURLをシェアした際に表示されるタイトル・画像・説明文は、ページのHTMLに記述されたOGPタグによって制御されています。OGPが正しく設定されていないとURLがそのまま表示されるだけになり、クリック率が大きく下がります。
## OGPとは
**OGP（Open Graph Protocol）** は、FacebookとOGP.meが策定したHTMLメタタグの仕様です。`` 内に `property="og:..."` 形式のタグを記述することで、SNS・チャットアプリ・Slackなど多くのプラットフォームがリッチなプレビューを生成できるようになります。
## 基本のOGPタグ
```html
```
各タグの役割は以下の通りです。
| タグ | 内容 |
|---|---|
| og:title | シェア時のタイトル（ページ `` と同じでよい） |
| og:description | シェア時の説明文 |
| og:image | シェア時に表示される画像のURL |
| og:url | そのページの正規URL |
| og:type | ページの種類（トップは `website`、記事は `article`）|
| og:site_name | サイト全体の名称 |
## OGP画像のサイズ
SNSプレビューで画像が正しく表示されるには適切なサイズが必要です。
- **推奨サイズ**: 1200×630px（横長）
- **最小サイズ**: 600×315px
- **形式**: JPG または PNG
- **容量**: 8MB以下
画像URLは必ず **絶対URL** で記述します。相対パスは多くのSNSクローラーで正しく解釈されません。
## Twitter/X向けのタグ
Twitter/X は独自の `twitter:` プレフィックスを使います。`og:` タグがあれば多くは省略できますが、カードの種類指定は必須です。
```html
<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/ogp.png">
```
`twitter:card` の値は `summary`（小さい画像）と `summary_large_image`（大きい画像）が一般的です。
## 記事ページのOGP
ブログ記事など個別ページでは `og:type` を `article` にし、公開日も記述します。
```html
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-05-10T00:00:00+09:00">
<meta property="article:author" content="著者名">
```
## よくあるミスと確認方法
- **画像がキャッシュされて更新されない**: SNSクローラーは画像をキャッシュするため、画像URLにバージョンパラメータ（`?v=2` など）を付けると強制更新できる
- **og:image に相対パスを使っている**: 絶対URLでないとクローラーが取得できない
- **og:title を設定していない**: `<title>` タグとは別に明示的に設定する
設定後は[OGP確認ツール](https://tools.adregion.co.jp/ogp.php)でシェア時のプレビューがどう表示されるかを確認できます。Facebook・Twitter/X のデバッガーでキャッシュをクリアして最新の状態をテストするのも効果的です。