コーディングメソドロジー

第97回 Google AMPについて - 実践編 -

前回(12月号)、Google AMP の概要についてご紹介しました。今回は「どのように Google AMPを導入すればよいのか?」を、Google AMP構築の際の必要な手順を踏まえてご紹介していきます。

■AMP導入方法

既存のページをAMP化、新規にAMPページを作成するには、AMP専用のページを作成する必要があります。作成するページは、AMP専用のマークアップに基づいてHTMLを記述しなければなりません。(図1)

図1:doctype及びhead内の記述

図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による構造化データの設定

図2:JSON-LDによる構造化データの設定

必須ではありませんが、後述するGoogle Search Consoleでのテストで警告が出る為、構造化データを検索エンジンに知らせる必要があります。いくつか方法はありますが、図2の様にJSON-LDでの記述は簡単にできるのでおすすめです。

■body タグ内のhtmlタグをAMP専用のタグで記述する

一部のhtmlタグはAMP専用のタグに変更する必要があります。

(例)imgタグの場合

(例)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導入を考えてみてはいかかでしょうか?

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム