OGP（Open Graph Protocol）とは、Facebook、Twitter、LINEなどソーシャルメディア上でリンク共有時に表示されるビジュアルやテキストをカスタマイズするための仕組みです。
OGPは特に集客を目的としたコンテンツ、ランディングページ、トップページなど、シェアを促したいウェブページにとって重要な機能です。
この記事では、OGPの設定方法、適切なメタタグの記述、さらにはWordPressでのプラグインを利用した簡単な設定方法まで、具体的な手順も含めて解説していきます。
ぜひ最後までご覧ください。
目次
OGPとは？まずは基本のキ
OGP（Open Graph Protocol）は、ソーシャルメディア上で共有される際のページの見え方をコントロールするためのマークアップ言語の一種です。
OGPを設定することで、記事やページがソーシャルメディア上で共有された時のタイトル、説明文、サムネイル画像などを指定できます。
これにより、共有されるコンテンツの魅力を最大限に引き出し、クリックを促進することが可能になります。
OGPってよく聞くけど、具体的にどういうものなんですか？
OGPはね、ウェブページがソーシャルメディア上でどのように表示されるかを定義するマークアップ言語の一種なんだ。
タイトルや説明、画像などを指定して、シェア時にユーザーがそのページを一目で理解できるようにするんだよ。
この技術はFacebookによって開発されましたが、現在では多くのソーシャルメディアで採用されています。
WordPressなどのCMSでは、プラグインやテーマの設定を通じて簡単にOGPを設定できるため、技術的な知識がない人でも利用しやすくなっています。
OGPを設定していないとどうなる？ 未設定の例と比べる
OGPを設定しないと、ソーシャルメディアでのシェア時に見栄えが悪くなるんだ。
クリックされる確率もグッと下がることが多いよ。
それは困りますね。具体的にどんな影響があるんですか？
OGPが未設定の場合、ソーシャルメディアはページからランダムにテキストや画像を選んで表示します。
これが原因で、関連性の低い画像や予測していないテキストが表示されることがあり、コンテンツの訴求力が半減してしまいます。
例えば、Facebookで共有した時、適切なOGP設定がないと、全く関係ない画像やページの一部分だけが表示されることもあるんだ。
以下は未設定と設定したときの具体例だよ。※facebookシェアデバッカーで確認
自社サイトでの実験例（OGP未設定）
自社サイトでの実験例（OGPを正しく設定）
なるほどです。確かにOGP画像を設定していないと、どのようなコンテンツかぱっと見わかりませんね。
そうだね。次にOGP設定のメリットについて見ていこう。
OGP設定のメリット
OGP設定のメリットは主に３つです。
- ソーシャルメディアでの表示で認知の向上
- ソーシャルメディアでの拡散・シェアの可能性が高まる
- シェアされた製品・サービスの信頼性が向上する
それぞれ解説していきます。
ソーシャルメディアでの表示で認知の向上
ソーシャルメディアでの表示を最適化することは、ブランドやコンテンツの認知度を効果的に高める方法の一つです。
ソーシャルメディア上での目を引く投稿は、より多くのクリックやシェアを生み出し、自然とブランドや商品、サービスの認知が広がります。
適切なOGP設定により、共有された際の見た目が魅力的になり、結果としてソーシャルメディア上での注目度が上がります。
ソーシャルメディアの表示を最適化することで、本当に認知度が上がるんですか？
そうだね。OGP設定を適切に行うことで、ソーシャルメディア上での投稿が目立つようになるよ。
結果として、より多くの人々の目に留まり、クリックやシェアが増えることで、最終的にはウェブサイトへの訪問者数や認知度の向上につながるんだ。
ソーシャルメディアでの拡散・シェアの可能性が高まる
OGPを設定することで、ソーシャルメディアでの拡散・シェアの可能性が高まるのもメリットの１つです。
ソーシャルメディアでのシェアを増やすには、どうすればいいんですか？
いい質問だね。
まず、OGPをうまく設定することが大切だよ。記事のタイトルや画像、説明文を工夫して、人々の目を引く内容にするんだ。
そうすることで、人々が自然とシェアしたくなるような投稿になるんだよ。
シェアされた製品・サービスの信頼性が向上する
OGPを適切に設定することで、シェアされた製品・サービスの信頼性が向上するのもメリットの１つです。
ソーシャルメディアでシェアされた製品・サービスに興味をもってついクリックした経験があるんじゃないかな？
ありますね！たくさんシェアされていると、なんとなくいい製品・サービスのような気がします。
WordPressでOGPを設定する方法
WordPressでOGPを設定するのって、難しそうですけど、具体的にどうしたらいいんですか？
とっても簡単だよ。
WordPressにはOGP設定をかんたんに行えるプラグインがあるんだ。
プラグインを使えば特別なコーディング知識がなくてもOGPを設定できるんだよ。
今回は、OGP設定で良く使われているプラグインAll in One SEOでの設定手順をもとに解説していきます。
All in one SEO PackでのOGP設定手順
All in One SEOの追加手順は以下の手順で行ってください。
①All in One SEOプラグインを追加する
WordPress管理画面よりプラグイン＞新規プラグインを追加＞all in one seoと検索>今すぐインストール
②記事投稿ページ内のAIOSEO設定（ソーシャル）をクリックする
③イメージソースを「アイキャッチ画像」に設定
④アイキャッチ画像を設定する
⑤X(Twitter)タブをクリック
⑥Facebookタブのデータの使用をONにする
⑦X Card Typeを選択する（自由）
手順を見ると、そこまで難しくなさそうで安心しました！
OGP設定をHTMLタグで行う方法
OGP設定をHTMLタグで行う方法について解説していきます。
OGPの使用を宣言するタグを設定
OGP（Open Graph Protocol）をウェブページで適用するには、まず<head>タグ内に特定の属性を追加することが推奨されています。
以下のタグを<head>タグ内に埋め込んでください。
この宣言により、ページがOGPの仕様に従っていることを示し、ソーシャルメディア上での共有時にページ情報が適切に表示されるようになります。
FacebookのOGP設定方法
FacebookでOGPを設定するには、<head＞タグ内に、さきほどのタグとあわせて以下を追記してください。
OGPタグには、いくつものタグがありますが、基本的には上記の６つを設定しておけば問題はありません。
X（旧Twitter）のOGP設定方法
X（旧Twitter）でのコンテンツ共有を最適化するには、特定のメタタグをウェブページの<head>セクションに追加することで、投稿時にページの情報が適切に表示されるように設定できます。
以下は、Xで使用できるOGP（Open Graph Protocol）の基本的な設定例です。
summary：タイトルと説明、小さな画像を含む基本的なカードタイプ。
summary_large_image：タイトルと説明、大きな画像を含むカードタイプ。
app：アプリケーションに関する情報を表示するカードタイプ。
player： 埋め込み可能なメディア（例：ビデオ）を含むカードタイプ。
LINEのOGP設定方法
LINEは、Facebook用のOGPを設定しておけば、特別な設定を追加する必要はありません。
具体的には、ウェブページの<head>セクションにFacebookのOGPタグを設定することで、LINE上での共有時にタイトル、説明、画像などの情報が正しく表示されるようになります。
以下のような基本的なメタタグが推奨されます。
OGPの設定確認ツール
OGP設定が適切に行われているかを確認するためには、無料ツールが便利です。
ここでは、特に便利な2つのツールを紹介します。
Facebookシェアデバッガー
Facebookシェアデバッガーは、Facebook上での共有時にページがどのように見えるかを確認できるツールだよ。
URLを入力して「デバッグ」を押すだけで、OGP設定の問題点を指摘してくれるんだ。
このツールは、メタタグが正しく設定されているか、画像サイズが適切かなど、Facebookでの共有に最適な形になっているかをチェックするのに非常に有用です。
OGP確認ラッコツールズ
OGP確認ラッコツールズは、ウェブページのOGP設定を総合的にチェックし、ソーシャルメディア共有時にどのように表示されるかを確認できるツールです。
利用方法は非常にシンプルで、チェックしたいウェブページのURLを入力するだけ。
これにより、タイトル、説明文、画像など、共有時にどのような情報が表示されるかを瞬時に確認できます。
OGP画像サイズの最適化
各ソーシャルメディアの推奨画像サイズは、変更されることもあるので、今回は2024年時点での画像サイズを解説していきます。
さて、いきなりですがFacebook、X（旧Twitter）、Instagram、LINEなど、それぞれのOGPを別々で用意するのは大変です。
そのため以下の要件の画像を1枚だけ準備してください。
- 横幅1200px、縦630px
- テキストは630px×630pxの中心に収める
上記の条件を満たすことで、様々なソーシャルメディアの最適なOGP表示が可能となります。
なぜ、上記の画像が1枚だけで良いのですか？
以下の図を見てみよう。各ソーシャルメディアでOGP画像の表示サイズは違う。
けれども、切り取られる位置を把握しておくことによって、1枚で対応が可能というわけだ。
以下は、横幅1200px、縦630pxの画像イメージです。
ソーシャルメディアによっては、「表示されない」と記載してある箇所が切り取られます。
FacebookのOGP推奨画像サイズ
FacebookでOGP画像を設定する際、1200×630ピクセルが推奨サイズだよ。
魅力的なOGP画像は、クリック率を高め、ウェブサイトへのトラフィックを増加させる役割を果たします。
サイズのガイドラインに従いながら、Facebookユーザーの注目を引く内容を意識して画像を作成しましょう。
サイズだけでなく、画像の質とメッセージにも注意を払うことが重要です。
X（旧Twitter）のOGP推奨画像サイズ
X（旧Twitter）の最適なOGP画像サイズは、16:9のアスペクト比で、1200×675ピクセルです。
適切なサイズの画像を使用することで、投稿が目立ち、クリック率を高めることが可能になります。
LINEのOGP推奨画像サイズ
LINEのOGP画像の推奨サイズは、1200×630ピクセルです。
InstagramのOGP推奨画像サイズ
InstagramでのOGP推奨画像サイズは、横幅630ピクセル、縦幅630ピクセルの正方形です。
なるほど、とはいえ各ソーシャルメディアでOGP画像をそれぞれ用意するのは大変ですね…。
他のOGP画像を使いまわせたりしないんですか？
いい質問だね。繰り返しになるけど、使い回しを考えるなら、以下の要件の画像を1枚だけ用意すると良いよ。
- 横幅1200px、縦630px
- テキストは630px×630pxの中心に収める
なるほどです！それだと時短できますね。
Canvaを使って魅力的なOGP画像を作成しよう
※現在、作成中。
まとめ
今回は、OGPの設定について解説してきました。
これまでの内容を振り返っておきます。
- ソーシャルメディアでの表示で認知の向上
- ソーシャルメディアでの拡散・シェアの可能性が高まる
- シェアされた製品・サービスの信頼性が向上する
- Facebookシェアデバッガー
- OGP確認ラッコツールズ
OGP画像を適切に設定して、コンテンツの認知度、集客力を強化していきましょう。
OGP設定時のよくある問題と解決策
OGP画像が表示されません。
画像が表示されない場合、まずは画像のURLが正しいか確認してください。
問題が解決しない場合は、ソーシャルメディアが画像をキャッシュしている可能性があるため、Facebookシェアデバッカーや他の設定確認ツールを使ってキャッシュをクリアし、再度クロールさせてみましょう。
OGP画像の最適なサイズはいくつでしょうか？
横1200px 縦630pxです。伝えたい情報は630pxの正方形に収めると、様々なソーシャルメディアでも情報が正しく伝えられます。
