AMPページに使用する拡張子

AMPページの拡張子

ウェブページをAMP化するにあたり拡張子をどうすれば良いか少し戸惑いました。

公式の案内によれば特に指定はないようですのでhtml.htm.ampなどから選べば良さそうですが、その辺を検討してみることにしました。

WordPressサイトの場合

WordPressで構築したWebサイトの場合、AMP化した後のURLはPCページ用のパーマリンクの後ろに/ampなどが付加されることになります。

これは使用するテーマの機能を利用してAMP化したときと専用プラグインを使ってAMP化した場合では異なり、管理者が文字列を指定できる機能を備えたテーマもあるようです。

WordPressでは、このように管理者が悩むことなく自動でURLの末尾に文字が設定されますが、自分でHTMLページを記述した場合は使う拡張子は自分で決めることになります。

勝手に決めて構わないということですが、お手本みたいな情報が少ないため逆に自由度が高すぎて迷ってしまいます。

静的なHTMLページでは

CMSを使わず自分でHTML文を記述して作成したいわゆる静的ページのAMP化では拡張子をどう選べば良いのでしょう。

単純に.htmlのままで良いとも考えますが、これはcanonicalで指定するPC向けページへ使用したいところです。

一般の技術解説サイトなどでは「.amp.html」で説明をしているところもあり、それでも任意で選んでよいと補足してあります。

拡張子が長くなりすぎるのもどうかといったところです。

そこで候補に上がったのが、ページ中にPHPを使用した場合に使う.phpという拡張子です。

モバイル向けページにAMPを採用すると、Javascriptが制限されることからPHPの使用頻度が増えることも充分あり得ます。

AMPの拡張子にphpを選ぶには、こにように機能的な理由がありますが、後にCDNからの配信を期待する場合はあまり意味がないかもしれません。

しかし、実際にWebページをAMP対応してモバイルデバイスから該当URLを確認してみると、クロームなどのブラウザアプリのアドレスバーには拡張子が省略されて表示されます。

たとえ検索ユーザーへの分かりやすさを意識してhtmlやhtmといった拡張子を使ったとしてもスマホのブラウザには拡張子が表示されない仕様になっていました。

こうしたことから、AMPページに使う拡張子は今のところphpにしています。

なお、PC向けの元ページの拡張子は.htmlへ統一した後でもPHPの使用は想定しておきたいため、あらかじめ.htaccessへ必要な記述を済ませ拡張子がhtmlでもPHPが動くよう対処しておくことにしました。

拡張子をhtmlにしてPHPを実行させる為の.htaccessの記述の一例は、さくらのサーバーでは

AddType application/x-httpd-php .html

エックスサーバーでの一例は

AddHandler fcgid-script .php .html .htm

なお、これらは一例であって標準のhtml拡張子でPHPを使うための記述はサーバー会社によるわけではなく、サーバーの仕様に適した処置が必要になります。

これで、PC対応のページではブラウザのアドレスバーに.htmlを表示する形で使用でき、モバイル端末では拡張子が.phpであると意識せずブラウザへAMPページを表示できるようになりました。

おすすめ記事

ホームページに更新日を表示 作成したWebページに更新日を表示させる記述 テーブルHTMLタグ 分かりやすいテーブルを使った表の作成 静的ページへHTMLで目次を挿入する方法