ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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)です。

Lullabot/amp-library: Convert HTML to AMP HTML and report HTML compliance with the AMP HTML specification

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2