Java Scriptで構造化データを生成させる

BASEのテンプレート制作やカスタマイズのご依頼をお受けするとき、実施するようにしている作業の1つが「構造化データ」の設置です。(2022年現在、BASEのオフィシャルテーマ利用であれば構造化データを生成しているようです)

BASEは「簡単さ・手軽さ・初期コスト無料」と引き換えにSEO面が弱いので、少しでも多く検索トラフィックを獲得しようと思うなら、

  • ひたすら商品数を増やす
  • とにかく自社ブランドを確立する(会社名、ブランド名で検索してもらえるようになるまで)
  • 自力でテーマカスタマイズしてSEO面の性能を高める

などの対策が必要となります。

構造化データはリッチリザルトを表示させるためには必須ですし、クローラーが商品情報を認識するためにももしかしたら役にたっています。

リッチリザルトについては「構造化データに関する記事」をご確認ください。

構造化データをJavaScriptで生成しても良い

構造化データは、HTMLタグに1つずつitemプロパティを書き込むmicrodata形式と、scriptタグを使用してまとめて記述するJSON-ld形式がありますが、Googleはjson-ldの使用を推奨しています。

BASEだけでなく、カラーミーショップらくうるカートなどの制作でも当然構造化データは設置しますが、これらのテンプレートはphpまたはpythonを使って変数を加工できるので、JSON-ldの生成もさほど難しいものではありません。

しかしBASEは、そのままだと使用しづらい変数が多く、microdataで書くしかないものだと思っていました。

ところが、「java scriptで構造化データを生成してもクローラーは認識してくれる」と、あちこちのブログに書かれていました、、(しかも4年前とか、、 不勉強が露呈)

早速、先日ショップ制作に携わった「Noweee」様のBASEに試験導入。

Noweee BASEショップ
Noweee BASEショップ

BASEの変数をjava scriptで加工してまとめてJSON形式で出力する

念の為に試してみたところ、変数をそのままscriptタグに入れても変換されて出力されます。

(例)
  <script>
   const name = '{ItemTitle}';
  </script>

  と入力すれば

  <script>
    const name = '商品名';
  </script>
 
  で出力される

なので、加工が必要な変数だけ先に加工しておき、そのままで使用できる変数はそのままjsonに放り込んでしまえば良さそうです。

最後にリッチリザルトテストで確認して、「このページはリッチリザルトの対象です」と表示されればOKです。

Googleリッチリザルトテストの結果
リッチリザルトテスト

リッチリザルトの自動生成コードを販売しています

変数だけで作れるなら、「productJSON for カラーミーショップ」のようにコピペ用ファイルにして販売できるのですが、BASEに関してはショップをどう作っているかによって、個別に対応しないと無理そうだったので諦めました。

一度諦めていたのですが、ちょっと考えれば出来るじゃないかと反省して、BASE用のリッチリザルト自動生成コードを作りました。コピー&ペーストだけで出来るので良かったら買ってください。

BASE (ベイス)

BASEロゴ

BASEは初期コストゼロで始められるネットショップ作成サービス。今すぐネットで販売したい方、SNSなど独自の集客手段を持つ方におすすめします。

BASEオープンサポートに無料登録いただくと、有料テーマの無償利用(1つのみ)・広告ロゴ非表示をご利用いただけますので是非ご活用ください。

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。