Webは用いる人のリテラシーで決まる 文学部卒・30代でエンジニアに転向した私の業界裏話や技術ノート
Twitter Facebook
TOP > BLOG > IT記事

MovableTypeをAMPに対応させるためのまとめ記事エンジニア向け

早川朋孝 早川朋孝
文学部卒のエンジニア
業界15年
技術ノート

最近スマホを使って検索していると見かける雷みたいなマークがあるのに気づいただろうか?これが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では以下のように対応したので、苦労している人は参考にしてほしい。

前の記事へ« 次の記事へ »

このブログを書いてる人
早川 朋孝

業界15年のウェブエンジニアです。文学部卒で20代はSEO、アクセス解析などフロントの運用を中心に経験しましたが、30代のある時、ひょんなことから一人情シスのような状況を経験することになり、流れでそのままエンジニアに転向しました。プログラムやサーバー管理、数学の勉強などをしなおして、いまではWebのことはフロントからバックエンドまでなんでもできます。

本が好きで月140時間は読書します。このブログではWeb業界で経験してきた業界の裏側、読書で学んだこと、技術ノートなどを書きます。ネコ好きなタバコ嫌いで、明治学院フランス文学科卒。

facebookへ
PAGE TOP