AMP HTML ページの検証に AMPBench を使ってみた
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にデプロイすればそのまま動きます。ただしレスポンスが遅いのでウェブサービスに組み込むには一工夫必要な気がしますが。