Open Graph Protocol入門

2020-09-28

昨日、こういうツイートをしました。

つまりFacebookやTwitterなどソーシャルメディアプラットフォームでWebページのリンクを共有するときに表示される内容のコントロールの方法を知りたいというものです。

するとすぐにフォローしている方々より、HTMLのヘッダーで指定できるとのこと。そこで使用するものはOpen Graph Protocol (OGP) と呼ばれるものだと教わりました。

というわけで、今日はOGPについてちょっと試してみたいと思います。

OGP設定なしの状況

試しに既存の簡単なアプリで試してみたいと思います(無料版Herokuなのでしばらく動かなさないとすぐに起動しません)。

Twitterのツイート作成ボックスでURL”https://pitang1965-chat-app.herokuapp.com/“を入れてみても何もおきません。

OGP設定なしのサイトURLの追加

開発者アカウントの準備

ここのWebサイト/ページにOGPの設定をする以前に、開発者アカウントが必要です。

Twitterの開発者アカウント

ちょっと前に書いた記事「Twitter APIにアクセスするためのアカウント取得できました」を参照してみてください。

Facebookの開発者アカウント

Facebook for Developers から個人アカウントを開発者カウントにアップグレードします。

画像の準備

きちんとした画像を作るのは面倒だったため、Aboutページを単にハードコピーして、次のような画像(gif)を作り、GitHubのissueにドラッグ&ドロップによりアップロードしました。

https://user-images.githubusercontent.com/47315420/93205639-1c94fa00-f793-11ea-9fc2-bd2a13ce6b36.gif

Twitterカードでよく見られる画像は次のようです。大きな画像のURLを指定してもTwitter側で変換され、その画像が使われるので色も変わってしまったりします。後で作り直したいと思います。

  • 形式:jpg
  • 大きさ:680 x 399ピクセル
  • 解像度:96 dpi

Facebook アプリIDの取得

Facebookのアクセス解析サービスであるFacebookインサイトを利用し、Facebookのシェアデバッガーで余計なエラーを見ないためにはこのID(16桁くらいの整数)を取得しておく必要があります。

すべてのアプリ – Facebook for Developersから取得します。

OGPの設定

prefix属性の設定

ogp.meを見ると次のように<html>タグに設定するようです。

<html prefix="og: https://ogp.me/ns#">

しかし、Qiita記事を参考にして<head>タグを次のように変更してみました。

<head prefix="og: https://ogp.me/ns#>

<meta>タグの基本設定

次のようにindex.htmlの<head>と</head>の間にコードを追加してみました。

<!-- OGP 一般設定 -->
<meta property="og:title" content="広告リンク配置ツール" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ad-link-layout.netlify.app/" />
<meta property="og:image" content="https://user-images.githubusercontent.com/47315420/93205639-1c94fa00-f793-11ea-9fc2-bd2a13ce6b36.gif" />
<meta property="og:description" content="複数のアフィリエイトリンクを横並びさせるショートコードを生成します。" />

Twitter用の<meta>タグの設定

Twitterカードを表示するために以下の設定を追加します。

<!-- OGP Twitter向け設定 -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@pitang1965" />
<meta name="twitter:creator" content="@pitang1965" />

詳しくは「カードの利用開始 | Docs | Twitter Developer」を参照。

Facebook用の<meta>タグの設定

Facebook版のアクセス解析サービスであるFacebookインサイトを利用し、Facebookのシェアデバッガーで余計なエラーを見ないためには、以下の設定が必要です。

<!-- OGP Facebookインサイト向け設定 -->
<meta property="fb:app_id" content="1234567890123456" />

詳しくは「ウェブ管理者 – シェア機能 – ドキュメンテーション – Facebook for Developers」を参照。

設定の確認

設定の確認はSNSでURLを共有してみて確認でもよいのですが、確認のためのツールも使ったほうがよいでしょう。

TwitterのCard Validator

Twitter用の設定の確認は Card ValidatorでURL後に[Preview card]ボタンをクリックします。

Card previewが期待を満足し、Logにも変なメッセージが出ていなければよいです。

どうやらOGP設定をしてTwitterに反映されるまで少しタイムラグがあるようですので、ただちにTwitterに意図踊りのリンク画像を表示したい場合は、こちらにあるようにbit.lyでURLを短縮してから、その短縮URLを使うとうまくいく場合があるとのことです。

Card Validator | Twitter Developers

Facebookのシェアデバッガー

Facebook用の設定の確認は、シェアデバッガーでURLを入力後に[デバッグ]ボタンをクリックします。

いつの時点のサイトのOGP設定を示しているかは[スクレイピングの実行時間]というところに表示されているので、今の時点を反映したければ[もう一度スクレイピング]ボタンをクリックします。

シェアデバッガー – Facebook for Developers

Twitterでの確認

Twitterのツイート作成ボックスでURLを入力すると期待通りの次となりました。

ツイート作成ボックスでのURL入力

Facebookでの確認

Facebookでの投稿作成のダイアログボックスでURLを入力したところ、次になりました。

Facebookの投稿のダイアログボックスでのURL入力

最後に

OGPによる効果ってどうやるのか知らなくて前から気になっていました。

HTMLのヘッダーに数行追加すれば良いだけなので、今後は必ずよい画像を作った上で設定してみたいと思いました。ついでにこのWordPress記事にも設定してことがなかったので設定してみました。