1. ホーム
  2. コラム
  3. AMP対応ページ作成時の注意点

AMP対応ページ作成時の注意点

AMP対応の注意点 イメージ

はじめに

2015年10月にGoogleから発表されたAMP(Accelerated Mobile Pages)プロジェクトですが、発表から数年経ち、これまで様子見だった方々も「うちのサイトもそろそろAMP対応が必要かな」とお考えの方もいるのではないでしょうか?

私が担当する案件でも先日、既存コンテンツページのAMP対応を実施したので、その時に得られた情報をコラムとしてまとめてみました。(この記事は2017年3月時点の情報です)

AMPって何?

「そもそもAMPって何?」って方は、過去のメンバーズコラムでAMPの概要を紹介した記事がありますので、そちらをご覧ください。

【モバイル時代の高速化ページ新規格「Google AMP」とは?】
http://blog.members.co.jp/article/22579

そのため、今回はAMP対応ページ作成時のルールや注意点に絞って紹介していきたいと思います。

AMP対応ページ作成時のルール

AMP対応ページに最低限必要なheaderの記述

通常のHTMLページをAMP対応ページとして認識させるためには、header内に以下の記述が必要になります。

  • HTMLの最初に<!doctype html>を指定
  • HTMLタグには<html amp>を指定
  • 文字コードは<meta charset=”utf-8″>を指定
  • head内に以下の1文を記述
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  • AMP JS libraryの読み込みのために、head内に以下の1文を記述
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  • head内に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>

基本的なルールはAMP公式ドキュメントやAMP制作に関するブログ記事など、すでに他の多くのサイトに情報が掲載されていることから、詳細は本記事では割愛します。

構造化データの記述が必須

AMP対応ページには構造化データ(schema.org)の記述が必要となります。schema.orgはGoogleやBingなどの検索エンジンが、Webサイトの内容を把握できるように記述するもので、一般的なAMP対応ページではJSON-LDが用いられることが多いです。この中に記述した情報は、AMP対応のメリットの一つである「Google検索結果のカルーセル表示」内の情報にも使用されます。

AMP対応ページのJSON-LDには、最低限下記のプロパティが必要になります。

  • headline:記事タイトル ※110文字以上はNG
  • publisher:記事発行元
  • datePublished:記事公開時間 ※ISO8601フォーマットで指定
  • author:著者名
  • image:記事サムネイル画像

最低限必要なのは上記ですが、推奨要素を含めた全プロパティは下記のリンクから確認ができます。(英語)
https://developers.google.com/search/docs/data-types/articles

AMPで使用できないタグ、AMP専用のタグが存在

AMP対応ページの制約として、使用できないタグが存在します。一例を挙げると、imgタグやiframeタグなどが該当します。

imgタグが使えなら、画像が使えない?と思うかもしれませんが、AMP対応ページで画像を扱うには、AMP専用タグの<amp-img>を使用します。このように、AMPで使用できないタグは代替となるタグがあります。(代替となるタグが無いものもありますが)そのため、既存のHTMLをAMP対応させる場合、このようなタグの置換作業が必要になります。

下記に一例を挙げてみました。

  • script:application/ld+jsonおよびAMPのランタイムや拡張コンポーネントでのみ使用可。
  • img:amp-imgに置換 ※画像の縦幅・横幅の指定必須。
  • video:amp-videoに置換
  • audio:amp-audioに置換
  • iframe:amp-iframeに置換
  • frame:使用不可
  • a:href属性をjavascriptから始めるのはNG target属性は_blankのみ使用可。それ以外は通常と同様に使用可。

全てのAMP使用不可タグ・AMP専用のタグについては、AMPの公式ドキュメントから確認ができます。(英語)
https://www.ampproject.org/ja/docs/reference/spec

AMP独自のCSSルール

HTMLタグと同様に、CSSにもAMP独自のルールが存在します。

  • styleは<style amp-custom>タグを使用して、HTML内に記述
  • <style amp-custom>に記述するCSSは50KBまで
  • AMPでは使用できないCSSがある

一番最後の、AMPで使用できないCSSについては、下記に例を挙げてみました。

  • ユニバーサルセレクタ 使用禁止
  • !important 使用禁止
  • @charset, @import は使用禁止

普通に作成する分には上記に気をつけていれば問題ないと思いますが、全てのCSSルールは、AMPの公式ドキュメントから確認ができます。(英語)
https://www.ampproject.org/docs/guides/author-develop/responsive/style_pages

こうした制約が存在するため、既存のサイトをAMP対応する際は、CSSの大幅な書き直しが必要になる場合もあります。

AMP対応ページと通常ページを分ける場合、相互の紐付けが必要

AMPはスマートフォンでの高速表示に特化しているため、先述したとおりHTMLやCSS上の制約が多く発生します。そのため、一般的には通常のページとAMP対応ページを別々に制作し、ユーザーの閲覧デバイスによって出し分けを行うことが多いです。

こうした出し分けを行うには、通常のページとAMP対応ページそれぞれに、お互いを紐付けするタグを入れる必要があります。

通常ページにはamp-htmlタグを入れて、その中にAMP対応ページへのURLを記述します。

<link rel="amphtml" href="【AMP対応ページのURL】" />

AMP対応ページはcanonicalタグに通常ページのURLを入れます。

<link rel="canonical" href="【通常ページのURL】">

この記述を入れることで、検索エンジンからページを開く際、ユーザーの閲覧環境に応じたページの出し分けをGoogle側で自動的に行ってくれるようです。

AMP対応ページの記述をチェックするには

基本的にChromeブラウザを使用して確認します。AMP対応ページのURLの後ろに「#development=1」を付けて、Chromeのデベロッパーツールを起動すると、AMPのエラーチェックが行えます。正しく認識されている場合は下の画像のように「Powered by AMP ⚡ HTML – Version xxxxxxx」と表示されるはずです。もしエラーがあれば赤字で指摘されるので、その箇所を修正してください。

開発ツール イメージ

ただ、いちいちURLに「#development=1」を付けて確認するのは大変なので、Chromeのアドオン「AMP Validator」を使用して確認するのがオススメです。
https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=ja

また、AMPのエラーチェッカーではJSON-LDが正しく記述されているか確認できないため、Googleの構造化データ テストツールも併用して検証すれば確実です。
https://search.google.com/structured-data/testing-tool

構造化データ テストツール

AMP対応ページを公開するには

基本的には普通のHTMLページと同様、サーバーにアップして、検索エンジンのクローラーがそのページをクロールした時点で検索結果に表示されるようになります。(AMP対応ページの場合、元ページに挿入した「rel="amphtml"」を見つけると、AMP対応ページを一緒にクロールしてくれるようです。)

そのため、サーバー公開後は検索エンジンからのクロールを待つしかないですが、下記のページにAMP対応ページのURLを入力してリクエストを送信すると、短時間でクロールされるようです。
https://search.google.com/search-console/amp

AMPテスト イメージ

まとめ

モバイルファーストの重要性が高まる中、AMP対応の重要度はますます高まっていくと予想されます。もし業務でAMP対応が必要になった際に、本記事の情報が少しでもお役に立てば幸いです。

なお、AMP対応ページのアクセス解析ツールの導入方法や、コンテンツをAMP対応して実際にどんな影響が起きたのか、といった事については、次回のコラムにて執筆予定です。次回もご期待ください!

■コラム執筆者

第1ビジネスユニット アカウントサービス第1ユニット デザイナー 佐藤 正啓

カテゴリ: Webサイト構築, スマホサイト制作
2017年03月30日

RSS