【WordPress】スマホアクセス時のAMPサイトへのリダイレクト設定(.htaccess設定方法)

「AMP(Accelerated Mobile Pages)」とはGoogleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツであり、以下の画像に記載しているように⚡記載のサイトはAMP HTMLに飛ばされ、Googleにキャッシュされた高速でシンプルなページが表示されます。

AMPのページを作成し、アクセス可能としてもPCとTablet、Mobileのアクセス時のリダイレクト設定を行っていないとそのまま重たいページに飛ばされることになります。

Googleは検索の上位表示の条件として表示速度についても対象としています。そのため、上位検索を狙うためにはAMPなどの表示速度を向上する機能を使用していくことが必要です。

そのためMobileでのアクセス時にはAMPサイトへの転送を行う必要があります。今回はモバイル端末でのAMPページへのリダイレクト設定内容と.htaccessの記述方法について記載します。

1.Mobile端末からのアクセスをリダイレクトする.htaccess設定

WordPress直下の.htaccessに以下のコードを追記します。AMP、管理画面、ファイルへのアクセスとbotからのアクセス時はURLの変更をせずに、Mobile端末からのアクセス時はAMPサイトにリダイレクトさせるようにします。Wordpressでの起債時は#BEGIN WordPressより前に記載するのを忘れないようにしてください。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPressCode language: HTML, XML (xml)

# BEGIN HAND WRITE
# リダイレクト処理
# AMPサイトの場合：URL変更なし
RewriteCond %{QUERY_STRING} !amp
# WordPressの管理画面の場合はURL：URL変更なし
RewriteCond %{REQUEST_FILENAME} !^wp-.*?
# 対象のURLがmode=pcの場合はURLを書き換えない
RewriteCond %{QUERY_STRING} !mode=pc
# ファイルへのアクセスの場合：URL変更なし
RewriteCond %{REQUEST_FILENAME} !-f
# botからのアクセスの場合：URL変更なし
RewriteCond %{HTTP_USER_AGENT} !(bot|Mediapartners-Google|APIs-Google) [NC]
# Mobile端末からのアクセスの場合：URL変更（URLの末尾に?ampを追加する）
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1?amp [NE,QSA,R,L]
# END HAND WRITE

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPressCode language: PHP (php)

通常ページ

AMPページ

上記だけで対応はできますが、詳しく.htaccessファイルについて知りたい方は以下もお読みください。

2. .htaccessについて

.htaccessとは、Apache（アパッチ）と呼ばれるWebサーバーにでのディレクトリ毎に個別設定を行うためのファイルです。Apache サーバーにおけるリダイレクトの設定は、通常、任意のディレクトリにこの .htaccess を配置して、そこからどこに転送するのかについての転送処理を書き込みこむ事が一般的です。

2-1.利用目的とメリット

今回は通常のページからモバイル端末についてAMPサイトに転送することで表示の高速化を図りましたが、リダイレクトには下記のような利用目的とメリットがあります。

• URL変更後もTwitterやFacebook、ユーザーのブックマーク、他のサイト等からのリンク等からのアクセスが可能
• SEO対策としてURL変更後も変更前のパーマリンクのGoogleやYahoo等の検索サイトの評価を引き継ぐことが可能
• 「wwwの有無」や「URLの最後を/、/index.html等」を統一することが可能
• URLを完全に統一することで、ドメインやページの評価が分散されなくなる。

2-2.リダイレクトの種類

リダイレクトで最も利用されるのが「301」と「302」です。

・301 Permanent Redirect
恒久的なリダイレクトとなります。このリダイレクトは将来変更することは絶対にないとサーバーに伝える方法。SEO的には記事評価を全てリダイレクト先に譲渡して下さいと伝える方法。検索エンジンからのアクセス流動や順位を引き継ぎたい場合には必ず301リダイレクトを使います。

・302 Temporary Redirect
一時的なリダイレクトです。将来は変更するかもしれない時に使用するリダイレクト。SEO的にはリダイレクト先には評価を譲渡しない。キャッシュしない方法。
検索エンジンからのアクセスや評価はリダイレクト元に残ります。リダイレクト先が変更された場合でもオリジナルに影響を与えない方法となります。
使い方としては一時的なメンテナンスページへのリダイレクトや言語振り分けやデバイス毎に振り分ける時などに使用します。

2-3. .htaccess の作成方法

.htaccess は、転送ルールのコマンドが記載されたただのテキストファイルのため、 VSCodeや秀丸、Vimなどのテキストエディタを使って、.htaccess という名前のファイルを作成して、転送したいディレクトリ（多くの場合、Webサイトのルートディレクトリ、WordPressの場合は/wordpress/直下）に配置してください。

※.htaccess では改行コードとして「LF（ラインフィード）」のみを認識します。エディタで新規作成時は「CR（キャリッジリターン）」のみを改行コードとして含む場合があるため、上記の改行コードを変更できるテキストエディタを利用してください。また日本語記述を行う場合はUTF-8をお勧めします。

2-4. .htaccessコードリスト

<IfModule mod_rewrite.c>…</IfModule>

リダイレクトの設定内容は、全て<IfModule mod_rewrite.c>… </IfModule>という設定で囲む事で、使用しているWebサーバー上で「mod_rewrite」というモジュールが利用可能な場合は、このタグ内の設定値を読み込みます。mod_rewrite は、レンタルサーバーであっても、現状殆どのWebサーバーで利用可能ですが、利用できないサーバがあるため、評判や検索にて確認し、レンタルサーバ等を選択してください。

<IfModule mod_rewrite.c>
 … 
</IfModule>Code language: HTML, XML (xml)

RewriteEngine

mod_rewriteモジュールを利用する際に「On」で使用します。

RewriteBase

RewriteBaseは、RewriteRule設定で指定される「リダイレクト先のベースディレクトリ」を設定します。
例：
RewriteBase /ではベースディレクトリは、その.htaccessが配置されたディレクトリ自体
RewriteBase /test-base/では、RewriteRuleでリダイレクト先にindex.phpが指定された場合、/test-base/index.phpとなります。
RewriteBase の値が使用されるのはRewriteRuleのリダイレクト先URLが相対パスの場合のみです。例：リダイレクト先に指定した文字列が、/index.phpやhttps://test-base.co.jpのようなフルパスでは使用されない。

RewriteCond

RewriteCondは、RewriteRuleを適応するフィルタ条件を記述します。以下記載のサーバー変数や サーバー変数等から得られる文字列を正規表現や条件記号を用いて、マッチングを行います。

主なサーバー変数

主な条件記号

複数の条件を記載することが可能であり、記載した場合はデフォルトでは条件はANDとなりますが、明示的にRewriteCondの末尾に[OR]を記載することで、ORとすることができます。
また冒頭で使用しておりますが、条件の冒頭に”!”マークをつけることで、条件の真偽を逆転することができます。
一つ、もしくは複数のRewriteCond設定の後にRewriteRuleを記載すると、複数条件で処理され、フィルタ条件は次のRewriteRule時にはリセットされます。

正規表現

RewriteRule

リダイレクト処理の設定。RewriteBase、RewriteCondのパス、フィルタにより処理されます。先２つのコマンドはなくてもRewriteRuleの設定は処理されます。最低の構成は以下です。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule [転送元URL] [転送先URL] [リダイレクト先の宣言]
</IfModule>Code language: HTML, XML (xml)

RewriteRuleのリダイレクト先の指定

リダイレクト先の指定では、リダイレクト先となるURL文字列を記載します。

サンプルのように、リダイレクト先を相対パス（スラッシュで開始しないファイルパス）で記載すれば、RewriteBaseの設定値をパスとして利用できます。RewriteBase設定が存在しなかったり、その値を使いたくなければ、リダイレクト先の指定を「/sample.php」などとスラッシュで書き始めればRewriteBaseは使用されません。

RewriteRuleのリダイレクト先の表

最後に

様々なサイトがAMPに対応してきていますが、上記のように高速化のためにWordpressのAMPサイト設定後に.htaccessに追記する必要があります。皆さんもブラウジングの高速化のため、設定してみてください。

ブログ高速化に関するまとめ記事を作成しましたので、他の高速化方法については以下を参照してしてください。

【まとめ記事】WordPressブログの高速化対策【Newspaper】

2020-04-27

今までWordPressの高速化を行ってきましたが、私が対策を打ってきた中で効果のある高速化対策の全体を分かりやすくまとめたいと思います。

umilcl.com