昨日のエントリーでは、AMPページのURL変更には301リダイレクトが必要な理由を書きました。
AMPページのURL変更で、301リダイレクトをする理由は以下の2つです。
- 301リダイレクトをすることで、ユーザーが以前のAMPページへアクセスした場合も、自動で新しいAMPページへリダイレクトします。
- 以前のAMPページが持っていた被リンクなどの評価を、新しいAMPページで引き継ぐことができます。
今日は、AMPプラグインを止めて、SimplicityのAMP機能を使って、ウェブサイトをAMP化する方法を紹介します。
AMPプラグインを止めて、SimplicityでAMP対応する手順
AMPプラグインを止めて、SimplicityでAMP対応する手順を紹介します。
- AMPコンテンツを301リダイレクト
- SimplicityのAMP機能を有効にする
- AMPプラグインを削除
- 新しいURLでAMPページを確認
- AMPキャッシュの更新
- AMPエラーを潰す
1. AMPコンテンツを301リダイレクト
AMPページのURLは変更になるので、必ず301リダイレクトの設定をしなければなりません。
- AMPプラグインの場合・・・通常サイトのURLの後ろに「/amp」
- Simplicityの場合・・・通常サイトのURLの後ろに「?amp=1」
最初に、すべての記事のAMPコンテンツを、「/amp」→「?amp=1」へ、301リダイレクトします。すべての記事なので、600本近くありました。
AMPプラグインのAMPページは、通常サイトの後ろに「/amp」を付ければアクセスできるのですが、実は、「?amp=1」でもアクセスが可能です。なので、301リダイレクトを先にやっておくのです。こうすることで、AMPプラグインからSimplicityのAMP機能へ切り替えた際に、404エラーを防ぐことができるのです。
わたくしはXserverを使っているので、.htacessに301リダイレクトを追加しました。
- Redirect permanent /aaa/amp/ https://example.com/aaa/?amp=1
- Redirect permanent /bbb/amp/ https://example.com/bbb/?amp=1
301リダイレクトを設定すると
この段階では、AMPプラグインでAMP化をしている状態ですが、「/amp」へアクセスすると、「?amp=1」へ301リダイレクトされ、AMPページが表示されますので、ご安心ください。
2. SimplicityのAMP機能を有効にする
Simplicity側のAMP機能を有効にします。
3. AMPプラグインを削除
AMPプラグインを削除します。
4. 変更後のURLでAMPページを確認
この段階ではAMPプラグインではなく、Simplicity側でAMP対応しています。
- 変更前のAMPページ「/amp」へアクセスがあった場合・・・「/amp」→「?amp=1」へ自動で301リダイレクトします
- 変更後のAMPページ「?amp=1」へアクセスがあった場合・・・「?amp=1」が表示されます
変更前のAMPページ「/amp」、変更後のAMPページ「?amp=1」のどちらにアクセスがあっても、変更後のAMPページの「?amp=1」が表示されることが確認できます。
5. AMPキャッシュの更新
続いて、AMPキャッシュを更新します。
次のURLにアクセスすれば、AMPキャッシュが更新されます。
「aaa/?amp=1」の部分が600本近くあったので、全てやるのはかなり時間がかかりました。
↓AMPキャッシュの更新プロセスがどうなっているのか説明します。
ユーザーがAMPページにアクセスした場合、AMPのキャッシュサーバーはユーザーにキャッシュを送信します。ユーザーは、AMPのキャッシュサーバーのURLを見に行きます。AMPのキャッシュサーバーがユーザーにキャッシュを送信した際、AMPのキャッシュサーバーはオリジナルのAMPページを確認しに行きます。で、オリジナルのAMPページが更新されていたら、キャッシュを再取得します。なので、次にアクセスしてきたユーザーには、新しいキャッシュが送信されることになります。
↓AMPのキャッシュサーバーへの負担軽減のため、リクエストにはルールがあります。
なおサーバーに負荷をかけないために、HTMLドキュメントに対しては最低でも15秒以上の間隔を空けてリクエストします。
画像やリソースに対しては最低でも1分以上の間隔を空けてリクエストします（間隔は将来変更される可能性あり）。
6. AMPエラーを潰す
わたくしは、AMPキャッシュの更新をしながら、1ページずつ、AMPページをチェックしてエラーがあるか確認しました。Search ConsoleでAMPエラーを出したくなかったためです。
600ページ近くあったので、マジで大変だったww
AMPエラーが出てから修正すればいいという方は、Search Consoleの「Accelerated Mobile Pages」で、AMPのエラーを確認できます。2〜3日遅れなので、AMPエラーを放置することになってしまいますが・・・
でもね、AMPエラーがあったとしても、検索結果にAMPページが出てこないだけで、検索結果にはRWDのページが出てくるのでご安心ください。
どんなエラーがあったのか？
Twitterが埋め込んであるページは、ほぼ全てエラーがでました。
再度、Twitterから埋め込みコードを取得して、張り直したところ、エラーは解消しました。
→Simplicity2.5.0でTwitterの埋め込みエラーが解消しています。
AMP表示で環境によって起こるツイート埋め込みの不具合修正
まとめ
以上が、AMPプラグインから、SimplicityでAMP対応する手順でした。
AMPページのURLが変わるので、301リダイレクトは絶対にやってください。
AMPエラーは、Twitterの埋め込みくらいだったので、非常に助かりました。移行した2月15日の時点では、Simplicityのバージョンは2.4.8だったので、Twitterの埋め込みエラーがあったのです。
SimplicityでAMP対応してからは、PVも回遊率も上がりました！やはり、SNSシェアボタンや関連記事が表示されるメリットは大きいですね。
Simplicityを作ったわいひらさんに感謝です。
ナレッジ