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月
HTMLの名前空間(namespace)について掘り下げてみる
2013/03/11 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techHTMLnamespaceOpenGraphRDFa 例えば、 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> 『こういうのを HTML に埋め込んでください』とか、 <meta property="og:title" content="ソーシャル用のタイトルがここに入る"> <meta property="og:type" content="article"> 『この記述を入れておきましょう』とか、 <fb:like url="***" layout="button_count" widt
Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK） | 初代編集長ブログ―安田英久
今日は、Twitterが本格的に展開を進めている「Twitter Cards（ツイッターカード）」を表示するための、サイトの変更方法を解説します。Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトなら、10分で完了するような内容です。 2012-09-06： 申請後しばらくしたら、自分のアカウントでカードが表示されるようになり、Web担のサイトのURLでカードが表示されるようになりました。 Twitter Cards（カード）とは？Twitter Cardとは、Twitterが進めているツイート表示のリッチ化の仕組みのこと。ツイート内にURLが含まれている場合に、ツイートの詳細表示でそのページのタイトルや概要、アイコン写真などを表示するものです。 このカード表示は6月にスタートしたのですが、まだすべてのTwitterアカウントで有効になっているわけではなく、カ
Facebook向けに最適なOGP og:imageサムネイル画像サイズが変更された！？ | バシャログ。
こんばんは。昨日スマイルプリキュア食玩フィギュアをコンプリートした、ishida です。 やっぱり好きなのは、キュアピースです。 さてさて今回は、さきほど作業中に気づいたfacebookのOGPサムネイル画像サイズについてです。 コーディング・チェックまで終わって、本番アップ。 そんでもってFacebook開発者ツールのデバッガー https://developers.facebook.com/tools/debugをつかってOGPを確認。 あれっ？以下のような警告エラーが出ました。 警告エラーの内容 原文 All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url
canonicalは検索エンジンだけのものじゃない - web > SEO
canonicalは、GoogleとYahoo!、マイクロソフトが共同で策定した仕様です。 正しいサイトのURLを検索エンジンに指定することができるもので、これをうまく活用すると重複コンテンツやリンク価値の分散、無駄なインデックスのなどの様々な問題を防止することができます。 特に大量の動的ページを含む大規模サイトでは様々な意図でcanonicalが活用されていて、canonicalは無くてはならないものになっているサイトも少なくありません。 しかしcanonicalを活用しているのは検索エンジンだけではありません。Facebookやはてなブックマーク、Twitterなどソーシャルメディアもカノニカルを参考にしています。 そのような中、canonicalを検索エンジン対策、SEOのためだけに使っているとソーシャルメディア側で問題が起きる場合もありますので注意が必要です。 実際にどのような形で
シェアデバッガー - 開発者向けFacebook
シェアデバッガーでは、コンテンツがFacebookでシェアされたときの表示をプレビューし、Open Graphタグの付いた問題をデバッグできます。
metaタグを追加してFacebookに対応する方法とハマりやすいポイント
Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ！ 「いいね！」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね！」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね！」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って
HTML5+RDFaについて
このブログをHTML5に変更してみました。最近流行のFacebookのOGP（Open Graph Protocol）も設定しました。 HTML5に変更した理由は、OGP（Open Graph Protocol）を設置したときにvalidなHTMLにしたかったからなのですが、そもそもproperty属性はHTML5の属性ではなく、RDFaの仕様のようでした。勉強不足ですいません・・・。OGPを設置するにあたってHTML5にする必要はないようです。 ただしOGPを設置する場合、html要素に「xmlns:prefix」というネームスペースに対応した属性を設定する必要があります。FacebookのOGPに対応する場合は「prefix」に「og」を設定します。この設定はhtml5とかxhtmlには依存しません。 <html lang="ja" xmlns:og="http://ogp.me/ns
Open Graph protocol
2011年04月20日00:13 by oklahomer Open Graph protocol カテゴリドキュメント http://developers.facebook.com/docs/opengraph/ Open Graph Protocolは、あなたのwebページがソーシャルグラフと連携することを可能にします。今のところ、実世界に存在する物（映画、スポーツチーム、セ レブ、レストランなど）を象徴するwepページ用にデザインされています。Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。ページはユーザプロ フィールの"Likes and Interests"セクションに表示され、更新情報をユーザへ通知するこ
フェイスブックのいいね！をサイトに追加するならこれはやるべき - 新ECおもろ
以前、フェイスブックの「いいね！」ボタンをとにかく簡単にサイトに追加する方法のエントリを書いたんですが、 できれば、あともうひと手間、もうちょっとだけやった方がいいことがあります。 実はこれをやるとやらないとではいいね！をクリックした後の結果が全然違います。 ただ、、、実際ここまでやっているサイトは日本ではまだあまりなく、 それほど知られていないようなのでもったいないないなということで簡単にご紹介。 1.どう違うの？ もうひと手間をやるとやらないとでは全然違うわけですが、ではどう違うのか？ それは、、、 いいね！をしたことが、フェイスブック友達（自分）のニュースフィードに流れる ってことです。 逆を言えば、やらないと友達（自分）のニュースフィードには流れません。 自分のウォールに流れるだけです。 いいね！しても自分のウォールにしか流れないんかよ、、、いまいちじゃん！ と思っていた方（もしか
OGP (Open Graph Protocol) を試してみた - 蠍は留守です考
さて、チェック済の方も多いかと思うが、@amachang の『フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か』を読んだので、試してみた。 詳しくは @amachang のエントリに全て載ってるのだが、一応自分用にメモ。 OGP (Open Graph Protocol) とは ウェブサイトの情報を表すメタデータをHTMLに付加する記述方法なのだそうで、SNSサイトなどで多く使われている。 The Open Graph Protocol によるとRDFaがベースになってるみたいなことが書いてあるが、書き方はやっぱりRDFaに似てる感じ。MicrodataとかMicroformatsとかとはちょっと違って、meta要素として記述。メタデータを扱うので、名前空間も必要になる。 とりあえずやってみる @amachang のを参考にしつつ
OGPの事例について〜coobooの場合〜 - VTuberになったプログラマーの魂の残滓
こんにちは！こんにちは！ さて、ものすごいブクマ数を稼いでいるid:amachangのこの記事ですが、非常に分かりやすいですね。 せっかくなのでcoobooにおけるOGPの事例というのを簡単に紹介してみたいと思います。 作品詳細ページにOGPと「いいね！」ボタンを設置 例として下記のページを見てみましょう サイトウサンTシャツ（積分） 女性Mサイズ | 洋服（洋装） | かえる このページのソースコードを見ると下記のようになっています <meta property="og:site_name" content="cooboo [こーぼー] :: 手作りの作品を披露する・売る・買う ハンドメイドコミュニティ" /> <meta property="og:title" content="サイトウサンTシャツ（積分） 女性Mサイズ | ファッション・アクセサリー > 洋服（洋装） :: c
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記）
Web Design Tips To Help You Succeed - Web Design
水無月ばけら on Twitter: "[メモ] fb: なやつらの名前空間は xmlns="http:// www.facebook.com/2008/fbml" らしい。 https://developers.facebook.com/docs/opengraph/"
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」活用術。皆が知らない「いいね！」ボタンの設定方法、超解説 : (旧)ガイアックスソーシャルメディア ラボのブログ