Facebookにおけるmetaタグの必要性とその役割

スウェルデザインのWです。

クライアントから
"Facebookに更新内容を投稿した時に表示される画像と文章を適切なものにして欲しい"
との要望があり、今件をまとめる事になりました。

ちょろっと調べてみたところ、HTML上部のheaderにmeta複数種類のタグを追加することで その情報をFacebookが拾ってくれるそうです。

下記画像がシェア記事になります。
同じ番号のコードがぞれぞれの表示に影響している行になります。

①

<meta property="og:image" content="http://www.maruyama-kai.or.jp/img/staff1.jpg" />

②

<meta property="og:title" content="丸山歯科新聞 2013 春 創刊号" />

③

<meta name="description" content="今季号のみだしはこちら！『新聞発刊にあたり』『丸山歯科医院はこんなところです』『ドクター・スタッフ紹介』" />

以上のように設置することでシェア画像とテキストを操ることができます。

※しかしこの時注意して欲しいのがFacebook側に残っているキャッシュです。
一度シェアしたURLはキャッシュからデータを取られるので最新のmetaが反映しません

作成したmetaタグの内容を更新するにはこのキャッシュを一度クリアする必要があります。

以下の方法で削除してください。

下記URLにアクセス https://developers.facebook.com/tools/debug/og/object/

「Fetch new scrape information」というボタンを押してキャッシュを削除してから確認して下さい。