Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
React製WebサービスにFirebaseをフル活用して動的なOGP生成を実現した話
はじめに はじめまして！！！ 結.JAPAN でみんなで共同編集できる旅行計画アプリnicody のiOSアプリとWebアプリの開発を行なっている、にーの（@n_shhhin）といいます！ 元々、nicodyのiOSアプリの方をメインで開発してたのですが、最近になってWeb周りも担当することになり、初Reactサービス開発ということもあり苦戦しつつ勉強しながら開発しているところです...！👨💻 そんな中、最近 「既存ReactサービスをOGP対応する」 という初心者にはなかなか重めの要件が降ってきて、Web周りは右も左もわからない状態だったのでかなーーーり苦戦しました...！！！ そこで本記事では、今後自分みたいなWeb見習いｴﾝｼﾞﾆｬｰがOGP対応を苦しまずにサクッと実装できるように、OGPを動的に変える方法をつまづいたポイントなどを含め解説してみたいと思います。 この手のOGP
FacebookやTwitterの投稿時表示画像（OGP）を確認・修正する方法 | New Standard
OGPとは「Open Graph protocol」の略称です。簡単に言うとFacebookやTwitterなどにURLを投稿した際、表示されるタイトルや説明文、アイキャッチ画像の表示内容を制御する仕組みです。 これらは専用のコードを書いて個別にコントロールするのですが、New Standardでは自動的に表示を整えられるようにしています。 ただ、SNSの仕様上100％コントロールできるものではないので「あれ、意図した画像と違う……」という時は、以下の手順で確認・修正してください。 Facebook投稿表示の確認 Facebookには「シェアデバッガー」という、シェアした時に表示される画像を確認するサイトがあります。 https://developers.facebook.com/tools/debug/ 使い方も簡単。確認したいURLを入れて「デバッグ」ボタンを押すだけです。 例えばNe
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要
概要 ▶ HTML5はXHTMLではありません。このためOGPの設定で必要とされるxmlnsは不要なのです。代わりに「prefix」という記述を行います。 Geek_Tatoo by Massimo Valiani HTML5でウェブサイトを作成していて、気になったことがありました。 気になった瞬間はFacebookやGoogle+で使用されるOGP（Open Graph protocol）のためのメタタグを設定していた時のことです。 ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。 こんな感じですね。 <html xmlns:og="http://ogp.me/ns#" xmlns:
いいね！ボタンに大きめの仕様変更
2012年08月07日20:17 by oklahomer いいね！ボタンに大きめの仕様変更 カテゴリドキュメントSocial Plugins Open GraphのBuilt-in Actionの一つとしてBuilt-in Likeが追加され、モバイルアプリでも簡単にいいね！ボタンを実装できるようになりましたが、これに合わせ、既存のいいね！ボタンの仕様にも変更があるため、アプリによっては大きな影響があります。 各変更の詳細は後述しますが、既存のいいね！に対する仕様変更で一番大きいと思うのは、いいね！されたウェブページを管理するためのFacebookページが作成されなくなる点です。これまでは、いいね！されたウェブページには管理者のみが閲覧できるFacebookページが与えられ、そのウォールへ書き込みを行うことで、いいね！したユーザのニュースフィードへ情報を流すことができました。Open G
Facebookのog:imageが無視されて異なる画像が勝手に指定される件（推奨サイズの追記あり） - 俺のメモ
こん＊＊わ。 Facebookの度重なる仕様変更に頭を痛めているlatexcatsuitです。 Facebookからの流入を増やしてアクセスアップするには必須のOGP設定ですが、 またもやFBが仕様変更を行い、一歩間違うと阿鼻叫喚になりそうなふいんき（←なぜか変換できない）ですｗ シェアするとより大きなサイズでサムネイルが表示されるように仕様変更されてからしばらく経ちました。 画像が大きく表示されることで、よりクリックしてもらいやすくなったのはいいのですが、そこに大きな問題が潜んでいました。 OGP設定の確認に使用するデバッガー（旧称URL Linter）ですが、 ここでog:imageに指定する画像の大きさが縦横最低200pxとなり、その警告が表示されるようになりましたよね。 これだけなら「小さくてごめんね、ごめんねー」程度で済むのですが、どうやら話はそれだけですまなくなりました。 次の
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット 2011年12月02日 16:17Facebook OGP (Open Graph Protocol) という約束事がありますね。 Facebook などにウェブページなどの情報を伝えるのに使われるもので、 このブログのトップページだとこんな感じで書いてあります。 そのページが Facebook でシェアされたり「いいね！」されたりしたとき ここに書いた画像や説明文が拾われるわけですけど、 いったん取得されたら Facebook 側でキャッシュされてしまって いくら手元で書き換えても反映されない。 ただこの情報は OGP の書式を確認するためのこのツールを使うと Facebook のが現在の状態を取得しに来てくれるので 新しい状態に更新されますね。 Debugg
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
