FacebookでシェアしたときのOGP画像、大きな表示で出てますか？ | 初代編集長ブログ―安田英久
今日は、Facebookの話題を。自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法を解説します。ポイントはog:image画像のサイズです。 Facebookでシェアされたときの画像表示には2パターンあるFacebookでページがシェアされたときに表示される内容を指定する、OGP（Open Graph Protocol）は、当然、ページのHTMLで指定していますよね？ さすがに、イマドキOGPを指定していないページは非常に少ないと思います。 でも、og:imageで指定する画像がFacebookで表示されるパターンは2種類あることをご存じですか？ 記事タイトルの上に画像が大きく出るスタイルと、記事タイトルの左に画像が小さく出るスタイルがあるんです。 どちらのほうが目立つか……そりゃ、画像が大きく出るほうがいいですよ。 画像を大きく表示するには、画像のサイズを大きく
Open Graph Object Debugger - Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。
Facebook OGPを動的に切り替え フィード画像切替 その３
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 前回の Facebook OGPを動的に切り替え フィード画像切替 その２ の続きとなります。 いよいよ今回の課題、「OGPを動的に切り替え」となるのですが、 当初はJavaScriptでmeta（OGP）を切り替えればいいんじゃない？ と思い、以下のサイトを参考に http://blogs.itmedia.co.jp/naoto/2010/11/facebookopen-gr.html scriptを記述。 <script type="text/javascript"> (function(){ function appendMetaInfo (_type, _value){ metatags = document.getElementsByTagName("meta"
FacebookのOGP画像に「顔」が入っている場合のトリミング位置についてまとめ
FacebookのOGP画像のサイズと、ニュースフィードでの表示サイズについては、過去にも数回に渡ってまとめていますが、今回は画像の中に人間の顔が入っている場合の動きについて検証してみます。 どうやら、画像内に人間の顔が入っている場合、トリミングの仕様が通常とは異なり、顔の位置を自動検出してそこを起点にトリミングを行うようです。 なんと言う余計なお世話ハイテクシステム！ ※過去のFacebook OGP画像関連のまとめ FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） FacebookのOGP画像、最新サイズでの作成例をご紹介 本題に入る前に、簡単におさらいです。 FacebookのOGP画像のニュースフィード上のサイズは、w1.91：h1 w468px以上でないと大きく表示されない（※Face
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
Open Graph protocol
Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any
プラグイン使うのやめてプラグインレスなOGPを実装することにしました
手間もかからないですし、それはまぁ相当便利なプラグインではあるのですが、うちのブログはいかんせんプラグインの数が多く、どうもそのあたりがボトルネックになっているのか、サーバーから呼び出す際の待ち時間がどうにも長いんですよね。 この辺りを解消すべく、現在なるべくプラグインレスにできるものはしていこうと、内部施策の改善も兼ねてゴリゴリゴリゴリ。 で、そんな中、やや重めの「WP-OGP Customized」を外し、プラグインレスにしてみました。 参考にさせていただいたのは以下の記事。
WordPressに自前でFacebook OGPの設定を行う方法
FacebookのOGP対応に使っていたプラグインが最近不調だったので、数日前から自前での対応に切り替えました。以前から他のブロガーさんがやり方を紹介していたのは知っていたのですが、何となく難しそうだなぁと思っていて今までやってなかったんですよね。。。でもいざ挑戦してみたら拍子抜けするほどに簡単でした！ほぼコピペだけでOKなので、難しそうっていうイメージで躊躇されていた方は是非チャレンジしてみてください。 OGPとはThe Open Graph protocolの略。ざっくり言うと、サイトの内容をSNS上でより伝わりやすくするための情報、みたいなものです。設定しておくとシェアされた時の見栄えも良くなるし、Facebookだったら「いいね！」を押された時の効果も高まる。ブログやサイトを運営している人なら基本設定した方がいいと思います。 OGPについては以下の記事で懇切丁寧に説明してくれている
OGPで指定したサムネイル画像（og:image）の Facebook Timeline での表示が変わった気がするので実験してみた
なんだか og:image のサイズが Facebook で 200px 以上推奨に【仕様変更された】っていう記事ばかり目につきますが、公式アナウンスを見つけるまで信じないよ！と思っている今日この頃。 仕様変更されたことは信じないけど、警告が出るのはいやだから256px四方の正方形に変えました。256px四方の正方形に深い意味はないのですけど。 それはさておき、いいねした後にTimelineで表示される画像のサイズがなんかおかしい(´・ω・`)と思ったので、実験してみました。 今回実験してみたサムネイルのサイズは下図の5種類で、Timelineでの見え方と、Newsfeedでの見え方をキャプチャしました。そして、あくまでも 2012年7月4日現在 の仕様です。 まずは 90px × 90px の正方形 ニュースフィードでの表示 ふつーに正方形に表示されています。 タイムラインでの表示 なん
WordPressのOGP設定は「Open Graph Pro」がオススメ、エラー出た時の対処方法 – attrip
WordPressのOGP設定は「Open Graph Pro」がベストです。 Open Graph Pro を使うのが便利です。 WordPressのOGP設定は「Open Graph Pro」がベスト | Last Day. jp 使い方については、友達のrayくんがブログにしています。 大変判りやすい説明で助かりますｗ 口頭で伝えただけなんだけどね。 その次のブログでは、ＯＧＰで確認した方が良いよい！と すばらしい流れでした。 しかし！！！ けど、ぼくは、これを更に改造したこれを使っています。 [browsershot url=”http://mbdb.jp/hacks/WordPress/wp-ogp-customized.html” width=”600″] WPのOGP実装はこれで決まり? ｢WP-OGP Customized｣がイイね! | [M] mbdb —————-以下
facebookでシェアされたときに表示させる画像を指定する方法
企業サイト等に「いいね！」を埋め込む時に押さえておきたいのでメモ。 ■facebookでシェアされたときのサムネイル画像を指定する方法(サイト運営側) 例えば商品ページとかに「いいね！」を埋め込んでfacebookユーザーにシェアされても、デフォルトはfacebookがテキトーに抜き出した画像がサムネイルになるっぽいのでナビゲーションの画像がサムネイルになったりする事もある。 それだとなんだかパッとしないので、シェアされたときにサムネイル画像にして欲しいファイルをこちらから指定する必要がある。 metaタグに以下のように書けばOK。 <meta property="og:image" content="http://から始まるサムネイル画像ファイル.jpg" /> こんだけ。 ■どんなふうに表示されるかのチェックも忘れずに。 チェックツールとしてfacebookの「URLリンター」を使用し
ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「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 の略で、ページ内の<meta>タグに、ページのタイトルやURL、サイト名を記述しておくことで、facebookで「いいね！」を押したとき等に、facebook側がOGP情報を使ってより分かりやすい形でリンクしてくれるというもの。 facebookだけはなく、国内のmixi や gree でも対応しているそう（ OGPについてより詳しくはこちら ) このプラグインを使えば、有効にするだけで次のように、<meta>
ビセラの口コミや効果まとめ【失敗しない】口コミからわかる3つのポイント
【インスタ・ツイッター】ビセラの口コミまとめ Instagram（インスタグラム） おはようございます🌞 空が綺麗な朝ですね✨ ・ 私の最近の腸活事情☺︎ 腸が綺麗だとお肌にはもちろん！健康にも良いので、最近話題の短鎖脂肪酸サプリのビセラを飲み始めました✨ ・ 腸内フローラをサポートしてくれて、飲み始めてから最近調子がいいのを実感しています♪ ・ 1日1カプセル💊でいいので、面倒だったり沢山飲むのが苦手な方にもおすすめです☺︎ ・ さて、今日も1日頑張りましょう☺︎ ・ #ビセラ#bisera#腸内フローラ#短鎖脂肪酸 #ダイエット#美容#健康#アラフォー#アラフォー美容#美容好きな人と繋がりたい#腸#腸活#美肌#yorkie#腸活 >> インスタでチェックする ヤセ菌と最近話題の短鎖脂肪酸サプリ 腸内フローラをサポートし 特殊製法のカプセルが 「生」菌を直接腸まで届けてくれる！ 年々
シェアデバッガー - 開発者向けFacebook
シェアデバッガーでは、コンテンツがFacebookでシェアされたときの表示をプレビューし、Open Graphタグの付いた問題をデバッグできます。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
