【初めてのSEO対策】Page Speed Boosterの使い方【Shopifyアプリ】

こんにちは、個人でShopifyを使ったオンラインショップ制作をしておりますたかぼー(@taka_forward)です。

この記事では「SEO対策」を始めるショップにおすすめのアプリを紹介します。

たかぼー

SEO対策をしたいのですが、何からはじめればいいかわかりません…

たかぼー

まずはじめに、アプリをインストールするだけでできる対策についてご紹介します…!

<この記事を読むことのメリット>
Page Speed Boosterを使った設定をすることで、ユーザビリティが上がるショップになる

Page Speed Boosterとは??

次にユーザーが開くページを予測して、次にクリックするであろうページの内容(画像など)を予め取得することでページスピードが早くなり、「ページがなかなか開かない」というストレスが軽減できるアプリになります。(例:「商品一覧ページ」をみている→(次は「商品詳細ページ」にアクセスするでしょう)→商品画像の読み込みを予めしておく)

Page Speed Boosterの使い方

上に「Boost your page speed and conversion rate in JUST 30 seconds!(ほんの30秒でページが早くなり、コンバージョンレートが改善します)」と書いてあるように、アプリをインストールするだけで設定が完了します。

(オンラインショップにおける)コンバージョンレートとは?
→アクセスしてくれたお客さんのうち何人が商品を購入したのか?という割合になります。
※CVRと省略して言われることもあり、平均して2〜3%(100人のサイトアクセスで2-3人が商品を購入する)と言われております。
詳しくは下記サイトをご覧ください。

Page Speed Boosterのインストール

①管理画面の「アプリ管理」からアプリストアにアクセス
②「Page Speed Booster」と検索し、詳細画面から「Add app」→(ページ遷移)→(そのまま)「アプリをインストール」でインストールが完了します。

「アプリをインストール」をクリックするとこちらの画面になります。

これで完了です。(簡単ですよね。)

他のアプリだと、ここから「アプリ内にある設定を変更」をしないといけないのですが、Page Speed Boosterでは必要ありません。

アプリをインストールすると、アプリを動かすためのコードが自動的に現在公開されているテーマに入ります(今回の場合はtemplateフォルダ内に「index.haloroar.liquid」ファイルができます)。アプリをインストール後、テーマを変更すると、自動挿入されたコードが変更後のテーマにはないため、アプリが機能しなくなるのでアプリのインストールしたあとはテーマを変更しないように気をつけましょう。

標準設定を変更したい場合

「アプリのインストール」を行うだけで機能するようになるのですが、予めページを読み込むまでの速度については長さを変更することができますのでここからそのやり方についてみていきましょう。

① 「How it works」をクリックしましょう

※Settingsをクリックしても同じ画面に移動します。

このピンクの枠にあるチェックボックスから設定の変更を行います。

□ Yes, I want to をクリックすることで次の設定画面が表示されます。

パソコンの画面・携帯の画面のそれぞれについて設定する画面が表示されます。

「I want to choose my own time」を選んだ場合…

自分で時間を選べるようになります。(インストール時の設定は65msです)

「When users press their mouse」を選んだ場合…

クリックと同時に読み込みが始まります。

「When the link is visible on the screen」を選んだ場合…

画面表示したら即座に読み込みが開始されます。

設定が終わったら「Save」を押して完了です!

Page Speed Boosterのよくある質問

Q
テーマによっては使えない、などありますでしょうか?
A

全てのテーマに使えると公式が回答しております。

Q
アプリをインストールしたのですが、Page Speed Insightsの点数が上がらないのですが…
A

このアプリは2ページ目以降の読み込みを改善するアプリです。
Page Speed Insightsは「入力したURLの読み込み速度がどれだけ早いか」を計測しているため、このアプリでは点数は上がりません。

Q
アプリをインストールしてからテーマを変更してしまったのですが…
A

アプリ内「Support」内のQ&Aにある「our guidelines」のリンクから再インストールしましょう!

もし、わからなければ、templateフォルダ内「index.haloroar.liquid」ファイルを作り、下記コードをコピーしてください。

{%- comment -%}Please DO NOT edit this file{%- endcomment -%}
{%- layout none -%}
{%- assign paramKey = 'q' -%}
{%- assign paramValue = '' -%}
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' | 
   replace:'%20',' ' | 
   replace:'\u0026','&'
-%}
{%- assign pageQuerystring = pageUrl | split:'?' | last -%}
{%- assign parts = pageQuerystring | split:'&' -%}
{%- for part in parts -%}
  {%- assign keyAndValue = part | split:'=' -%}
  {%- if keyAndValue[0] == paramKey -%}
    {%- assign paramValue = keyAndValue[1] | strip -%}
  {%- endif -%}
{%- endfor -%}
{%- assign namespace = 'ra_' | append: paramValue -%}
{
  "metafields": {
    "shop": {{ shop.permanent_domain | json }},
    "settings": {{ shop.metafields[namespace].settings | json }},
    "moneyFormat": {{ shop.money_format | json }}
  }
}

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。