webページにOGPを取り付ける
masterOGPとは、「Open Graph Protcol」の略で、Webページに設定することでをFacebookやTwitterやLINEなどのSNSでリンクした時に、そのWEBページのタイトルや画像などをかっこよく表示させる仕組みです。
サンプルコードを以下に示します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
・・・
<meta property="og:site_name" content="BCタロット">
<meta property="og:title" content="愚者[逆位置]">
<meta property="og:type" content="article">
<meta property="og:url" content="http://xxxxx.net/yyyyy.html">
<meta property="og:image" content="http://xxxxx.net/yyyyy.jpg">
<meta property="og:locale" content="ja_JP">
<meta property="og:description" content="成熟、無計画、不安定、愚か、心配、放浪者の悪い面、意味のない行動、コロコロと変わる気分、軽率な行動、無謀な計画や願望、非現実的な考え、行動が気まぐれ、失敗や偏見、計画が必要、用心深すぎる、本能とつながらない" />
<meta property="fb:app_id" content="xxxxxxxxx" />
<meta name="twitter:card" content="summary" />
</head>LINEでシェアすると以下のように表示されます。
facebook でシェアすると以下のように表示されます。
Twitter でシェアすると以下のように表示されます。
<meta property="fb:app_id" content="xxxxxxxxxx" /> はFacebookに連携する場合に必要なIDとなります。 facebook for developpers(https://developers.facebook.com/) のマイアプリから作成できます。
<meta name="twitter:card" content="summary" /> はTwitterでの表示のスタイルの指定になります。4種類あります。
- 小さい画像（ content="summary" ）
- 大きい画像 （ content=" summary_large_image” ）
- アプリ （ content="app”）
- 動画
Facebookでの表示をシュミレーターで確認する方法は、『OGPのFacebookでの表示を確認する方法』にあります。
Follow me!
