既にWordPress公式AMPプラグイン導入済のサイトでSimplicity2を導入する場合の注意点

さて、昨日別サイト(相撲部屋.link)もWordPressテーマを「STINGER PLUS2」から「Simplicity2」に変更したのだが、前回のエントリーにも書いた通り相撲部屋.linkではAMPを導入済であった。因みにAMP導入にあたってはWordPress公式(WordPressの開発元であるAutomattic社が提供しているものなので恐らくそうであろう)の「AMP」プラグインを使用した。

そして新たに導入した「Simplicity2」では既にテーマそのものがAMPに対応しているため、「AMP」プラグインは不要となるのだが、だからといってすぐAMPプラグインを無効化するのは待って欲しい。

AMPプラグインからSimplicity2のAMP機能に切り替えるには、然るべき手順を踏む必要があるのだ。

AMPプラグインの問題点と、Simplicity2のAMP機能との違い

然るべき手順」の説明をする前に、まずはこの点について説明しようと思う。
実はAMPプラグインは現状では欠陥プラグインであるとしか言いようがない。

まず一つ目は、そのままではサイト運営に欠かせない「Google Analytics」や「Google AdSense」に対応していないこと。
これに対応させる為には自分でソースコードを弄る必要があり(AdSenseの広告コードもAMP仕様に書き換える必要がある)、非常に煩雑である。
AMPのプロジェクト自体がGoogleが提唱しているものなのに、Googleのサービスに簡単に対応できない点は非常に痛い。
二つ目は、SNSのシェアボタンが実装されていないこと。これも追加するには自分でソースコードを弄るしかないのだ。
三つ目、サイトロゴの設定や画像がない記事の代替イメージを設定する機能がプラグインにはないこと。
例えば画像がない記事などのAMPページは、構造化データテストで「imageフィールドの値は必須です」というエラー(ただしあまり重要ではないエラーではあるが)が出たりする。(※サイトロゴについてはファビコン(サイトアイコン)を予めサイト側で設定している場合はそれがサイトロゴの代替えとなるようだが)
これらに対応させるためには使用中のテーマの「function.php」にソースコードを追加する必要がある。
自分もこの3点で非常に苦労し、AMP対応に貴重な休日の大半の時間を費やす羽目になったのだ。

一方、Simplicity2のAMP機能は、最新版(2.5.7)の時点ではまだβ機能ではあるが、この3点の問題はクリアされているのだ。
SNSシェアボタンは最初から備わっているし、予めサイト本体で使用するGoogle AnalyticsのIDと、AdSenseの広告コードを設定しておけば、AMPページでもそれが有効となるし、サイトロゴもサイト本体で設定したロゴがそのまま使える(設定していなくても代替ロゴがある)上、画像がない記事用の代替イメージも用意されている(変更できるかどうかは不明)のだ。

なのでこれからAMP対応を検討している場合は、プラグインよりもオススメかもしれない。

※因みにSTINGERの場合は、有料版の「STINGER PRO」(¥6,480)または「AFFINGER4」(¥8,500)でないとAMPには対応していない上に構造化データには非対応。自分がSTINGERに見切りを付けた理由の一つでもある。
と、いいことばかり書いてしまったが実はAMPプラグインと、Simplicity2のAMP機能にはもう一つ物理的に違う点があり、AMPプラグインからSimplicity2のAMP機能に切り替える場合には、これから説明する「然るべき手順」を怠ると大変なことになってしまうので注意が必要である。

AMPプラグイン→Simplicity2のAMP機能への切り替えにあたって

と、ここからが本題。

AMPプラグインと、Simplicity2のAMP機能の物理的な違い、それは生成されるAMPページのURLである。
元ページのURLを、http://example.com/p-123 とした場合、生成されるAMPページのURLは以下の通りとなる。

AMPプラグイン → http://example.com/p-123/amp
Simplicity2 → http://example.com/p-123?amp=1
※元ページのURLがSimplicity2ではデフォルトとなっているhttp://example.com/?p-123 の場合は、http://example.com/?p-123&amp=1 となる。

このままだと、Simplicity2のAMP機能を有効化したあと、AMPプラグインを無効化した場合、AMPプラグインで生成されたURLにアクセスすると「404エラー」になってしまうのだ。当然ながら、これではGoogleに悪い印象を与えかねない。
それを防ぐためには、AMPプラグインのURLにアクセスしても新たなAMPページに飛べるようにすることである。それが、「301リダイレクト」である。

手順1:301リダイレクトを設定する

301リダイレクトとは?
301リダイレクトは、URLが恒久的に変更された場合に用いられる転送処理のステータスコードです。転送のステータスコードとして他に302リダイレクトがありますが、302リダイレクトは「一時的な転送」を表すものであり、その意味が異なります。
(出典:https://www.seohacks.net/basic/terms/301_redirect/)

AMPページ用の301リダイレクトを設定するには、.htaccessファイルを作成して以下のように記述し、サイトののindex.phpのあるディレクトリにアップロードする。各記事一つ一つ記述しなければならないので記事の多いサイトだと大変かもしれない。
(※自分は.htaccessを使わなかった(てか使ったことがない)ので、間違っていたらごめんなさい。)

RewriteEngine on
RewriteRule ^/p-123/amp$ http://www.example.com/p-123/?amp [R=301,L]
RewriteRule ^/p-456/amp$ http://www.example.com/p-456/?amp [R=301,L]
RewriteRule ^/p-789/amp$ http://www.example.com/p-789/?amp [R=301,L]

こんなの俺には無理だよ…という方(自分もだが)は、プラグインを使う手もある。
「Simple 301 Redirects」というプラグインをインストールし、以下の手順で設定すれば簡単に301リダイレクトを設定可能だ。
1.パーマリンク設定を/で終わる設定にする。
元ページのURLがhttp://www.example.com/p-123 となっている場合は、「カスタム構造」にチェックを入れて、p-%post_id%/と入力する。
2.プラグインの新規追加画面に移動し、検索ボックスに「Simple 301 Redirects」と入力して検索し、「Simple 301 Redirects」プラグインをインストール後、有効化する。
3.管理画面の設定メニューより、「301 Rrdirects」を選択
4.[Request]に /*/amp 、[Destination]に http://example.com/*/?amp=1 と入力する。
5.Use Wildcards? にチェックを入れる。(忘れないこと!)
6.「変更を保存」をクリック。

手順2:Simplicity2のAMP機能を有効化し、AMPプラグインを無効化

301リダイレクトの設定が終わったら、Simplicity2のカスタマイズ画面を呼び出し、「AMP(β機能)」を選択。「AMPの有効化」にチェックを入れ、「保存して公開」をクリック。これでSimplicity2のAMP機能が有効化される。
続いてプラグインのインストール済みプラグイン画面に移動し、AMPプラグインを停止。(出来れば停止後削除したほうが良い。)
AMPページが正常に表示されるのを確認したら一通りの切り替え作業は終了だが、最後に出来ればやっておきたい作業もある。

手順3:AMPキャッシュの更新を行う

AMPキャッシュの更新は以下のアドレスにアクセスすれば更新される

例)元ページのURLがhttp://exampre.com/p-123/の場合
https://cdn.ampproject.org/c/example.com/p-123/?amp=1
※元ページのURLがhttps://exampre.com/p-123/の場合
https://cdn.ampproject.org/c/s/example.com/p-123/?amp=1

これはさすがに各ページ一つ一つに行わなければならない(一括で行う方法はない)ので記事数が多いサイトでは大変な作業になると思うが、出来ればやっておきたい作業だ。

まとめ

Simplicity2のAMP機能は最新のバージョンではエラーが出にくいので、これからAMPを導入する場合にはオススメであると共に、現在他のテーマでプラグインを使用してAMPを導入している人もSimplicity2に乗り換えた方がいいかも知れない。

※この記事を作成するにあたり、以下の記事を参考にさせていただきました。

昨日のエントリーでは、AMPページのURL変更には301リダイレクトが必要な理由を書きました。AMPページのURL変更で、301リダイレクトをする理由は以下の2つです。 301リダイレクトをすることで、ユーザーが以前のAMPページへアクセ
スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする