アフィリエイト Wordpress

FacebookのOGP設定をWordPressにプラグイン無しで設置した。

更新日:

どうもみなさんこんにちは

先日、はてな風カードを導入しましたが、そのとき、もしiframeタグが使えていたら必要だったであろうOGP設定を、せっかくの機会なので導入しました。

有名なSEOプラグインのAll in One SEO Packを使うというのが一番楽だったのかもしれませんが、今回はプラグインを使用せずに設置できる方法を選択しました。なるべくプラグインは増やしたく無いものですので。

いつかFacebookでシェアしていただける日が来るまで頑張って続けたいと思います。

スポンサーリンク

OGPとはなんぞや?

今回はてな風カードの導入に向けて勉強しているときにはじめて知ったOGPですが、いったいなんの事なんでしょう?まったく知りませんでした。

私自身一応20年ほど前から(テキストエディタに手打ちでHTMLコードを書いて、フレッツISDNなどで通信料にひぃひぃ言いながらWEBサイトを作っていた時代)WEBの世界に少なからず携わって来ましたが全く知りませんでした。

OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。

という事なんですが、具体的に言うと、ある記事をシェアしてくれた時に、しっかりイメージや内容が伝わる形でシェアしてもらえるか、適当な内容でシェアされるかの違いが出るようです。

このOGPがしっかり設定されていないと、シェアされるときの画像が広告の画像を使われてしまったりするようで、いざという時のためにしっかり設定しておきたいところです。

OGPの設定方法

WordPressのheader.phpに2つ程追記するだけなんですけど、下記のサイトが良くまとまっていらっしゃったのでご紹介しますのでコードの書き方などはそちらをご参考にして下さい。

[blogcard url="http://yossense.com/ogp/"]

私がよくわからずに調べたのは下記2点です。

・fb:adminsの簡単な調べ方は、下記のサイトにご自分のFacebookアドレスを入れれば簡単に教えてもらえます。
 Find your Facebook ID

・HTML5かどうか分からない場合は、ソースの中に(おそらくheader.php)

<!DOCTYPE html>

があればHTML5です。

OGP設定をFacebookのデバッガーで更新し確認する

せっかく設定したOGPですが、こちらから通知しないとしっかり機能してくれません。Facebookのデバッガーという公式サービスを利用して、OGPを更新します。

Facebook Debugger

最初の画面で、対象記事のURLを入れてDebugボタンを押します。
次の画面で、一度Fetch new scrape informationを押すと、情報が更新されて下のほうに設定情報と、実際にFacebookで表示されるイメージが出ます。

Facebook-ogp-image

トップページを更新したからといって、サイト内のすべてのページが更新するわけでは無いのが切ないところですが、一括で更新できる方法を探したいところです。

最後に実際のFacebookで確認

最後に実際のFacebookで確認をしますが、自分で自分の記事をシェアするのは恥ずかしいとか思わなくても大丈夫です。
Facebookでステータス(近況)を投稿するふりをして、URLを入力すれば下にシェアイメージが出てきますので、確認が終わったら投稿しなければ誰にも分りません。

Facebook-ogp-image2

OGPでもGoogleChrome拡張機能

記事を1つ1つ、URLをコピーしてデバッガーに貼り付けるのは面倒だよね。という私と同じ面倒くさがり屋さんのためのGoogleChrome拡張機能が有ります。

OGP Checker
OGPchecker

この拡張機能を使うと、記事を表示したら右クリックしてOGPを確認を押すと、Fetch new scrape informationを押せばOKという、素晴らしく楽・・効率的な拡張機能です。

ぜひご活用ください。

-アフィリエイト, Wordpress

Copyright© 上善如水 , 2019 All Rights Reserved.