今回は、以前ご紹介した「AMP」の仕様に沿ったマークアップの一部と、正しくマークアップできているかどうかのチェック方法をご紹介します。
(前回の記事)
Googleが推奨するAMPとは?-特徴から対応方法まで基礎解説
記載必須の項目
次の表の1~8はAMPで必須とされている項目となります。その下が表の項目を実装したHTMLソースのキャプチャになります。
※表とHTMLソースの番号が紐づいています。
1 | html5でDOCTYPE宣言 |
2 | amp記号の導入 |
3 | headタグとbodyタグをもれなく記載 |
4 | canonicalの設定 |
5 | meta charset=”utf-8″を指定 |
6 | meta name=”viewport”を指定 |
7 | ampのjavascriptの読み込み |
8 | AMP boilerplate codeの読み込み |
さらに、記載必須の項目として列挙されてはいないものの、GoogleのJohn Mueller(ジョン・ミューラー)氏によると構造化データの記載も必須であるとのことです。
したがって、schema.orgのNewsArticleまたはBlogPostingを使って以下のように構造化データを作成し、head内に記載しておきましょう。
参考:AMPコンテンツとしてGoogleモバイル検索に表示させるには、有効なAMPページと構造化データが必須
主要なAMPタグ
AMP仕様に沿ったページを作成する際に、おそらく一番作業量の多い項目がimgタグとiframeタグ、amp-adタグになるかと思います。
imgタグはamp-imgタグに、iframeタグはamp-iframeタグにそれぞれ変換する必要があります。無駄な計算を省くためAMPではこれらのタグに対してサイズ指定が必須となります。
Googleアドセンス等の広告はamp-adタグを使って表示します。
amp-imgタグ
基本的にwidth(横幅)、height(縦幅)、src(画像のパス)は必須の属性となります。また、imgタグにはなかった閉じタグも追加されています。
例 | <amp-img width=284 height=177 src=”./img/400_400.jpeg”></amp-img> |
amp-iframeタグ
上端から測って、600pxとviewport縦幅75%を比較して、小さい方の数値以上離れた箇所でないと記載できないといった設置位置の制約があります。
ただし、以下のように一時的なplaceholderとしてiframeがロードされるまで表示させておく仮の画像を設定している場合は、前述の制約を受けません。
amp-iframeを使う場合、あらかじめ以下の用にamp-iframeのモジュールを読み込んでおく必要があります。
モジュール | <script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script> |
amp-iframeを使ってyoutube動画を埋め込む場合、以下のようになります。この場合、設置位置の制約を考慮し、仮の画像をplaceholderとして設定しています。
画面ロード時、最初にplaceholderの画像が表示され、amp-iframeのロードが完了するとそちらに切り替わります。
例 |
<amp-iframe width=300 height=300 sandbox=”allow-scripts allow-same-origin” layout=”responsive” frameborder=”0″ src=”https://www.youtube.com/embed/XXXXXX”> <amp-img layout=”fill” src=”./img/320_240.jpg” placeholder></amp-img> </amp-iframe> |
amp-youtubeタグ
amp-iframeでyoutube動画を埋め込む方法をご紹介しましたが、youtube動画の埋め込み専用のamp-youtubeタグが別途用意されているので、そちらで実装することも可能です。
amp-youtubeを使う場合、あらかじめ以下の用にamp-youtubeのモジュールを読み込んでおく必要があります。
モジュール | <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script> |
amp-youtubeを使ってyoutube動画を埋め込む場合、以下のようになります。
例 | <amp-youtube data-videoid=”ahHmHzdx748″ width=”300″ height=”300″ layout=”responsive”></amp-youtube> |
amp-adタグ
Googleアドセンス等の広告を表示させるためのタグです。一般的に広告はjavascriptを使って表示させる場合が多いですが、
AMPでは外部のjavascriptは禁止なので、amp-adタグを使って表示することになります。
現在サポートされている広告サービスはこちらで確認することができます。
例 | <amp-ad type=”adsense” data-ad-client=”xxxxxxxxx” data-ad-slot=”xxxxxxxxx” width=”300″ height=”200″></amp-ad> |
CSSはインラインで
AMP公式ページに「CSSの読み込みを禁止しインラインでの記載のみ許可することで、多くのサイトと比較して1つまたはそれ以上のHTTPリクエストを削減できる」と書かれており、
CSSの読み込みがレンダリングやページロードの妨げになっていることを懸念しています。
このような理由により、CSSを読み込む代わりにamp-custom属性を付与したstyleタグをhtmlファイルにインラインで記載します。
例 | <style amp-custom>・・・</style> |
AMPで書いたHTMLのチェック
AMPの仕様に沿って正しく書けているかどうか、GoogleChromeの開発者モードを使ってチェックできます。
作成したページURLの末尾に「#development=1」を付与して閲覧すると、開発者モードのコンソールにチェックログが出力されます。
まず、正しく書けている場合、AMP validation successful.というログが出力されます。
先ほどご説明したamp-imgで正しくサイズを指定しない場合、以下のようなエラーログが出力されます。
(※縦幅(height)の指定を行わなかった場合)
また、必須とされるcanonicalタグを指定しない場合も同様にエラーログが出力されます。
まとめ
ここまでAMPの具体的な実装例とチェックの方法をご説明してきました。
まだまだ発展途上の部分が多いのが現状ですが、今後着実に浸透してくる技術だと思いますので、
現段階から実装方法など押さえておきましょう。