AFFINGER5サイトのURL末尾に/を付けてAMP対応させる手順

WordPressテーマ「AFFINGER5（WING）」では、ページ別にAMP対応が行えます。しかし、どのサイトでもAMP対応できるわけでもなく、さまざまな条件があります。

AMP対応できるサイトの条件の1つとして、「記事末尾にスラッシュ（トレイリングスラッシュ）がある」ことが前提となっています。

パーマリンクは「/」で終了する形にして下さい。

参考：「AMP」について - Affinger

AFFINGER5ユーザーのなかには、パーマリンク設定で「カスタム構造」の「/%postname%」を選択してしまい、URL末尾にスラッシュがつかない状態で運営している人もいるでしょう。ボクの運営する別ブログがそうでした。

そこでこの記事では、AFFINGER5のサイトURL末尾に/を付けてAMP対応させる手順をご紹介します。

URL末尾にスラッシュを付ける方法

「/なし」から「/あり」に変更する手順は、WordPress管理画面で

だけです。

「カスタム構造」の「/%postname%」を選択していた場合は、「投稿名（sample-post/）」に変更することで、すべてのページのURL末尾に/が付きます。

「/なし」から「/あり」にリダイレクトする

パーマリンクを「/なし」から「/あり」に変更したら、「/なし」から「/あり」に向けてリダイレクト（転送）設定する必要があります。理由はここでは割愛します。

リダイレクトする方法はいろいろありますが、今回は.htaccessファイルを編集する方法でご紹介します。

手順は、

だけです。

「.htaccess」を開く

.htaccessファイルはFTPでサーバーにログインして、「public_html」を開くと見つかります。

.htaccess（エイチティーアクセス）とは、Webサーバーの挙動を決定する設定ファイルです。

出典：.htaccess編集 | レンタルサーバー【エックスサーバー】

「ロリポップ！」だったら「ロリポップ！FTP」にログイン、「エックスサーバー」だったら「ファイルマネージャ」にログインして、ドメイン選択後に見つかります。

不明点は、各レンタルサーバーのマニュアルを参考にしましょう。

先頭にリダイレクトコードを書く

リダイレクト設定をしたいドメインの.htaccessを見つけたら、ファイルの1行目に以下のリダイレクトコードを書き加えます。

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_URI} !/$
    RewriteCond %{REQUEST_URI} !\.[^/\.]+$
    RewriteRule .* %{REQUEST_URI}/ [R=301,L]
</IfModule>

変更を保存する

リダイレクトコードを書き加えたら保存します。

この設定で、「https://example.com/blog」に来ていたアクセスを、「https://example.com/blog/」に自動で転送してくれます（すべてのページで）。

もし、保存後にサイトが表示されなくなったり、不具合が発生したら、バックアップファイルで復元してください。

「/あり」への変更後にやること

リダイレクトの確認

念のため、自サイトのURLにスラッシュを付けないで検索してみてください。自動でスラッシュが付けられていると思います。たとえば、「https://example.com/blog」で検索すると、「https://example.com/blog/」に転送されているはずです。トップページでは無効ですので、個別ページで試してください。

また、次の方法でも確認すると良いでしょう。

• エゴサーチをして、スラッシュありのURLにリダイレクトできている
• Google Analyticsの「リアルタイム」をチェックし、ユーザーがスラッシュありのURLで閲覧できている

内部リンクの修正

AFFINGER5のブログカードなど、内部リンクを自動生成してくれるツールは、パーマリンク設定を変更した時点で、すべての内部リンクも「/あり」に変更されています。

ところが、

• 手動で設定した内部リンク（たとえばこういう形式のリンク）
• 「メニュー」のカスタムリンク

などは、「/なし」の内部リンクになっている可能性があります。確認して、修正しましょう。

ページ別にAMP化する方法

URL末尾に/を付けたら、ページ別にAMP対応が可能です（正確には、URL末尾に/がなくてもAMPページが生成されますが、URL末尾に/が付くことで、AFFINGERのガイドラインに沿った形式でAMP対応が可能となりました）。

AMP対応するには、WINGマニュアルにある通り「AMP対応する」にチェックを入れるだけです。

注意点としては、SUGOIMOKUJIなどの内部リンク（#st-toc-h-2など）は、AMPページでは無効なリンクとなるので、削除するか（https://example.com/blog/#st-toc-h-2）に貼り替えましょう。

まとめ

AFFINGER5（WING）でAMP対応するには、記事末尾にスラッシュ（トレイリングスラッシュ）があることが前提となっています。

もし、パーマリンク設定で「カスタム構造」の「/%postname%」を選択してしまい、URL末尾にスラッシュがつかない状態で運営してしまった方は、パーマリンク設定を「投稿名（sample-post/）」に変更してください。

パーマリンクが「/なし」から「/あり」に変わったら、.htaccessファイルを編集し、リダイレクト設定をしましょう。

無事にリダイレクト設定が済んだら、ページ別にAMP対応ができます。