はじめまして、PR TIMESの開発本部でインターンをさせていただいている宮崎と申します。
これまでは新規サービス開発に従事していたため、実際に動いているサービスの開発に関わるのは今回が初めてです。
今回はAMP削除を行った話について書きたいと思います。
AMPとは
AMPとはAccelerated Mobile Pagesの略で、主にモバイルページを高速に表示させるためのプロジェクト、または、そのフレームワークのことを指します。
通常のページとは別にAMPページを作成することでページの高速化を実現できます。
なぜAMPを削除するのか
Googleがこの「AMPの優遇」を2021年6月に終了したため、AMPを使う理由がなくなりました。
また、AMPページをこのまま残してしまうと、非AMPページを修正した際、AMPページも修正する必要があり、機能改修時の開発工数が上がってしまいます。
これもAMPを削除する大きな理由だと言えます。
始めるにあたって
AMPを知らない、インターンが始まって数日で、PRTIMESのソースコードに触れるのは本件が初めてでした。色々わからないことがありましたが、調べたり教えていただきながら進めました。どなたが何の担当の方かもわからず誰に聞けばいいかを聞くことから始まりました。
特に気をつけたのは、PRTIMESは常に動いており、PV数やパフォーマンスなどはユーザーに直接影響を与えます。そのため事前に情報を洗い出し、調査を行い進めて行きました。
Googleが「AMPページを削除する方法」を提供しているのでそれに基づいて進めました。
実際にAMPを削除する
FAQより
Q: What else do I need to consider if I decide to stop using AMP? How will it impact the way my content appears in Discover or Google News?
https://support.google.com/webmasters/thread/104436075/core-web-vitals-page-experience-faqs-updated-march-2021
A: While the Discover feed shows a lot of AMP content, AMP is not a requirement nor a ranking factor for serving in this space. Article cards for AMP pages are automatically eligible to use a larger thumbnail image. These larger images have a higher click-through rate than smaller, thumbnail images. Given this, we recommend that if you decide to go off AMP you make larger images available to Google for your non-AMP content. You can do so by adding the max-image-preview:[large] robots meta tag setting on each page.
要約
Q: AMPの使用をやめることにした場合、他に何を考慮する必要がありますか？
A：AMPを使用しない場合は、AMP以外のコンテンツでGoogleがより大きな画像を利用できるようにする必要がある。そのために、max-image-preview: [large] robotsメタタグ設定を追加する。
とあったのでまずmax-image-preview: [large]の指定を行いました。
手順
段階的に行い、その都度問題がないか数値を確認しながら慎重に進めました。手順は以下の通りです
- headerに以下を追加し、AMPを削除した場合でもGoogleが大きな画像を利用できるようにしておきます。
<meta name="robots" content="max-image-preview:large">2. rel="amphtml"がついたリンクを削除します。
ここでGoogle Search Consoleチェックすると、GoogleがAMP認識するページが徐々に減っていて、検索パフォーマンスに影響が出ていないことが確認できました。
手元の環境で試せない不安があったので、これがわかったときは嬉しかったです。
Googleが提供している「AMPテスト」というツールでも確認することができました。
3. 削除したAMPページの応答として302を返すようにサーバーを設定します。
ここで302を返す理由として301を返してしまうとブラウザがキャッシュしてしまいます。何かあった時に戻せなくなるので302を返すことにしました。この時リダイレクト先として非AMPページを指定します。
4. 削除したAMPページの応答として301を返すようにサーバーを設定します。
3で問題ないことを確認し、SEO上の評価を引き継ぐために、AMPページの応答を301にします。
5. 不要なAMPページ、サーバの実装を削除します。
Google Search Consoleから有効なAMPページが徐々に減っていることを確認できます。
最後に
AMPについて知っていることはありませんでしたが、無事にAMPを削除することすることができました。
また、PRTIMESのソースコードに触れるいい機会になりました。
今後もサービスをより良いものにしていけるように取り組んでいきます。
