Notes of Life

音楽とITの可能性を探す、金川泰典のブログ

DigiPress社のWordPressテーマでOGP画像がうまく表示されないときに確認したいこと

2016/01/26
By
約 5 分

先日、本ブログ「Grand Duo」のテーマ(デザイン)を変更しました。

選んだのはDigiPressさんのWordpress用有料テーマ「Voyageur」です。

同社のテーマは、デザイン・機能ともに素晴らしいのが特徴で、僕の周りでも使っている人が多いです。

ところが、このテーマに変更してから

Facebookで記事をシェアしたときに、思った画像が引用されてこない

というトラブルが発生しました。

原因は「プラグインと機能競合していた」からなのですが、ちょっと特殊な感じだったのでご紹介します。

同じようなトラブルでお悩みの方の一助となれば嬉しいです。

OGPで、想定と違う画像が出てくる

DigiPress社のテーマは、とても多機能。

もちろん、OGP※の出力機能もついています。

※OGP:Open Graph Protocol。FacebookなどのSNSでシェアされたときに、タイトルや画像を自動で表示させるための共通仕様。

ところが、書いたブログをFacebookでシェアさせようとしたところ、

想定とまったく違う画像が出てくる

という事象が発生。

 

通常はアイキャッチ画像を設定しておけば、それを引っ張ってくれる(はず)。

でも表示されるのはなぜか過去記事で使った画像や、記事とはまったく関係ないものです。

これは困った。

パソコンでシェアするなら画像の修正は多少可能ですが、スマホでは選択することができません。

画像があるなしでは、Facebookで見てくれる率が全然違うので、早急に解決する必要がありました。

設定は間違っていないんだっけ?

設定時のことを思い返してみても、思い当たるフシがありません。

そもそもテーマ自体にはOGPを設定する項目がありません。(「無効にする」はある。)

自動で出力すると書いていたので、特に気にしていませんでした。

機能が重複すると不具合が発生するということも知っていたので、同様の機能を持つプラグインは出力を停止していました。

元々、以前使っていたテーマで出力させていたので、旧テーマから新テーマへ機能を移行しただけです。

これはおかしいな、ということで調査を開始しました。

Facebookオブジェクトデバッガーを使ってみる

こんなときはFacebookオブジェクトデバッガーの登場です。

スクリーンショット (133as)

▲調べてみると、OGPで使われる画像を示す「og:image」欄に、画像がいっぱい出てきました。

普通は自分で設定した「アイキャッチ画像」がここに表示されるはずなので、これはなんかおかしいなと。

他にも気になる記述がありました。

スクリーンショット (137)

▲ここには「OGP情報は推測して出力してるよ」と書いてあります。

どうやらOGPの情報が出力されていないようです。

 

あれ、でも、OGPはテーマが自動出力してるはずですよね。

無効化の設定もしていない。(念のためOFF/ONもした)

機能競合するプラグインのOGP出力はすべて停止してあるので、テーマがOGP出力をしていないということになる。

はてさて。

原因はAll in One SEO Packだった!

困ったときはオフィシャルサポートということで、DigiPress社のフォーラムで検索をしました。

すると、こんな情報を見つけました。

(DigiPressサポート)特に、All in One SEO Packプラグインを利用している場合は、テーマ側のメタ出力等の重複する機能は意図的にすべて無効化します。DigiPressでは自前でメタ情報を最適化して出力する機能があるため、このプラグインの利用は必要ありません。※DigiPressフォーラムより引用

僕はSEO対策用のプラグインとして、All in One SEO Packを導入していました。

もちろんOGP出力の機能は停止していたので、よもやこれが邪魔するとは思っていませんでした。

フォーラムの記述によれば、All in One SEO Packをインストールしているだけで、テーマ側のOGPを含むメタ出力が無効化されるという仕様のようです。

なるほどーーーー。

というかそれ、どこかにアラートとか出して欲しいです・・・

無事、トラブル解決!

機能重複しているAll in One SEO Packを停止して、Facebookオブジェクトデバッガーで確認。

スクリーンショット (135)

▲無事、出力させたいアイキャッチ画像が出力されていました。

メタタグもちゃんと明示的に出力できているようです。

スクリーンショット (147)

▲Facebook本体でも確認、大丈夫ですね!

スクリーンショット (133a)

▲ついでに、エラーが出ていた「アプリIDがありません」というのも解消させました。

DigiPress設定項目の「HTMLヘッダー設定」>「<head>~</head>内のユーザー定義 :」から、Metaタグを指定します。

下記の2行に、IDを入れて追加設定すればOK。

  • <meta property=”fb:admins” content=”管理者ID”>
    <meta property=”fb:app_id” content=”アプリID”>

IDが入っていなくてもシェア自体はできるようですが、サイトとFacebookをひも付けているものなので、設定しておいたほうがよいでしょう。

まとめ

これでOGP関連は、エラーもトラブルも解消することができました。

プラグインやテーマなどの機能が重複してしまうことは、Wordpressではよくあることです。

しかし、機能をONにしていなくてもインストールされているだけで、影響してしまうものもあるんですね。

そこまで影響が大きいなら、せめて

「○○○がインストールされているので×××の機能は停止しているよ」

くらいの説明を書いて欲しいな・・・と思いました。

今回のトラブルは、色々な機能を使っているベテランほど、陥りやすそうですね。

ご注意くださいね!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でYasuをフォローしよう!