- Coding Methodology
- 第97回 Google AMPについて - 実践編 -
第97回 Google AMPについて - 実践編 -
前回（12月号）、Google AMP の概要についてご紹介しました。今回は「どのように Google AMPを導入すればよいのか？」を、Google AMP構築の際の必要な手順を踏まえてご紹介していきます。
■AMP導入方法
既存のページをAMP化、新規にAMPページを作成するには、AMP専用のページを作成する必要があります。作成するページは、AMP専用のマークアップに基づいてHTMLを記述しなければなりません。(図1)
図1：doctype及びhead内の記述
① <!doctype html>で文書型宣言を開始する。
② 最上位階層のタグを<html amp>にする。
③ <head> タグ内の最初の要素を<meta charset="utf-8">タグにする。
④ <head>タグ内に<meta name="viewport" content="width=device-width,minimum-scale=1.0">タグを記述する。
⑤ 元となるページがある場合
<head>タグ内に<link rel="canonical" href="元ページURL" />タグを入れ、元ページのURLを指定する。
元となるページには、<link rel="amphtml" href="AMP ページ URL">のタグを入れる。（元となるページが存在しない場合、自身のURLを指定する必要があります。）
⑥ <head>タグ内に<style amp-custom></style>を記述する。
この中に作成したページに適用するcssを記述する。（cssは50,000Bytes＝50KBまで）
⑦ <head>タグ内に<amp-boilerplate>のタグと内容を記述する。
⑧ <head>タグ内の最後の要素を<script async src= "https://cdn.ampproject.org/v0.js"></script>タグと内容を記述する。
■JSON-LDによる構造化データの設定
図2：JSON-LDによる構造化データの設定
必須ではありませんが、後述するGoogle Search Consoleでのテストで警告が出る為、構造化データを検索エンジンに知らせる必要があります。いくつか方法はありますが、図２の様にJSON-LDでの記述は簡単にできるのでおすすめです。
■body タグ内のhtmlタグをAMP専用のタグで記述する
一部のhtmlタグはAMP専用のタグに変更する必要があります。
（例）imgタグの場合
<img>タグの他にも専用タグに変更になったタグや、AMPページでは使用禁止になっているタグもあります。詳しくは、公式サイトのリファレンスを参考にしてください。
https://www.ampproject.org/ja/docs/reference/components
■作成した AMP ページにエラーがないか確認する
ページが完成したら
https://validator.ampproject.org/
上記のサイトで作成したページのコードを貼ります。
ページの下部にエラーが表示されていなければ、AMPページの作成が完了です。
■AMPページが有効かGoogle Search Consoleで確認する
実際にページを公開したら
https://search.google.com/search-console/amp
上記のサイトで公開したページのURLを入力し、AMPが有効になっているか確認します。「有効なAMPページです」と表示されていればAMP導入成功です。AMPページ作成の為の必須項目が多く、複雑に感じますが、ページ表示の高速化によるユーザビリティの向上などメリットも多い為、この機会にAMP導入を考えてみてはいかかでしょうか？
