「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 WordPress
Code 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 WordPress
Code language: PHP (php)
上記だけで対応はできますが、詳しく.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を適応するフィルタ条件を記述します。以下記載のサーバー変数や サーバー変数等から得られる文字列を正規表現や条件記号を用いて、マッチングを行います。
主なサーバー変数
変数名 | 取得できる値 |
---|---|
%{HTTP_HOST} | ホスト名、つまりドメイン (例:www.example.com) |
%{REMOTE_ADDR} | ホストのIPアドレス |
%{REQUEST_URI} | リクエストにおけるURI、ファイルパス。「/index.php」のように、最初にスラッシュが含まれる点に注意する。また、クエリ文字列は含まれない |
%{REQUEST_FILENAME} | ファイルシステム上のファイルパス (例:/var/www/html/my-site/about.php) ただし、リクエスト時点でファイルが断定できていなければ、REQUEST_URI と同じ。 |
%{HTTPS} | リクエストプロトコルが「https」であれば"ON"、そうでなければ"OFF"。 |
%{QUERY_STRING} | クエリ情報 例:amp,product_id=1183等 |
主な条件記号
複数の条件を記載することが可能であり、記載した場合はデフォルトでは条件はANDとなりますが、明示的にRewriteCondの末尾に[OR]を記載することで、ORとすることができます。
また冒頭で使用しておりますが、条件の冒頭に”!”マークをつけることで、条件の真偽を逆転することができます。
一つ、もしくは複数のRewriteCond設定の後にRewriteRuleを記載すると、複数条件で処理され、フィルタ条件は次のRewriteRule時にはリセットされます。
記号 | 意味 |
---|---|
-d | 対象文字列をパスとみなし、その存在とディレクトリかどうかをチェックする。 |
-f | 対象文字列をパスとみなし、その存在とファイルかどうかをチェックする。 |
-F | 対象文字列をパスとみなし、そのファイルが存在し、サーバーシステムからアクセス可能な状態かどうかをチェックする。 |
-s | 対象文字列をパスとみなし、そのファイルが存在し、ファイルサイズがゼロ以上かどうか。 |
-x | 対象文字列をパスとみなし、そのファイルが存在し、実行権限があるかどうかをチェックする。 |
正規表現
文字処理で使える正規表現 | |
---|---|
記号 | 意味 |
. | 任意の1文字 |
* | 直前の文字の0回以上の繰り返し*1 |
+ | 直前の文字の1回以上の繰り返し*1 |
? | 直前の文字は省略可能*1 |
*? | 直前の文字の0回以上の繰り返し*2 |
+? | 直前の文字の1回以上の繰り返し*2 |
?? | 直前の文字は省略可能*2 |
[ ~ ] | [ ]の中のどれか1文字*5 |
[^ ~ ] | [ ]の中に無い1文字*5 |
( ~ | … ) | ~か…かどっちか |
{n} | 直前の文字のn回の繰り返し |
{min,max} | 直前の文字のmin以上max以下の繰り返し(min、maxは省略可能)*1 |
{min,max}? | 直前の文字のmin以上max以下の繰り返し(min、maxは省略可能)*2 |
\w | アルファベット、数字、アンダスコア(?_?)のどれかの1文字 |
\W | アルファベット、数字、アンダスコア以外の1文字 |
\d | 数字1文字 |
\D | 数字以外の1文字 |
\s | 半角スペース、タブ、改行のどれか1文字 |
\S | 半角スペース、タブ、改行以外の1文字 |
\n | 改行 |
\t | タブ |
\\ | \記号 |
( ~ ) | ( )内を1文字扱い |
位置処理で使える正規表現 | |
記号 | 意味 |
^ | 行の先頭 |
$ | 行の末尾 |
\< | 単語の先頭 |
\> | 単語の末尾 |
\b | 単語の先頭か末尾 |
\B | 単語の先頭、末尾以外 |
\A | ファイルの先頭 |
\z | ファイルの末尾 |
\G | 直前の一致文字列の末尾 |
置換文字列で使える正規表現 | |
記号 | 意味 |
?0 | 一致した文字列全体 |
\1 \2 … \9 | それぞれ検索文字列の1~9番目の?( )?に一致した文字列*4 |
\l | 次の1文字を小文字にする |
\L ~ \E | 挟まれた文字列を小文字にする |
\u | 次の1文字を大文字にする |
\U ~ \E | 挟まれた文字列を大文字にする |
\n | 改行 |
\t | タブ |
\\ | \記号 |
RewriteRule
リダイレクト処理の設定。RewriteBase、RewriteCondのパス、フィルタにより処理されます。先2つのコマンドはなくてもRewriteRuleの設定は処理されます。最低の構成は以下です。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule [転送元URL] [転送先URL] [リダイレクト先の宣言]
</IfModule>
Code language: HTML, XML (xml)
RewriteRuleのリダイレクト先の指定
リダイレクト先の指定では、リダイレクト先となるURL文字列を記載します。
サンプルのように、リダイレクト先を相対パス(スラッシュで開始しないファイルパス)で記載すれば、RewriteBaseの設定値をパスとして利用できます。RewriteBase設定が存在しなかったり、その値を使いたくなければ、リダイレクト先の指定を「/sample.php」などとスラッシュで書き始めればRewriteBaseは使用されません。
RewriteRuleのリダイレクト先の表
フラグ | 意味 | 説明 |
---|---|---|
C | Chain | このルールにマッチしたら、次のルールを評価 |
F | Forbidden | アクセス禁止(403-Forbidden)。[L]フラグと同様、以降のルールは無視される |
G | Gone | 削除(410-Gone) |
L | Last | マッチしたらRewriteを止めます。以降のルールは無視。基本的に[R,L]併記 |
NC | No Case | 大文字小文字を無視 |
NE | No Escape | ".", "?", "%"などの特殊文字が"%25″のようにエンコードされるのを防ぐ |
OR | Or | RewriteCondを複数指定する場合のor指定。指定なしならAND |
PT | Path Through | Rewriteを終了し、それ以外の処理に移行 |
R | Redirect | 基本的には、[R=301]、[R=302]のどちらかを設定します。( [R] と省略すれば [R=302] と同義です。)[L]フラグと同様、以降のルールは無視される |
QSA | qsappend | 置換URIにクエリ文字列が含まれる場合、RewriteRuleのデフォルトの動作は、既存のクエリ文字列を破棄し、新しく生成されたクエリ文字列に置き換えることです。 [QSA]フラグを使用すると、クエリ文字列が結合されます。 |
QSD | qsdiscard | 要求されたURIにクエリ文字列が含まれ、ターゲットURIに含まれていない場合、RewriteRuleのデフォルトの動作は、そのクエリ文字列をターゲットURIにコピーすることです。 [QSD]フラグを使用すると、クエリ文字列が破棄されます。 |
QSL | qslast | デフォルトでは、置換の最初の(左端の)疑問符がクエリ文字列からのパスを区切ります。 [QSL]フラグを使用すると、最後(右端)の疑問符を使用して2つのコンポーネントを分割するようにRewriteRuleに指示します。 これは、ファイル名にリテラルの疑問符があるファイルにマッピングするときに役立ちます。置換でクエリ文字列が使用されていない場合、このフラグと組み合わせて疑問符を追加できます |
最後に
様々なサイトがAMPに対応してきていますが、上記のように高速化のためにWordpressのAMPサイト設定後に.htaccessに追記する必要があります。皆さんもブラウジングの高速化のため、設定してみてください。
ブログ高速化に関するまとめ記事を作成しましたので、他の高速化方法については以下を参照してしてください。