先日wordpressとMovable Typeのサイトの記事をAMP対応する機会がありました。
今回は、そんなAMPについて、少し記事にしたいと思います。
AMPってなんだ？？
最近スマホで検索すると見かけるようになった[su_highlight background=”#99efff”]「イナズママーク」[/su_highlight]のついた記事。
Accelerated Mobile Pages（加速化モバイルページ）の頭文字でAMP（アンプ）と呼ばれるプロジェクトで、GoogleとTwitterで共同開発されている、モバイル端末でのサイト表示を超高速化するための取り組みです。スマホでwebサイトを表示する際、画像が多かったり作り込まれているサイトを表示するのに時間がかかってしまう場合があります。そこで、AMP独自のルールに則ったページを用意することで、Webページのデーターをgoogle・twitter側でページをキャッシュして、サイトを素早く表示させる仕組み。これがAMPです。
検索した際にgoogleが、「その検索キーワードでしたら、こちらの記事が軽くておすすめですよ！」とイナズママーク付きの記事をおすすめしてくれている様なイメージでしょうか。
目的のページをサクサク見れたり、データ通信量が少なくて済むので、ユーザーとしては大変嬉しいサービスになります。
AMP対応することの具体的なメリットは？？
・モバイルページの表示速度が上がる。
AMP対応ページはgoogleやTwitterのサーバーにキャッシュされ、読み込み時間が短縮されるので、モバイルページを高速で表示できます。
・イナズママークがつくことで、「サクッと見れるいいページありますよ！」とユーザーにアピールできるので優先的に見てくれる可能性がある。
とにかく表示が早いです。通常のページだと完全に表示されるのに3〜10秒ほどかかりますが、AMPページは体感的にパッっと開くので、離脱率が劇的に下がる見込みがあります。
・検索結果のトップニュース枠カルーセル部分に、写真付きでサイトが表示されることがある。
検索のTOPに大きく画像付きで表示されるので、クリック率が上がる可能性が高いです。ロゴや画像がでるので、視覚的に印象にも残りやすい点も素敵です。
・検索結果の上部に表示される可能性を秘めている。
AMP導入の具体的なデメリットは？？
・通常のHTMLとAMPのHTML両方を管理する必要になる場合もある。制作の手間が増える。
・AMP独自のルールで使えるスクリプトやタグが制限されており、対応前と後ではデザインやコンテンツの表現が同じにできない場合がある。
・設置できる広告に制限がある
・新しい技術なので、仕様の変更などが頻繁におこなわれている
wordpressでのAMP対応
とりあえずAMP化させるだけでいうと、プラグインを導入するのが手っ取り早いです。
今回はこちらのプラグインを利用しました。
なんといってもwordpressの会社がつくっているプラグインなので、安定感がウリです。
有効化するだけで、投稿ページのAMPページが生成されます。
プラグインフォルダーの中にampフォルダーが生成されます。
[su_highlight background=”#99efff”]/wp-content/plugins/amp/templates/テンプレートファイル[/su_highlight]
ampフォルダーの中にtemplatesフォルダーが入っていますので、そのtemplatesフォルダーを現在表示させているテーマフォルダーの中にコピーしてフォルダー名をampにリネームして、テンプレートを直接カスタマイズするのが良いです。
[su_highlight background=”#99efff”]/wp-content/themes/テーマフォルダー/amp/テンプレートファイル[/su_highlight]
AMPページに使えるCSSは50kbまでと決まっていますが、50kbもあればそこそこ装飾できます！
難しいのは、関連記事や人気記事、投稿など記事内のコンテンツでプラグインを使っている場合は、禁止されているimgタグなどが簡単にamp-imgタグに変換できないので、phpなどの調整が必要になります。
テンプレートやfunctions.phpなどに、構造化データをきっちり書いておくと、検索時のカルーセルに表示される様になります。
wordpressの場合imageの指定は書かなくても、アイキャッチ画像を表示してくれる様です。
AMP化させるプラグンはいくつか出されていて、構造化データに必要なロゴや画像の設定が簡単にできたり、サイドナビがデフォルトで付いてくるものもありますので、色々試してみても良いでしょう。
AMP 公式サイトです
AMP by example テクニック的なことがまとまっています
Movable TypeでのAMP対応
手順としては、
１：AMP用のテンプレートを作る。
２：AMP用のアーカイブマッピングを設定する。
３：通常のテンプレートに「AMPページありますよ」タグを追加する
４：AMP用テンプレートと通常のテンプレート両方再構築
Movable Typeにも「AmpConvert」というAMPページ生成支援プラグインがあります。
imgタグをamp-imgに置換してくれたり、サイズを付加してくれたり、インラインCSSを除去してくれます。
この場合注意しないといけないのは、記事に直接インラインでstyle書かれている場合、AMPページでは除去されてしまうので、色指定されていれば色が消え、マージンやパディングなどは、位置がずれが起こり、表示が崩れてしまうと言う点です。
Movable Typeもwordpressと同じくCSSの容量は50kbまでに抑える必要があり、javaスクリプトや広告のタグもAMPが指定する物のみ使用可能となります。
google chromeのデベロッパーツールで、ampページを表示したURLの後ろに[su_highlight background=”#99efff”]#development=1[/su_highlight]を付加して確認すると、エラーの確認や、問題なく対応できているかなどを見ることができます。
また、AMPテストができる専用のページなどもあります。[su_highlight background=”#99efff”]https://search.google.com/test/amp[/su_highlight]
・サイトをAMP対応させたい！
・自分でやってみたんだけど、その後どうすれば良いかわからなくなった！
・興味があるけど、結局どうなるの？
などなど、AMPのことならなんでもお問い合わせください。[su_button url=”https://wid.jp/core/contact/” background=”#ef8f2d” size=”8″ center=”yes”]お問い合わせはこちら[/su_button]
