ご依頼を受けてカラーミーショップのリニューアルに勤しんでいました。
見た目のデザインは変更せずに、テンプレート改善(表示速度の改善(Core Web Vitalの評価改善) や今後のメンテナンス性の向上など)を目的としたリニューアルです。
テンプレートリニューアルでSEO評価を上げたい
カラーミーショップ(PRリンク)はテンプレート(無料/有料)を自分で用意してショップ作成をするわけですが、 テンプレートというものは万人向けに作るため、見た目のデザインはシンプルになりがち&色々な用途に対応するため様々な機能を実装させます。
今回のご依頼は主にSEOの改善を望まれたものでしたが、SEOなんて単純に解決できるものではなく検索エンジンによるサイトの総合評価としか言いようがないので、簡単に「これをやればOKです!」と言えないのですが、参考までに今回は何をどうしたかを書き残しておくことにします。
リッチリザルトの対応
検索結果に商品価格や在庫状況なども併記してくれるリッチリザルト。
直接的なSEO効果は否定されていますが、検索結果で目を引くことからクリック率は上昇するのではと考えています。
Googleがリッチリザルトテストツールを公開しているので、リッチリザルトに対応できているかは直ぐに確認できます。自店がリッチリザルト対応かどうか分からない方は一度お確かめ下さい。 →リッチリザルトテスト
カラーミーのテンプレートは、困ったことに「円」とか「(税込)」とかも含めた値が変数{$price}で出力されているためそのままリッチリザルトに使うことができません。
ほかにも色々加工が必要な変数があるのですが、頑張ってリッチリザルト対応の書式に変更します。
最終的には商品だけでなく、5種類のリッチリザルトに対応させました。
速度表示の改善
PageSpeedInsightsやLighthouseで評価を上げるのなら、一番手っ取り早いのは画像の見直し。一番効果が出るのはJavaScriptの見直しです。JSが原因の4割と言われています。
テンプレートのカスタマイズではheadタグの中身までは編集できないので、使われていないcssやjsを削除することはできません。画像をwebPに置き換えたりもできません。
なので出来る範囲のことをやります。
画像の最適化
カラーミーの公式発表で「10月上旬に画像の最適化を行い表示速度をアップする」と言っていました(https://shop-pro.jp/news/2010-image-optimisation/)が、まだ実施されていないようですので、まずは画像のサイズダウン。私はコマンドラインで操作するのでjpegoptimとoptipngで一括処理します。(普通は対応ソフトを探してください。)
Linuxユーザーなのでmacやwindowsでも同じコマンドなのかは分かりませんが、多分同じでしょう。
$ cd (画像フォルダ)
$ find . -name "*.jpg" -exec jpegoptim {} +
$ find . -name "*.png" -exec optipng {} +
findの後ろの「.」は現在のフォルダを意味しています。
今回ファイル名で検索→処理していますが、ファイルタイプで検索する(もしくは両方)方法もあります。
最後を+ではなくバックスラッシュにする書き方もありますが、この場合だと結果は同じです(個別に処理するか一括処理するかが変わります)。
Lazyload
Googleは画像の遅延読み込みにIntersection Observer推奨ですが、今回のところはお馴染みのLazyload.js。ファーストビューで出てこない画像全てに設定します。
欲を言えばトップページのスライドにも使いたかったのですが、それをするとお客様が自由に管理画面からスライド差し替えできなくなってしまうので断念。
深すぎる階層をなくす
小さいコンポーネントをたくさん作ってテンプレートを組み立てるのは楽ですし私もよくやるんですが、「深すぎるDOM階層は計算に時間がかかる!」とGoogleさんに怒られます。今後のご依頼主様の編集作業が楽になることも考えて、できるだけすっきりとした構造に作り変えました。
モバイルフレンドリー
もはや常識レベルで、サイト作るならスマホ対応です。今回、モバイル対応は元々できていたので特に手を施す必要はありませんでした。
コンテンツの量と歴史
いずれも問題ないレベルだったので、今後も商品登録や編集を続けていってくださればと願います。
結局どうなった


表示速度に関しては、予想していたよりも改善できたので本当にホッとしました。これぐらいしか直ぐに目に見える成果ってないですし。
肝心なのは、今回の措置で本当にアクセスが増えて売上が増えるのかということなのですが、こればかりは何ヶ月かあとにショップ様に確認してみないと分かりませんのでしばらくモヤモヤします。折をみて聞いてみたいところです。
カラーミーショップ専用のテンプレート
SEO Plusテンプレートというテンプレートも販売しています。
リッチリザルト用の構造化データ自動生成、内部リンクの充実化など、基本的なSEO対策が標準でできているテンプレートですので、よければお試しください。
個別のネットショップの制作やカスタマイズ等、ご依頼もお受けしています。(お問い合わせ)