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

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

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

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

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

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

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

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

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

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

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

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

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

（例）
  <script>
   const name = '{ItemTitle}';
  </script>

  と入力すれば

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

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

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

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

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