Facebook・TwitterのOGP設定ガイド【2019年11月時点】

普段WordPressでの対応がほとんどでプラグインで対応しているんですが、たまに独自で設定する必要があるときに記述方法を忘れてることがしばしばあります。
Basic認証がかかってるテスト環境で確認するのが大変で、公開後に確認したらきちんと表示されないこともあったりで大変なのでまとめました。

※以下、2019年11月19日(火)現在の情報となります!

OGPってなに?

Open Graph Protocolの略で、TwitterやFacebookなどのSNS上でウェブページの情報を連携できるよう記述するHTMLタグのことです。

主に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は対象外で、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です。

Twitterの場合

Card Validator | Twitter Developersにアクセスして、Card URLのテキストボックスにOGPを設定したページURLを入力してpreview cardボタンを押すと右側に結果が表示されます。

画像、タイトル、ディスクリプションなどがきちんと表示されてればこちらもOKです。

注意事項

Facebook、Twitterともにキャッシュが非常に強いため、OGP用の画像を変えたい場合、画像差し替え後に上記デバッグページで表示されるかどうかを必ず確認するようにしましょう!

問題なく表示されればキャッシュもクリアされてるのでうまく表示されるはずです。

画像名を元にキャッシュが紐付いてるっぽいので、どうしてもうまく画像が反映されない時は、OGPの画像名を変えるてみると上手くいく場合があります。

TwitterとFacebookでテキストや画像を出し分ける場合

どうしてもツイッターとFacebookで別々のテキストや画像をにしたい場合もあると思います。

そんな時はユーザーエージェントごとに出し分けるようにするといいです。

Facebookのユーザーエージェント

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

Twitterのユーザーエージェント

Twitterbot/1.0

PHPでの出し分け例

すごく簡単に書くとこんな感じです。

$ua = $_SERVER['HTTP_USER_AGENT']; // ユーザーエージェントの取得

if (strpos($ua, 'Twitterbot') !== false) {
  // Twitterの場合
} elseif (strpos($ua, 'facebook.com') !== false) {
  // Facebookの場合
}

シェアボタンをテキストリンクで設置

Facebookの場合

<a href="https://www.facebook.com/sharer/sharer.php?u=共有したいURLを記載" target="_blank">Facebook</a>

パラメーターは「u=」のみでURLを指定することができます。

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>

COMMENTS

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP