OGP設定の基本｜SNSシェアでの見え方を整える
Contents
はじめに
ブログやWebサイトをSNSでシェアしたとき、きれいなサムネイル画像とタイトル、説明文が自動で表示されているサイトを見たことはありませんか？
その「見え方」を決めているのが OGP（Open Graph Protocol） です。
この記事では、
OGPの基本構造・設定方法・おすすめ画像サイズ・よくあるミスなどを、初心者にもわかりやすく解説します。
OGPとは？
OGPの役割
OGP（Open Graph Protocol）とは、SNSにURLをシェアしたときに表示されるタイトル・説明文・画像を指定できる仕組みのことです。
Facebook・X（旧Twitter）・LINE・LinkedInなど、多くのSNSで利用されています。
もし設定していないと、SNSが自動でページ内容を拾うため、意図しないタイトルや画像が表示されることもあります。
OGPで指定できる主な項目
| metaプロパティ | 内容 | 例 |
|---|---|---|
og:title | 記事タイトル | <meta property="og:title" content="OGP設定の基本"> |
og:description | 記事の説明文 | <meta property="og:description" content="SNSシェア時の見え方を整えるOGP設定方法を解説"> |
og:image | サムネイル画像URL | <meta property="og:image" content="https://example.com/ogp.jpg"> |
og:url | 記事URL | <meta property="og:url" content="https://example.com/blog/ogp"> |
og:type | ページの種類 | <meta property="og:type" content="article"> |
og:site_name | サイト名 | <meta property="og:site_name" content="Yagi-System"> |
Twitterカード（Xカード）も忘れずに
X（旧Twitter）では、独自のタグ「Twitterカード」も併用します。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OGP設定の基本｜SNSシェアでの見え方を整える">
<meta name="twitter:description" content="SNSシェア時に見栄えを整えるOGP設定の基本を解説します。">
<meta name="twitter:image" content="https://example.com/ogp-image.jpg">カードタイプの種類
summary：小さめのサムネイル＋テキストsummary_large_image：横長の大きい画像（おすすめ）
OGP画像のサイズ・注意点
| 項目 | 推奨値 |
|---|---|
| サイズ | 1200×630px（比率1.91:1） |
| ファイル形式 | JPGまたはPNG |
| 容量 | 1MB以内が安全 |
| alt属性 | SEOにも有効なので必ず記述 |
💡Tip: 画像は記事の内容を象徴するビジュアルにし、中央に文字を配置するとSNSでも映えます。
WordPressでのOGP設定方法
① SEOプラグインを使う方法
代表的なプラグイン：
- All in One SEO
- Yoast SEO
これらを使えば、記事ごとにタイトル・説明文・画像を指定できます。
「SNS」タブや「ソーシャル設定」から簡単に設定可能です。
👉 関連記事：
All in One SEOの使い方｜基本設定とOGPの設定手順
② 手動でコードを挿入する方法
header.php の <head> 内に以下のように記述します。
<?php if(is_single()): ?>
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>">
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url(); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:type" content="article">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php endif; ?>より柔軟に設定したい場合は、ACF（Advanced Custom Fields） を使って「OGP画像」用のカスタムフィールドを作成するのがおすすめです。
👉 関連記事：
ACFでOGP画像を記事ごとに設定する方法
OGP設定後の確認方法
設定後は必ずSNS上で正しく反映されているかをチェックしましょう。
| SNS | チェックツール |
|---|---|
| Sharing Debugger | |
| X（Twitter） | Card Validator |
| LINE | LINE OGPチェックツール |
よくあるトラブルと対処法
| 症状 | 原因 | 対処法 |
|---|---|---|
| 画像が表示されない | URLが相対パス／キャッシュ | 絶対パスで記述し、SNS Debuggerで再取得 |
| タイトルが古い | SNSキャッシュが残っている | 「再スクレイプ」を実行 |
| 画像が切れる | サイズが不適切 | 1200×630pxにリサイズ |
まとめ
OGP設定を正しく行うことで、SNSでのシェア時に「クリックされやすい見た目」を作れます。
Web集客やブランドイメージ向上の第一歩として、ぜひ自分のサイトでも設定してみましょう。
関連記事
- HTMLのhead要素の使い方まとめ
- metaタグの基本とSEOにおける役割
- All in One SEOでのOGP設定方法
- 画像のalt属性の正しい書き方とSEO効果
- Twitterカードの設定と見え方の違い
次のステップ
このあと読んでおくと理解が深まります👇
👉 [metaタグの基本とSEOにおける役割]
👉 [ACFでOGP画像を記事ごとに設定する方法]