Social MetaでOGPを設定して画像と詳細を最適化してみる。 |

2014-7-22
Update 2018-5-7
Wordpress
munchen

OGPとは

みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！あまりフェイスブックとツイッターやらのSNSをやってこなかったのですが、サイトリニューアルに伴い遅まきながらソーシャルネットワークを始めてみました。

しかし、フェイスブックに記事を投稿した時にアイキャッチがうまく表示されない現象に悩まされていました。

記事途中の画像が読み込まれたりして、手動で直していたのですが結構これに時間を取られたりするんです。

いろいろと調べてみると、OGP(Open Graph Protocol)と言うものの設定ができていないとの事です。OGPとはフェイスブックなどのソーシャルメディアにブログの内容を正確に伝える規格という事で、これをきちんと設定できれば万事OKという事になります。

OGPの設定は、PHP等でもできるらしいのですがあまり触りたくないので、今回の設定はプラグインで対応してみる事にします。

いろいろ探していたのですが、実はAll in One SEO Packで設定できるようになっています！余計なプラグインも増やさなくていいので、これで行ってみようと思います。

設定前にする事。

設定時にフェイスブックユーザーIDを入力する項目があります。事前に調べておくようにしましょう。

フェイスブックユーザーIDの調べ方。

個人ページ

個人ページの場合はタブに表示されるIDを確認し、メモ帳などに保存しておきましょう。id=以下の数字になります。

フェイスブックページ

フェイスブックページの場合は、設定>ページ情報で確認できます。ページ情報の一番下部に記載されているフェイスブックページIDを保存しておきます。

Social Metaの導入と設定

ここからはAll in One SEO PacKがインストールされている事が前提となります。

⇒　All in One SEO Pacのインストール方法はこちら。

導入方法

管理画面>Feature Manager
Social Meta>Activate
管理画面>Social Meta

基本設定

Use AIOSEO Title and Description
All in One SEO PacKでタイトルやディスクリプションを設定している場合はチェックして下さい。

Profile Admins ID
上記で調べたフェイスブックIDを入力します。

Site Name
サイトの名前を入力します。

Home Image
トップページにはアイキャッチがありませんので、トップページがシェアされた場合の画像をアップロードし、画像のURLを記入します。

Disable Jetpack Tags
Jetpackを導入している場合は、チェックを入れておきましょう。

Autogenerate OG Descriptions
ディスクリプションを自動生成します。自サイトの設定に合わせてチェックの有無を設定して下さい。

Select OG:Image Source
フェイスブックに表示させる画像を選択します。投稿ページから個別に選択できますのでデフォルトで良いかと思います。

Use Default If No Image Found
Select OGで設定した画像がない場合にDefault OGの画像を読み込みます。

Default OG:Image
画像がない場合に表示させる画像をアップロードしURLを記入しておきます。

Use Custom Field For Image
カスタムフィールドの画像を設定します。特に設定がない場合は空欄で良いです。

Facebook Object Type
blogにチェックを入れておきます。

Default Twitter Card
ツイッターカードの設定をします。Summaryでいいと思います。ツイッターカードの詳細はWeb担当者フォーラム　：　Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順

Twitter Site
ツイッターのユーザー名を入力します。

Show Twitter Author
ユーザー名で識別するようにします。チェックでいいと思います。

Twitter Domain
Webサイト名を入力します。

Enable Facebook Meta for
フェイスブックに表示させる投稿タイプを設定します。通常は投稿と固定でいいと思います。

投稿 Object Type(post)
Articleで設定します。

固定ページ Object Type(page)
Articleで設定します。

Scan your site for duplicate social meta tags
OGPのメタタグが２重設定になっていないかのスキャンをします。他にOGPのプラグインを挿入していたりPHPに記入している場合はSocial Meta設定をやめるか、他のメタタグを削除して２重にならないようにしましょう。

投稿ページのSocial Settings

Social Metaを導入すると投稿ページにSocial Settingが表示されるようになります。

Title
ブログ記事タイトルと変えたい場合はここで設定します。

Description
記事のディスクリプションと変えたい場合はここで設定します。

Image
SNSで表示されるアイキャッチを画像より選択します。

Custom Image
上記イメージの中にない場合はこちらで任意の画像を設定します。

Specify Image Width
画像の横幅を変更したい場合はここで設定します。

Specify Image Height
画像の高さを変更したい場合はここで設定します。

Facebook Object Type
投稿する記事タイプを設定します。Articleで良いでしょう。

Article Tags
記事のメタタグを設定します。特になければ空欄で良いと思います。

Twitter Card Type
ツイッターカードの設定をします。Summaryで良いでしょう。

全て設定出来たら更新しておきましょう。

デバッグをしておきましょう。

全ての設定が完了したら、フェイスブックのデバッグ機能を使って、表示されている内容を確認しておきましょう。

デバッグ機能で思ったように表示できていればOK。出来ていなければ再設定しましょう。使い方はいたって簡単！記事URLを入力してボタンを押すだけです。

⇒　フェイスブック　OGPデバッグ

OGPがうまく反映されない場合の対処法

2015年12月現在、フェイスブックにてOGPで設定した画像が反映されなくなっています。(ちなみにツイッターでは反映されている。)私の環境が問題なのかフェイスブックの仕様変更なのか、原因は分かりませんが、もし上手く反映されないようなら、投稿ページのパブリサイズ共有設定のチェックを外し、フェイスブックやツイッターに直接、投稿記事のURLを打つようにしてみて下さい。