AMP対応するまでに失敗したこと

自社サービスをAMP対応したので、その最中に失敗した事のメモです。

AMPとは

www.ampproject.org

失敗したこと

レスポンシブで縦幅固定の枠に画像を表示したいなら amp-img は使わない
サードパーディで専用のコンポーネントがある場合がある
#development=1 は完璧ではない
AMPページへのリンクはPCページに置かないといけない

レスポンシブで縦幅固定の枠に画像を表示したいなら amp-img は使わない

AMPページで画像を表示したい場合amp-imgという専用のタグを使います。
画像をレスポンシブで表示したい場合は「layout="responsive"」を指定します。
このlayoutを設定しちゃうとwidthとかheightとかガン無視して表示されちゃいます。
この状態でCSSをいじってもどうにもなりませんでした。

解決策はamp-imgを使わずに CSSでbackgroun-imageを使うことです。
HTML

<div class="responsive-imge"></div>

CSS

.responsive-imge {
  width: 100%;
  height: 200px;
  position: relative;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  background-image:url(https://ampbyexample.com/img/amp.jpg);
}

こんな感じです。よくある手法ですね。
ただAMP対応しよとすると、画像はamp-imgを使わなきゃ駄目って記述が散見されるので、てっきりCSSで指定は出来ないもんだと思いこんでました。

サードパーディで専用のコンポーネントがある場合がある

これはリファレンスちゃんと読めって結論に至るんですが・・・。
下記のページにはAMP専用のタグとコンポーネントが羅列されてます

Accelerated Mobile Pages Project

YoutubeやInstagram見たいな大きい所以外にも色々使えるコンポーネントがあります。
規約で保存が禁止されてるサードパーティ APIが多いので、javascriptを使えないAMPではこういうコンポーネントを使わないと表示できません。
これを知るまでは頑張ってサーバーでAPI取得してcron回して作ってました。

#development=1 は完璧ではない

チュートリアルでAMPのページを確認するときはChromeでURLに「#development=1」を付けてDeveloperToolsを使って確認しろと書いてあります。
ここで出たエラーを修正すればOKだよ見たいな書き方してますが、このモードは完璧ではないです。（今後解消されるかも）
このモードで修正してOKが出ても、実際に配信するとエラーが出ることがあります。

ちゃんとしたバリデーションは下記の2つのツールを使って検証する必要があります。

https://validator.ampproject.org/
構造化データテストツール

前者はAMP記法として正しいかをチェックしてくれます。
後者は構造化データが正しいかをチェックしてくれます。

<script type="application/ld+json">
~~~
</script>

こんな感じで構造化データをマークアップしてるやつです。
この2つのツールでOKをもらわないとエラーと認識されて掲載されません。

AMPページへのリンクはPCページに置かないといけない

<link rel="amphtml" href="http://amphtml/index.html">

こんなやつです。

これに一番ハマりました。
書いてある通りなんですが、AMPページへのリンクはPCで見るページに設置しないとGoogleには認識してもらえません。
レスポンシブサイトとかですと問題ないですが、PCとスマホとかでテンプレートを切り分けてる場合は注意が必要です。

僕が確認した限りではリファレンスにはPCページに設置してね見たいな記述は無いです。
モバイルで見たときに早く表示するためのものなのに何故！と思いましたね。

これからAMP対応しようと思う方の参考になれば。

という話

技術ブログにしたい