baserCMSでSNSでシェアしたときに表示される画像など、OGPの設定をする

baserCMSで株式会社RYUSのコーポレートサイトを作りました。そのときにSNSでシェアしたときに表示されるOGPの設定をしました。そのことについて書きます。

baserCMSでOGPの設定をするときはテーマをいじる

baserCMSに限らないかもしれませんが、今回OGPの設定をするためにカスタマイズしたのはテーマの中でした。ということで、使っているテーマによりOGPの出方が違うかもしれません。

いくつかのテーマでOGPの設定を確認してみたのですがその部分まではコーディングされていないものが多かったので、baserCMSで共通的なOGPの付け方を考えてみようと思いました。

今回コーポレートサイトで使わせていただい、logical_jp_baser というテーマと、デフォルトの M-SinglePage でOGPを設定する方法について考えました。

Facebookでシェアしたときに画像などが適切に出るようにOGPの設定をする

とりあえず、私の場合なのですがFacebookでシェアすることが多く、そのときに適切に画像などが表示されるように設定をしたいと思います。

このblogでFacebookにシェアしたときは適切に画像などがでているので、OGP設定をまねたいと思います。

ソースを見ると、

このように設定されていました。

logical_jp_baser の修正

logical_jp_baser テーマではある程度OGP設定がされています。組み込み済みの設定にデータを使いたいので、まず

app\webroot\theme\logical_jp_baser_ryus\config\bootstrap.php

に、自分のサイト用データを入力します。74行目からの

にFacebookのAdminIDを指定します。(AdminIDについては、「WordPress FacebookのOGPをプラグインなしで指定する!」にありますのでそちらを参照してください)

上記の1行を

のように変更します。

画像は、86行目以降の

とあるところにシェアされたときに表示したい画像をサーバーにアップロードしておき、その画像URLを指定します。今回の場合は、

このように指定しました。

Facebookページがある場合は、89行以降の

ここに自分のFacebookページのURLを入力します。今回の場合は、

このように変更します。

あともう一つのファイルを修正します。

app\webroot\theme\logical_jp_baser_ryus\elements\meta.php

を修正します。

43行目当たりの、

の上に行を追加して、

Facebookページが無い場合はこの修正で終了です。

Facebookページがある場合は、8行目の

のあとに1行付け加えて、

とします。

45行目当たりの、

に、Facebookページに関する記述を追加して、

のようにします。

M-SinglePage の修正

M-SinglePageをはじめ、OGPが全く指定されていないテーマの修正方法は </head> という記述のあるファイルを探して、そのタグの直前にOGPに関する記述を追加します。

M-SinglePageの場合は、

app\webroot\theme\m-single_ryus\layouts\default.php

を修正します。

直前にOGPの指定を入れます。

FacebookのAdminIDについてはこのページの少し上の方に説明があります。また、Facebookに関する記述はFacebookページを表示したいときだけでいいと思います。
og:site_nameにformal_nameを指定してありますが、サイトによってはnameの方が、OGPとして適切かもしれませんのでその辺はお好みでやってみてください。

これで表示させて、ソースを見ると、

このようにOGPが指定された状態になります。

OGPを指定してあるのに適切に表示されないときは!

OGPを指定してあるのにFacebookでシェアしたときになかなか適切に表示されず、苦労しました(>_<)。いくつかやってそのうちちゃんと表示されるようになったので、どれが良かったのかは分からないのですがやったことを書きます。

Facebookデバッガー

Facebookの共有で、指定してある画像が表示できなかった場合の対処方法」の方法で、何度か新しくOGPを読み直しました。

baserCMSのキャッシュを消す

管理画面の システム管理

サーバーキャッシュ削除 をクリックしてキャッシュを消しました。

ということで無事にFacebookで、

このように思った通りのシェアができるようになりました(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る