This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

マークアップにschema.orgを利用してGoogleフレンドリーなページを作成しよう

      2015/04/13

Googleのリッチスニペットで知られているスキーマを利用して商品詳細ページをマークアップする方法をご紹介します。ここではメンズファッションサイトを例にしたいと思います。

製品情報について
主に製品情報には”ブランド名、商品名、商品画像、価格、SKU品番、レビュー”で構成されています。

プロパティについて
上記要素に加え、よく使うと思われるプロパティは下記の通りです。

Property Type 詳細
name Text 商品名
image URL 商品画像
description Text 商品説明
brand Text ブランド名
review Review 商品レビュー
sku Text SKU品番
※Googleはブランドや商品ごとに、少なくとも1つのID(SKU品番など)を含むことを推奨しています。
price Number 価格

Enabling Rich Snippets for Products参照

マークアップ

私が担当させて頂きましたfloat GALLERY STOREはスキーマを利用してマークアップしています。
http://float-store.com/

EC担当の方で興味がございましたら、お気軽にご連絡ください。

 - HTML・CSS・Javascript, Tips

  関連記事

LPで使えるjQueryアニメーションボタン

LPでgifアニメーションボタンが一時流行りましたが、ボタンを作るのは結構時間も …

RSS feedのエラーチェック

WordPressのfeedを使ってニュース記事を表示させていたのですが、エラー …

ECサイトで使いたい!カウントダウンをjavascriptで実装する

新作商品販売まで後◯◯日!のようなカウントダウンをjavascriptで実装する …

各ショップカートAPIでGoogleアナリティクスのeコマースを設定するには

旧アナリティクスからユニバーサルアナリティクスに変更する時は色々と注意点がありま …

スクロールしてYouTubeを自動再生する方法

YouTube動画付近までスクロールすると自動再生する方法をご紹介します。 DE …

jQueryで背景画像をフェードイン・フェードアウト

jQueryで背景画像をフェードイン・フェードアウトする方法の覚書です。 [cr …

【ECサイト】javascriptで出荷日時を自動で表示する方法

Amazonをはじめ、多くのオンラインショップで即日配送を実施されてますよね。 …

レスポンシブWebサイトでjQueryでブレイクポイントを判定する方法

レスポンシブWebデザイン制作でPCではjsライブラリを使いたいが、SPでは使い …

instagramのuser idを取得する方法

※2016.09.08追記 こちらのサイトのテキストボックスにuser名を入力す …

よく使うCSSジェネレーターと参考サイト

よく使うジェネレーターと参考サイトを自分用にまとめました。 ・グラデーションジェ …