[ECCUBE2]商品詳細のパンくずマークアップを作成・暫定版

暫定版というか簡易版というか。とりあえずできた。

環境

ECCUBE2.11.4

やりたいこと

SEO強化ということでJSON-LDでマークアップを入れていこうって話になった。手を入れるサイトはECCUBE+MTっていう自社ECが出始めた当初に流行った混合タイプ。ヘッダーやらなんやらを一元管理してくれてるおかげで<head>にECCUBEタグを使えない非常にめんどくさい仕様なんだけど、マークアップのjsは推奨はされどページ内ならどこでもいいらしいので助かった。

とりあえずマークアップでやりたいのは以下の通り

  • WEBサイト
  • 商品情報
  • パンくず

で、この中で一番面倒なのはパンくず。商品詳細でパンくずを作成するためにはカテゴリの取得が必要になる。

サイトの作法的な意味でのパンくずはECCUBEで生成できるので、それを応用して出力しちゃえっていう感じ。

生成(LC_Page_Products_Detail.php)

通常のパンくずリストよろしくLC_Page_Products_Detail.phpで組んでいくことになる。
該当ファイルは以下のパスに入ってる。

/data/class/pages/products/LC_Page_Products_Detail.php

既に色々書かれていて、隙間にねじ込むことになる。正直ECCUBEとかSmartyはよくわからないので、トライアンドエラーでなんとかなった感じ。ファイルを開いてパンくずリストの内容が入ってるfunction内に書く。

ここで、パンくずリストの書式を確認しておく。

Google推奨「JSON-LD」で構造化マークアップ - Qiita
検索結果でパンくずや評価などのリッチスニペットを表示させる、構造化マークアップ。Googleはこれまでmicrodataでの記述を推奨していましたが、現在JSON-LDを推奨していますね。という…

第一階層はWEBサイトのトップページなのでベタ打ちでいい。それ以降を変数やら何やらを使って取得して、整形していく。

function action() {

        ~元々色々入ってる内容~

        //商品パンくずマークアップ
        $objQuery   =& SC_Query_Ex::getSingletonInstance();
        $objProduct = new SC_Product_Ex();
        $objDb = new SC_Helper_DB_Ex();
        $arrCategory_id = $objDb->sfGetCategoryId($product_id);
        $arrCatId = $objDb->sfGetParents("dtb_category", "parent_category_id", "category_id", $arrCategory_id[0]);
        $productBreadMarkup ='{"@context": "http://schema.org","@type": "BreadcrumbList","itemListElement": [{"@type": "ListItem","position": 1,"item": {"@id": "【トップページURL】","name": "【サイト名とかトップページ名】"}}';
        $positionNum = 2;
        foreach($arrCatId as $key => $val){
            $arrCatName = $objDb->sfGetCat($val);
            $productBreadMarkup .=',{"@type": "ListItem","position": '.$positionNum.',"item": {"@id": "【フルパスいれるならドメインを書く】/products/list.php?category_id=' .$val. '","name": "' . htmlspecialchars($arrCatName['name'], ENT_QUOTES, 'UTF-8') . '"}}';
            $positionNum++;
        }
        $productBreadMarkup .=',{"@type": "ListItem","position": '.$positionNum.',"item": {"@id": "【フルパスいれるならドメインを書く】/shop/products/detail.php?product_id=' . $this->arrProduct['product_id'] .'","name": "' . htmlspecialchars($this->arrProduct['name'], ENT_QUOTES, 'UTF-8') .'"}}] }';
        $this->ProductBreadMarkup = $productBreadMarkup;
        $this->CheckItems($product_id);
        //商品パンくずマークアップ end
}

助かることに、宣言が重複してても問題なく動く。コピペして、【】部分を修正すればOK。

出力(/products/detail.php)

ECCUBEの管理画面で商品詳細のソースコードに以下の内容を書き足す。

<script type="application/ld+json">
<!--{$ProductBreadMarkup}-->
</script>

<script>も出力内容に含んじゃえばいいとは思うんだけど、jsを出力しようとするとエラーじゃないけどなんか弾かれる(多分Smartyのせい)。中身だけを作ることは問題ないっぽいんで、出力側でタグで囲う。

調べると{literal}で囲えば云々、ってあったけどうまく動かなかったので非採用。

[EC-CUBE(Smarty)]テンプレート内にJavaScriptを記述する | IT女子のお気に入りフォルダ
EC-CUBEのカスタマイズで、テンプレートに記述したJavaScriptが反映されなくて困りました。

暫定の理由

書き方が悪いのかカテゴリの階層が1つしか出ない。トップ・カテゴリ・商品の3階層になる。foreachで回してるのに何ででしょうね。まあECCUBEは多階層カテゴリを複数登録できるわけで、その辺を考えたらむしろ仕様と割り切っちゃって良いようにも思う。しかし分からんままなのでどうにかしたい。それこそ、元々のパンくず出力の方法に倣えば同じようにできるだろって話なんだけど、ベースになるものがカスタマイズ済みでそれを倣ってしまってる。元々はどうだったのかが確認できない。クリーンインストールできる環境があれば、そのうち見直そうと思う。

まあでも困る出力ではないので、これでいいっちゃいいんじゃないか。

他のマークアップの追加について

調べても「この書き方はこれ」って記事ばかりで、複数の内容を登録するにはどうしたらいいのかと困る。
複数を書くにはこちらを参照。

schema.org / JSON-LDで複数の構造化データを1つのスクリプトタグに収める方法|Enazeal Engineer BLOG
JSONで複数の構造化データを扱う時、一つのスクリプトタグ内に収めるには

だけど、<script>単位で個別に書いても問題ないらしいので、組み合わせで頑張る必要はない。下手に混ざると面倒なので、しっかり自分のものになるまでは別々に書くのが精神的に穏やかでいられると思う。

コメント

タイトルとURLをコピーしました