はぴすぷ

OGP設定しないとFacebookのファンが減っちゃうよ!【All in One SEO Pack】でサクッと解決!【WordPressプラグイン】

      2015/09/22

前回Facebookページを作成して困ったことがありました。

URLをコピペすると意図しない画像と概要が表示されるのです。

SS_1490

ほんとならここに表示されて欲しいのは、こちらの画像。

coconalaココナラ

しかし、ピックアップされた他の画像に切り替えてみても、意図しないものしかない。

SS_1491

SS_1492

概要に「パンくずリスト、作成・更新日時」が表示されるくらいなら、まだ許せたんですが、これはちょっといただけない!

どうにかしようと調べてみると、OGPが設定されていない為に起こる問題でした。

スポンサーリンク

OGPとは

OGPは「Open Graph protocol」の略称。

FacebookなどのSNSやブログサービスで、URLを入力した際に作成されるリンクオブジェクトに、「タイトル、概要、アイキャッチ画像など」を正しく伝える為の仕組みのこと。

その為、これを設定していない場合はページをプログラムで解析され、それらしいものが表示される。

シェアする側の気持ちになってみる

自分が更新情報を配信する時なら、しょうがないなぁ…。と手直ししてもいいでしょう。

でも、せっかく記事を気に入ってくれてシェアしようとした時に、何かおかしい画像が表示されたら…。

手直しなんてせずに閉じちゃうよね(´・ω・`)

投稿する前に自前に確認出来るものならいいけど、確認がなかったり、実際にシェアしないとリンクオブジェクトが作成されないサービスもあります。

そういう場合に、わけの分からい内容が表示されてたらどう思いますか?

シェアした人も、された人も「えっ…。」ってなります。

何なの、このサイト…。」と自分の知らない所でファンを失うことになりかねません。

All in One SEO Packで解決!

WordPressを使っているなら、ほぼ必須プラグインとまで呼ばれている「All in One SEO Pack」を導入することで解決出来ます。

All in One SEO Pack で出来ること

実は「はぴすぷ」では「All in One SEO Pack」を導入していませんでした。

SEOは大事だとは思っているので、何度か入れようとは検討しましたが、All in One」という名前から余計な機能が多すぎて、サーバーに負荷をかけ過ぎるのでは?と心配してのことです。

実際に何をしてくれるのかですが、主には以下のことをしてくれます。

  • トップページの「タイトル、メタの概要・キーワード」のカスタマイズ
  • メタキーワードの自動化(カテゴリ・タグから指定)
  • 各ページのタイトルをジャンル毎にフォーマットを指定して書き換える
  • 記事毎にメタの概要・キーワード、noindexを個別指定
  • Google Search Consoleとの連携
  • Google+との連携
  • Google Analyticsとの連携
  • noindex、nofollowの設定

今上げた機能は、標準で出来る設定で、更に拡張機能がたくさん用意されていて、有効にすることで利用可能になります。

拡張機能で有名どころで入れておきたいのが、「XML Sitemaps」と「Social Meta」です。

今回のOGPの設定は「Social Meta」がやってくれます。

All in One SEO Pack」の設定項目を全部説明すると長くなりすぎるので、デフォルトだと困る部分と、Social Meta」の部分だけ説明します。

All in One SEO Pack をインストール

管理画面から「プラグイン」→「新規追加」→「All in One SEO Packで検索」→「今すぐインストール」

SS_1500

インストールが完了したら「今すぐ有効にする」で管理画面にメニューが追加されます。

SS_1501

  • General Settings:基本的な設定をする所。
  • Feature Manager:拡張機能を有効にしたり無効にしたりする所。

基本的な設定

既に使っているテーマとプラグインが人によって違うので自分の環境に合わせて設定します。

基本的にデフォルトで問題ないはずです。

SEOに関しての設定は何が正解かはGoogleとかの中の人しか分かりません。

SEOで成功しているバズ部さんの設定記事をリンクしておくので、参考にしてみるといいでしょう。

デフォルトで困った点

当サイト「はぴすぷ」ではテーマ「STINGER5」を利用しているので、タイトルの置き換えはテーマ側で対応しています。

All in One SEO Pack」のデフォルト設定でタイトルの置き換えが有効になっている為、タイトル置き換えが二重に適用され、トップページのタイトルが「はぴすぷ |」になってしまっていました。

なので、All in One SEO Pack」のタイトルを置き換える」は「利用停止」にしておきました。

SS_1520

あとAll in One SEO Pack」でタイトルを置き換えると、OGPに設定されるタイトルに、当サイトのタイトルが含まれてしまうので、なんだかなぁ…と思っていたので、それを外す意味でもあります。

Social Metaの設定

まずはAll in One SEO Packメニュー「Feature Manager」から、Social Metaを有効にします。

Activate」をクリックすると、メニューに「Social Meta」が追加されます。

SS_1503

Social Metaの設定も好みによりますが、ほとんどデフォルトで問題ありません。

画像の設定(Image Settings)

画像の部分だけはきちんと設定しておきましょう。

SS_1524Select OG:Image Source

何の画像を設定するか選択します。

SS_1505

「デフォルト画像、アイキャッチ画像、最初に関連付けた画像、最初に表示される画像など」があります。

Use Default If No Image Found

上で指定した画像が見つからない時にデフォルト画像を使用するか。

Default OG:Image

デフォルト画像のURLを入力します。画像はアップロード出来るけど、フォームに移す方法分からなかった…。

「はぴすぷ」では全記事にアイキャッチ画像を設定しているので、基本的にアイキャッチ画像を適用させるようにしました。

もし画像が無い場合は、ロゴ画像を出すようにしています。

画像サイズは省略してますが特に問題ないです。

以上で設定は完了!

厳密にはもうちょっとちゃんと設定した方がいい箇所があります。これは次の記事で説明します。

動作確認

早速Facebookページに行って確認してみました。

SS_1525

おぉ意図した内容で(^q^)いい感じです!

もしここでダメなら後で説明する

「はぴすぷ」ではアイキャッチ画像を300×300px以下くらいで作成していることが多いので、このような表示になります。

ほんとは記事の始まりにドーンとでかい画像を載せてそれを使いたかったんですが、正方形のサムネ画像と合わせて2枚作るのが辛いのでたまに良い素材があれば付けるようにしています。

OGPの設定は記事単位で指定可能

基本的にはアイキャッチ画像でいいんだけど、この記事だけはこの画像を使って欲しいという場合にも対応しています。

一度書いている記事を下書き保存すると、投稿画面の最下部にAll in One SEO Pack」の設定フォームが現れるので、そこで指定します。

SS_1526

記事内で使用した画像を選択可能です。それ以外にも画像のURLを指定する方法などもあります。

一応、タイトルや概要も変更可能です。

対応は早めに!キャッシュされてしまうぞ!

今回の設定のおかげで意図した内容でシェアされるようになる可能性が高くなるでしょう。

しかし、過去の記事についてはOGPに対応しているWebサービス側でキャッシュされている可能性が高い。

なので、対応するなら早めにしておきましょう!

もしキャッシュされてしまっている場合でも、キャッシュをクリアする方法を用意してくれている可能性があります。

Facebookの場合は、Developerからデバッグやキャッシュをクリア出来るので確認しておくことをおすすめします。

Facebook Developer のデバッグ機能

Open Graph Object Debuggerから行えます。

SS_1527

  • Show existing scrape information:キャッシュされている情報を確認出来ます。
  • Fetch new scrape information:キャッシュをクリアして、新しい情報を取り直してくれます。

もし何か情報がおかしい場合は、エラー等が表示されるので、対応します。

SS_1522

上のは、admins間違えてて怒られた感じ。

終わりに

これで何とか訳の分からない概要や、画像でシェアされることは無くなったはず…!

これからFacebookページに、全記事シェアしていくので、その中でおかしいものがあればキャッシュクリアしていこうと思います。

なるべく早めに対応できて良かった(´・ω・`)

1000記事とかあったらやってらんないですもんね。

実はFacebookページで困ったことはこれだけじゃありません!

まだ続きますwそれでは次回にw

 - Facebook, Webサービス, WordPress, ソーシャル, プラグイン, 外部サイト連携 ,