MovableTypeを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に対応してみた。
この記事では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導入で苦労した点
成功例 img
#develoment=1を利用したvalidationでsuucessと表示されても、Search Consoleにindexされないことがある。これはAMP化がうまくいっていない証拠。上記の必須の仕様に漏れがあるとSearch Consoleにはindexされない。shemaに漏れがあるとこういう事態になることがあるので、shemaを重点的に見直すべし。
AMPがうまくいかない場合は、うまくいっているページのソースを真似ればよい。以下のページはAMP化されているのでChromeでみると成功例のソースが分かる。
view-source:http://www.shirotruffe.com/blog/amp/apple/ipad-mini-and-feature-phone.php
Movable Typeに特有のAMP対応方法
Movable Typeに特有のAMP対応で特別な対応はないが、強いて難しい点を上げるならブログ記事中のimgタグをうまく変換する必要があるという点だろう。正規表現をつかう必要があるので、多少なりブログラムの知識がないと厳しいかも。
私のMTでは以下のように対応したので、苦労している人は参考にしてほしい。
