Accelerated Mobile Pagesの解説

AMPとは

AMP(Accelerated Mobile Pages)とは、モバイル端末でのWebページの閲覧を高速化するためのサービスで、GoogleとTwiiterの共同開発のプロジェクトです。 2016年2月にGoogle検索への対応が始まり、それをきっかけにより身近な存在になりました。  

AMP対応ページの作り方

AMPに対応したWebページを作成するためには、AMP HTMLの仕様に則った記述方法で作成する必要があります。 通常のHTML5の構文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="sample.js"></script>
</head>
<body>

</body>
</html>
AMP HTMLの構文
<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="canonical" href="PCページのURL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
<body>
 
</body>
</html>
 

AMP HTMLで仕様変更された要素

基本的には通常のHTMLと同じ様にかくことができますが、記述の仕方に変更がある要素や、使用できなくなった要素があるので注意が必要です。 img → amp-img(src,width,heightの指定が必須) video → amp-video audio → amp-audio iframe → amp-iframe 以下の要素は全て使用不可になります。 frame, frameset, base, object, param, applet, embed, form  

AMPのメリット

カルーセル表示になるので大きく領域を取って表示されクリック率が上がるのに加え、クリックされなかった場合も写真やテキストを見てもらうことができます。 従来に比べてページの読み込みが早くなるのでユーザーのストレスを軽減できます。  

AMPのデメリット

AMP HTMLに対応させなければならないため、仕様の変更を理解して管理する手間がかかります。 さらに、使用できる広告が限られているのでサイトによっては不都合が生じる場合があります。  

まとめ

AMPに対応するためには通常のHTMLではなくAMP HTMLで作成する必要がありますが、通常のHTMLと大きな差はないのでモバイルページを多く作成するのであれば覚えておいて損はないと思います。   公式リンク https://www.ampproject.org//

コメントを残す

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