PINTO!株式会社PLAN-Bの情報発信メディア

2019.06.07

伊藤 輝翔

WEB CREATION

エンジニア目線で考察する「AMP対応」とは?

WRITER

伊藤 輝翔

株式会社PLAN-B Juicer事業部

2016年10月、中途採用でPLAN-Bへ入社。自社DMPの開発を行なうJuicer事業部にて、機能開発、フロントエンド領域を担当。

目次
    1. AMP(アンプ)とは
      1. “記事”コンテンツのサイト表示が早くなる
      2. 検索結果のカルーセル表示部分にサイトが表示される
    2. AMPのメリット・デメリット
      1. AMPに対応するメリット
        1. ユーザーのストレス軽減によるサイトのレスポンス向上
        2. カルーセル表示で、記事を読まれる確率が上がる
      2. AMPに対応するデメリット
        1. AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある
        2. 今のHTMLとAMP HTMLを「2重」で管理が必要
        3. 一部の広告タグしか利用できない
    3. AMP の仕組み
    4. AMPの構成
    5. AMPHTMLでのコーディング
      1. 01 : HTMLの雛形
      2. 02 : テキストの追加
      3. 03 : 画像の追加
      4. 04 : CSSを書く
      5. 05 : Google Analytics設置
        1. 01.headタグに下記タグを追加
        2. 02.amp-analyticsタグ(Google拡張コンポーネント)でアカウントの設定
    6. まとめ

Googleによってモバイルフレンドリーが推し進められ、Webページの表示速度はSEO対策にとって避けて通れない問題となっています。

今回は今注目のAMP対応について解説していきます。AMPについて初めて耳にした、というWeb担当者の方はぜひこの記事を参考に、ページの表示速度改善に取り組んでみてください。


AMP(アンプ)とは

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

AMPとは

“記事”コンテンツのサイト表示が早くなる

AMPでは、AMPが定義したJavaScriptのみ使えるようになっています。コンテンツリッチ化や広告の呼び出しによって処理を重くさせるJavaScriptの使用を制限することで、動画やアニメーション、グラフィックスなどの高速読み込みを目指すものです。

検索結果のカルーセル表示部分にサイトが表示される

AMP対応しているサイトは、モバイル検索結果に出てくるトップニュース枠のカルーセルの中にAMP対応した記事コンテンツを表示させることができます。


AMPのメリット・デメリット

AMPに対応するメリット

AMP対応のメリット

ユーザーのストレス軽減によるサイトのレスポンス向上

従来に比べて、ページの読み込み速度が断然早くなるので、ユーザーがサイトを見ている際に、「遅い」と感じることが少なくなり、記事を読み進めることが多くなるのではないかと考えられます。


カルーセル表示で、記事を読まれる確率が上がる

検索結果直下に大きく領域を取り、表示されるため、クリックされる確率が上がると思われます。さらに、記事がクリックされなかったとしても、カルーセル表示の写真+テキストを見てもらえるので、表示効果を得られるという点も見逃せません。

AMPに対応するデメリット

AMP対応のデメリット

AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある

特に2次でコンテンツ利用を行っているサイトなどは、JavaScriptを多用している場合が多いため、表示できないコンテンツなどが出てくる可能性があります。

【禁止タグ】

img/video/audio/iframe/base/frame/frameset/object/param/applet/embed/form/input/textarea/select/option

【AMPタグ】

  • amp-img
  • amp-video
  • amp-audio
  • amp-iframe
  • amp-pixel

今のHTMLとAMP HTMLを「2重」で管理が必要

現在AMPは、発展途上のため現状のHTMLソースとAMP HTML両方の管理が必要です。

一部の広告タグしか利用できない

現在、AMPは記事サイトが対象のため、ほとんどの広告配信がほぼGoogleで運営されているサイトであれば問題はないと思いますが、Google以外の広告配信が出来なくなると困るサイトも出てくると思います。


AMP の仕組み

通常、ウェブページにアクセスするとき、リンクをクリックしてからHTMLを読み込み、ページを表示するため、その分時間がかかってしまいます。一方AMPでは、ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込みの時間を大幅に削減する仕組みとなっています。


AMPの構成

AMPを構成する主要素としては、以下の3つがあります。

  • HTML5(AMP HTML): 拡張されたHTML等、AMP specに従ったHTML。
  • Javascript(AMP JS): AMP HTMLで記述されたコードを解釈し、レンダリングを行うJavaScriptライブラリ。各AMP要素は非同期に描画される。
  • HTML5(AMP HTML): 拡張されたHTML等、AMP specに従ったHTML。

AMPHTMLでのコーディング

01 : HTMLの雛形

02 : テキストの追加

03 : 画像の追加

【注意点】

  • <p>タグで囲むこと。
  • 必ずwidth,height は固定値で指定すること。

※通常のHTMLのように%やautoなどを指定することはできません。レンダリング速度を高速にする代償といったところでしょうか。

04 : CSSを書く

AMPHTMLはHTMLなのでCSSもかけますが、headタグ内に記述のみOKでamp-custom属性が必要です。

05 : Google Analytics設置

01.headタグに下記タグを追加

02.amp-analyticsタグ(Google拡張コンポーネント)でアカウントの設定


まとめ

AMPは今後検索エンジンにも影響するといわれています。AMP対応ページも多く出てきており、Googleが推進していることもあり、注目を浴びています。

メリットも大きく、ストレスレスでサイトを見ることができるので、滞在時間や回遊率の向上が見込めるのでサイト改善にも役立ちます。

一方で、動的ページには向いておらず、記事ページ以外には対応していない現状なので、利用できるシーンは限られています。また、AMPに対応することによってページのデザインも多少制約されてしまうので、今後の発展に期待したい技術の1つです。