AMP Project

AMP編!WEBデザイナーが覚えて損無しのHTML コーディング!

Pocket

こんにちは!太偲@WEB屋です。今日は、WEBデザイナーが覚えて損無しのHTMLコーディング「AMP – Accelerated Mobile Pages」についてお送りします!AMPに関しては、SEO対策の為だけの話には留まりませんので、その辺りも含めてAMPの基本をまとめました。

WEBデザイナー、フロントエンドエンジニア、プログラマーの方々。

最近SEOやWEBマーケ担当者から、モバイルページの表示速度高速化の一環として「スマホサイトのAMP対応」について相談をされた事はありませんか?

今回の記事では、AMPに関する基本の知識(対応コンテンツ・構造化マークアップ・HTML対応一覧・CSS)から現時点での情報まとめやAMP化(モバイル高速化)はするべきなのか?という点と、その他SEOだけではない、スマホサイト制作時の今後の方向性まで、一通りまとめてお話をしたいと思います。

AMPって具体的にどんなものなのか?

amp project

www.ampproject.org

AMP(アンプ)って聞いたことあるけど、何かはよくわからないという方も多いのではないでしょうか?

簡単に言うと、モバイル(スマホ)サイトをソースから軽量化して読み込み速度をちょ~速くするという事です。

そして、AMPでも表示する事ができるスマホサイトを作りましょう!というGoogleとTwitterがモバイル高速化に向けて策定した、協同プロジェクトでもあります。

スマホサイトの表示速度が速くなる要因の一つとして、マークアップ(コーディング)におけるルール、AMP HTML・AMP JSがあることなどが挙げられます。

もう一つの要因としては、Googleを例にするとAMPを使用しているサーバー側でキャッシュを持つため、直接WEBサイトを読み込む必要が無い(Google AMP Cache)という事もあります。

AMP を使用してウェブページを作成すると、静的コンテンツを高速でレンダリングできます。 以下は AMP を構成する 3 つの要素です。
AMP HTML
AMP JS
Google AMP Cache

AMPプロジェクトの発表から現在までの流れ

amp roadmap

https://www.ampproject.org/roadmap/

GoogleがAMPプロジェクトを発表したのが、2015年10月7日です。

発表当時は以下の様な今後の予定を掲げた内容でした。

 Googleは「Google Search」や「Google News」など各種サービスにAMP HTMLページを統合する計画という。Googleによれば、米Twitter、米Pinterest、米WordPress.com、米LinkedInのほか、Webサイト解析サービス「Chartbeat」、 データ分析プラットフォーム「Parse.ly」、Web解析ツール「Adobe Analytics」などのパートナーが、AMP HTMLページの統合を表明している。

現時点では、実際にGoogle検索においてAMPカルーセルが実装されるようになっており、検索結果の上位枠にて目にする機会が多くなっています。

まだ、AMP対応については一般的なWEBサイトには見られていませんが、AMP HTMLやAMP JS、そして広告コードなどもアンプに対応している物が一気に出てきているので、スマホサイト制作における需要も徐々に上がってきているのではないでしょうか。

そしてつい先日、こんなニュースもありました。海外SEOブログさんからの情報です。

【モバイル検索結果がすべてAMPになる日が来る!? 巨大なAMP専用枠”Live Ticker”をGoogleがこの秋に導入予定】
Googleは、”Live Ticker”(ライブ ティッカー)と呼ぶ、AMP用の新しいセクションをモバイル検索結果にこの秋に導入することを計画しているようです。
“Live Ticker”は、最新ニュースを掲載するためのAMPコンテンツ専用のセクションで、トップニュースのAMPカルーセルの上に表示されます。

スマホの検索結果におけるAMP対応ページの位置づけは、上位コンテンツとして表示すべき要因の一つとして今年秋以降さらに加速化しそうです。

その他、先日GoogleからAMP対応を推進するメッセージがWEBマスター宛に届いているという情報もあり話題になっています。

検索結果におけるAMP表示例

amp表示例

https://amphtml.wordpress.com/

現在、AMPカルーセルの検索結果で表示できるコンテンツとしては、以下があります。
※Schema.org構造化データでもサポートしている物

  • Article(記事)
  • NewsArticle(ニュース記事)
  • BlogPosting(ブログ記事)
  • VideoObject(動画)

そして、今後サポートされるコンテンツとしては、今年の5月に話題になっていた「レシピ」で、専用のAMPカルーセルが表示されるようになるとの事でした。

楽天レシピ表示例

http://googlewebmastercentral-ja.blogspot.jp/2016/08/amp-your-content-preview-of-ampd.html

上記の楽天レシピの例ですが、こちらは通常の検索結果においてAMPラベルのページが混在している状態となっています。

AMPプロジェクトのParticipantsページにも日本ではアメーバや楽天、シネマトゥデイやサンケイ、リクルートなどの大手ニュース・ブログ・レシピなどを展開している企業の名前が連なっています。

amp参加企業

https://www.ampproject.org/ja/who/

AMPページのコーディング・構造化やテストツールについて

実際のamp対応ソースのサンプルファイルに関しては、まとめてGithubにアップされているので以下よりご覧ください。

公式サンプル⇒https://github.com/ampproject/amphtml

AMPコーディングにおいては、以下の様なソースが公式にあげられています。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>Welcome to the mobile web</h1>
    <p>
      Some text
      <amp-img srcset=sample.jpg width=300 height=300></amp-img>
    </p>
  </body>
</html>

上記を見て頂くとわかると思いますが、まず必要なのが2行目の「html amp」です。その後にrel canonical(6行目)にて通常のhtml版ページへのURL指定を入れます。
※canonical指定で、htmlのスマホサイトが無い場合は、現在のページURLを指定します。

viewportに関してですが、スマホサイトのコーディングなので基本的な形で問題無いようです。公式サイトではinitial-scale=1を入れる事が推奨されています。

19行目のamp-boilerplateについては、AMPの表示スタイルが指定されています。

20行目のscript asyncで指定しているhttps://cdn.ampproject.org/v0.jsですが、このURLを指定する事によってAMP JSが読み込まれます。

26行目こちらはイメージタグ「img」に当たる部分です。AMPページにおけるイメージタグは「amp-img」としなければなりません。srcかsrcsetかは公式サイトにおいてはどちらも使用可能との事です。

srcsetの使いどころとしては、以下の様な形で幅毎に使用する画像を変える事ができます。

<amp-img
 srcset="wide.jpg" 640w, "narrow.jpg" 320w >
</amp-img>

layoutの使い方については、後述(その他のレイアウトにおける制限は?)にて。

構造化マークアップは必須項目じゃないの?

searchconsole amp

先日Googleは、通常のモバイル検索結果においてもAMP対応ページを反映させる目的から、サーチコンソールのAccelerated Mobile Pagesエラーから構造化マークアップのエラーが除外されるようになりました。

Schema.orgの構造化マークアップに関しては、AMP自体には元から必須では無いのですが、Googleニュース(AMPカルーセル)の様な特定環境における対応には必要だという点は変わりません。

ですので、アンプページのコーディングをする際には、一緒にまとめて構造化マークアップを入れておくべきでしょう。

AMPのみに限らずPCサイト構造化においても同様に対応しやすくなりますし、スキルとして覚えておいて損が無い部分ですよね。

コーディング・マークアップが問題ないかチェックする方法

AMPのコーディングや構造化データの実装が済んだら、次は動作チェックをしましょう。

前述のSearch Consoleを使った方法もありますが、その他以下でも確認する事ができます。

  • chrome、firefoxの検証・開発ツール
  • 構造化データテストツール(構造化のみ)

ブラウザでも簡単に確認する事ができます。

AMPページURLの後ろに「#development=1」と付けて、chromeなら左クリックメニューの「検証」、firefoxは「開発ツール」にてチェックできます。

その後、Consoleタブを開いた時にPowered by AMP ⚡ HTMLとなるはずです。そこでエラーがあった場合は表示されます。

もう一つは、構造化データテストツールですが、こちらはschema.orgの構造化データチェックに使うものなので、AMP自体のコーディングが正しいというのとは違います。

上記2つは、AMPページを作成した際の確認時にチェックする必要がありますね。

CSSはインライン?使えないプロパティは無いの?

AMPのCSS(スタイルシート)は、インラインで、各ページhead内と要素ごとにルールに従って書かなければいけません。

head内のCSS表記例です。

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

amp-customとしたスタイルの指定をhead内に書くことで、CSS要素を含める事が出来ます。埋め込めるスタイルシートは一つまでです。

また、CSSのmediaクエリ(@media)もAMPで使えるのでレスポンシブ表示のスタイルも対応可能です。

その他のレイアウトにおける制限は?

レイアウト制限についてです。AMPページは、すべての要素のサイズを最初から明示して設定する事が求められています。

それぞれのレイアウト(layout)属性でのサポート項目は以下です。

タイプ 幅指定 備考
nodisplay 不要 amp-lightboxの様に、普段はユーザーの目に触れない画像や要素に使える。どの要素に対しても使用可。
fixed 必要 固定要素なので、高さ・幅ともに指定が必要。amp-pixelとamp-audio要素は例外。
responsive 必要 画像やブロックのアスペクト比に対して幅等を自動的に可変。amp-img、amp-videoなどで利用する機会が多い。親要素に依存。
fixed-height 高さ必要 amp-carouselの様な水平に動いて高さをキープする必要がある部分等で使用。widthの指定は無しかautoとする事。
fill 不要 親要素に対して幅と高さが収まるように調整される。高さも幅も指定してはいけない。
container 不要 htmlでいうdivと同じ役割。幅や高さ指定は必須ではないが、指定し利用する事が可能。

fixedの備考にて例外と書きましたが、「amp-pixel」を利用した場合、幅と高さの両方がゼロに初期化され、「amp-audio」の場合、デフォルトの幅と高さはブラウザから推測されるという理由があります。

上記の様なレイアウト指定タグが現状ありますが、実際にマークアップで利用した場合は以下の様な形になります。

<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
    <amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

その他、レイアウト制御のて許可されていないものとしてはインラインでのhead外での通常CSS記述(もちろん外部スタイルシートのlinkもダメ)の他、「!important」や「-amp-」というクラス名、「filter」を使ったスタイルなどがあります。

アクセス解析のタグは問題ないのか?

アクセス解析のタグ設置については、Google Analyticsが利用可能です。

ソースコードについては以下の形で、まずはhead内にてAMP JSライブラリーの前に「amp-analytics-0.1.js」を記述します。

    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>

あとは、Google Analyticsのコードをbody内にて以下の形に沿って実装します。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

英語ですが、Adding Analytics to your AMP pagesにて詳細が説明されています。

広告表示における制限は?

AMPの話題が持ち上がったころに、アドセンスやDSP広告がAMPページには配信されなくなる。という話でしたが、現在は対応している企業がたくさん出てきています。

Googleが提供しているAdsenseはもちろんの事、AdStir、AMoAd、Criteo、Doubleclick、I-Mobile、Nend、MicroAd、YahooJPなど、多数の企業がAMP広告に対応しています。

広告表示の記述例は以下です。

<amp-ad width=320 height=140
    type="colombia"
    layout=responsive
    data-clmb_slot="129883"
    data-clmb_position="1"
    data-clmb_section="0">
</amp-ad>

残念ながら広告表示に関しては、対応している企業のサービスでしか利用する事は出来ません。他にも対応してほしいASPなどみなさんあると思いますが。

詳細は、AMPプロジェクトの公式ページにて掲載されています。

まだ半数のページが英語なので、早く日本語対応してほしいものですが。。。

AMP対応と構造化マークアップをしたページでSEOの効果はあるのか?

amp対応のSEO効果

geralt / Pixabay

AMP対応と構造化マークアップをしたスマホサイトのSEOについて、現時点での発表などを踏まえると、モバイルの検索結果にAMPページが優遇される日は近いのかなと思っています。

実際に、前述の楽天レシピの表示例の様なAMPページラベルとスマホ対応ラベルが表示される結果があったとした際には、検索ジャンルによってはAMPが上位を埋め尽くす場合もあると思います。

この流れってモバイルフレンドリーの状態に似てません?しかし、AMP対応する事でSEOで有利になるという考え方は持たない方が良いと思います。

むしろ、やっておくべき事として捉えておくのがベストですね!いずれにしろ、みんなが実装すると基盤は同じになるので、あとは中身の問題になりますし。

Googleがモバイル高速化にかける思いは強く、AMPに関しても表示速度高速化の一環なので、モバイルフレンドリーの様に「スマホサイト制作においての当たり前化」されていくのではないでしょうか。

AMPを導入する事のメリット・デメリット

ここまでで、AMPページを制作もしくは、プラグインで実装する事の良い点、悪い点は大体見えてきたのではないでしょうか?

現時点でのメリットとデメリットについては、以下の様な物が挙げられます。

■AMPのメリット

  • 中小サイトの先駆けになれる
  • カルーセル内に表示される可能性がある
  • Googleの意図に沿っている

メリットに関しては、Googleの意図に沿った形を作る、同じ検索結果の将来を目指すというSEO担当者からしてみると、やらない理由がないのですw

検索結果のカルーセルに表示されたり、今後通常検索結果で優遇される可能性も考えると、リソースに余裕があれば早めに対応しておいて損は無いと思います。

WordPressでしたら、公式プラグインで「AMP」が出ているので、手軽に実装するだけならこれでも十分だと思います。

■AMPのデメリット

  • コーディング・ソース管理がめんどくさい
  • 広告が対応している物しか使えない
  • デザインが思うようにできない

結局のところ、ページが今まではPC、スマホサイト、モバイルサイトと3種類(2種類のところもあるかもしれませんが)だったのが、これに加えてAMPページも加わるという手間が大きく感じてしまうのかなと思います。

あとは、マークアップのルールなどで、社内やチームでの環境を作るところから始めなければならないという手間もありますね。

WEBデザイナーが覚えて損無しのHTML・CSSコーディング【AMP編】まとめ

モバイル高速化 amp

https://amphtml.wordpress.com/

Googleが掲げる、現在の検索結果改善の取り組みの中で、AMPプロジェクトはモバイルフレンドリーと同様に大きなプロジェクトとなっています。

先日の発表においても、現時点でAMP対応しているページにおいて1億5千万以上のインデックスが存在しているとの事でした。

今日まで、1 億 5000 万以上の AMP ドキュメントが Google のインデックスに存在しており、毎週 400 万の新規の AMP ドキュメントが追加されています。

毎週400万ページってすごいですよね!

モバイルにおけるランキングの要因としては、数ヶ月後から表示速度が組み込まれるという話もあります。

先月(2016年7月)シドニーで開催されたサーチマーケティングセミナーの中で、GoogleのGary Illyes氏は「モバイルページのページ表示速度がランキングアルゴリズムに影響を与える要因としてアップデートされるだろう」と発言しました。

モバイル表示速度の高速化とGoogleの目指す方向。

上記の2つの点からもAMPページの対応については、あと数か月もしないうちに、至るところで騒がれるのではないかと僕は思っています。

そして最後になりますが、AMP対応という事を前提で考えると通常のHTMLページが必要だと思っていましたよね?

通常のスマホhtmlページがない場合に、AMPページのみ実装する事も可能だそうです。

この流れからすると、スマホサイトってAMP対応以外のやり方あるの?という近い未来もあるかもしれませんよね?

SEOは検索エンジン最適化の取り組みなので、Googleが最適だという技術は推奨していきたいですね!

たまに無理やりな感じもあるけど。

最後まで読んで頂きありがとうございます。

当サイトでは、訪問して頂いた皆様へWEBアンケートのご協力をお願いしています。

また、すこ~しだけでも参考になりましたら、いいねやブックマークして頂くと個人的に喜びます。

Pocket

Comments