OGP:WP-OGP customizedプラグインをやめて他力+自力でなんとかする!WordPress


公開日:2013年09月12日 木曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:127 | Leave a comment

WP-OGP customizedが不安定??

WordPressでfacebookのOGP設定が不安だったら「WP-OGP customized」を放り込むと幸せになれるかも*prasm

結構、みなさんお使いのプラグイン・・・

もちろん、ねこもりやも快適に使わせていただいて
とっても幸せだったんですけども、
どういうわけか全く反映されないサイトがあったのに加え、
ここんところの、更新の情報が正しくFacebookに行かなかったりで。

もしかしたら、WP-OGP customizedプラグインの問題(相性)かもと
一旦、プラグインを止めてみることにした。

反映されない現象

例えば、下図デバッガーでの結果は、
”og:image”にロゴが設定されてるのにも関わらず、

OGPホームデバッガーでは

 

関係ない画像を引っ張ってくる

 

Facebookでシェアしようとすると、
上の様に関係ない画像を引っ張ってきてしまう。

デバッガーもなーんか変!
ってか、デバッガーにもキャッシュ残ってないかい??!
OGPトップぺージのソース

デバッガー – Facebook開発者の結果とページのソースが違う。
”og:type”をトップページは「blog」、その他は「article」にしてるはずなのに
トップページも「article」。

あーーーーー!わけわからーんっ!!
と、ほんと投げ出しそうになりましたが
ロゴやアイキャッチ画像が反映されないという致命的な現象の原因は・・・
なんと!!

画像のサイズが小さかったから

なんとまー、お粗末な顛末、、、

英語ができないって悲しいね。
目を凝らしてよくよく見てみると、
最低でも200px以上にねって書いてある

「最低でも200px以上にね」って書いてある。

さっそく、150px程度だった画像を200pxに作り直しアップロード。

トップページなのに、ロゴが表示されず、
いろんな画像を引っ張ってきてたのが・・・
 ロゴが小さいと反映されない

こうなりました↓↓

 

ロゴが200px以上でないと反映されない

 

こっちも、ちゃーんとできました!
トップページや固定ページはやっぱりロゴを表示したほうがしっくりくるよね~

ロゴが200px以上dato反映されない

個別の記事ページは・・・?

こんな風にありったけの画像を引っ張ってきてたけど、

サムネイルを選択と出ていた投稿も

 

無事アイキャッチが表示された

 

無事、アイキャッチが表示されました!
一度デバッグするOGPを更新したら、一度デバッグしないとキャッシュがクリアされないですよ!

WP-OGP customizedのせいじゃなかった

ごめんなさい、WP-OGP customized。

ただし、更新情報が正しく行かなかったりってこともあるので、これを機に他力+自力(ちょっぴり)でOGPを設定してみました。

いろんなとこの合わせ技。
やってみたら超簡単だった!WordPressに自前でFacebook OGPの設定を行う方法 | Diwao2.0
貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | Oxy notes

ここまでと、

 アイキャッチ画像の取得部分は貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | Oxy notesさんとこから。

 記事タイトルやURL、抜粋部分は、 やってみたら超簡単だった!WordPressに自前でFacebook OGPの設定を行う方法 | Diwao2.0のソースを拝借いたしました~

残りのサイト名部分は一緒だったので。

わかりやすいご解説を本当にありがとうございます。

それと、OGPのプラグインを入れてたら、停止しましょうね。
エラーになりますからねー
エラーが出るよ

とりあえず、画像の問題は解決したので、デバッガー – Facebook開発者のページとソースが違うのは、きっとキャッシュ問題だろーということで置いときます( ̄ー+ ̄)

最後になったけど 、

OGP(Open Graph Protocol)って

「このページはこういう内容です」と明言するもの。
あ、簡単すぎ?
こちらがとてもわかりやすく説明されてます。
これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM 
【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ – SMMLab(ソーシャルメディアマーケティングラボ)

とっても参考になります。

OGP(Open Graph Protocol)とは、FacebookをはじめmixiなどのSNSで使われている共通の仕様のことで、ページの内容を説明するものです。これを記述することで、各SNS上での表示の調整が可能になります。

具体的に、「いいね!ボタン」でご説明しましょう。いいね!ボタンが押されたとき、プログラムはそのページの情報を読みにきます。そしてそのページに何が書かれているかをプログラムで判断し、ニュースフィード上に表示します。その際に「OGP」を設定していないと、プログラムがそのページ内に記載されている情報から、自動的に読み取って構成することになるため、結果として、意図しない表示となってしまうことがあるのです。

 

このようにOGPタグがあるかないかだけで、Facebookのタイムライン上で表示される印象は大きく異なってしまいます。

晴れて、「いいね!」を押してくれた人の友達のニュースフィードにも
「いいね!」って言ってるよ、とともにアイキャッチが。
ROSEのとこも最適化されて「いいね!」してくれた人の友達のニュースフィードにもアイキャッチと共に表示されるようになった

 

※↑は、ねこもりやがいいね!した場合の、ねこもりやのお友達のニュースフィードでの表示

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年09月12日 木曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:127 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA