museでOGP | WOW99

ホームページ、ブログサイト、ランディングページなど、 SNS でシェアされた時に、ページの中ではない画像、宣伝用の画像を出したいことがある。

そんな時にはサイトのmetaタグに書き込むのが一番良いような気がする。

WordPress の場合は、プラグインなどもありますが、他のプラグインが影響してうまく動作しないなんてこともありました。

せっかく上手く動作していたのに、他のプラグインを入れたり、また他のプラグインがバージョンアップされた時に動作が不安定になることもあるようです。

各サイトによってはいろいろ手順がありますので、方法についてはそちらの方を研究してみて下さい。

基本的には下記の内容、そのサイトに合った内容に書き換えて meta タグに貼り付ければうまくいくはずです。

中には販売されているランディングページには、自動的に ogp の設定してくれるものもあるようですが、なんせそちらは有料ですのでちょっと引けちゃいます。

お金を払わなくてもこちらのタグを書き込めば動作しますから、やっぱり無料の方がいいですよ。

サイトのソースを見て、エディターで書き込みばいいのですが、アドビのmuseの場合は、その作業をしてしまうと後々問題なので、ソフトが立ち上がってる状態で、そのページのプロパティからメタデータを開いてheadに挿入するデータの部分に書き込めば問題なく働きます。

—-OGP用参考資料—-↓-↓-↓–↓

<!– Facebookの設定 –>
<meta property=”fb:app_id” content=”App-ID（15文字の半角数字）” />

<!– Twitterの設定 –>
<meta name=”twitter:card” content=”summarylargeimage” />

—–ここまで

fb:appidは、 FacebookにOGPを表示させるためには必要です。
app_idの取得方法は下記サイトから取得できます。

（1）Facebookにログインした状態で、Facebook開発者 -アプリにアクセス
（2）右上の（＋新しいアプリケーションを作成）から、新規アプリケーションを
（3）アプリケーションのを指定。その下の二つは空欄可能
（4）セキュリティチェックの文字を入力する
（5）次のページに出てくる赤枠のところが、app_idです

Facebook開発者 – アプリ　はこちら
https://developers.facebook.com/apps/

「サムネイル画像の URL」はあらかじめ画像をサイトにアップしそのアドレスを指定するのが間違いがないと思います。