読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

AMPでのHTMLタグの制限について

AMP HTML5

f:id:mochizuki_p:20170107174707p:plain

制約の多いAMP

通常のHTMLと異なりAMPでのHTMLタグの利用は多くの制約があります。

以下はいつも通りに使えるHTMLタグの一覧です。

そのまま利用できる

HTMLタグ

  • span
  • div
  • section
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • blockquote
  • a
  • meta
  • svg
  • button
  • link
  • form

など

但し、以下のタグについては一定の制約がありますので注意してください

meta

ただし、http-equivの使用は禁止

a

以下のようにhrefの中身をjavascript:にするのは禁止です。

<a href="javascript:popup()">吹き出し</a>

また、リンク先へのジャンプの仕方を指定するtarget属性は_blankのみとなります。

link

relの値は

http://microformats.org/wiki/existing-rel-values

で指定されている値のみ許可されています。

注意すべきはstylesheetが禁止されていることです。

つまり、AMPではスタイルシートを外部からロードすることはできないのですね。

同様にpreconnect, prerender そして prefetch も禁止されています。

これはダメ
<link rel="stylesheet" href="/hoge.css"/>

使用が禁止されているタグ

  • script
  • frame
  • frameset
  • object
  • param
  • applet
  • embed
  • base
  • input
  • fieldset
  • label

但し、以下のタグについて別に細かい制約があります。

script

記事の情報をクローラに正しく伝えるための形式が

schema.org

で制定されています。

実際にAMPで、schema.orgを利用するにはheadの部分に以下のような形式で利用可能です

また、AMPでは、特殊な効果を実現するためのJavaScriptが公式から準備されています

これらを除いてJavaScriptの利用は基本的に禁止されています。

form

amp-formと呼ばれるJavaScriptファイルを読み込んだ上で

一定の形式を守る必要があります。

一方でHTMLのそのままの形式では利用できず、AMP用の特殊なタグに置き換える必要があるものがあります。 これは、主に画像や動画などのメディアファイルなどで、ロードに伴うサイズとレイアウトの再配置に伴うパフォーマンスの低下を懸念したゆえです。

AMP用のタグに置き換える必要があるタグ

  • img
  • audio
  • video
  • iframe

img

amp-imgに置き換える必要があります。

www.utali.io

audio

amp-audioに置き換える必要があります。

www.utali.io

video

amp-videoに置き換える必要があります。

www.utali.io

iframe

amp-iframeに置き換える必要があります。

www.utali.io

その他SNSの埋め込み用などのタグ

JavaScriptが原則禁止されているので、Twitter, Facebook,InstagramなどのSNSのコンテンツの埋め込みには、専用のタグを利用する必要が有ります。

amp-twitter

Twitterの埋め込みに利用します

www.utali.io

amp-facebook

www.utali.io

amp-instagram

www.utali.io

SNSのシェアボタン

専用のタグが用意されています

www.utali.io

広告

amp-adを利用します。

www.utali.io

追尾広告

amp-sticky-adを利用します

www.utali.io