ブログを共有 CocoonのOGPは標準装備

ブログのこと

TwitterやFacebookなのでブログ記事やWebページをシェアされてる方って多いのではないでしょうか。
シェアするとURL、タイトル、画像、概要などが表示されます。
これはOGPを使った表示の仕組みになります。

スポンサーリンク

CocoonにはOGPが備わっています。

OGPとは何ぞや?
Open Graph Protocol(オープン グラフ プロトコル)の略になります。

通常OGPを使用するのにはmeta(メタ)タグをHTMLソースコードに記述したりOGPプラグインなどを使って少し面倒な設定をしなくてはならないのですがCocconには標準でOGP設定が使えるようにいなっています。

OGP設定する事のメリット

冒頭でも触れましたがFacebookやTwitterにシェアされた時にWebページのURL、タイトル、サムネ、概要などを表示させる事ができる為、誰かがシェアしたときにどんな内容なのか分かりやすく、見てもらえるチャンスにも繋がります
その為に、できるだけOGPは設定していた方が良いです。

CocoonのOGP設定はとても簡単

CocoonのOGP設定

Cocoon設定⇒OGPタグ⇒OGPの有効化にチェック⇒Twitterカードタグの挿入にチェックします。
画像のアップロードの選択で画像を入れればOKです。

Coconオリジナル画像
この画像を変更しないと、上記のCocoonテーマ画像が記事タイトルと一緒にFacebookやTwitterに出ることになります。
ここにブログのトップページなどをスクショして入れておけばブログサイトをSNSでシェアされた場合ブログトップページが表示されます。

またアイキャッチ画像を入れてあれば記事をシェアされたときアイキャッチ画像が表示されます。
上記のCocoon画像を取り消し、空白画像、アイキャッチ画像も入れないと記事をシェアされたときにNo imageと言うものになります。
画像を設定したら、最後に忘れずに変更をまとめて保存を押してください。

画像ですがFacebook、Twitterできれいに見えるサイズ比は1.91:1とされています。
サイト表示、アイキャッチ画像を入れるときは、その辺も考えて画像挿入するときれいに表示できます。
最低画像サイズは600×315pxです。
1200×630px以上の画像が推奨サイスとされています。
 
Coconキャッシュ削除設定

WordPress右側にキャッシュ削除があります。
キャッシュ削除⇒全てのキャッシュ削除でOKです。

設定したOGP画像が繁栄できないことがあるのでキャッシュも削除しておきましょう。

OGP確認方法

僕はFacebookは止めてしまったのでどのように表示されるか分かりません。
今回はTwitterの表示確認方法を記しておきます。

Twitterの場合はCard validatorで、どのようなカードになるのか見れます。

Card validator
https://cards-dev.twitter.com/validator

OGPブログカードの確認

自分のブログをTwitterに知らせる前に確認できるのでアイキャッチが小さいなと感じたら変更する事も可能なので、どのように見えるかチャックしても良いと思います。
※上記の画像はブログのトップページを切り抜いて保存した画像になります。
このブログ本体をシェアされた場合は、こんな感じで表示されるんだと確認できます。

まとめ

昨今はSNSの流れがとても速いです。
少しでも、目に留まるようにOGP設定はお勧めします。
Cocoonの場合は面倒な設定は無いので是非、使ってみてください。

と言う事でWordPressテーマCocoonのOGP設定について書きました。
最後まで読んで頂きありがとうございます。
また、次の記事でお会いいたしましょう。

コメント

タイトルとURLをコピーしました