よいねこのウェブメモ

写真とロードバイク(MERIDA SCULTURA700)とグルメ記事を気の向くままに。アルコールが燃料。

早い内に設定すべき!WordPressでのTwitterカード等にも対応したOGP設定

投稿日:2015年3月8日 更新日:

MIYAKO85_kaisuiyokjyounomado20140726500 みなさんこんにちは!
色々と書きたい記事が溜まってきていて、3分の1だけを書いた記事のストックが大量にあるとっくん(@sstkn)です!

早速ですが、OGPってご存知でしょうか。
オーゴリラプロミネンスではありません。

正確には”Open Graph Protocol”と呼ばれるもので、
TwitterやFacebookでシェアされる際に有利になるものです。
簡単にいえば、サイト管理者の意図した文字や写真を使用してもらうための設定、といった所です。

また、この設定後にFacebook上で何らかの記事についてイイね!を押されると、
他人のフィードにそのページの概要や写真がウォールで見れるようになる、と言う事らしいです。

私はこのサイトのFacebookアカウントを作っていないので何とも言えませんが、、、

何はともあれ、設定に進みましょう。

なお、この記事はStinger5利用者向けの記事になります。
その他のテンプレートについては、一部内容が異なることもありますのでご注意ください(╹◡╹)

スポンサーリンク



設定1:headタグにprefixを追加する

設定するファイルは、テーマファイルの中にある「header.php」です。
元々あったタグについては、削除するかコメントアウトしましょう。


設定2:OGP用のmetaタグ追加

設定するファイルは、同じくテーマファイルの中にある「header.php」です。
の直前あたりに入れてあげるといいと思います。


以上で設定は完了です。

見た目の変化

もともと、FacebookにURLを入力すると、こんな風に表示されていました↓↓
before_fb

画像もなく殺風景でしたが、OGPを設定したことによりこの通り↓↓
fb_after
アイキャッチが自然に引っ張られていますね(╹◡╹)♪

参考サイト

今回コーディングの際に参考にさせていただいたのは、このサイトさんです。

【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK - ゆめぴょんの知恵

OGPとはブログ記事がFacebookでシェアやいいね!された時に、表示される写真や説明文を設定する機能です。SNSでの新記事周知は欠かせないので必須です。Twitterでも使える方法を紹介します。

wispyon.com


ただ、私の環境ではStinger5だからなのかなんなのか、、
Descriptionが正常に吐出されていなかったので、その部分を少し修正しています。

さいごに

ずいぶん大雑把な記事になってしまいましたがw
何はともあれ、これにて無事解決です。

参考サイトさんの所で使った、はてブカード形式のブックマークレットを使った時にも、ちゃんとDescriptionを拾う様になりました。
たしめでたしめで。

自分が仕事でPHP(≠デザイン系)を使っていたことにより、
学習コストが少なくていいのがとても魅力的なWordpress。

今後も少しずつカスタマイズをのっけていきます〜

スポンサーリンク

スポンサーリンク

スポンサーリンク

スポンサーリンク

こちらもおすすめ!

1

先日の記事にも書きましたが、Garminのvivosmart HR J、Edge520Jを入手しました。 開封の儀だけでは面白くないので、今回は1週間以上使ってみた後のインプレを含めて書きたいと思いま ...

2

最近、週末の天気が良くないですね。 先週末も、4月最初の日曜日、気温も高くなると言う事で期待していたのにorz (夜桜は写真を撮りに行ったけど、結局Sculturaと一緒に撮れていない・・・。) そん ...

-WordPress, インターネット
-, , ,

Copyright© よいねこのウェブメモ , 2017 AllRights Reserved.