２．楽天　OGP非対応だが、画像が少ない(ページによるが)
例）http://item.rakuten.co.jp/fuzzys-shop/h-7042-n?s-id=top_normal_browsehist
「img src」でソース検索すると、13件マッチ。
→Facebook内でサムネイルが13件選べる。
※偶然数字が一致してますが、検索で出た画像と一部違うので、
ほかのロジックも入っていると思います。

３．ニッセン　OGP比対応、画像が多い
例）http://www.nissen.co.jp/sho_item/regular/1810/1810_00401.asp?cat=cate001&bu=123456&book=1843&anken=SL11FA001_001
「img src」でソース検索すると、57件マッチ。
→Facebook内でサムネイルが表示できない。

まとめ

以上のように、imgタグの乱立により形を保っている様なサイトでは適切にシェアされない。

imgタグを減らし、cssによる指定を的確に行う事で、
機械的にも見やすいソースとなる＝シェアされやすくなる。

新しくサイト作るときは、なるべく重要な画像にだけ、
imgタグを使うようにしたいです。

OGPに対応すればいいだけの話では有りますが。

2011.8.28 追記

再度調べてみると、画像の枚数ではなく、img内のsrcパスの違いによるのかも。
相対パスで記載されていると、facebook上で読み取らないみたいですね。

2011-08-27

フェイスブックやミクシィ等で使われているOGP(Open Graph Protocol)って？どうやって取得するの？

OGPに関する本家のサイトこれ
http://ogp.me/
　↓
英語なので、ブログを探ってみました。

■OGPって何？

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
http://d.hatena.ne.jp/amachang/20110117/1295233078

この方のブログが１番分かりやすかったです。

要は、ひとではなく機械にこのページ内に何が書かれているのかの
サマリーを理解させるための仕様です。

画像やタイトルなど、SNSでページをシェアするために良く使われています。
例）フェイスブックのウォール上のリンクなど。

■OGPを取得するには？
metaタグを単純に取り込む方法は無いんだろうか？

追記

結局、get_meta_tagsはOGPに使えなかったので、



preg_match('//', $source, $matches);

で正規表現によるデータの取得をするしかなかった。
まあ、出来たからいいか。

2011-08-21

Bootstrap, from Twitterが素敵すぎる

http://twitter.github.com/bootstrap/

twitterライクな画面デザインが超簡単に出来るサイト。
cssが公開されていて、そのまま使えるのが便利だなぁ。

勉強になります。

2011-06-24

オズボーンのチェックリスト

１．転用
　他に使い道はないか？
２．応用
　似たものは？何かのまねはできないか？
３．変更
　意味、色、働き、音、匂い、様式、型を変えられないか
４．拡大
　より大きく、強く、高く、長く、厚く、できないか？
　時間や頻度を変えられないか？
５．縮小
　より小さく、軽く、弱く、短くできないか？
　省略や分割できないか？何か減らす事ができないか？
６．代用
７．再利用
８．逆転
９．結合

サムネイルの作成

画像にアンシャープをかける

おまけ 画像をDLしてサーバ内に格納

追記 png画像の透過処理

例えば

まとめ

2011.8.28 追記

追記

おまけ　画像をDLしてサーバ内に格納

追記　png画像の透過処理