AMP Library - HTMLをAMPに対応しているかチェック
AMPに対応することで、Googleの検索結果から高速に表示されるWebページが提供できます。ドメインがGoogle傘下なのが気になりますが、ユーザビリティは高くなります。 そんなAMP対応のHTMLを作る際にチェックツールとして使えるのがAMP Libraryです。
AMP Libraryの使い方
AMP LibraryはHTMLファイルを指定して実行します。最初に元のHTMLコンテンツが表示されます。
$ ./amp-console amp:convert index.html
Line 1:
Line 2:
ORIGINAL HTML
---------------
Line 1: < !DOCTYPE HTML>
Line 2: <html lang="ja" xmlns:fb="http://ogp.me/ns/fb#">
Line 3: <head>
:
その後にAMP化する上で問題になる部分が列挙されます。
AMP-HTML Validation Issues and Fixes
-------------------------------------
FAIL
<html lang="ja"> on line 2
- The mandatory attribute '\u26a1' is missing in tag 'html \u26a1 for top-level html'.
[code: MANDATORY_ATTR_MISSING category: DISALLOWED_HTML see: https://www.ampproject.org/docs/reference/spec.html#required-markup]
- The parent tag of tag 'html' is 'body', but it can only be '!doctype'.
[code: WRONG_PARENT_TAG category: DISALLOWED_HTML see: https://www.ampproject.org/docs/reference/spec.html#required-markup]
ACTION TAKEN: html tag was removed due to validation issues.
<head> on line 3
- The tag 'head' appears more than once in the document.
[code: DUPLICATE_UNIQUE_TAG category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://www.ampproject.org/docs/reference/spec.html#required-markup]
ACTION TAKEN: head tag was removed due to validation issues.
CMSによってはAMP対応のコンテンツを出力できるものもありますが、自作で用意する際にはAMP Libraryが便利そうです。チェックツールとして使って、問題を解決していけばAMP対応のコンテンツが仕上がるでしょう。
AMP LibraryはPHP製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。