こんにちは。新潟でホームページ制作をしているフリーランス事務所【マザーシップ】です。

当方がワードプレスで制作を行うときに必ずインストールするプラグインとして以下の2つがあります。

==========================
Yoast SEO … SEO設定プラグインとしてすごく有名。カスタム投稿タイプに標準対応しているのが良い。
Tweet, Like, Google +1 and Share …ツイッター、facebookいいね、google+などのボタンを簡単に設置できるプラグイン。他のプラグインはfacebookの「シェア」ボタンしかないものが多いので、「いいね」のボタンがデフォルトであるのは貴重!
==========================

しかし、この2つのプラグインをインストールしていると、ここ1~2年くらいの間、以下の様な警告がでるようになりました。

yoast-problem

==========================

The Tweet, Like, Google +1 and Share plugin might cause issues when used in conjunction with Yoast SEO.

Yoast SEO と Tweet, Like, Google +1 and Share の両方が OpenGraph コードを出力しています。ページが共有されたときに Facebook 、 Twitter 、 LinkedIn などの SNS が間違ったテキストや画像を使ってしまう可能性があります。

==========================

この対応方法を紹介したいと思います。まだ対応が完了していないかたはぜひ設定してくださいね!

 

※そもそもOpenGraph コードとは

OGP(Open Graph protocol)は、FacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるための『情報』を記載したものです。

OpenGraph コードとは、その情報を記載するために設定するタグ部分(<meta property=”からはじまる言語)のことを指します。

OGPとは

 

何が起きているのか?

警告に記載の通りになりますが、Yoast SEO と Tweet, Like, Google +1 and Share プラグインの両方が OpenGraph コードを出力している状態です。

ホームページ上で右クリックしてソースを表示させてみましょう。

1)YOAST SEOのOpenGraph コード

og-yoast-ms

2)Tweet, Like, Plusone and ShareのOpenGraph コード

og-share-ms

管理画面で警告がでていたとしても、どちらか1方のみのOpenGraphコードが表示されている場合は問題ありません。おそらくですが、両方のプラグインをインストールしているだけで、自動的に警告が表示されるようになっているのだと思います;

しかし、上記のように1ページ内に2箇所同じタグ(og:titleなど)表示されている場合は問題です。シェアをしようとしてもエラーになってしまって、正常に動作しなくなる可能性があるため、改善が必要です。

 

OpenGraph コード重複出力の改善方法

1)Tweet, Like, Google +1 and Shareの設定

1-1. ワードプレスの管理画面から、[設定]-[Tweet Like Plusone]を探して設定画面を開きます。

plusone-1

 

1-2. 設定画面の最下部「Other options」のチェックを以下のように設定します。

plusone-2

Do not add Facebook OG META tags … チェックを入れる
こちらをチェックすることで、Tweet Like PlusoneからOGPが出力されなくなります。

Do not add Facebook Javascript … チェックを入れる
チェックすることで、FacebookのJavascriptタグが出力されなくなります。
こちらもYoast SEOが出力しているため、Tweet LIke Plusoneからの出力は不要です。

ちなみにRemove Share linkは、追従型の最下部に開発者様のサイトリンクがデフォルトで表示される、という機能です。チェックを入れて消しても問題ありません。

 

2) Yoast SEOの設定

2-1. [SEO]-[ソーシャル]をクリックし、設定画面を開きます。

yoast-1-1

 

2-2.[facebook]タブをクリックし、[Open Graph メタデータを追加する]のスイッチを[Enabled]にします。

その下の「デフォルト設定(画像)」も指定しておいたほうが良いです。

yoast-1-2

 

1-3. ホームページのソースを再度確認し、OGPタグがYoast SEOからのみ出力されているかどうか確認します。トップページだけでなく、ブログの記事ページなどのFacebookいいねボタンが設置されているページも合わせて確認してください。

Yoast SEOからのみ出力されていれば、OGタグの重複はなくなっています。

 

1-4.[SEO]-[ダッシュボード]へ移動して、エラーが表示されないようにします。

yoast-1-3


yoast-problem-x

これで設定完了です。

※Tweet, Like, Google +1 and Shareを無効化する必要はありません。

この記事をシェア