More Related Content
Similar to OGPってなんでしょう? (20)
OGPってなんでしょう?
- 2. はじめに
このスライドは2011年6月11日に開催された
「Facebookアプリつくろう会」での発表内容に
一部内容を加えたものです。
2011年6月時点の情報を元に
作成されていますので情報が古い場合があります。
必ず最新の情報をご確認ください。
このスライドでは
「あんずもじ」を使用しています。
http://www8.plala.or.jp/p_dolce/ れれのーと
- 6. OGPに対応するには?
HTMLのmeta情報として記述します
<html lang=“ja” xmlns:og=“http://ogp.me/ns#”>
<head>
<meta charset=“utf-8” />
<title>サイトタイトル</title>
<meta property=“og:title” content=“コンテンツタイトル” />
<meta property=“og:type” content=“コンテンツ種類” />
<meta property=“og:url” content=“サイトURL” />
<meta property=“og:image” content=“画像URL” />
- 7. 付加できる情報
• コンテンツの基本情報
• 連絡先情報1(住所/緯度/経度)
• 連絡先情報2(メール/電話番号/FAX)
• 音声や動画
- 8. BASIC METADATA
• title コンテンツのタイトル
• type コンテンツの種類
• image コンテンツのイメージ画像
• url コンテンツのPermalink
• description コンテンツの説明
• site_name サイト名
- 9. og:typeについて
コンテンツ内容のカテゴリを設定できる
• Activity • People
• Businesses • Places
• Groups • Products & Entertainment
• Organizations • Websites
- 17. OGP情報を追加します
<html lang=“ja” xmlns:og=“http://ogp.me/ns#”>
<head>
<meta charset=“utf-8” />
<title>rerenoteテストサイト「顔芸」</title>
<meta property=“fb:admins” content=“ユーザーID” />
<meta property=“og:title” content=“タイトル” />
<meta property=“og:type” content=“article” />
<meta property=“og:url” content=“ページURL” />
<meta property=“og:site_name” content=“サイト名” />
<meta property=“og:image” content=“画像URL” />
<meta property=“og:description” content=“説明” />
<link rel=“stylesheet” href=“css/base.css” type=“text/css” />
</head>
- 24. じゃ、デバッグどうすればいいの?
URL Linterというデバッガーが
Facebookから提供されています
OGPのタグを設置・変更したら
Facebook側でどのように解釈されるか
URL Linterで確認するようにしましょう
実行時にキャッシュも
クリアしてくれるんだよ ☛ URL Linter
https://developers.facebook.com/tools/lint/