SNSこの記事のURLとタイトルをコピーするbaserCMSで株式会社RYUSのコーポレートサイトを作りました。そのときにSNSでシェアしたときに表示されるOGPの設定をしました。そのことについて書きます。baserCMSのキャッシュを消すbaserCMSでOGPの設定をするときはテーマをいじるbaserCMSに限らないかもしれませんが、今回OGPの設定をするためにカスタマイズしたのはテーマの中でした。いうことで、使っているテーマによりOGPの出方が違うかもしれません。いくつかのテーマでOGPの設定を確認してみたのですがその部分まではコーディングされていないものが多かったので、baserCMSで共通的なOGPの付け方を考えてみようと思いました。OGPを設定する方法について考えました。Facebookでシェアしたときに画像などが適切に出るようにOGPの設定をするとりあえず、私の場合なのですがFacebookでシェアすることが多く、そのときに適切に画像などが表示されるように設定をしたいと思います。このblogでFacebookにシェアしたときは適切に画像などがでているので、OGP設定をまねたいと思います。content="https://usortblog.com/wp-content/themes/twentyfourteen-ryus/images/logo_name.jpg">このように設定されていました。テーマではある程度OGP設定がされています。組み込み済みの設定にデータを使いたいので、まずapp\webroot\theme\logical_jp_baser_ryus\config\bootstrap.phpに、自分のサイト用データを入力します。'000000000000000';にFacebookのAdminIDを指定します。'【取得したfb:adminsの15桁ID】';のように変更します。'http://example.com/themed/logical_jp_baser/images/ogp.jpg';とあるところにシェアされたときに表示したい画像をサーバーにアップロードしておき、その画像URLを指定します。'http://ryus.co.jp/theme/logical_jp_baser_RYUS/img/ogpimage.png';このように指定しました。'https://www.facebook.com/basercms';ここに自分のFacebookページのURLを入力します。'https://www.facebook.com/pages/株式会社RYUS/175754762448692';このように変更します。あともう一つのファイルを修正します。app\webroot\theme\logical_jp_baser_ryus\elements\meta.phpを修正します。?>Facebookページが無い場合はこの修正で終了です。$wsLogFbPageURL;とします。"\n";}?>のようにします。いう記述のあるファイルを探して、そのタグの直前にOGPに関する記述を追加します。M-SinglePageの場合は、app\webroot\theme\m-single_ryus\layouts\default.phpを修正します。</head>1</head>直前にOGPの指定を入れます。?>FacebookのAdminIDについてはこのページの少し上の方に説明があります。Facebookに関する記述はFacebookページを表示したいときだけでいいと思います。og:site_nameにformal_nameを指定してありますが、サイトによってはnameの方が、OGPとして適切かもしれませんのでその辺はお好みでやってみてください。content='<p>株式会社RYUSからのお知らせです。content='<p>株式会社RYUSからのお知らせです。content='100000870086901'>このようにOGPが指定された状態になります。OGPを指定してあるのに適切に表示されないときは!OGPを指定してあるのにFacebookでシェアしたときになかなか適切に表示されず、苦労しました(>_<)。いくつかやってそのうちちゃんと表示されるようになったので、どれが良かったのかは分からないのですがやったことを書きます。「Facebookの共有で、指定してある画像が表示できなかった場合の対処方法」の方法で、何度か新しくOGPを読み直しました。クリックしてキャッシュを消しました。いうことで無事にFacebookで、このように思った通りのシェアができるようになりました(^^)/兎本美佳ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。