ブログの設定まわりをいろいろといじってみている@Mori2ndです。
OGPの設定にはプラグインを利用していましたが、最近確認してみたら、警告メッセージがでたりしてなんだか不安定な状態になっていました。
いくつかプラグインを試してみましたが、うまくいかないので、これは自分でコードを追加してみるしかない！と思い挑戦してみることにしました。
OGPのコードを追加するのにいろいろなサイトを参考にしましたのであわせてご紹介したいと思います。
そもそもOGPとは？
OGPはウェブサイトの情報をコンピューターにもわかりやすいよう決まった書式で記述したものです。
これを設定するとSNSサービスで情報がシェアされたときにより正しくウェブサイトの情報が伝わりやすくなるのです。
特にFacebookの利用者はものすごい勢いで拡大しているので、ぜひ設定しておきたいところです。
知らない方はOGPの重要性について確認しておいたほうがいいでしょう。
OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp
OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したもので ...
自分でコードを追加してみる
OGPの重要性を再確認したところで、自分でコードを追加してみました。
コードの記述についてはこちらがとてもわかりやすく大変参考になりました。ほぼコピペで大丈夫でしたよ(^^)
貼るだけ簡単！アクセスを倍増するWordPress用OGPコード | Oxy notes
プラグインに頼らずに、WordPressでOGPを設定するには、以下の2点を追加するだけです。 ...
ちなみに私の場合はFacebookコメントも設置して、App IDも取得しているので、metaタグの「fb:admins」の内容は「fb:app_id」の内容に変更しました。こんな感じです。
1 | ; html-script: false ]<meta property="fb:admins" content="○○○○○○○"> |
上のコードを下のコードに変更。
1 | ; html-script: false ]<meta property="fb:app_id" content="○○○○○○○"> |
「fb:admins」の代わりに「fb:app_id」が使えるのはこちらに情報がありました。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。 ...
コードを追加したら確認してみよう
OGPのコードが追加できたので、正しく設定できているか確認してみました。デバッカーで簡単にチェックできます。
今すぐ確認した方が良い – FacebookのOGPがきちんと設定できているか調べる方法 | Last Day. jp
エラーがあるとエラー項目が表示されます。エラーあると「いいね! 」が友達のウォールに表示されなくて勿体ないです。しっかり対処しましょう! ...
結果は・・・
トップページはバッチリ！
個別のこのページもOKでした！
おわりに
これで私のブログもOGPの設定ができました。
あとは「いいね！」をしてもらえるような記事が書けるよう頑張りたいと思います！