Movable TypeにおけるAMP(Accelerated Mobile Pages)への基本的な対応方法

2016.03.19

Hacks

先日モバデビで対応したAMP(Accelerated Mobile Pages)。
うちはWordPressで運用していることもあり、ベースとしてはAutomattic謹製のAMPプラグインを導入して対応しましたが、今回はMovable Typeで対応するにはどうしたらよいか、基本的な部分のみですけどまとめてみました。MTユーザーの参考になれば幸いです。

なんでMovable Typeの記事?

「なんでWordPressユーザーなのにMovable Typeの対応?」
というごもっともなご質問もあるかと思いますが、Movable Typeはまったく触らないというわけではありません。業務上触る機会も多いですし、僕がデザインとフロントエンドをやらせてもらっているネタフルは、Movable Typeで運営されています。

まぁ、そんなこともあって、Movable TypeでのAMP対応についてはGoogleが検索結果に実装反映させる以前から手を付けていたりもするんですね。

で、今回の基本的な対応方法は、今後別案件でも使うケースは多々あるだろってことで、備忘録的にまとめたものになります。
あくまでもベースとするものなので、いろいろ微調整は必要。本記事を読んで対応される方はご留意ください。

Movable TypeにおけるAMP対応

Movable TypeでAMP記事を配信する場合、WordPressと違ってプラグインなどを使わずに完全自前実装をしなければなりません。
といっても、さほど難しいものではないのでご安心あれ。

さらっと手順だけ紹介すると、

AMPページ出力用のテンプレートを準備する
AMP用のアーカイブマッピングを設定する
再構築

というのが、おおまかな流れになります。

この流れで対応すれば、記事を公開・更新することで自動的に静的なAMPページが出力されるわけです。手順だけ見れば難しくないでしょ?

で、AMPに対応したネタフルは、以下のようになっています。

左が通常版。右がAMP版です。
自前実装ということもありましたが、何よりシングルカラムデザインで作ってあることもあって、AMPで閲覧した際もなるべく印象を変えないよう、通常版に近いデザインにしてあります。

AMPページ出力用テンプレートを準備する

Movable TypeにおけるAMP対応で最も重要とも言えるのがテンプレートの準備。
これがないとAMPページがそもそも出力されないわけで、そりゃ当然といえば当然ですね。

で、具体的にはどうするのかということですが、その前にまずAMPのドキュメントをきちんと熟読しておくことをオススメします。
というのもですね、AMPの仕様って厳格すぎるくらい厳格なのですよ。読んでいるのと読んでないのではかなり大きな違いがあります。

で、おおまかに理解していることを前提に、僕が作ったベーステンプレートのコードが以下。

いちいち詳しい解説をするのは省きますが、とにかくAMPの仕様に沿ってコーディングしていくことが重要です。
コーディングはHTML5がベース。script要素はAMPで使うことのできるv0.jsやamp-anim、amp-iframeなど、仕様で決められたもののみ入れていきます。

さて、「このコードを使えば対応できるのね」と安易に思った人はまだまだ甘いです。上述したようにこれはあくまでもベースなので、これだけでは確実にエラーが出ます。

肝心なのはコンテンツ部分のタグです。
AMPは使用不可能なタグが多く、画像を示すimgや、Embedで使われることの多いiframeといったものは、AMPの仕様に則ったamp-img、amp-iframeといった要素でなければいけません。

といっても、通常版の記事がありますから、記事を書く際にAMP仕様の要素を使うわけにはいかないですよね。なので、ベーステンプレートのコンテンツ出力部分でそれぞれ置換して出力するようコーディングする必要があります。

そうした置換処理ができていれば、上のようにAMP用の要素で出力されます。このあたりについては人によってやり方もいろいろでしょうし、単純にタグの置換だけなので、ググッて調べてみてください。

その他にもAnalyticsの設置や、広告の設置といったことも可能なので、そのあたりはドキュメントを見ながら実装していくといいでしょう。

通常版の記事ページにrel=”amphtml”を加える

さて、AMPページ出力用テンプレートに関連してのことですが、既存の通常版記事を出力するテンプレート、あるいはheadを内包するモジュールに、AMPページを指し示すlinkタグを加える必要があります。

このタグがないと、GoogleのクローラーがAMPページの存在を検知できず、いつまでたってもAMPページをクロールすることもなくインデックスもされないままになってしまいます。必ず挿入するようにしましょう。

<link rel="amphtml" href="AMPページURL">

これを記事ページでのみ出力するようにしてください。

アーカイブマッピングを設定する

テンプレートを準備したら、[テンプレートの設定]でアーカイブマッピングを作成する必要があります。
このあたりはMTユーザーならわかっていることだと思うので、さっくり説明しておきますが、設定するマッピングはお好みに沿ってしまって問題ありません。

前項で解説したrel="amphtml"で指定したAMPページURLと同一になるように設定さえすればいいでしょう。

ネタフルの場合は、/categoryName/entryID.amp.htmlとなるようマッピングしてあります。

再構築する

ということで、あとは記事を再構築するのみ。
ネタフルは記事数多いので、これが大変なんですよねぇw

まぁきちんと出力されるかどうかを確認するだけなら、1記事だけ再構築でもOKでしょう。置換処理がちゃんとできてるかどうかを確認するなら、画像やiframeをまるっと含むテスト記事を用意して、それで動作確認してもいいかもしれませんね。

AMP対応しても必ず表示されるわけじゃない

Photo:GOOGLE By clasesdeperiodismo

当たり前といえば当たり前のことなんですが、AMP対応を行ったからといって、必ずしも検索結果のカルーセルに表示されるわけではありません。

これはMTに限った話ではなくどんなCMSでも同じ。

今のところ、どういう条件下で表示されるのか、詳細は不明ですが、わりとニュース系の記事に限られているのかなという印象です。

まぁ、対応しないよりは対応しておいたほうが将来的なことを考えると無難だよね、っていうのが正直なところです。

今回まとめたように、Movable Typeでも割りとそこそこ簡単にAMP対応は可能なので、サクリと実施してしまってはどうでしょうか?

ちなみに、上の流れで対応したあとは、Search Consoleを使って、エラー修正していく作業も必要です。

AMP対応したならSearch Consoleでエラーチェックをしておこう

いろいろな個人ブログでAMP対応を実施しているところが増えてきました。しかしAMPはかなりエラーが出やすい厳格仕様です。エラーが出ていないかしっかりチェックをしておきましょう。

テンプレートの作成やらなんやら以上に、この修正のほうが労力かかるかもw