Facebook・X（Twitter）のOGP設定ガイド【2023年10月時点】
普段WordPressでの対応がほとんどでプラグインで対応しているんですが、たまに独自で設定する必要があるときに記述方法を忘れてることがしばしばあります。
Basic認証がかかってるテスト環境で確認するのが大変で、公開後に確認したらきちんと表示されないこともあったりで大変なのでまとめました。
【2022/02/24追記】
Basic認証下でOGPを確認する方法を知りたい方はこちら！！
→https://tnyk.jp/backend/check-ogp-basic-auth/
※以下、2023年8月7日（月）現在の情報となります！
目次
OGPってなに？
Open Graph Protocolの略で、X（Twitter）やFacebookなどのSNS上でウェブページの情報を連携できるよう記述するHTMLタグのことです。
主にX（Twitter）、Facebookでシェアするときに見やすくわかりやすくなるためほとんどのサイトで設定しています。
基本設定
まずはHTML5で利用する場合の基本のソースコードを記述しておきます。
<head prefix="og: http://ogp.me/ns#">
<!-- 共通設定 -->
<meta property="og:title" content="タイトルがここに入ります。">
<meta property="og:type" content="website または article">
<meta property="og:url" content="表示したいページのURL（絶対パス）">
<meta property="og:image" content="表示したい画像のURL（絶対パス）">
<!-- 以下省略可能ですが、site_name, description, localeは載せたほうがいいです。 -->
<meta property="og:site_name" content="サイト名が入ります。">
<meta property="og:description" content="表示したいページの説明がはいります。">
<meta property="og:locale" content="サイトがサポートしてる言語を記述します。ja_JPで基本OK。">
<meta property="og:audio" content="音声ファイルのURL（絶対パス）">
<meta property="og:video" content="動画ファイルのURL（絶対パス）">
<!-- /共通設定 -->
<!-- Facebookの設定 -->
<!-- 記載しなくても動作しますが極力設定しましょう。記載する場合はどちらか一つ。個人的にapp_id推奨です。 -->
<meta property="fb:app_id" content="App-IDがここに入ります。">
<meta property="fb:admins" content="adminIDがここに入ります。">
<!-- /Facebookの設定 -->
<!-- Twitterの設定 -->
<meta name="twitter:card" content="summary または summary_large_image">
<!-- 以下省略可能です。 -->
<meta name="twitter:site" content="Twitterカードのフッターで使用されるウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="コンテンツ作成者/著者の@ユーザー名">
<!-- /Twitterの設定 -->
</head>
上記に必要なもののみ残し、値を変更すればOGPの設定は完了です。
og:image
画像については基本的に、Facebookで推奨してるものにあてはめましょう！
画像のサイズは、「1200px x 630px」
画像フォーマットは、「PNG」
og:type
TOPページは「website」
TOPページ以外は「article」
基本的にはこの2つしか使わないです。
その他「music」「book」などありますが詳しくは、The Open Graph protocolをご参照ください。
ネットで検索してると、blogというものがでて来ると思いますが、現在は上記ページには記載がないため使用しないほうがいいです。
twitter:card
実際は「summary, summary_large_image, app, player」と4種類あるのですが、Webサイトだと「summary」か「summary_large_image」しか使わないです。
詳しくは、カードの利用開始 — Twitter Developersをご参照ください。
prefix
prefixはHTMLタグに書いても問題ないです。
prefixの記載がないとシェアされた数などが上手く動作しない場合があるようなので極力記載するようにしましょう。
また、こちらもog:typeと同様に
TOPページは「website」
TOPページ以外は「article」
となります。
<!-- TOPページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- TOPページ以外 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
上記の記述をよく見かけますが、「Facebook用の設定が必要な場合のみ」記載すればいいです。
Facebookは対象外で、X（Twitter）のみでしかシェアしない場合は
<head prefix="og: http://ogp.me/ns#">
のみでOKです。
現在ではほぼ使わないですが、XHTMLの場合はhtmlタグに記述する場合は、以下にする必要があります。
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
headタグには記載がいらなくなります。
OGPが設定されてるか確認する方法（デバッグ方法）
Facebookの場合
シェアデバッガー – Facebook for Developersにアクセスして、テキストボックスにOGPを設定したページURLを入力し、デバッグボタンを押すと結果が表示されます。
画像、タイトル、ディスクリプションなどがきちんと表示されてればOKです。
X（Twitter）の場合
Card Validator | Twitter Developersにアクセスして、Card URLのテキストボックスにOGPを設定したページURLを入力してpreview cardボタンを押すと右側に結果が表示されます。
2022年8月に、Card Validator上ではプレビュー結果が表示されなくなりました。
確認したい場合は、ブラウザやスマホ（iOS/Android）アプリを開き、ポスト（ツイート）投稿画面（Tweet Composer）上で、URLを貼り付けると、投稿前に現在の表示を確認することができます。
プレビューの削除については公式にて→Card Validator – preview removal – Cards – Twitter Developers
画像、タイトル、ディスクリプションなどがきちんと表示されてればこちらもOKです。
注意事項
Facebook、X（Twitter）ともにキャッシュが非常に強いため、OGP用の画像を変えたい場合、画像差し替え後に上記デバッグページで表示されるかどうかを必ず確認するようにしましょう！
問題なく表示されればキャッシュもクリアされてるのでうまく表示されるはずです。
画像名を元にキャッシュが紐付いてるっぽいので、どうしてもうまく画像が反映されない時は、OGPの画像名を変えてみると上手くいく場合があります。
X（Twitter）とFacebookでテキストや画像を出し分ける場合
どうしてもX（Twitter）とFacebookで別々のテキストや画像をにしたい場合もあると思います。
そんな時はユーザーエージェントごとに出し分けるようにするといいです。
Facebookのユーザーエージェント
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
facebookexternalhit/1.1
facebookcatalog/1.0
ユーザーエージェントの詳細についてはこちらをご覧ください。→Facebookクローラー – シェア機能 – ドキュメンテーション – Meta for Developers
X（Twitter）のユーザーエージェント
Twitterbot/1.0
2023年7月にTwitterからX（エックス）へと名前が変わりましたが、ユーザーエージェントは今のところ変更されていないです。そのうち変更されるかもしれませんね。
ユーザーエージェントの詳細についてはこちらをご覧ください。→Troubleshooting Cards | Docs | Twitter Developer Platform
PHPでの出し分け例
すごく簡単に書くとこんな感じです。
$ua = $_SERVER['HTTP_USER_AGENT']; // ユーザーエージェントの取得
if (strpos($ua, 'Twitterbot') !== false) {
// Twitterの場合
} elseif (strpos($ua, 'facebook') !== false) {
// Facebookの場合
}
シェアボタンをテキストリンクで設置
Facebookの場合
<a href="https://www.facebook.com/sharer/sharer.php?u=共有したいURLを記載" target="_blank">Facebook</a>
パラメーターは「u=」のみでURLを指定することができます。
X（Twitter）の場合
<a href="http://twitter.com/share?url=共有したいURL&text=テキスト&via=ユーザーID&hashtags=タグ名,タグ名&related=ユーザーID">Twitter</a>
パラメーターは5つあります。
「url」は、共有したいURL
「text」は、共有するときに記載したいテキスト
「via」は、共有時に追記されるアカウント名
「hashtags」は、ハッシュタグ名でカンマ区切りで複数指定可能
「related」は、投稿後にフォローさせたいユーザーを指定
まとめ
今回まとめる上で世の中に公開されてるサイトのOGPを見てみましたが、ogpタグの設定はきちんと記述されているものの、意外とprefixが記載されていないサイトが多かったです。
prefixがないとシェア数などの動作に不具合が出る場合があるので、極力記載するようにしましょう！
コピペ用にまとめておきます。
<!-- TOPページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- TOPページ以外 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- Facebookは使わない場合 -->
<head prefix="og: http://ogp.me/ns#">
<!-- 共通設定 -->
<meta property="og:title" content="タイトルがここに入ります。">
<meta property="og:type" content="website または article">
<meta property="og:url" content="表示したいページのURL（絶対パス）">
<meta property="og:image" content="表示したい画像のURL（絶対パス）">
<meta property="og:site_name" content="サイト名が入ります。">
<meta property="og:description" content="表示したいページの説明がはいります。">
<meta property="og:locale" content="サイトがサポートしてる言語を記述します。ja_JPで基本OK。">
<meta property="og:audio" content="音声ファイルのURL（絶対パス）">
<meta property="og:video" content="動画ファイルのURL（絶対パス）">
<!-- /共通設定 -->
<!-- Facebookの設定 -->
<!-- 記載しなくても動作しますが極力設定しましょう。記載する場合はどちらか一つ。個人的にapp_id推奨です。 -->
<meta property="fb:app_id" content="App-IDがここに入ります。">
<meta property="fb:admins" content="adminIDがここに入ります。">
<!-- /Facebookの設定 -->
<!-- Twitterの設定 -->
<meta name="twitter:card" content="summary または summary_large_image">
<!-- 以下省略可能です。 -->
<meta name="twitter:site" content="Twitterカードのフッターで使用されるウェブサイトの@ユーザー名">
<meta name="twitter:creator" content="コンテンツ作成者/著者の@ユーザー名">
<!-- /Twitterの設定 -->
</head>
