Soumettre la recherche
Mettre en ligne
OGPってなんでしょう?
•
1 j'aime
•
1,410 vues
Reina Okabe
Suivre
2011.06.11 Facebookアプリつくろう会LT資料。「試してみました」的内容になっています。 2012.09にURL Linter(デバッガー)の情報を追記しました。
Lire moins
Lire la suite
Technologie
Business
Signaler
Partager
Signaler
Partager
1 sur 25
Recommandé
WordPressのOGP設定とSNSでの見え方について
WordPressのOGP設定とSNSでの見え方について
Michiro Sakamoto
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
Hieu Mac
T4t - tools for teams - 第1回 発表スライド
T4t - tools for teams - 第1回 発表スライド
Kojiro Yokota
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
Kenichi Takara
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
Kohji Tanaka
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
Brushup Team
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
Recommandé
WordPressのOGP設定とSNSでの見え方について
WordPressのOGP設定とSNSでの見え方について
Michiro Sakamoto
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
Hieu Mac
T4t - tools for teams - 第1回 発表スライド
T4t - tools for teams - 第1回 発表スライド
Kojiro Yokota
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
Kenichi Takara
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
Kohji Tanaka
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
Brushup Team
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
Yusuke Kojima
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
Kyoko Ochiai
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
Kazuki Iwai
コーディング入門以前
コーディング入門以前
Yutaka Kinjyo
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
mei_tachibana
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
株式会社co-meeting
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
株式会社co-meeting
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
WEBページを表示するまで
WEBページを表示するまで
Shoichi Kakizaki
ディレクション本来の領域について ディレ協紹介用資料201504
ディレクション本来の領域について ディレ協紹介用資料201504
Kenta Nakamura
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
Shuhei Iitsuka
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
Katsuhiro Morishita
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
The Driven Minutes With Tugboat ver.0.8.6
The Driven Minutes With Tugboat ver.0.8.6
autumn_dream
仕事で使えるシェルスクリプト
仕事で使えるシェルスクリプト
bsdhack
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
はじめる! Redmine
はじめる! Redmine
Go Maeda
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
schoowebcampus
外部サイトのFacebook連動
外部サイトのFacebook連動
Hiroshi Kotani
Cakephp plugin for_facebook
Cakephp plugin for_facebook
Eiji Yokota
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
Six Apart KK
Contenu connexe
En vedette
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
Yusuke Kojima
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
Kyoko Ochiai
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
Kazuki Iwai
コーディング入門以前
コーディング入門以前
Yutaka Kinjyo
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
mei_tachibana
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
株式会社co-meeting
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
株式会社co-meeting
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
WEBページを表示するまで
WEBページを表示するまで
Shoichi Kakizaki
ディレクション本来の領域について ディレ協紹介用資料201504
ディレクション本来の領域について ディレ協紹介用資料201504
Kenta Nakamura
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
Shuhei Iitsuka
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
Katsuhiro Morishita
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
The Driven Minutes With Tugboat ver.0.8.6
The Driven Minutes With Tugboat ver.0.8.6
autumn_dream
仕事で使えるシェルスクリプト
仕事で使えるシェルスクリプト
bsdhack
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
はじめる! Redmine
はじめる! Redmine
Go Maeda
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
schoowebcampus
En vedette
(19)
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
コーディング入門以前
コーディング入門以前
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
最速HTML勉強会
最速HTML勉強会
WEBページを表示するまで
WEBページを表示するまで
ディレクション本来の領域について ディレ協紹介用資料201504
ディレクション本来の領域について ディレ協紹介用資料201504
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
プログラムの流れを図で表す方法その1:フローチャート/アクティビティ図
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
The Driven Minutes With Tugboat ver.0.8.6
The Driven Minutes With Tugboat ver.0.8.6
仕事で使えるシェルスクリプト
仕事で使えるシェルスクリプト
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
はじめる! Redmine
はじめる! Redmine
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会
Similaire à OGPってなんでしょう?
外部サイトのFacebook連動
外部サイトのFacebook連動
Hiroshi Kotani
Cakephp plugin for_facebook
Cakephp plugin for_facebook
Eiji Yokota
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
Six Apart KK
アプリ制作マスターへの道
アプリ制作マスターへの道
Masayuki KaToH
everevo × Open Graph
everevo × Open Graph
Tetsuwo OISHI
Facebook制作から運用のノウハウ一挙見せます! 告健士郎
Facebook制作から運用のノウハウ一挙見せます! 告健士郎
Kenshiro T
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
kenji goto
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
Movable TypeとFacebookの 素敵な関係
Movable TypeとFacebookの 素敵な関係
Toshihito Gamo
FirebaseとSPAでOGPに動的対応
FirebaseとSPAでOGPに動的対応
Seiya Koga
HTML5でteratailが喋った!
HTML5でteratailが喋った!
Shohei Tai
あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)
Hiroyuki Ishiyama
Seo Slide Muryou Repo
Seo Slide Muryou Repo
uzumagic
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
0から始めるhp集客の真髄シリーズ<その2>
0から始めるhp集客の真髄シリーズ<その2>
Tatematsu Digital Solution KK
drive api×deeplapiで高性能ocr翻訳サービスを開発した話【WebAPT_LT会】
drive api×deeplapiで高性能ocr翻訳サービスを開発した話【WebAPT_LT会】
TakeshiYamamoto33
Dataflow(python)を触った所感
Dataflow(python)を触った所感
Ryo Yamaoka
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
淳 竹野
今日だけで出来るiframeのFacebookページ 告健士郎
今日だけで出来るiframeのFacebookページ 告健士郎
Kenshiro T
Similaire à OGPってなんでしょう?
(20)
外部サイトのFacebook連動
外部サイトのFacebook連動
Cakephp plugin for_facebook
Cakephp plugin for_facebook
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
人に読まれて育てる企業オウンドメディアのはじめ方 ~運用7ヶ月を振り返って、現場担当者からのTIP集~
アプリ制作マスターへの道
アプリ制作マスターへの道
everevo × Open Graph
everevo × Open Graph
Facebook制作から運用のノウハウ一挙見せます! 告健士郎
Facebook制作から運用のノウハウ一挙見せます! 告健士郎
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Movable TypeとFacebookの 素敵な関係
Movable TypeとFacebookの 素敵な関係
FirebaseとSPAでOGPに動的対応
FirebaseとSPAでOGPに動的対応
HTML5でteratailが喋った!
HTML5でteratailが喋った!
あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)
Seo Slide Muryou Repo
Seo Slide Muryou Repo
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
0から始めるhp集客の真髄シリーズ<その2>
0から始めるhp集客の真髄シリーズ<その2>
drive api×deeplapiで高性能ocr翻訳サービスを開発した話【WebAPT_LT会】
drive api×deeplapiで高性能ocr翻訳サービスを開発した話【WebAPT_LT会】
Dataflow(python)を触った所感
Dataflow(python)を触った所感
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
今日だけで出来るiframeのFacebookページ 告健士郎
今日だけで出来るiframeのFacebookページ 告健士郎
Dernier
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Dernier
(10)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
OGPってなんでしょう?
1.
OGPってなんでしょう? @Facebookアプリつくろう会
れれのーと(@rerenote)
2.
はじめに
このスライドは2011年6月11日に開催された 「Facebookアプリつくろう会」での発表内容に 一部内容を加えたものです。 2011年6月時点の情報を元に 作成されていますので情報が古い場合があります。 必ず最新の情報をご確認ください。 このスライドでは 「あんずもじ」を使用しています。 http://www8.plala.or.jp/p_dolce/ れれのーと
3.
OGPとは? • Open Graph
Protocol • 「いいね!」と深い関係あり ☛ The Open Graph Protocol http://ogp.me/
4.
見覚えはありませんか?
5.
情報を付加するって どうやって?
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
10.
それでは とっととやってみます
11.
用意するもの • Facebookのアカウント ×1 •
Webサイト ×1 →今回は3ページから構成されるサイトを 急ごしらえで用意しました
12.
1. いいね!ボタンの設置 • サイトを登録し
アプリIDを取得
13.
1. いいね!ボタンの設置 • Facebookコネクトで
ページに設置する コードを取得 ・設置するページのURL ・見た目と機能
14.
1. いいね!ボタンの設置 • iframe用と
XFBML用の 貼り付け用コードを ゲットします
15.
あとは貼り付ければOK
16.
この段階で「いいね!」すると?
もの足りない(´・ω・`)
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>
18.
じゃ、やってみる
19.
「いいね!」すると? 揚げだけにアゲー↑(*・∀・*)
20.
「いいね!」すると?
あれ?
21.
有効な管理人リストが提供されていません。
「fb:app_id」メタタグ または 「fb:admins」メタタグを使って、 コンマ区切りのリストとして 管理人リストを指定する必要があります。
22.
合っているのにどうして?
23.
合っているのにエラーが出るよ? (Facebookの)キャッシュ乙!
というケースが多いです テスト中などコードが安定していない時は キャッシュにくれぐれも注意しましょう
24.
じゃ、デバッグどうすればいいの?
URL Linterというデバッガーが Facebookから提供されています OGPのタグを設置・変更したら Facebook側でどのように解釈されるか URL Linterで確認するようにしましょう 実行時にキャッシュも クリアしてくれるんだよ ☛ URL Linter https://developers.facebook.com/tools/lint/
25.
まとめ • 「いいね!」ボタン設置は意外とあっけなく
できたよ • OGPも基本中の基本はすぐにできるね • Facebookをターゲットにしている場合は URL Linter(デバッガー)を活用しようね!