入ってなかった。
はじめに
BASEのタグを使いながら<script>を構築していくことになるんで、「HTML編集」で組んでないと多分無理。テンプレートの自作をする気がない人は既存テンプレートをぶっこ抜いて使いまわしてください。やっていいか知らないけど。
構造化のメリット
いわゆるSEOはざっくり言えばWEBサイトを検索エンジンに登録して検索結果上位に表示させようという取り組み。上位表示されるということはWEBサイトとかWEBページに価値があるってことなので良い。
構造化はWEBサイト、WEBページの内容すら検索エンジンに登録するってことで、例えば検索結果にトップページが表示されたときに合わせて下層ページの一覧（一部）が出るとか、FAQが出るとか、記事のサムネイルが表示されるとか、SEOをもっとリッチにした感じのやつ。構造化データ自体は結構前から言われてたけど、ここしばらくで検索結果への反映が結構顕著になってきた感じがある。
放っておいても勝手に解析してくれることもあるけど、予め仕込んでおけばクロールされたときに取得してくれるので手間が省ける。
商品情報を仕込めば在庫状況とかを表示させることもできる。マークアップができていればマーチャントセンターに登録しなくても「ショッピング」にも表示されるようになってるらしい。ということで、SEO強化の他にお金をかけずに露出を増やす効果も見込める。
設定しないことにリスクはないけど、やっておけば露出機会が増えてうれしいよねっていうやつ。
マークアップは面倒だけど難解ではないので知ってしまえばどうということはなく、でもやっぱりめんどくさいしまだまだ一般人に馴染みのないものだから、提案の一つとしてうまいこと唆せば飯の種にできる可能性もあるといえばある。
BASEについて
BASEには構造化は仕込まれてない。楽天市場とかメルカリは多分あれは勝手にやってるんだろう、サービス向上の意欲を感じるけど、BASEのコンセプトはそっちじゃないように思う。低コストでショップを解説することに終始してる気がする。ということで、自前で構造化のなんちゃらを仕込む必要がある。
構築にあたって
BASEは管理画面上において、1ページの中にWEBサイトのすべてを突っ込む形になる。用意されているページが少ないので混乱することはない、はず。全体を把握して落ち着いてかかれば問題ない。共通部分は使いまわし、個別のものはblockで切り分ける。そうやって進める。表示内容はタグだけで完結させることができる（モノにもよるけど）んで、制作業においてのメリットとして、いい感じに作れたら別のBASEにも使い回せる。
構築する内容
とりあえず、構造化データの形式自体に種類がある。
トレンドというか推奨は「JSON-LD」。
で、データの内容にも種類（type）があって、記事情報とかパンくずリストとか商品情報とかFAQとか色々ある。どのページで何を設定するかを予め決めておく。複数を登録することもできる。
設置するとしたらこのあたりか。
- Organization
- Product
ほしいけど厳しい条件付き、無理っぽいのはこのあたり。
- BreadcrumbList（トップページと該当ページで2階層まで）
- FAQ（そもそも無いから手打ち）
- NewsArticle（表示してる記事情報を個別に抜けない※）
なので、仕様として大したものを付けられないわけで、だから大した手間にならない感じ。
NewsArticle
件名、本文などを個別に出力できないので、各記事に合った構造化データを組めない。
一応、RSSで全部引っこ抜いて件名と照合するようにすれば何とかなる。だけど手間がものすごいし、日付とか本文とか概要とかを抜くことができないので無理がある。
暫定版
<script type="application/ld+json">
[
{ //組織情報
"@context": "https://schema.org",
"@type": "Organization",
"url": "{IndexPageURL}",
"name": "{ShopName}",
"logo": "",
"contactPoint": {
"@type": "ContactPoint",
"email": "{ContactPageURL}",
"contactType": "Customer service",
"areaServed": "JP",
"availableLanguage": "Japanese"
}
},
{ //パンくずリスト
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "HOME",
"item": "{IndexPageURL}"
}{block:NotIndexPage},{
"@type": "ListItem",
"position": 2,
"name": "{PageTitle}",
"item": "{block:ItemPage}{ItemPageURL}{/block:ItemPage}{block:AboutPage}{AboutPageURL}{/block:AboutPage}{block:ContactPage}{ContactPageURL}{/block:ContactPage}{block:PrivacyPage}{PrivacyPageURL}{/block:PrivacyPage}{block:LawPage}{LawPageURL}{/block:LawPage}{block:BlogPage}{BlogPageURL}{/block:BlogPage}"
}{/block:NotIndexPage}]
}
{block:ItemPage},{ //商品情報
"@context" : "http://schema.org",
"@type" : "Product",
"name" : "{ItemTitle}",
"image" : [{block:ItemImage1}"{ItemImage1URL-origin}"{/block:ItemImage1}{block:ItemImage2},"{ItemImage2URL-origin}"{/block:ItemImage2}{block:ItemImage3},"{ItemImage3URL-origin}"{/block:ItemImage3}{block:ItemImage4},"{ItemImage4URL-origin}"{/block:ItemImage4}{block:ItemImage5},"{ItemImage5URL-origin}"{/block:ItemImage5}{block:ItemImage6},"{ItemImage6URL-origin}"{/block:ItemImage6}{block:ItemImage7},"{ItemImage7URL-origin}"{/block:ItemImage7}{block:ItemImage8},"{ItemImage8URL-origin}"{/block:ItemImage8}{block:ItemImage9},"{ItemImage9URL-origin}"{/block:ItemImage9}{block:ItemImage10},"{ItemImage10URL-origin}"{/block:ItemImage10}{block:ItemImage11},"{ItemImage11URL-origin}"{/block:ItemImage11}{block:ItemImage12},"{ItemImage12URL-origin}"{/block:ItemImage12}{block:ItemImage13},"{ItemImage13URL-origin}"{/block:ItemImage13}{block:ItemImage14},"{ItemImage14URL-origin}"{/block:ItemImage14}{block:ItemImage15},"{ItemImage15URL-origin}"{/block:ItemImage15}{block:ItemImage16},"{ItemImage16URL-origin}"{/block:ItemImage16}{block:ItemImage17},"{ItemImage17URL-origin}"{/block:ItemImage17}{block:ItemImage18},"{ItemImage18URL-origin}"{/block:ItemImage18}{block:ItemImage19},"{ItemImage19URL-origin}"{/block:ItemImage19}{block:ItemImage20},"{ItemImage20URL-origin}"{/block:ItemImage20}],
"description" : "{ItemDetail-origin}",
"sku" : "",
"mpn":"",
"url" : "{IndexPageURL}",
"brand" : {
"@type" : "Brand",
"name" : "{ShopName}",
"logo" : ""
},
"offers" : {
"@type" : "Offer",
"price" : "{ItemPrice}",
"priceCurrency" : "JPY",
"itemCondition": "NewCondition",
"availability": "{block:HasItemStock}InStock{/block:HasItemStock}{block:NoItemStock}OutOfStock{/block:NoItemStock}",
"url" : "{ItemRedirectUrl}"
}
}{/block:ItemPage}
]
</script>注意点とかメモとか
全ページにOrganization、BreadcrumbListを設置。商品ページにはProductを追加。
- 基本的にショップ別の手入力になる部分は除外。
- 「Organization」にはショップ情報を入れてあるので会社名とか入れたい人は手を入れる。
- 「contactPoint」は電話番号などを引っ張れないので「email」にして問い合わせのURLを貼り付け。
- 「logo」は<img>のsrcから抽出できるけど変数の受け渡しができているか謎なので空欄。
- {ItemID}はBASE上で自動的に振られるIDなのでsku、mpnは空欄。
- 商品のDescriptionは全文が出るので注意。
- ブランド名にショップ名を突っ込んでるので、都合が悪い人は削除。
頑張る人へ
検証ツールがあるのでがんばってください。
商品ページの確認は公開可能な状態まで持っていかないとできない（プレビュー画面じゃダメ）なんで、一時的なものでもいいから入力を全部終わらせておくのが吉。
残滓
ロゴの画像URL抽出を頑張ったけど諦めたやつ。
<script>
$(function resultFn(){
let logoFull = '{LogoTag}';
let logoSrc = $(logoFull).attr('src');
return{
logoSrc,
};
})
</script>
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "{IndexPageURL}",
"name": "{ShopName}",
"logo": "{{resultFn().logoSrc}}",
},
]
</script>jQuery→js、無名関数の外に変数を飛ばそうとしてるし、しかもtypeが違うし、検証しても代入されてない状態で表示されてるのでうまくいってるのかが只々謎。
まとめ
BASEは個別に書き出せるものが少なすぎる。
だからやれることが少ない。
お金かけたくないけどやれることはやれ、みたいな無茶振りが飛んできたら、とりあえず仕込めばいいんじゃないですかね。効果があるかはわからないけど。
コメント