AMPページ作成後のチェックリスト

基本情報と構築についての説明はAMPについての情報まとめを参照してください。

——————————–

※文中のコード入力指定が効かなかったので、ページ内のタグは＜＞で括っています。

・＜!doctype html＞が入っているか
・＜html＞は＜html AMP lang=”ja”＞になっているか
・＜meta charset=”utf-8″＞は入っているか
・＜meta name=”viewport” content=”width=device-width,minimum-scale=1.0,initial-scale=1.0″＞は設定されているか
・canonical/amphtmlは設定されているか
・スキーマは（JSON-LD（schema））設定されているか
・boilerplateは変更せず使用しているか
・スタイルシートは＜style amp-custom＞で囲んでいるか
・スタイルシート内に!importantを使用していないか
・＜div style=””＞といったスタイルの直接指定は残っていないか
・コンポーネント以外のJavaScriptが使用されていないか
・＜script async src=”https://cdn.ampproject.org/v0.js”＞＜/script＞は書き込んであるか
・GoogleアナリティクスタグはAMP用に書き換えられているか
＜script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”＞＜/script＞

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

・imgタグが使われていないか
・amp-imgには高さと幅が入っているか
・シェアボタンはAMP用に書き換えられているか
　＜script async custom-element=”amp-social-share” src=”https://cdn.ampproject.org/v0/amp-social-share-0.1.js”＞＜/script＞

◯Twitter
<amp-social-share type="twitter" width="44" height="44"></amp-social-share>
◯Facebook
<amp-social-share type="facebook" width="44" height="44" data-param-app_id="☆★☆アプリID☆★☆" data-param-text="☆★☆ページタイトル☆★☆" data-param-href="☆★☆ページURL☆★☆"></amp-social-share>
◯Google+
<amp-social-share type="gplus" width="44" height="44"></amp-social-share>

[WPの場合]
・wp_head()、wp_footer()はコールしていないか
・the_contentのレンダリング書き換えは行っているか

——————————————

【構築後のチェックサイト】
◯JSON-LD
【Structured Data Testing Tool Structured Data Testing Tool】
https://search.google.com/structured-data/testing-tool
◯AMPの動作チェック
【AMPテスト】
https://search.google.com/search-console/amp