2016/09/26

Movable TypeをGoogleのAMPに対応するのに役立つまとめ記事

最近スマホを使って検索していると見かける雷みたいなマークがあるのに気づいただろうか?これがAMPだ。で、この雷マークは一体何だろう?

目次

  • AMP(Accelerated Mobile Pages)とは
  • Movable TypeのAMP対応方法
  • レスポンシヴとの違い
  • 関連リンク

AMP(Accelerated Mobile Pages)とは

このマークがあると、ブラウザでニュースを表示させたときにめっちゃ速く表示される。実際に手元のスマホで何か検索して試して欲しい。雷マークがある記事とない記事とでは表示速度が全然違うのを体験できる。雷マークは「びゅんっ!」という感じで一瞬で表示される。これがAMPだ。

これはウェブ担当者、ウェブマスター、ウェブデザイナーなどが知っておくべきGoogle推奨の技術で、AMP(Accelerated Mobile Pages)という技術だ。
AMPとはスマホ向けのウェブページを高速に表示させる技術で、この仕様に従ってウェブページを作成すればスマホでページを閲覧する時、「びゅんっ」て一瞬で表示される。当然、一瞬で表示されるページのほうが閲覧者に喜ばれる。
そしてSEOに効果もありと、ウェブマスターには嬉しい技術。

2016年2月頃にリリースされたばかりのAMPは、まだウェブマスターの間で知名度は低い。
何より2016年9月時点でウェブページをAMP対応しても、必ずしもGoogleがAMP対応ページとして表示してくれるわけではない。しかし、いずれ優先してAMP対応のページが表示されるのは間違いないと思う。先取りして対応しておくのは悪くないだろう。
というわけで早速このブログもAMPに対応してみた。実際に以下の2つをスマホで閲覧して比較して欲しい。/amp/とURLについているほう(上のほう)が表示が速いことに気づくだろう。

この記事ではCMS「MovableType」を使っているウェブサイトをAMPに対応させるために、ウェブマスター、サイト管理者、ウェブ制作会社がやるべきことを紹介する。

AMP対応ページの作成方法

ウェブページをAMPに対応させる方法を具体的に紹介する。最初にやるべきは、先ずはAMPの基本的な仕様を押さえることだ。

まずはAMPの基本を押さえる

AMP対応をするにはウェブマスターは仕様書を熟読するしかない。一部日本語化されたドキュメントもあるが英語の部分も読まないとAMPは消化できないので頑張って読むべし。さて、AMP化の必須ルールは以下の通り。

  • AMP宣言を記述する
  • styleは全て例外なくheadタグの中に
  • shemeを必ず書く
  • amp-imgタグにする
  • style属性は禁止
  • 禁止タグがあるので仕様書を熟読して使わないようにすること
  • link canonicalは必須
  • ampフォルダとかを作ること

#develoment=1でAMPを検証

上記の必須要素を反映したAMPページを作成したら、Google Chromeを使って対応可否の検証ができる。URLの末尾に「#develoment=1」を追加してChromeのConsoleを見ると、どこにエラーがあるか教えてくれる。以下のような感じでエラーが表示される。

AMP導入で苦労した点

一方で成功例するとエラーが表示されない。シンプルにこんな感じ。

問題は#develoment=1を利用したvalidationでsuucessと表示されても、Search Consoleにindexされないことがあるという点。これはAMP化がうまくいっていない証拠。上記の必須の仕様に漏れがあるとSearch Consoleにはindexされない。shemaに漏れがあるとこういう事態になることがあるので、shemaを重点的に見直すべし。

AMPがうまくいかない場合は、うまくいっているページのソースを真似ればよい。以下のページはAMP化されているのでChromeでみると成功例のソースが分かる。 AMPのhtmlソースサンプル

Movable Typeに特有のAMP対応方法

Movable Typeに特有のAMP対応で特別な対応はないが、強いて難しい点を上げるならブログ記事中のimgタグをうまく変換する必要があるという点だろう。正規表現をつかう必要があるので、多少なりブログラムの知識がないと厳しいかも。

私のMTでは以下のように対応したので、苦労している人は参考にしてほしい。

<mt:EntryBody regex_replace='/<img([^>]+) \/>/g','<amp-img$1 layout="responsive"></amp-img>'> <:mt:EntryMore regex_replace='/<img([^>]+) \/>/g','<amp-img$1 layout="responsive"></amp-img>'>

レスポンシブ・ウェブデザインとの違い

ちなみにレスポンシブとAMPの違いは何だろうか。レスポンシブ・ウェブデザインのウェブ閲覧の流れを細かく見ると以下のようになる。
スマホ端末はPC向けのページのソースコードを全て読み込む。それをスマホ向けのCSSを読み込みレイアウトがスマホに最適化される、という流れだ。

つまりスマホ端末はPCサイトと同じ量のソースコードを読み込んでいるので、通信量が多くなる。表示も遅いし、無駄な通信が発生している。これをクリアするのがAMPという技術なので、当然AMPのほうがレスポンシブよりスマホには優しい。

最近のエントリー

おすすめ記事

このブログの筆者

早川朋孝
早川朋孝
ネコ好きな読書家。
月一冊は専門書を読むのが目標。年間読書計画はだいたい決まっているが、だいたい横にそれるのが悩み。好きな作家は塩野七生さん、佐藤優さんなど。タバコ嫌いで、ちょい右寄りです。

仕事はウェブが専門。学生の頃よりウェブ制作に従事し、CMSの提案やアクセス解析が得意。上場企業や、東京オリンピック関連サイトなど大規模ウェブサイトのプロジェクトを多数経験。仕事のウェブサイトはこちら
TwitterとFacebookとRSSで更新情報を受け取れます
RSS

最近のエントリー