秋月電子通商の個別商品ページにOGPメタデータをつけてイケてるブログカード貼れるサイト作った
秋月電子通商、お盆で秋葉原の店舗がリニューアルしましたね。たまげた。
そんなことにはあまり関係ないが、秋月電子通商のオンライン販売ウェブサイト、まさに電子部品のデパートみたいで見ているとオラなんだかワクワクするのですが、「このイケてる商品のリンクをはてなブログに貼ろう」とすると、こんな感じでちょっと残念です。
せっかくの商品の魅力が台無しなので、見栄えがよくなるよう、具体的に言うとOGPのメタデータを埋め込むサイトを作りました。
使い方（はてなブログ）
秋月電子の個別商品ページのURLが
http://akizukidenshi.com/catalog/g/gM-07385
だとしまして、これをはてなブログに貼ると
となります、これがはてなブログの「はてなブログカード」＋秋月電子の商品ページのメタデータでの表現です。
さて、秋月電子の個別ページのURLの前に、今回用意しました「http://akizukidenshi-ogp-injector.dtpwiki.jp/」を付けまして、
http://akizukidenshi-ogp-injector.dtpwiki.jp/http://akizukidenshi.com/catalog/g/gM-07385
とすることで、OGPに対応したメタデータが埋め込まれたページができるので、それをそのままはてなブログに貼ると、
akizukidenshi-ogp-injector.dtpwiki.jp
こうなります。商品の写真が表示され、商品の詳細説明が読めるので、「どらどら、サイトに行ってみようかな？」となりそうな雰囲気だと私は思います。
TwitterでもOGPでTwitter Card
Twitterにインジェクタを通したURLを貼ると、Twitter Card展開してくれて、商品画像が出てくれるのでうれしい。
Facebookはむずかしい
OGPといえばFacebookですが、FacebookのOGPパーサは割と厳格に解釈するので、今回のインジェクタのように本来のURLを指示したまま別のページを作るのはNGでした。og:urlのドメインを秋月電子通商からインジェクタのドメインに差し替えてしまえばいいのでしょうが、さすがにそれはいかんと思う。
インジェクタのウェブサイト
あまりユーザインタフェースいらない仕組みなんですが、とりあえず作ってあるので、ブックマークするならこちらをどうぞ。
akizukidenshi-ogp-injector.dtpwiki.jp
ギャラリー
使用前・使用後の比較画像です。
関係ないが
印刷関連の一般社団法人JaGraっていうところが印刷関連の動画を配信する「ジャグラBB」っていうサイトを持っていまして、新着動画がわかりにくいのでRSSを生成するやつを8年前作ったわけだけれども、
印刷展示会（IGAS）のときJaGraのブースがあったので名刺出して「せっかくの動画サイトなんで、RSSあったほうがいいですよ」とか言うたりしたが未だにジャグラBBにはRSSが付かないので、こういうのは外部の人間が便利だーとか言っても変化がないものである。
今回の秋月電子のサイトにOGPメタデータが付いていたらいいのにな、でも付いていないから野良で付けるのです、というのもこのままになりそうだなあと思いました。
そういえば、マルツもOGP出ていない
きりがない
