WordPressをレスポンンシブ対応にすることは検索上位を獲得するには必須です。

レスポンシブデザインに対応したテーマを買う、もしくはWptouchプラグインをインストールすることでスマホ最適化することができます。また画像のサイズを変更することで、スマホでのサイトスピードを上げることができます。

残りの記事では、アメリカの大学で学んだ知識を元に具体的なWordPressのスマホ最適化の方法について解説していきます。

モバイルユーザーの増加

統計によると約58%のユーザーがモバイルを使って検索していると示されています。スマホ牛革に伴ってモバイルの増加は今後さらに拍車がかかると予想されます。したがって Googleもモバイル化されたサイトをより評価する動き出ています。 近年ではモバイル化されたページを主として考え、デスクトップのページを副として考えるとも公式的に発表しています。

レスポンシブ化の重要性を理解する

まずはGoogle Analyticsを使って、自分のサイトのユーザーのデバイスをチェックしてみてください。ほとんどの場合、スマホユーザーがデスクトップユーザーより多いのではないのかと思います。

ウェブサイトをスマホ対応にすることは、SEO対策においてかなり重要です。まずは手始めにGoogle’s Mobile-Friendly Testを使って、自分のサイトがモバイル化になっているかテストしてみてください。ただURLを入れるだけで結果を得ることができます。

現在95%の検索は Google で行われています。したがって Google の方針に従うことは検索上位 を取るためには必須となってきます。近年、グーグルはモバイル化されたウェブサイトの検索順位を上位表示するアルゴリズムを取り入れています。Googleはスマホ版のサイトを標準にし、pc表示を次にすると発表しています。つまり、WordPressで作ったサイトをスマホ対応化することは必要不可欠になっています。

モバイルインデックスとは？

昔Google はモバイル版とデスクトップ版を別々にインデックスしていました。（保存しているのような意味）したがって iPhone や Android などの端末で検索がされた時には、モバイルとしてインデックスされたページを表示していました。 しかし Google は方針を変え、どのデバイスから検索されようがモバイルでインデックスされたページから検索結果を表示するようになりました。モバイル化されてないページはデスクトップでも上位表示されづらいということがわかります。

どのような場合に検索順位が落ちるのか

ではどのような場合に検索順位が通常よりも落ちてしまうのでしょうか？以下のケースに該当する場合は検索結果で上位表示されづらいと予測されます。

・モバイル化のページでコンテンツがタブの中に隠れている

・モバイル化のページでロードスピードが遅い

・ UX デザインがされていない

テンプレートでレスポンシブデザインを探す

WordPressを使っている皆さん、どのテーマを使っていますか？テーマはスマホ対応していますか？有料テーマのスマホ版はよくできていてほとんど手を加える必要がありません。僕がおすすめするスマホ対応がしっかりしているテーマを紹介します。

Genesis Framework

僕が使っているGenesis Frameworkはスマホに完全対応したWordPressのテーマです。（世界一ユーザーが多い）特にブログにもきちんと対応していて、シンプルなデザインです。（ただ英語なので注意が必要で、カスタマイズは自分で手を加えないといけないので、初心者には少し手を出しづらいテンプレートです。）

賢威

賢威

【メリット】
・これがあればSEO対策不要(内部対策)
・時代の変化と共に無料でアップデートし続けてくれる
・購入者限定のSEOマニュアル付き
・丁寧に教えてくれる無期限サポート付き

【デメリット】
・デフォルトのデザインは最低限（カスタマイズしやすい）

— ナオ＠SEOライティング×セールスライティング (@WebWriter_NAO) November 8, 2018

SEOテンプレート【賢威】を開発しているウェブライダーは、数々の企業のSEOコンサルを行い、自社でも様々なビックワードで１位を獲得しています。賢威にはそのウェブライダーのノウハウが惜しみなく注がれています。モバイル化も完璧なのでおすすめのテンプレートです。購入はこちら。

Swallow

スワローを使っています。
・軽くて表示が早い
・カスタマイズゼロで最初からかっこいい（何も考えずに記事を書くだけで良い）
・ショートコードが重要なものに絞られているので、全てを使いこなせる
・他のテーマに比べて低価格設定
・機械音痴にも分かり易い説明https://t.co/76WiQDCUbC

— チェス太＠ロンドン情報＆子連れ体験旅 (@chestalondon) October 21, 2018

Swallowもレスポンシブデザインを持つおすすめのWordPressのテーマです。このテーマはSEOにも強い上、先ほど紹介したGenesisと違って日本語にも対応しています。大きなポイントとしては ①インストールしたらすぐにデモサイトと同じ表示の、デザイン的に優れたサイトになり、自分は文章を書くだけでOKです。そしてコードの知識が不要で初心者に優しい環境にあります。購入はこちら。

Stork

ストークを使っています！

メリット
CSSなどの知識がなくても、導入するだけである程度デザインが出来上がっている。
プラグインを入れなくてもSNSシェアボタンや関連記事、人気記事などの機能がある。
デザインも色やタイトル位置などレイアウトを変えるだけでアレンジの幅が広い印象。

— Shiro (@flyintothew) November 8, 2018

OPENCAGEが開発したWordPressテーマのSTORK！

スマホがこれだけ普及した今、有料テーマを買うならこれに限ります。STORKがおススメなのは、読みやすさと、使いやすさです。 特に初心者の場合は、WordPressの設定やアドセンスの配置などで、頭はいっぱい。でもSTORKであれば、SNSへのリンクは初期から搭載済み。 面倒な設定せず、すぐにブログ書くことに集中できます。購入はこちら。

他のWordPressテーマについて

WordPressのテーマをまとめているので（Twitterのフォロワーさんのリアルな声）、そちらの記事を参考にしてください。レスポンシブの有無についてもまとめています。もしWordPressのテーマをオリジナルで自作したい方はこちらの記事を参照ください。HTML/CSSの知識があって時間、やる気のある方は取り組まれても良いかもしれません。

WpTouchをインストールする

皆さんの中にはテンプレートの標準のデザインには満足できずもっとカッコいいデザインを作りたいと思っている人がいるかもしれません。Wptouchというプラグインはさらにスマホに最適化したデザインを提供してくれます。コードを打ち込む必要がなく、勝手にモバイル用のサイトを作ってくれます。そのクオリティーは高く現状のデザインに満足していない人にオススメです。

Wptouch Proがおすすめ

種類豊富なテーマ

無料版、有料版があり、実際のところ無料版でも十分使えますが、私はWp Touch Proという有料版をオススメします。有名どころでいうとDISNEYやSONYが利用しています。有料版では自分の用途に応じてテンプレートを買うことで自動で質の高いレスポンシブデザインを作ってくれます。

現在8種類のテーマが用意されていて、自分のサイトに応じたデザインを選ぶことができます。私は、CMSという集客専用のブログ用テンプレートを使っています。

さまざまな機能を持つオプション

また、Pro版では課金式でオプションを追加することができます。私はサイトスピードを早くするJQUERY ENHANCEDと複数の広告を貼ってくれるMULTI ADSというものを追加で利用しています。

現在もモバイルスピードをかなり早く保ってくれているので、直帰率減少を防ぎ、SEOに良い影響を与えています。MULTI ADSによって広告の貼れる場所が増えるので、アドセンス型のブログ経営者にはオススメの機能です。

管理画面はシンプル

またWptouch Proの設定は非常に楽でコーディングは全く必要ありません。私がCMSテンプレートを購入したように型を購入すると自身の代わりにを画面を作成してくれるので、時間短縮につながります。WordPressのカスタマイズでスマホ版とpc表示を切り替えることができます。

必要であれば、自分の好きなヘッダーを設定したり、ホームページでのブログの掲載本数を決めたり、配色を変えたりすることができます。またCSSなどに追加記述をしてスマホ専用のデザインを追加することもできます。

ポップアップ機能は避ける

メルマガ購読などをポップアップにしてる場合はスマホ版で避けるようにしましょう。最近Googleはポップアップでコンテンツを遮るような機能に対してペナルティーを開始しています。侵入型のポップアップを採用してる場合はすぐさまやめることをオススメします。

画像最適化

大きい容量の画像や動画を使用している場合は、最適化を検討しましょう。できるだけサイトを軽くし、モバイルにも迅速に表示させる必要があります。ブラウザからダウンロードする容量を減らし、サイトスピードを高めましょう。

EWWW Image Optimizer

画像最適化にはEWWW Image Optimizerをインストールするのがオススメです。新規画像だけでなくすでに入れた既存の画像の圧縮も行ってくれます。画像を最適化して、画像内の余分なデータも削除することで、画像ファイルの容量を軽量化してくれます。そして一度設定してしまえば、あとは画像ファイルを自動圧縮してくれるところがオススメ。

Wp Fastest Cache

またWp Fastest Cacheを使うことでもサイトスピードを上げることができます。個人的にはこのプラグインは割と入れた方がいいと思います。設定は簡単ですし、 このプラグインを入れることによってサイトスピードをかなり早めることができます。

最後はGoogle’s Mobile-Friendly TestにURLを入れて、モバイルスピードがそれなりに速いことを確認してください。またデスクトップとスマホで異なる画像を表示させたい（切り替えたい）時は、CSSファイルをいじることで簡単に行うことができます。詳細についてはこちらの記事へ。

他にWordPressを高速化させる方法

画像最適化以外にも WordPress を拘束されさせる方法はいっぱいあります。例えば画像表示を遅延させたり、 不要なプラグインをアンインストールしたり、HTMLやCSSのコードを圧縮したり様々な方法を紹介している記事はこちらをクリックしてください。

WordPressスマホ用カスタマイズ

レスポンシブデザインのテーマ、プラグインを導入した後もさらにWordPressをスマホ用にカスタマイズする必要があります。特にブログを運営している方は、スマホでのユーザーエクスペリエンスを上げる必要があります。

つまり、記事を投稿する際には、スマホ版でどのように見えてるかチェックする必要があります。以下に気をつけて記事をカスタマイズしましょう。

・画像ははみ出てないか

・改行がきちんと行われているか

・スマホの画面が文字で埋め尽くされていないか（画像が適度に貼られているか）

・スマホ版でも文字の大きさが適切か（私はスマホ版の文字の大きさをCSSで変更しています。）

・一つの段落に含まれる文字数は適切か

・モバイル版でのヘッダー画像は適切な大きさか

アドバンストな内容（SEO）

モバイルからのクリック率（検索結果）を上げる

SEO対策の記事でも述べたように検索結果画面でのクリック率はかなり検索順位に影響してきます。タイトルタグやメタディスクリプションはデスクトップとモバイルでは異なる表示になります。デスクトップの方がより長く表示され、モバイルではより短く表示されます。

従ってモバイルバージョンでのクリック率を高める努力をしなければなりません。そこで使うツールは Google Search Console（新しい方）です。〔検索パフォーマンス〕→ 〔ページ〕に行って、具体的なページをクリックしてください。そのあと、〔デバイス〕をクリックすることによって、各ページのモバイル、デスクトップのCTR（クリック率）を見ることができます。

このようにほとんどの場合、CTRは違っています。ここでモバイル＞PCとなっていればOKですが、逆の場合はモバイル版のタイトルタグかメタディスクリプションに問題がある可能性があります。

モバイルからの直帰率を低くする

先ほどとは違ってGoogle Analyticsを使ってモバイル化を最適化する方法もあります。まずはGoogle Analyticsを開いて、〔行動〕→〔検索パフォーマンス〕→〔サイトコンテンツ〕→〔ランディングページ〕→〔セカンダリディメンションをデバイスに設定〕

ここでデスクトップ版とモバイル版での直帰率の差を見ることができます。もし、モバイル版での直帰率が多い場合（特に滞在時間が少ない場合）には、何らかの問題があると考えられます。モバイル版で見にくいやデザインが良くないなどの問題があるかと思います。

AMPはやった方がいいのか？

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクトです。実際、AMPに切り替えると、そうでないページに比べて4倍のスピードを誇ると言われています。GoogleはSEOにとってプラスに働くと思われていました。しかし、僕の意見ではAMPはやらない方が良いです。

おはようございます！

AMPでデザインが崩れるという噂、本当でした！

コレくらいなら別にいっかー？って思ってましたが、リンカーが跡形も無く崩れていたのでリンカー貼ってあるページはちょっとずつ戻そう…✨ pic.twitter.com/d43BkiBgjo

— ちびうし＠栄養×フィットネス (@hana_bi30) December 15, 2018

リアルタイムで反応してれば恐らくAMPのアナリティクスは設定できてるはず…
ただAMPはその他諸々も不具合起きるやで

・アドセンスもAMP用のコードがある
・JavaScriptを使ってる機能(プラグインとかです)はほぼ動かない
・CSS(装飾やサイトの外観)は一部を除いて崩れる

ので上記確認するといいやで

— こいし@石 (@koishiyade) December 11, 2018

AMPを行うことによって、機能が極限に制限されてしまいます。Google Adsenseの広告や、内部リンクのカードなども一切無効化されてしまいます。AMPはCSSに対してかなり制限を設けているので、サイトのページもシンプルになりやすいです。

被リンクも無効化される可能性？

AMP化されたページへのリンクはすべてGoogleに吸収されてしまいます。つまり、今まで誰かのページからのリンクは、実際にサイトのページにリンクされていたのですが、AMPの場合は、Google.comのサイト（の個人のAMP部分）へとリンクが向かってしまいます。これは自分のサイトのページに被リンクが来てることにはならないので、SEO的には全く良くありません。（被リンクが自分のページではなくGoogleの評価を上げているだけ）

AMPはやらなくていいです。AMPをした方が上位に表示されるなどの情報を耳にしますがそれは無視して構わないです。

まとめ

Wptouchは非常に優れていて、コーディングなしでサイトをモバイル化することができます。また、有料版のWptouch Proは特にオススメで、少ない投資で莫大なリターンを得ることができます。

自分の用途に応じてテンプレートを買うことができるので、時間をかけずにクオリティーの高いスマホ対応のサイトを作ることができます。しかもきちんと広告にも対応しています。

皆さんも是非Wptouchをプラグインして、自身のサイトのSEOを強化し、検索上位を狙っていきましょう！！この記事が少しでも皆様のお役に立てたらなと思います 🙂