AMP HTMLページの検証にAMPBenchを使ってみた

記事更新日 

記事公開日 

タグ：, ,

  1. Home
  2.  > TECHBLOG
  3.  > Front-end
  4.  > AMP HTML

AMP ProjectのGitHubページに登録されているリポジトリを見るとampproject/ampbenchというのを見つけました。なんでもAMPページのデバッグをしてくれるということで、早速使ってみました。

ブラウザからAMPBenchにアクセス

とりあえずブラウザからampbench.appspot.comにアクセスしてみてください。するとこんな感じのページが表されます。

上部にあるAMP URLにAMPページのURLを打ち込むと、AMPページの検証をしてくれます。試しにこのブログのトップページのURL“https://yukiyamashina.com/”を入れるとこんな結果が表示されます：

AMP Checksでの各項目の説明は以下の通りです：

  • AMP URL – AMPページのURL。非AMPページが存在する場合はそのページ内の<link rel="amphtml" href="...">で設定されているURL
  • Canonical URL – AMPページ内の<link rel="canonical" href="...">のhrefで設定されているURL
  • AMP HTML Link in Canonical page? – canonicalで設定されているページ内にある<link rel="amphtml" href="...">で設定されているURL。AMPページしかない場合はURLは表示されない。
  • AMP HTML Link in AMP page? – AMPページに<link rel="amphtml" href="...">が設定されていないかどうか
  • AMP HTML Required Markup Issues [0] – AMP HTMLの最低限満たすべきマークアップを満たしているかどうか
  • Indexed in Google AMP Cache? – Google AMP CacheとGoogle AMP ViewerにAMPページが登録されているかどうか
  • Response Times (milliseconds) – canonicalページ、AMPページ、Google AMP Cacheの応答時間
  • Is access allowed for Googlebots? (robots.txt) – AMPページがrobots.txtで許可されているかどうか
  • Robots Meta Tag – metaタグでGoogle botのクロールが許可されているかどうか
  • X-Robots-Tag Header – ApacheでGoogle botのクロールが許可されているかどうか
  • Redirects via User Agent Googlebot Smartphone

AMPBenchではAMP Checks以外にもThe AMP Validatorでの検証結果、Top Stories Carousel for AMPに必要な構造化データの検証結果、構造化データテストツールでの検証結果を表示してくれます。例えばPHPでSearch Console API (Webmaster Tools API)を叩くのURLをAMPBenchにかけた結果はこんな感じになっています：

AMPBenchのAPIにアクセス

AMPBenchではブラウザでのアクセスに加えてAPIも用意されています。APIへはhttps://ampbench.appspot.com/validateではなくてhttps://ampbench.appspot.com/api2へリクエストを飛ばします。先ほどの「PHPでSearch Console API (Webmaster Tools API)を叩く」ページの場合は、

https://ampbench.appspot.com/api2?url=https://yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/

へアクセスします。返ってくるのはJSONでこんな感じになってます：

{
    "status": "PASS",
    "url": "https://yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/",
    "http_response": {
        "url": "https://yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/",
        "http_code": 200,
        "http_text": "HTTP Status: 200 - OK",
        "response_time_ms": 542,
        "redirected": false,
        "redirects_count": 1,
        "redirects_urls": [
            "https://yukiyamashina.com"
        ],
        "is_https": true,
        "is_https_cert_authorized": true,
        "is_https_ssl_error": ""
    },
    "extra": "This URL does not appear to be a Canonical URL: it is possibly an AMP HTML URL",
    "amp_links": {
        "canonical_url": "https://yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/",
        "amphtml_url": "",
        "amp_uses_feed": false
    },
    "amp_required_markup": {
        "status": "",
        "warning_count": -1,
        "warning_status": "FAIL",
        "results": [
            ""
        ]
    },
    "amp_validation": {
        "status": "PASS",
        "results": []
    },
    "google_amp_cache": {
        "status": "PASS",
        "result": "[HTTP: 200] URL is indexed in the Google AMP Cache:",
        "google_amp_cache_url": "https://cdn.ampproject.org/c/s/yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/",
        "google_amp_viewer_url": "https://www.google.com/amp/s/yukiyamashina.com/blog/2016/11/14/call-google-search-console-api-using-google-apis-client-library-for-php/"
    },
    "robots": {
        "robots_txt_status": "PASS",
        "robots_txt_result": "Googlebot [PASS] Googlebot-Smartphone [PASS] ",
        "robots_txt_url": "https://yukiyamashina.com/robots.txt",
        "robots_txt_googlebot_status": "PASS",
        "robots_txt_googlebot_smartphone_status": "PASS",
        "robots_meta_status": "PASS",
        "x_robots_tag_header_status": "PASS",
        "x_robots_tag_header_result": "X-Robots-Tag header check appears to be OK"
    },
    "sd_validation": {
        "status": "PASS",
        "result": "JSON-LD content appears to be valid JSON",
        "sd_json_error": "",
        "sd_kind": "JSON-LD",
        "sd_type": "BlogPosting",
        "sd_type_is_amp": "PASS",
        "sd_context": "http://schema.org",
        "sd_headline": "新しくウェブサイトを作るたびにSearch Consoleでhttp/httpsとwwwあり/wwwなしのURLを登録するのが面倒になってきたので、APIを叩いて一気にできないものかと思ってSearch Console ",
        "sd_author_name": "Yuki Yamashina",
        "sd_publisher_name": "Yuki Yamashina",
        "sd_date_published": "2016-11-14T18:54:11+0900",
        "sd_date_modified": "2016-11-15T12:11:59+0900",
        "sd_logo_image": {
            "status": "PASS",
            "result": "[height OK][width OK]",
            "type": "ImageObject",
            "url": "https://yukiyamashina.com/wp-yamashina/wp-content/themes/amplified/images/logo.png",
            "url_status": "PASS: Publisher logo image URL appears to be valid",
            "file_type": "PNG (raster)",
            "width": "220",
            "height": "60"
        },
        "sd_article": {
            "status": "PASS",
            "result": "PASS: article markup properties appear to be valid"
        }
    }
}

ウェブサービスにも組み込めそうだけど…

GitHubにリポジトリがあるので、それをフォークしてHerokuにデプロイすればそのまま動きます。ただしレスポンスが遅いのでウェブサービスに組み込むには一工夫必要な気がしますが。

参考サイト

関連記事