WEBZINNE

website-buildingのサムネイル

ウェブサイト構築

これだけ押さえておけば大丈夫！よく使うAMPコンポーネント10選

WEBZINNEトピックス編集部のアイコンWEBZINNEトピックス編集部

公開日：2020年5月25日

AMPページを構築する際に、「これだけ押さえておけば大丈夫！」なよく使うAMPコンポーネントを10個ピックアップして使い方や注意点を解説しました。

マルチメディア系

amp-img

画像のないWebページはないと言っても良いくらい、img要素は必須です。AMPページでは画像ファイルは「amp-img」でタグで呼び出します。

amp-img | AMP.dev

amp-imgは、AMPフレームワークのベースコンポーネントなので、HTMLヘッダで追加でscriptを読む必要はありません。

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

amp-youtube

AMPではiframeは禁止されているため、Youtube動画を読み込むには「amp-youtube」を使います。iframeは「amp-iframe」というコンポーネントでも使えますが、Youtubeは専用「amp-youtube」のほうがシンプルなのでこちらを使いましょう。

amp-youtube | AMP.dev

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

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

設定値は特別難しいものもなくて、幅と高さとYoutubeのvideo_idを指定するだけです。簡単ですね。

ソーシャル系

amp-twitter

Twitterの「埋め込む」をAMPページで実装するコンポーネントが「amp-twitter」。Tweet IDだけで埋め込みができるので便利です。

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


<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689"
>
</amp-twitter>

従来のTweetの埋め込みはbackquoteなのでページコンテンツの一部としてSEO効果が少しありましたが、amp-twitterコンポーネントで読み込まれたTweet内容はJavascriptでTweet内容をロードするので、SEOも考慮するなら、引用する部分は別にページ内で引用したほうが良いでしょう。

amp-facebook

先ほど見たTwitterの埋め込みのFacebook版です。Facebook関連では、

  • amp-facebook-comments
  • amp-facebook-like
  • amp-facebook-page
  • amp-facebook

の4つのコンポーネントが用意されていて、それぞれ使い道が違うので注意しましょう。

また、YoutubeやTwitterと違って、URLを指定する形式になるのでそちらも注意しましょう。

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


<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</amp-facebook>

amp-instagram

Instagramの投稿を引用できるコンポーネントです。YoutubeやTwitterと使い方は一緒です。

amp-instagram | AMP.dev

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

<amp-instagram
  data-shortcode="fBwFP"
  data-captioned
  width="400"
  height="400"
  layout="responsive"
>
</amp-instagram>

アドオン系

amp-analytics

AMPページでGoogle Analyticsを読み込むコンポーネントです。AMPページではJavascriptがそのまま実行できないため、こちらのコンポーネントを使います。

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

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "AnalyticsのプロパティID"
            },
            "triggers": {
              "trackPageview": {
                    "on": "visible",
                    "request": "pageview"
                  }
            }
        }
    </script>
</amp-analytics>

これだけでPVの取得はOKです。ページのフッターにでも入れておきましょう。細かい設定は、下記のページをどうぞ。

amp-analytics |AMP.dev

amp-pixel

AMPページでページビュートラッキングを使いたい場合、amp-pixelを使います。amp-pixelは、先ほどの「amp-analytics」と同時に使うこともできます。

amp-pixelはAMPの基本コンポーネントなので追加の読み込みはありません。

<amp-pixel src="https://track.example.com/tracker/foo"
    layout="nodisplay"></amp-pixel>

アフィリエイト広告などのPVトラッキングなどにも使えます。ただし、AMPページでバナー広告を設置する場合は次のamp-adを使います。

amp-ad

AMPページでバナー広告を表示するためのコンポーネントです。

amp-ad | AMP.dev

最近のアフィリエイトなどの広告プラットフォームでは、AMP用のタグを用意しているので、そちらを使いつつ、HTMLヘッダーに下記のスクリプトを追加します。

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

なお、Google Adsenseの自動広告を使う場合は、専用の「amp-auto-ad」を使います。

amp-auto-ad

AMPページで、Google Adsenseの自動広告を設定するコンポーネントです。

他のコンポーネントと違ってちょっとクセがあって、

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

をHTMLヘッダで読み込んだ後、<body> の最初の子要素として

<body>
<amp-auto-ads
    type="adsense"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX">
  </amp-auto-ads>
.
.
.
.

をHTMLに記述します。「<body> の最初の子要素」というのが重要ポイントです。

なお、広告ネットワークが対応しているのであれば、typeの部分を書き換えれば他のサービスでも利用可能です。

amp-auto-ad | AMP.dev

amp-iframe

ifameで外部コンテンツを読み込むさいは、amp-iframeの利用が必須です。そのままiframeでは読み込めません。

amp-iframe | AMP.dev

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

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland">
  </amp-iframe>

amp-iframeは使い道が多くあって、

  • ifameの埋め込み（Goolge Mapなど）
  • トラッキングスクリプトの読み込み
  • 広告スクリプトの読み込み
  • オリジナルスクリプトの実行

など、いろいろなことができます。

amp-iframeを使えば、Javascriptを使った「URLコピーするボタン」も実装できます。

AMPページでページシェア用に任意のURLをコピーするボタンを実装する

amp-iframeは、Javascriptが実行できる分、使用制限があります。

  • ページ最上部から600ピクセル離れた位置、または最上部までスクロールしたときにビューポートの最初の 75% の範囲内でない位置のどちらかに配置する必要がある
  • sandbox 属性に allow-same-origin を指定できる場合、コンテナと同じオリジンに含めてはいけない
  • 実行できるJavascriptには制限がある（Javascriptの機能がフルで使えない）

制限はあるものの、amp-iframeを使うことで、AMPページの表現力がグッと上がります。

よく使うAMPコンポーネントを10個、ピックアップして紹介しました。

AMPに関する情報は少ないのですが、日々使えるコンポーネントが増えてきているので、公式サイトで更新をチェックしつつ、AMPページをより充実させてみてください。

「ウェブサイト構築」の記事