java scriptでBASEショップに構造化データを生成させる

Base

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

  • ひたすら商品数を増やす
  • SNSでとにかくリンク貼りまくる
  • 自力でテーマカスタマイズしてSEO面の性能を高める

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

弊社でデザインテーマの制作やカスタマイズのご依頼をお受けするときも、可能な範囲で性能アップを施しますが、その中の1つが「構造化データ」の設置です。

構造化データは、リッチリザルトを表示させるためには必須ですし、クローラーが商品情報を認識するためにも役にたっています(と思います多分)。リッチリザルトについては「構造化データに関する記事」をご確認ください。

スポンサーリンク

JSON-ldで構造化データを表示したい

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

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

カラーミーショップ専用のJSON生成ファイル販売中 → 「productJSON for カラーミーショップ

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

ところが、「java scriptで構造化データを生成してもクローラーは認識してくれる」と、あちこちのブログに書かれていたので(しかも4年前とか、、 不勉強が露呈)、早速BASEショップに構造化データJSONを生成させるjava scriptを記述することにしました。とりあえず、先日ショップ制作に携わった「Noweee」様のページに導入。

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

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

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

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

  と入力すれば

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

なので、加工が必要な変数だけ先に加工しておき、そのままで使用できる変数はそのままjsonに放り込むことにします。

たとえば商品価格の変数で一緒に出力される\が邪魔なのでそれを加工するとして、

<script>
    const originPrice = '{ItemPrice}';
    // 数字以外を削除して、後ろに「.00」をつける
    const newPrice = originPrice.replace(/[^0-9]/g,"") + '.00';
</script>

こんな感じで加工が終わったら、それらをjava scriptで生成させる。

<script>
    // ここまでに変数加工終わってるとする
    // jsonの中身を作る
    const structure_data = '{"@context":"https://schema.org","@type":"Product","name":"{ItemTitle}","price":"' + newPrice + '"。。。}';

    // scriptタグをつくる
    const script = document.createElement('script');

    // 属性書く
    script.setAttribute('type', 'application/ld+json');

    // さきほど作った中身を挿入
    script.textContent = structure_data;

    // 任意の場所に生成
    document.head.appendChild(script);
</script>

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

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

カスタマイズお受けします

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

構造化データの追加だけなら3,300円(税込)でお受けできるのでお問い合わせください。

ミフネWEB
タイトルとURLをコピーしました