はじめに
デモでつくったamp-storyが検索に載るようになったので、携帯端末で見てみたところ、ブックエンドが表示されないことに気付いた。表示されないのはamp-cacheのページで、標準の場合は表示されている。
で、対処を行ったのでその内容を書き記す
CORS対応を行う
ローカル環境でもJSONファイルを絶対パス（本番）にして確認したところ、読み込まれなかった。WEBインスペクタで確認したところ、JSONファイルの読み込みが許可されてない旨のエラーが出ていた。ので、外部からの読み込みを許可しないといけない。前もフォームつくる時に対応したな・・・と。その時に参考にしたブログ記事
処理の仕方は色々とあるけれども、.htaccessファイルに以下を追加するのが簡単
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org
Header set Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin
Header set AMP-Access-Control-Allow-Source-Origin: AMP-Access-Control-Allow-Source-Origin: https://example.com
https://example-com は自分のサイトドメインを入れるが、Access-Control-Allow-Originは、amp-cacheにaccessしてURLを抜き出した方がいい。若干変わっていることがある。
jsonファイルの画像指定は絶対パスで
もう一度アクセスしてみたら、ブックエンドが表示されるようになって一安心、と思いきや、画像が表示されていない。
JOSNのぞいたら相対パスになっていたので、絶対パスに変更して再確認
無事表示。
最後に
AMP-HTMLは、バリデータに通して終わるではなく、amp-cacheまできちんと確認しないとダメですね。わかっていても忘れる