AMP対応を行う。

AMP対応を試してみたいと思います。

まずAMPについてですが、

「AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。」

AMP対応のメリット

・サイトの高速化

・Google検索結果のカルーセル部分に表示させることができる

AMP対応デメリット

・一部のjavascriptしか使用できない

・cssの外部呼出しができない

 

単純なニュースサイト等の詳細ページを対応するのはよさそうですが、

javascriptで複雑な動きをさせたいページで対応は難しそうです。

またすでに作成されたページに対して、APM対応を行うとなると苦労しそうです。

 

AMP対応方法

対応方法はこのサイトを参考にさせて頂きました。

・<!doctype html>で開始

・<html> を<html amp>に変更

・<head> タグ内に <link rel=”canonical” href=”URL” /> タグを入れて、hrefに自分自身を指定。

・<meta charset=”utf-8″>を<head>の開始 タグ直後に配置

・<head> タグ内に<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>を追加

・<script async src=”https://cdn.ampproject.org/v0.js”></script>を<head>の閉じタグの直前に追加

・<img> を<amp-img>へ変更

・ <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>を追加

・<link rel=”stylesheet” href=”css/style.css”>のようなスタイルの外部よびだしをやめて <style amp-custom> </style>に外部よびだしの中身を記述

 

 

変更前のhtml(index.html)

 

 

 

変更後のhtml(index-amp.html)

 

確認方法

URLの末尾に「#development=1」を追加し、chromeの開発者ツール(F12で開く)を確認

コンソールに「AMP validation successful.」が表示されていれば成功です。

はじめはCSSの内容を「style amp-boilerplate」に記述してエラーがでてしまったのですが、

「style amp-custom」に記述し成功しました。

今回のような単純なページの場合は対応は楽ですが、複雑なページはやはり対応そうです。

以上です。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です