AMPプラグインを止めて、SimplicityでAMP対応する手順

昨日のエントリーでは、AMPページのURL変更には301リダイレクトが必要な理由を書きました。

先日のエントリーで、AMPページのアクセスを上げる方法を紹介しました。 どうやってAMPページのアクセスを上げるのかというと、...

AMPページのURL変更で、301リダイレクトをする理由は以下の2つです。

  1. 301リダイレクトをすることで、ユーザーが以前のAMPページへアクセスした場合も、自動で新しいAMPページへリダイレクトします。
  2. 以前のAMPページが持っていた被リンクなどの評価を、新しいAMPページで引き継ぐことができます。

今日は、AMPプラグインを止めて、SimplicityのAMP機能を使って、ウェブサイトをAMP化する方法を紹介します。

スポンサーリンク
レクダンクル(大)

AMPプラグインを止めて、SimplicityでAMP対応する手順

AMPプラグインを止めて、SimplicityでAMP対応する手順を紹介します。

  1. AMPコンテンツを301リダイレクト
  2. SimplicityのAMP機能を有効にする
  3. AMPプラグインを削除
  4. 新しいURLでAMPページを確認
  5. AMPキャッシュの更新
  6. 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://ischool.co.jp/aaa/?amp=1
  • Redirect permanent /bbb/amp/ https://ischool.co.jp/bbb/?amp=1

301リダイレクトを設定すると

この段階では、AMPプラグインでAMP化をしている状態ですが、「/amp」へアクセスすると、「?amp=1」へ301リダイレクトされ、AMPページが表示されますので、ご安心ください。

2. SimplicityのAMP機能を有効にする

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キャッシュが更新されます。

https://cdn.ampproject.org/c/s/ischool.co.jp/aaa/?amp=1

「aaa/?amp=1」の部分が600本近くあったので、全てやるのはかなり時間がかかりました。

↓AMPキャッシュの更新プロセスがどうなっているのか説明します。

ユーザーがAMPページにアクセスした場合、AMPのキャッシュサーバーはユーザーにキャッシュを送信します。ユーザーは、AMPのキャッシュサーバーのURLを見に行きます。AMPのキャッシュサーバーがユーザーにキャッシュを送信した際、AMPのキャッシュサーバーはオリジナルのAMPページを確認しに行きます。で、オリジナルのAMPページが更新されていたら、キャッシュを再取得します。なので、次にアクセスしてきたユーザーには、新しいキャッシュが送信されることになります。

↓AMPのキャッシュサーバーへの負担軽減のため、リクエストにはルールがあります。
Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法

なおサーバーに負荷をかけないために、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の埋め込みエラーが解消しています。

Simplicity2.5.0公開。主に不具合修正。

AMP表示で環境によって起こるツイート埋め込みの不具合修正

まとめ

以上が、AMPプラグインから、SimplicityでAMP対応する手順でした。

AMPページのURLが変わるので、301リダイレクトは絶対にやってください。

AMPエラーは、Twitterの埋め込みくらいだったので、非常に助かりました。移行した2月15日の時点では、Simplicityのバージョンは2.4.8だったので、Twitterの埋め込みエラーがあったのです。

SimplicityでAMP対応してからは、PVも回遊率も上がりました!やはり、SNSシェアボタンや関連記事が表示されるメリットは大きいですね。

Simplicityを作ったわいひらさんに感謝です。

10/21より日本のGoogleの検索結果にAMPが対応されることになりました。 ↓Google Developers Japanでア...
このサイトは、2016年4月19日からAMPを導入してます。 AMPからのアクセスを把握したいので、Google Anaryt...
スポンサーリンク
レクダンクル(大)
レクダンクル(大)

フォローする

Instagram

▼このエントリーが役に立ったらいいね!
▼このエントリーが役に立ったらいいね!