先日、AMPのドキュメントを読んだので早速自分が管理してるサイトで対応してみた。

ところが、Google Search Console(旧ウェブマスターツール)でAMPのエラーが発生してしまっていたので、その際のエラー内容と修正方法についてメモしておく。

【エラー1】schema.org NewsArticle メタデータがありません

AMP対応の記事はGoogleの検索結果の上部でカルーセル状に表示されるが、そのためにはjson-ld形式でschema.orgのNewsArticleについての記述が必須となっている。

Google、AMPに対応した記事向けschema.orgの仕様を公開

自分は実装時、このschema.orgの記載を忘れていたのでこのエラーが出てしまったようだ。

対応方法は、schema.org/NewsArticleを見ながらひたすらJSON-LDを作っていく。

   <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage":{
          "@type":"WebPage",
          "@id":"http://example.com/hello-amp-world"
        },
        "headline": "Hello AMP World!",
        "datePublished": "2016-01-01 16:01:40 +0900",
        "dateModified": "2016-01-01 16:01:40 +0900",
        "image": {
          "@type": "ImageObject",
          "url": "http://img.example.com/hoge/hello.jpg",
          "height": 400,
          "width": 400
        },
        "author": {
          "@type": "Person",
          "name": "razokulover"
        },
        "publisher": {
          "@type": "Organization",
          "name": "razokulover publog",
          "logo": {
            "@type": "ImageObject",
            "url": "http://img.example.com/hoge/app-icon.jpg",
            "width": 438,
            "height": 60
          }
        },
        "description": "こんにちは、わたしはAMPです..."
      }
</script>

#development=1をつけてチェックしていてもschema.orgの記載漏れはエラーにならないので見逃しやすい。

AMPのマークアップとしては必須ではないが、Googleのクローラとしては現時点(AMPはまだNews記事などのメディアを対象にしてる)ではエラーみたいな感じだろうか。

【エラー2】属性値が無効です

これはampコンポネントの属性値(widthやheightやsrcなど)に不正な値が指定されている場合に起こる。

自分の場合は、amp-imgのwidth属性が一部100%と指定されていたので発生していた。

対応方法としては、AMPのドキュメントを見ながら属性値を正しい値に修正していくこと。

地道にエラーを潰すのみ。

【エラー3】禁止されている属性

これはampで定義されていない属性を使用している際に発生する。

例えば、onclickやonmouseoverなど。これらの属性はampではエラーになる。

この他に自分の場合はタグ名のエスケープ漏れがあり、href属性の箇所で下記のようになってしまっていた。

<a href='http://example.com/tags/μ'ｓ'>μ'ｓ</a>

この場合、シングルクオートが正しくエスケープされていないとhref属性の属性値はhttp://example.com/tags/μになりs'だけが残る。これが禁止されている属性と判定されてエラーになっていた。

ちゃんとエスケープして対応した。

【エラー4】スタイルシートの CDATA 属性がないか無効です

これはほんの一部のページでしか発生していなかったが、正直よくわからなかった。

調べてもそれらしいエラーにあたってる人がいなかったので一旦放置したが、分かる人いたら教えて下さい。

これらがGoogle Search Consoleで発生していたAMPのエラーです。

今回は自分の実装漏れや確認不足な部分が多かったのでエラーが割と多かったのですが、ちゃんと落ち着いて取りかかれば減らせるミスばかりなので今後はなんとかなるかと思います。

また何かわかったら書きます。