ポータルサイトに必須のOGPをワードプレス(プラグイン)で設定する方法

 



2019/2/13

ポータルサイトを運営する上で大事なのがコンテンツの追加・更新ですが、それらを告知・拡散する上でSNSを利用するのはもはや常識となっています。
ただ、単にテキストだけがSNS上に表示されてもユーザーに内容が伝わらず、コンテンツを見てもらえないという残念な事態に陥ることがあります。
そこで必要なのがOGPの設定です。内容をしっかり把握して設定漏れのないようにしましょう。

OGP(Open Graph Protocol)とは

OGPはFacebookなどのSNSにコンテンツ(WEBページ)の内容を伝えるための仕組みで、コンテンツのURLが投稿されるとタイトルや画像、説明文が表示できるようになります。
内容がイメージしやすく、拡散された投稿からコンテンツへのアクセスアップが期待できます。

「Facebookでよく見かけるサイト紹介の画像は何?どうやって表示するの?」という疑問の答えがOGPおよびその設定という事になります。

URLが投稿されると自動的に赤い部分が表示されます。

Twitterカードも設定しておきましょう

Twitterのアカウントも利用されている場合は「Twitterカード」の設定も同時に設定しましょう。仕組みはFacebookとほぼ一緒です。

OGPの設定

通常はHTMLソースに表記します。
詳細は下記の記事をご覧ください。

◯“サイトの外” での見た目をチェックする
https://axel-media.com/topics/860/

<
今回はワードプレスのプラグインで設定する方法を説明いたします。
以前「ワードプレスに入れておきたいSEO関連プラグイン」で紹介させていただいた「All in One SEO Pack」と「Yoast SEO」を利用します。

All in One SEO Packでの設定

まずは初期の設定を行います。
メニューの「機能管理」で「ソーシャルメディア」の「Activate」ボタンを押します。
メニューに「ソーシャルメディア」が表示されるのでクリックします。

最低限設定するのは「ホームページ設定」のサイト名・ホームのディスクリプション、「画像設定」のデフォルトのOG:Imageです。(OG:Imageソース選択は「Default Image」で問題ありません)
アップロードする画像は200×200px以上のものを用意しましょう。
余裕があれば個別のページの画像やタイトル・説明文を用意しておきたいところ。
記事の内容が直観的に伝わるように工夫したいですね。

上記画像の赤い枠を変更すれば問題ありません。
Twitterカードタイプは「要約の大きい画像」にしておくことを忘れないでください。

Yoast SEOでの設定

こちらもまずは初期設定ですが、All in One SEO Packよりは簡単です。

ご利用中またはご利用予定のSNSのURLを登録し、それぞれ個別の設定を行います。
Facebookのみ画像のアップロードがあるので、作成したものをアップします。

個別の設定もAll in One SEO Packよりわかりやすい感じです。
入力しコンテンツを公開・保存すれば設定完了です。

OGP設定の確認

きちんと設定できたかどうかの確認はデッバカーを使って行いましょう。
デバッカーでプレビューした内容で問題なければ終了です。

それぞれのページでコンテンツのURLを入力すればデバックが開始されます。

◯Facebook シェアデバッガー
https://developers.facebook.com/tools/debug/sharing/

◯ツイッター Card validator
https://cards-dev.twitter.com/validator

まとめ

HTMLでの設定が意外と面倒くさいOGPですが、ワードプレスのプラグインを利用する事で煩わしさが解消されるかと思います。
ワードプレスをお使いの場合は忘れずに設定しておくことが重要です。