簡単に。
OGP周り
ogpは各ページの<head>内にぶち込むよりもモジュール化して読み込ませた方が楽。モジュール内でifが使えるから要所要所で切り替えて。
以下サンプル
<{if $page.type == 'top'}>
<meta property="og:type" content="website">
<{else}>
<meta property="og:type" content="article">
<{/if}>
<{if $page.type == 'item'}>
<meta property="og:image" content="<{$item.image_L}>">
<{else}>
<meta property="og:image" content="【共通画像】">
<{/if}>
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="summary_large_image">考え方というか
確実にページ別の画像を持ってるのは商品詳細ページだけなのでこうするのが無難。
トップページ、商品カテゴリーページは管理画面上で画像の登録ができるけど、ogp用って割り切っても、作ったときは良くても移管したときに訳わからんくなるし、画像をサーバーにアップして条件分岐で切り替えたほうがむしろ楽なんじゃないかと思う。
そういうわけで、凝ったことをしたいなら条件分岐を掘り下げていくのがいいと思うし、長期的に見たらそこまで凝ったことはしないほうがいいように思う。
注意というか
検索エンジン用のdescriptionよりもogpのそれは最大文字数が少ない（80～90文字）んで、このまま使うとどちらかを諦める必要がある。
とは言っても、検索エンジン用もPC（130文字程度）とスマホ（80文字程度）で違うんで、スマホで統一したらいい感じに収まる。
あと、<head>に追記すること。
<head prefix="og: http://ogp.me/ns#">ちゃんと書けばちゃんと表示されるけど上手くいかないこともあるので、本家謹製のチェッカーを使うといいかも。エラーだったら原因書いてくれる。
X
cards-dev.twitter.com
シェアデバッガー - Meta for Developers
developers.facebook.com
Facebookの方は2回目以降の確認時、「もう一度スクレイピング」をクリックしないと反映されない。
コメント