読者です 読者をやめる 読者になる 読者になる

M.C.P.C. (Mamesibori Creation Plus Communication)

印刷屋から五反田のWeb屋に転職したCLのブログです。

秋月電子通商の個別商品ページにOGPメタデータをつけてイケてるブログカード貼れるサイト作った

秋月電子 電子工作

github.com

秋月電子通商、お盆で秋葉原の店舗がリニューアルしましたね。たまげた。

そんなことにはあまり関係ないが、秋月電子通商のオンライン販売ウェブサイト、まさに電子部品のデパートみたいで見ているとオラなんだかワクワクするのですが、「このイケてる商品のリンクをはてなブログに貼ろう」とすると、こんな感じでちょっと残念です。

akizukidenshi.com

せっかくの商品の魅力が台無しなので、見栄えがよくなるよう、具体的に言うとOGPのメタデータを埋め込むサイトを作りました。

使い方(はてなブログ

秋月電子の個別商品ページのURLが

http://akizukidenshi.com/catalog/g/gM-07385

だとしまして、これをはてなブログに貼ると

akizukidenshi.com

となります、これがはてなブログの「はてなブログカード」+秋月電子の商品ページのメタデータでの表現です。

さて、秋月電子の個別ページの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展開してくれて、商品画像が出てくれるのでうれしい。

f:id:C_L:20150911024602p:plain

Facebookはむずかしい

OGPといえばFacebookですが、FacebookのOGPパーサは割と厳格に解釈するので、今回のインジェクタのように本来のURLを指示したまま別のページを作るのはNGでした。og:urlのドメイン秋月電子通商からインジェクタのドメインに差し替えてしまえばいいのでしょうが、さすがにそれはいかんと思う。

インジェクタのウェブサイト

あまりユーザインタフェースいらない仕組みなんですが、とりあえず作ってあるので、ブックマークするならこちらをどうぞ。

akizukidenshi-ogp-injector.dtpwiki.jp

ギャラリー

使用前・使用後の比較画像です。

f:id:C_L:20150911022518p:plain

f:id:C_L:20150911022525p:plain

f:id:C_L:20150911022532p:plain

f:id:C_L:20150911022541p:plain

関係ないが

印刷関連の一般社団法人JaGraっていうところが印刷関連の動画を配信する「ジャグラBB」っていうサイトを持っていまして、新着動画がわかりにくいのでRSSを生成するやつを8年前作ったわけだけれども、

blog.dtpwiki.jp

blog.dtpwiki.jp

印刷展示会(IGAS)のときJaGraのブースがあったので名刺出して「せっかくの動画サイトなんで、RSSあったほうがいいですよ」とか言うたりしたが未だにジャグラBBにはRSSが付かないので、こういうのは外部の人間が便利だーとか言っても変化がないものである。

今回の秋月電子のサイトにOGPメタデータが付いていたらいいのにな、でも付いていないから野良で付けるのです、というのもこのままになりそうだなあと思いました。

そういえば、マルツもOGP出ていない

www.marutsu.co.jp

きりがない