AMP(Accelerated Mobile Pages)HTMLの書き方、実際に書いてみた ｜ SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

 ＞  ブログ  ＞ 2016/04/15

AMP(Accelerated Mobile Pages)HTMLの書き方、実際に書いてみた

2016/04/15 カテゴリ - 技術情報

AMPのコーディングルール

前回の記事でAMP (Accelerated Mobile Pages) の簡単な仕様についてまとめさせていただきましたが、今回は実際にAMP HTMLでのコーディングのルールを確認していきたいと思います。

対応ページ


https://drive.google.com/a/glad-cube.com/file/d/0BxvWUiBQ8jznNXhISW4zRFF0eW8/view

googleの公開したAMP導入ガイドによると、AMPバージョンを用意すべき用意すべきページとして、リーフノードコンテンツが上げられています。
この場合のリーフノードコンテンツとは、ブログなどの記事ページ、商品のレビュー、動画ページなどです。
今後は大半のページが対応予定となっておりますが、まずは本ブログの記事ページをAMP化させてみたいと思います。

検索結果に反映させるには

下記の記法に則ってコーディングを行ない、かつ構造化データがある場合にGoogleの検索結果に表示されます。

記法・書き方

記法を簡単にまとめると以下のようなものです。
記事の最後にサンプルのhtmlファイルをご用意しましたので、そちらもご参照ください。
1) 文書型宣言はHTML5と変わりません。


<!doctype html>

2) html要素にamp 属性を付けます。⚡でもかまわないそうです。

<html amp>

3) meta要素を記述します。
文字コード、ビューポートの設定です。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4) canonicalで通常のHTMLへのリンクを追加
同じコンテンツのページが2つ存在することになりますので、元ページへcanonicalを記載します。

<link rel="canonical" href="http://sitest.jp/blog/?p=2080">

5) scriptタグでJSON-LDを設定
構造化データのJSON-LDを追加します。

6) boilerplateを記述
AMPを使用する上で表示を高速化させるため記述する必要のある決まり文句がありそれらをboilerplateと呼びます。
少し長いですが、どのページでも記述内容は同じですのでコピペで大丈夫です。
むしろ改変するとバリデーションエラーがでましたのでご注意ください。

<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>

7) ライブラリの読み込み
AMPを動作させるためのライブラリを読み込みます。

<script async src="https://cdn.ampproject.org/v0.js"></script>

かなり普段と勝手が違うのが分かるかと思いますが、上記7つの記述いずれか一つでも間違っていたり省略するとSearch Console上でエラーがでて検索結果に反映されなくなります。(boilerplateの記述は省略可)
元ページにもクローラーからAMPページがあることを認識してもらう必要があるので、元ページのhtmlファイルのhead内にlink要素でampバージョンのURLを指定する必要があります。

上記はコードを書く下準備ですので、ある程度共通化できると思います。
しかしコンテンツをコーディングする際は各html要素の違いを把握する必要があるので、さらに作業は増えます。

タグについて

基本的に画像やアニメーションを実装するには専用のカスタムタグを使用する必要があるのですが、
このカスタムタグの中でデフォルトで実装されているものは

  • amp-ad
  • amp-img
  • amp-pixel
  • amp-video
  • amp-embed

 

の5つのみでそれ以外はオプションとして別途読み込む必要があります。
カスタムタグの読み込み方は単純でscript要素にsrc属性とcustom-element属性を記述するだけ使用可能となります。
YouTubeやFacebookといった主要なサービスのタグも既に提供されており、カスタマイズ性はあります。

ただし、例えばamp-img だと幅、高さを記述しておく必要があったり、
それぞれのカスタムタグの記述方法を確認しておかないと従来のタグと仕様の違っているものがほとんどのようです。

そもそもform要素のようにまだ使用不可となっている要素もあります。
この制限のためまだ対応可能なページというのは少ないです。

加えて前回の記事でも紹介したとおり、cssはインラインで記述する必要があります。

このように厳しいバリデーションとすべての記述を1ファイルに書き込むことからリッチスニペットのように気軽に導入というわけにはいかなさそうです。

まとめ

既存のコーディングと比べ非常に複雑な仕様と対応ページもまだまだ少ないAMP-HTMLですが、モバイルデバイスでの表示速度が劇的に改善できるメリットは非常に大きいです。

しかし現状記事コンテンツに対し適用させていくにあたり問題も残っています。
Wordpressなどの動的に作成されるページの対応です。
この場合どんなに「HTML」の表示速度が優れていてもPHPに一度リクエストを送信し生成されるページを表示するのでAMP-HTMLの表示速度の恩恵は充分に得られません。

検索エンジンの表示には対応できるらしいのですが、AMP-HTMLのコンセプトとは外れてしまっているので、検索結果に反映されなくなるかもしれません。

そういった意味で、静的なコンテンツを出力するMovable TypeなどのCMSの方が有利かもしれません。

またWordpressにはAMP対応するためのプラグインもあるのですが、プラグインというよりAMP対応テーマをリクエストに応じて出し分ける仕様のようです。
デザインなどを現在使用しているテーマに合わせようとすると根本のコードを変えていく必要がありそうです。
まだまだプラグインを導入してすぐに対応完了とはいかないようです。

サンプルコード

最後に

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<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>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></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>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>

上記の記法に則ってコードを書くとこのようになります。
ちなみにコードが正しいかどう確認するには、Google ChromeでURLの末尾に「#development=1」と追加してコンソール画面を見ることでエラーが確認できます。
こちらが成功例です。
成功例

続いてこちらがバリデーションで引っかかった例です。
エラーが一つでも残っているとGoogleの検索結果には表示されないので注意しましょう。
エラーサンプル

ブログのトップページに戻る

  • お問い合わせ

    SiTest の導入検討や
    他社ツールとの違い・比較について
    弊社のプロフェッショナルが
    喜んでサポートいたします。

  • コンサルティング

    ヒートマップの活用、ABテストの実施や
    フォームの改善でお困りの方は、
    弊社のプロフェッショナルが
    コンサルティングいたします。
    今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

SiTest の革新的な機能を
お試しいただけます。
（利用規約）

お名前【必須】
メールアドレス【必須】
電話番号【必須】