「SEOに着手したいが、管理画面のどこを触ればいいのか分からない」。Shopifyでストアを公開して数か月、検索からの流入を増やしたいと考えた時点で出てくる状態です。
検索して見つかる手順書は、Shopify以外のサイトにも当てはまる一般的な内容が中心です。上から順に試そうとすると、管理画面に該当する入力欄が見つからない項目に行き当たります。
Shopifyでは、ストア側で編集できる項目と、仕様として固定されている項目の線が最初から引かれています。線の位置を知らないまま一般的な手順を当てると、変えられない項目の調べものに工数を使うことになります。
この記事では、その線がどこにあるのかを最初に示します。そのうえで、線の内側にある画面を順にたどります。触れる範囲が決まれば、どこから着手するかも決められます。まずは編集できる項目から順に確認しましょう。
- 1.Shopifyには編集できる項目とできない項目が、仕様として決まっている
- 1-1. 自分では変更できない項目
- 1-2. 自分で変更できる項目
- 2.メタタグはページの種類ごとに設定画面が異なる
- 2-1. ホームページのメタタグは他ページと別の画面にある
- 2-2. 商品・コレクション・ブログは各編集画面から設定する
- 2-3. 未設定のまま自動生成に任せてよいページを見極める
- 3.テーマが出力していれば構造化データの追加はいらない
- 3-1. 確認せずに追加すると、同じ種類の構造化データが重複して出力される
- 3-2. 出力されている型を自分のストアで確認する
- 3-3. 自動生成のままでも問題が出にくいページの条件
- 4.速度を左右するのは画像ではなくテーマとアプリの読み込み
- 4-1. 画像の圧縮と形式変換はShopify側で完了している
- 4-2. アプリは機能と読み込みの重さを比べて残すか決める
- 4-3. テーマ側の読み込みは動画・フォント・セクション数の見直しから始める
- 4-4. 速度改善の効果はスコアではなくフィールドデータで判断する
- 5.まとめ
1.Shopifyには編集できる項目とできない項目が、仕様として決まっている
線の位置は、管理画面を上から順に開いても見えてきません。固定されている側から先に確認すると、手順書のうち飛ばしてよい項目が決まります。
1-1. 自分では変更できない項目
一般的なSEO手順の最初に出てくるURLの設計は、Shopifyでは動かせません。階層は仕様として固定されていて、書き換えられるのは末尾のハンドルだけです。
商品ページは /products/、コレクションページは /collections/ の下に必ず入ります。このディレクトリ名を変える設定も、階層をひとつ減らす設定も用意されていません。手を入れられるのは、その後ろに続く商品名やコレクション名にあたる文字列です。
同じ商品が複数のURLで開く状態も、仕様に含まれます。コレクションから商品ページへ進むと、URLは /collections/○○/products/△△ の形になります。直接開いた /products/△△ と中身が同じページが、2つ並ぶ形です。
重複として手を打ちたくなりますが、Shopify側で /products/△△ を正規のURLとして示すタグが自動で入ります。sitemap.xmlも自動で生成され、掲載するページを選ぶ操作はありません。
URL構造の見直しと正規URLの指定は、着手の対象から外れます。この2つを外すと、残る作業は管理画面から入力できる範囲に絞られます。
1-2. 自分で変更できる項目
編集できる項目は、テキスト、URLのハンドル、テーマのコードの3種類に分かれます。SEOの実作業はこの範囲に収まります。
ハンドルを書き換える画面には、旧URLから新URLへのリダイレクトを同時に作る仕組みがあります。保存前に「URLリダイレクトを作成する」が選択されていることを確認してください。そのまま保存すれば、外部からのリンクが切れません。
robots.txtは、テンプレートを追加して既定の内容を上書きする形になります。公開中のテーマを複製し、複製側で書き換えて表示を確かめてから差し替える手順を前提としてください。
3種類のうち、入力欄から書き換えるだけで終わるテキストが最も手数の軽い作業です。コードを触る作業は最後に回しても、SEOの手直しは前に進みます。
2.メタタグはページの種類ごとに設定画面が異なる
メタタグの入力欄は、管理画面の1か所にまとまっていません。ページの種類ごとに置き場所が分かれていて、最初につまずくのはトップページです。
2-1. ホームページのメタタグは他ページと別の画面にある
トップページのタイトルとメタディスクリプションは、［オンラインストア］＞［各種設定］の「ソーシャルシェア画像とSEO」から設定します。トップページを編集する画面には、この欄がありません。
この欄は、ストア全体の設定と同じ画面に置かれています。テーマのカスタマイズ画面を探しても入力欄には行き当たらないため、ここで作業が止まることがあります。
「ソーシャルシェア画像とSEO」欄に入力した値は、検索結果に出る見出しとブラウザのタブの両方に反映されます。トップページは店名で検索したときの入口になるため、店名だけで終わらせず、何を扱う店かが分かる文字列を入れます。
未設定のままだと、テーマが用意した形式が使われます。ストア名の後にページのタイトルが続くか、その逆の並びになります。
対象は1ページだけで、書き換えも1回で終わります。着手の初日に片づけられる作業です。
2-2. 商品・コレクション・ブログは各編集画面から設定する
商品、コレクション、ブログ記事は、それぞれの編集画面の下部にある「検索エンジンでの表示」から、［ウェブサイトのSEOを編集する］をクリックして設定します。入力欄までの経路は3つに分かれますが、開く場所以外の操作は共通です。
商品：［商品管理］から対象の商品を開く
コレクション：［商品管理］＞［コレクション］から対象を開く
ブログ記事：［オンラインストア］＞［ブログ記事］から対象を開く
いずれも画面を下までスクロールし、同じセクションから入力します。固定ページも同じ形式です。
ブログは記事とブログ自体で設定箇所が分かれます。ブログ側は［ブログを管理］の画面から編集するため、記事だけ埋めると一覧側が空のまま残ります。
入力できるのはページタイトルが最大70文字までで、検索結果で切れないよう60文字以内が推奨されています。メタディスクリプションは160文字が目安です。
商品とコレクションには一括編集ツールがあり、［列］をクリックすると、表に出す項目を選べます。
ブログ記事と固定ページは一括編集ツールがないため、件数が多いほど作業時間がかかります。着手の前に、対象の件数を把握しておきます。
2-3. 未設定のまま自動生成に任せてよいページを見極める
全ページを埋める必要はありません。検索から入る想定のないページは、自動生成のままにします。
優先するのは、検索からの流入が見込めるページです。取り扱いカテゴリのコレクションページ、比較検討されやすい主力商品、集客目的で書いたブログ記事がここに入ります。
後回しにできるのは、在庫が短期間で入れ替わる単品ページです。公開期間が数週間で終わるページに文字を入れても、成果が出る前にページが消えます。
対象外になるのは、カート、チェックアウト、サイト内検索の結果ページです。これらはデフォルトのrobots.txtでクロール対象から外れているため、入力しても検索結果には出ません。
メタディスクリプションは、未設定でも自動で作られるとは限りません。ページのソースで description のタグが出ているかを確認し、出ていなければGoogleが本文から抜き出した文章が検索結果に並びます。
その場合は、メタディスクリプションを埋めるより、商品説明の冒頭を直すほうが早く済みます。
埋める、後回し、対象外の3つに仕分けると、初回に着手するページが確定します。全ページを一度に対象とする作業から、初回に取り組む範囲が明確な作業に変わります。
3.テーマが出力していれば構造化データの追加はいらない
構造化データは、アプリを入れれば足せる項目に見えます。ところが足す前に確認しておく前提があり、そこを飛ばすと出力が二重になります。
3-1. 確認せずに追加すると、同じ種類の構造化データが重複して出力される
構造化データを追加する前に、テーマが何を出しているかを確認します。確認せずにアプリで追加すると、1つのページに同じ種類の構造化データが2つ出力されます。
商品ページとブログ記事に、構造化データの記述であるJSON-LDを持つテーマは少なくありません。何がどのページに出ているかはテーマごとに違うため、一般論では判断できません。
そこにアプリの出力が重なると、商品ページに商品の型が2つ並びます。検証ツールは両方を読み取り、値の食い違いや必須項目の欠けをエラーとして返します。
値がずれていれば、どちらか一方はページに表示されていない情報になります。画面に表示されない情報の構造化データは、正確であっても追加しないようGoogleが求めています(参照：Google検索セントラル)。
追加作業の前に確認を挟めば、この手戻りは起きません。最初に開くのは検証ツールです。
3-2. 出力されている型を自分のストアで確認する
Googleのリッチリザルトテストに自分のストアのURLを入れると、その場で出力されている型が一覧で出ます。
トップページ 、主力商品の商品ページ、ブログ記事1本
この3ページ分を見れば、テーマの出力範囲はひととおりつかめます。足りない型もここで分かります。
ページのソースを開き、「application/ld+json」(構造化データの記述形式)で検索する方法もあります。記述が2か所以上見つかれば、重複が起きている状態です。
Search ConsoleのURL検査ツールでも確認できます。Googleが実際に読み取った内容が表示されるため、公開後の状態を見るときに向きます。
調べた結果は、型と対象ページの対応をメモに残します。テーマを触るときやアプリを入れ替えるときに、同じ手順を繰り返さずに済みます。
3-3. 自動生成のままでも問題が出にくいページの条件
確認して商品情報とサイト情報の型が出ていれば、追加の実装は見送れます。テーマの出力で足りるかどうかは、狙っている検索結果の見え方で決まります。
テーマの出力に含まれないことが多いのは、レビューの星、FAQ、パンくずの型です。これらを検索結果に出したい場合だけ、追加を検討します。
レビューアプリを使っているストアでは、星の型をアプリ側が出しているケースがあります。追加を考える前に、アプリの出力を確認します。
型を足しても、検索結果の見え方が変わるとは限りません。リッチリザルトテストに沿って正しくマークアップしても、表示されない場合があるとGoogleが明記しています(参照：Google検索セントラル)。
追加実装は、工数と見返りを比べてから決める作業になります。
足すならアプリより先に、テーマ側で書き足す選択があります。アプリを増やさずに済み、出力の重複も起きません。
ただし、テーマ側の記述はテーマを入れ替えると引き継がれません。ページごとに入力したメタタグはストア側のデータとして残るため、テーマを変えたときに作業が戻るのは構造化データだけです。
4.速度を左右するのは画像ではなくテーマとアプリの読み込み
速度が遅いと分かったときに、まず疑われるのは画像です。Shopifyでは画像まわりの処理が配信側で済んでいるため、時間を使う先は別にあります。
4-1. 画像の圧縮と形式変換はShopify側で完了している
アップロードした画像は、閲覧しているブラウザに応じてWebPやAVIFで配信されます。圧縮と形式変換を目的にアプリを足す意味は薄くなります。
GIFもファイルサイズを抑えるため、アニメーションWebP形式に自動で変換されます。解像度の高い画像をそのままアップロードしても、配信の段階で軽い形式に置き換わります。
それでも画像側に残る作業が2つあります。1つは、必要以上に大きな寸法のファイルを持ち込まないこと。もう1つは、テーマが出力するタグの確認です。
確認するのは2点です。画像がimage_tagで出力されてsrcsetが付いているかどうか、そしてファーストビューの画像に遅延読み込みが掛かっていないかどうかです。後者は表示の遅れとして体感に直結します。
画像を作り直しても、速度の数値が動かないことがあります。画像よりもアプリやテーマの読み込み量を先に確認したほうが、速度低下の原因に早く辿り着けます。
4-2. アプリは機能と読み込みの重さを比べて残すか決める
使っていないアプリの削除が、いちばん確実に効果的です。残すアプリは、使っている機能と読み込みの量を並べて判断します。
テーマを書き換えるアプリは、削除の前に追加の手順が必要かどうかを確かめます。必要な場合は、［設定］＞［アプリ］＞［サポートを受ける］から開発者に問い合わせる形になります。
全ページで動くアプリと、必要なページだけで動くアプリがあります。前者から先に見直します。
削除する前に、設定内容と連携先を記録しておきます。再導入が必要になったときに、同じ設定を最初から組み直す手間を省けます。
4-3. テーマ側の読み込みは動画・フォント・セクション数の見直しから始める
テーマ側で先に見るのは3か所です。ファーストビューの動画、Webフォントの本数、そしてトップに並べたセクションの数。
自動再生の動画は、読み込む量が大きくなります。静止画に替えるだけでも、最初の表示までの時間が変わります。
フォントは、ファミリーとウェイトの数だけファイルが増えます。見出しと本文で2種類までに絞ると、読み込むファイルが減ります。
トップのセクションは追加しやすく、下部まで見られていないものが残りがちです。アクセス解析でスクロールの到達を見てから外します。
スライダーやポップアップは、JavaScriptを伴います。これらを1つ削減するだけでも、読み込みの負荷は下がります。
3か所とも、テーマの設定画面から元に戻せる変更です。コードを触らずに試せる範囲から着手します。
4-4. 速度改善の効果はスコアではなくフィールドデータで判断する
計測ツールのスコアは、同じページを続けて測っても動きます。判断に使うのは、実際に訪問した人の環境で計測されたフィールドデータです。
スコアは1回の計測結果で、回線や端末の条件で上下します。実測データは一定期間の訪問をまとめた数値のため、環境の差が平準化されます。
管理画面には2種類のレポートがあります。オンラインストアの速度レポートはシミュレーション環境での計測で、ウェブパフォーマンスレポートは実際の訪問者から集めたデータです。前後を比べるときに見るのは、ウェブパフォーマンスレポートです。
数値の反映には時間差があります。施策の翌日に動かなくても、効果がなかったとは言い切れません。
着手する前に、現状の数値を控えておきます。比べる相手がないまま作業を進めると、改善したかどうかを判断できません。施策前に必ず現状値を記録しておきましょう。
5.まとめ
この記事は仕様の話から順に進めましたが、実際に手をつける順番は違います。工数の軽さと、効果が確かめられるまでの早さで並べ替えます。
最初はメタタグです。未設定の欄を埋める作業は入力だけで終わり、対象ページの数が決まれば当日中に片づきます。
次にアプリとテーマの読み込みです。使っていないアプリを削り、動画とフォントとセクションの数を見直します。数値の変化として現れるまでに時間がかかるため、着手前の数値を控えてから始めます。
最後に構造化データです。出力されている型を確認したうえで、不足していて、かつ検索結果に出したい型だけを足します。
3つのうち2つは、コードを触らずに終わります。まずは自分のストアで、どのページの欄が空いているかを確認するところから始めましょう。
