備忘録 JSで追記したmicordataは認識されない

経緯
カラーミーショップのテンプレートでは、販売価格の変数が「円(税込)」まで含んでいるので
そのままだと構造化データ(itemprop)の値として使えない。
java scriptで変数から数字だけ取り出し、itempropの値を追記すれば良いのではと考えた

replaceで文字列から数字だけ抽出する

テンプレート側の販売価格変数は $price 。
$price は「円(税込」や「円(税○円)」のように、ショップごとに記述が分かれるので数字だけを抽出します。

const price = ' $price ' ;
const num = price.replace(/[^0-9]/g , ' ' ) ;

最後のgはglobalフラグで、条件に一致したもの全てを返す(無いと1つ目が見つかった時点で終了)。
フラグが i だと大文字小文字の区別なし。m なら複数行を検索。

setAttributeでitempropの値に追記する

価格の構造化データは数字だけである必要があるのでmicrodataで記述する場合

<p><span itemprop="price">1000</span>円</p>

が一般的ですが、

<p itemprop="price" content="1000″>1,000円</p>

のようにcontent="xxxx" でも認識してくれます。

 

そこで先ほど取得した数字(num)をsetAttributeで追加します。
仮に、itemprop のタグに id="nedan" があるとします。(<p itemprop="price" id="nedan">)

const element = document.getElementById(' nedan’ );
element.setAttibute('content’ , num );

結果:認識されない

結果、ブラウザで確認すると

<p itemprop="price" content="1000″ id="nedan">1,000円</p>

と期待通りにはなっているものの、構造化データテストで確認するとjsで生成したcontent="1000″は認識されませんでした。
残念ながら失敗。

おとなしくphpで処理する

カラーミーはsmarty(php)テンプレートなので、大人しくテンプレートを編集します。

やること自体は先ほどと全く同じで、変数$priceから数字だけを取り出します。

<{$price|regex_replace:"/[^0-9]/":""}>

構造化データのサンプルでは少数第2位まで書いてあるので、ついでに足しておきます。

<{$price|regex_replace:"/[^0-9]/":""}>.00

結論としては、jsで処理しようとせず最初からテンプレート編集した方が早いということで。