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

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

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

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

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

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

setAttributeでitempropの値に追記する

価格の構造化データは数字だけである必要があるので、

[highlight_markup]<p><span itemprop="price">1000</span>円</p>[/highlight_markup]

が一般的だが、

[highlight_markup]<p itemprop="price" content="1000">1,000円</p>[/highlight_markup]

でも一応認識してくれる。

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

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

結果:認識されない

結果、ブラウザで確認すると
[highlight_markup]<p itemprop="price" content="1000″ id="nedan">1,000円</p>[/highlight_markup]

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