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

SEO/集客 / / SEO

経緯
カラーミーショップのテンプレートでは、販売価格の変数が「円（税込）」まで含んでいるので
そのままだと構造化データ(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で処理しようとせず最初からテンプレート編集した方が早いということで。










 
 関連投稿