ワードプレスのAMPページをオリジナルのURLで表示させるSXGを試してみた

まずはこちらの画像を見てください。

通常検索結果から表示されるAMPのページは、Googleのサーバーにキャッシュされているため、配信されるURLのドメインがGoogleのものになります。

当サイトのように、訪れてくれたユーザーがITのリテラシーに長けていれば問題ありませんが、運営しているサイトのカテゴリ次第では、そのようなユーザーばかりではありません。

ともすれば、パッと見、Googleの名を騙る怪しいサイトに見えかねないこの仕様。

AMP導入の一つの障壁にもなっています。

今回はこのAMPの導入の中でも最大の課題点、「詳しくないユーザーに怪しく思われてしまう」という問題を解決するための技術【SXG】を当サイトに導入してみましたので、紹介します。

「そもそもAMPって何なの？」って方は先に以下の記事に目を通していただけると話がスムーズに進みます。

SXGとは？

We are making changes to how AMP works in platforms such as Google Search that will enable linked pages to appear under publishers’ URLs instead of the google.com/amp URL space while maintaining the performance and privacy benefits of AMP Cache serving.

###翻訳###
Google検索などのプラットフォームでAMPがどのように機能するかを変更して、AMP Cacheサービスのパフォーマンスとプライバシーの利点を維持しながら、google.com/ampのURLスペースではなく、リンク先ページをサイト運営者のURLに表示できるようにします。

https://blog.amp.dev/2018/01/09/improving-urls-for-amp-pages/

SXGとは、【Signed HTTP Exchanges】の略。

上で紹介した通り、Googleは2019年4月16日より、Google検索からアクセスしたAMPページのURLが、AMPキャッシュ(Googleドメインのサーバーから)ではなく、オリジナル(自前のサイト)のURLで表示するSXGに対応しました。

現状このシステムに対応して要件を満たしているのは非常に狭い範囲です。

• Google検索である事
• もちろん、スマホからの検索
• なおかつ、ブラウザはGoogleChromeのみ

今のところ、かなり限定的なシステムであることは承知の上で、やっぱり新しい技術ってのは気になるので、どうしても試してみたくて、今回当サイトに実装してみることにしました。

SXGの導入実績のある有名サイト

大手のサイトではYahoo!JAPAN がAMP関連の技術には非常に積極的で、既にYahoo!トラベルのSXG対応を発表しています。

既に昨年末から、Google検索においてAMPとSXGを連携させた Developer Preview が始まっています（Developer Preview of better AMP URLs in Google Search）。Yahoo!検索でも、今回のカンファレンス発表にあわせてSXGトライアル Developer Preview を開始しました。どうやって実際にSXGを試すことができるのか、当日の発表を楽しみにお待ち下さい。
Yahoo!検索のSXGトライアル Developer Preview では、SXG対応ページに下図の通り「SXG」の表示が現れます。

既にAMP対応しているYahoo!トラベルも今年2月よりSXG対応を始めました。Yahoo!検索の結果から、Yahoo!トラベルのSXGページをクリックすると以下のように表示されます。

https://techblog.yahoo.co.jp/web/trial_sxg/

SXGの導入方法

どうやって導入するのか。

とりあえず公式ドキュメント。

[char no=”1″ char=”かつをくん”]いや、さっぱりわからん。無理。[/char]

生でサーバーやらのシステム構成して実装するのはあきらめました。

調べたところCloudflare(クラウドフレア)というCDNサービスがあって、そっちを経由するとボタン一つで実装できるとのこと。

Cloudflareの設定

Cloudflare公式

登録はサクッと終わらせれると思うので省略します。

少しややこしいのが、現状使っているサーバーのNS（ネームサーバー）を変更してCloudflareのサーバーに向ける必要がある事。

それぞれの運用しているドメイン管理会社で状況は違うので、各サーバーの管理ページからNS（ネームサーバー）を以下に指定されるものに変更。

ネームサーバーの変更

例ではバリュードメインを使っています。

①管理画面から「ドメインの設定操作」

②登録ドメインからネームサーバーを選択

③もともとあったNSを削除して上記二つのサーバーのみを指定する。

これで完了です。

Cloudflare設定変更箇所

NSの設定が上手くいっていたらCloudflareがトラフィックを計測し始めます。

こんな感じになっていればNSの設定はOKです。

更にスピードタブを選択。

下にスクロールして「AMP Real URL」をONに変更して操作完了です。

サイトに実装後の検索結果

まとめ

Cloudflareはその他、ページのキャッシュ機能など、高速表示やサーバーの負荷分散に使える、便利なCDNです。

AMPとSXGはさておき、ワードプレスが重くて表示速度が気になっているような方にも使える無料サービスですので、この機会に是非導入を検討してみてください。