フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

2011/01/17 2638 users mixi ミクシィ グリー ウェブページ IT戦記

Mixi, Facebook みなさん、こんにちはお元気ですか？僕は元気です。 さて最近、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着しつつあるのかと思っています。そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。OG... 続きを読む

＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね！」ボタンと「OGP」の設定方法、超解説:GaiaXソーシャルメディア ラボ／Facebook・twitterの企業利用法についての研

2011/04/27 1358 users GaiaXソーシャルメディア Open Graph SEO

2011年04月28日08:32 カテゴリfacebookソーシャルプラグイン ＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね！」ボタンと「OGP」の設定方法、超解説 Tweet Facebook / Franco Bouly Blogや自社サイトに、「いいね！」ボタンを設置している方は多いと思いますが、ところで皆さん、「超重要」なOGP(Open Graph... 続きを読む

月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法 | gadget or gimmick

2011/06/16 751 users Facebook ソッコー orz 気配 発覚

ogp_default Photo by tomos2006 最近は日本でもFacebookの人気がかなり高まってきていますね。 「Facebookからのアクセス数が増えてきた！」 な～んて声をよく耳にしますが、うちは全くそんな気配もなく…。 時代から取り残されているのかと思っていたのですが、原因が発覚。 OGPに対応してなかった…orz そこでソッコー設定してみたらビックリ！ 日によって違います... 続きを読む

Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス | コリス

2015/07/01 587 users コリス metaタグ シャドウ CSS グラデーション

CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオン...記事の続きを読む 続きを読む

CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール | コリス

2017/05/30 448 users Facebook コリス Mic CSS スニペット

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmic ...記事の続きを読む 続きを読む

Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利すぎて驚いた | Web担当者Forum

2013/10/29 224 users Excel カラースケール Web担当者Forum 安田英久

Web担トップ « 編集記事一覧 « [コラム] Web担のなかの人――編集部ブログ « 編集長ブログ―安田英久 « Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利すぎて驚いた ««Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? 連載編集長ブログ―安田英久 Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利... 続きを読む

【2015年最新版】FacebookのOGP設定がわかるサイト6選＋1｜Ferret [フェレット]

2015/02/06 217 users Twitter Facebook 柿崎 フェレット サムネイル

Ferretエンジニアの柿崎です。 ホームページ担当者の皆様、運営しているホームページのOGP設定をおこなっていますか？ OGPとは「Open Graph protocol」の略称です。FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人... 続きを読む

facebook いいねボタンの仕様変更?!OGPの設定についてまとめました（ localeプロパティについて） | HTML5でサイトをつくろう

2011/12/16 204 users Facebook いいねボタン キャプチャー URLリンター

『いいね!』ボタンのOPGについて FacebookのいいねボタンのOGP設定に若干の変更がでておりましたので補足記事を含め作成しました。今回の記事だけでいいねボタンの作成からOGPの設定までを再構築しました。facebookは仕様がよく変わるので一部のキャプチャーが違うかもしれませんが大体同じ感じになっています。 現状(2011.12.16)でURLリンターを使ってみると下記のような『Warni... 続きを読む

ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌

2011/02/10 177 users WP-OGP phpspot開発日誌 一瞬 ソーシャルサイト

ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」2011年02月10日-WordPress ? WP-OGP WordPress Plugins ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」。 OGPはOpen Graph Protocol の略で、ページ内の... 続きを読む

【保存版】やるとやらないでは大違い！Facebookいいね！ボタンを最適化する「OGP」設定方法まとめ | ソーシャルメディアマーケティングラボ

2012/10/11 142 users Facebook Facebookいいね 久保田 ボタン 内容

Facebookのソーシャルプラグイン　「いいね！」ボタンの最適化に必須である「OGP（Open GraphFacebookのソーシャルプラグイン　「いいね！」ボタンの最適化に必須である「OGP（Open Graph Protocol）」について、その内容と具体的な設定方法をご紹介します。 こんにちは、アライドアーキテクツ株式会社　制作部　プロデューサーの久保田です。 突然ですが、あなたのサイトの... 続きを読む

SEOの2倍アクセスを稼ぐFacebook活用術　「いいね！」ボタンと「OGP」の設定方法を超解説 - ガジェット通信

2011/06/27 134 users Twitter Facebook SEO ガジェット通信

Blogや自社サイトに、「いいね！」ボタンを設置しているみなさん、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか？　 これは、ある記事の参照元の計測データです。アクセスを牽引しているのは、「はてなブックマーク」でも「twitter」でも「Google」でもなく、『Facebook』です。OGPを設定するだけで「必ず」Facebookからの流入数が増加します。増加率... 続きを読む

WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp

2012/04/18 107 users OGP設定 WordPress Last Day. jp

Facebook大好き@sayobsです。A!@attripの@attripさんにOGPのプラグインは「WP-OGP」より「Open Graph Pro」の方が良いよと教えてもらったので変更しました。 「WP-OGP」はバグがあって上手くOGPが設定出来てない場合があるんですよね。OGPが設定するか確認する方法は→今すぐ確認した方が良い – FacebookのOGPがきちんと設定できているか調べる... 続きを読む

WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEA

2011/12/02 101 users IDEA WP-OGP Facebook WordPress

Facebookの「いいね！」したときに、サムネイル付きできちんとシェアするにはOGPなるものに対応しなくてはなりません。 そのためのWordPressプラグインが「WP-OGP」ですが、これがくせ者すぎる・・。以前挫折して放置していたのですが、facebookが普及してきたので重い腰をあげて設定してみましたよ・・。 ↑ 正しく設定しないこんなかっこわるいことに。サムネイル欲しい！ というわけで、... 続きを読む

WebRTC と React を組み合わせるなら Flux 設計が有効

2023/06/12 100 users Flux WebRTC React 反響 答え

この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。... 続きを読む

Facebookのウォールでちょっとアピールする方法（OGP） - EC studio デザインブログ

2011/03/29 99 users Facebook ウォール チャットワーク テキスト タイトル

サイトに設置した「いいね！」を押したとき、 タイトルとテキストだけではちょっと物足りない感じがしませんか？OGP（Open Graph protocol）の対応をおこなうだけで、 ウォールが少し華やかになります。 弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。弊社サービスサイトのOGP対応後 OGPを使うとどうなるの？OGP（Open Graph pr... 続きを読む

あまり知られていない！？自分のサイトのFacebookコメントや「いいね！」をデータ解析する方法！ | gadget or gimmick

2011/06/23 91 users Facebookコメント Facebook データ 自分 方法

Facebook_Insight Photo by tomos2006 OGP対応したならデータ解析をした方がいいですよ 先日、OGPの重要性についての記事を書きました。 月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法  「いいね！」ボタンを設置しているならOGP対応しなければ意味がありません。 この記事を読んでOGP対応した人もたくさんいた様でとても嬉しいです。 それでは... 続きを読む

月500円の不労所得を得るためにWEBサービスを開発した話 - Crieit

2019/03/12 89 users Crieit ミツダマ 不労所得 ノウハウ 祭り

こんにちわ！ミツダマです。 毎月WEBサービスを開発して技術とノウハウうっはうは祭りを主催しています。 1月に続いて2月にもWEBサービスを開発したことで、真の狙いである「不労所得を生み出すサービス」作りにも近づいてきました。 ちなみに俳句メーカーといいます。 以下報告記事です。 SNS画像シェア(OGP)系サービス... 続きを読む

アイキャッチ画像（OGP）チェッカー｜TwitterやFacebookでの表示を確認

2017/07/25 88 users Twitter Facebook チェッカー 文字 一部

TwitterやFacebookでシェアされたときに、アイキャッチ画像がどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください（表示は2017年7月時点のものです）。 画像を選択 続きを読む

FacebookのOGP仕様がまたもや変更! og:imageの推奨サイズが1500×1500に! | [M] mbdb

2013/04/09 87 users Facebook mbdb image 推奨サイズ Tweet

FacebookのOGP仕様がまたもや変更! og:imageの推奨サイズが1500×1500に! Facebook Hacks Please Share! Tweet この記事を読むのに必要な時間の目安: 約 8 分 マジですかまた変更ですかそうですか。 久々にトップページをDebuggerで叩いたら、OGPにエラーがが。 Facebook Open Graphの仕様を、これまた久々に調べなおし... 続きを読む

FacebookのOGPを簡単に確認するための5つの便利ツール [C!]

2012/05/25 70 users Facebook ウォール metaタグ パフォーマンス 構成

ご無沙汰しております、ヤガーです。 今までのFacebook関連のネタや、OGPに関する記事を書いてきましたが、さすがに企業サイトやブログなどではOGPの設定が浸透してきていると思います。OGPがあるとないとではウォールに流れた際の反応が全然違いますからね。で、このOGPなんですがFacebookはパフォーマンスのためか一度読んだものはキャッシュしてしまいます。metaタグの構成を変えたり、そもそ... 続きを読む

Google+ は OGP より Microdata を優先するみたい | WWW WATCH

2013/04/11 64 users Microdata Description みたい テキスト

この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけで... 続きを読む

Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット - 頭ん中

2011/12/02 59 users Facebook ブックマークレット ウェブページ リセット

OGP (Open Graph Protocol) という約束事がありますね。 Facebook などにウェブページなどの情報を伝えるのに使われるもので、 このブログのトップページだとこんな感じで書いてあります。 そのページが Facebook でシェアされたり「いいね！」されたりしたとき ここに書いた画像や説明文が拾われるわけですけど、 いったん取得されたら Facebook 側でキャッシュされ... 続きを読む

今すぐ確認した方が良い – FacebookのOGPがきちんと設定できているか調べる方法 | Last Day. jp

2012/04/18 57 users Facebook デバッグツール Last Day. jp

フェイスブック大好き@sayobsです。皆さんFacebookのOGPはきちんと設定できてますでしょうか? OGPがきちんと設定出来てないとせっかく友達があなたの記事に「いいね!」をしてくれても友達のウォールにあなたの記事が表示されません。今日はOGPがきちんと設定されているか確認する方法を紹介します。 「URLリンター」 facebook公式のデバッグツールです。ここに自分のブログ・ウェブサイト... 続きを読む

OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp

2012/04/18 56 users ウェブページ コンピュータ HTML 記述 フェイスブック

こんにちはFacebook大好き@sayobsです。今日は改めてフェイスブックのOGPの大切さを説明したいと思います。 OGPとは? OGPというのはThe Open Graoh Protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。 ↓のような記述でHTMLのheadタグに入力していきます。f... 続きを読む

OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ｜Blog｜Skyward Design

2012/05/11 51 users SVG Using the タグ for HTML ところ

OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ Posted by Hideki at 2012年5月10日 20:30 タグ： HTML5Web標準 W3CのNu Markup Validation Serviceを利用したところ、「Using the schema for HTML5 + SVG 1.1 + MathML 2.0 + RDFa Lite 1.1 + Mi... 続きを読む