この記事を書いた人

尾形丈人
尾形丈人

作成日時:2018年04月02日

更新日時:2018年10月15日

AMP HTML対応サイトの作り方を爆速で学ぶ!

AMP HTMLとは何?書き方はどうすればいいの?最新のAMP HTMLの作り方を爆速で学んでいきます。

AMP HTML対応サイトの作り方を爆速で学ぶ!

AMP HTMLとは?

AMPでは、「AMP HTML」というHTML規格に則り、サイトを構築していきます。

すなわちAMP HTMLとは、AMPに対応するための手段なのです。

AMP HTML形式で記述すると、当該ページがAMPに対応できるわけです。

ただ、ここで注意点。実務的には、「AMP HTML」での表示と通常のホームページでの表示とを併用させます。

これは、既存のホームページをAMPに対応させようとするWebサイトが多いためです。

現状、それが正解です。AMP HTMLの場合、制約が多いのでモバイル向けだけにAMP対応ページを用意しておくといった形にしておいたほうが良いと思います。

既存ページとAMPページとで、長所と短所を補う互換関係にするのが現状のベストでしょう。

AMPに対応するメリットとデメリット

そもそも、AMPに対応することで、どのようなメリットがあるのでしょうか。以下に示してみたいと思います。

  • 高速表示化されるので、ユーザーの満足度が上がる
  • ユーザーの満足度が上がれば、Webサイトへの滞在時間が増える
  • 滞在時間が増えれば、Googleの検索順位に良い影響を与えられる(かもしれない)

反対に、デメリットはどうでしょうか。

  • 使えない規格があるので、用途は制限される
  • 規格の制約上、シンプルなWebデザインになりがち

AMPは、静的なWebコンテンツ(ニュースサイトやブログなど)には適していますが、動的なWebコンテンツ(地図サイトやメールサイト)には合いません。

さらに言えば、画像サイズは必ず指定しなければいけないなど、Webデザインの幅が狭くなってしまうのです。

もちろん、メリットとしては「高速表示」「ユーザビリティ」「将来的なSEO効果」が期待されるわけですが、上記に挙げた制約を考慮して、導入を見送るという選択肢もありえます。

この辺りは、ホームページ制作会社との見積額と貴社Webサイトの将来性とを勘案すべきなのでしょう。

いずれにせよ、AMP対応のホームページ制作を依頼する前に、是非このようなデメリットも理解した上で、ホームページ制作会社と商談の場を持っていただきたいと思います。

AMP対応ページへの移行手順

手順としては、AMP HTMLのページとHTMLのページを用意し、それらを紐付けすると、AMP対応サイトの完成というわけです。以下、具体的に見ていきましょう。

  1. AMP HTMLとHTML5のテンプレートページを用意します
  2. AMP HTMLページとHTML5のページとを紐付けします
  3. 各コンテンツを上記のフォーマットに従って出力します

紐付けについては、AMP非対応ページのheadタグ内に、link relは「amphtml」、hrefには「AMP対応ページのURL」を追加してください。また、AMP対応ページにも同様に、link relに「canonical」、hrefに「AMP非対応ページのURL」を追加してください。

AMP HTMLを作る際は、色々と制約やお約束があるので、厳守してください。

さもなければエラーを吐き、AMP非対応のままになってしまうからです。

そうならないためにも、今度は既存サイトからの転換なのか、新規サイトの制作なのかによるAMP対応への方法を見ていきたいと思います。

既存のWebサイトをAMP対応にしたい方へ

既存のWebサイトでAMPがしやすいのは、データベースにコンテンツを格納しており、それをPHPなどで出力しているようなサイトか、小規模のHTMLファイルで構成されたサイトです。

データベースの内容を出力しているWebサイトの場合は、新たにAMP専用のページを表示させ、既存のページからその存在を知らせてあげれば良いわけです。

小規模のHTMLサイトの場合も、新たにAMP専用ページを設けて、既存のページから所定の様式に従って知らせてあげればOKなわけです。

それ以外のサイトの場合は、手間取るでしょう。見積額も、きっと跳ね上がると思います。

AMP対応のホームページを新規に制作したい方へ

道は二つに一つです。AMP専用サイトを制作するか、HTMLとAMP HTMLでの両立サイトを制作するかです。

もし、迷いがあるのでしたら、やはり両立サイトを制作するべきだと思います。

そうするならば、将来的にAMPプロジェクトがどうなっても安心だからです。

AMP HTMLの作り方

まず、HTML5で作り、以下の要素を入れます。

  1. 文書型宣言後、「html amp」で開始する
  2. headタグとbodyタグを含める
  3. 「link rel」のcanonical属性でAMP HTMLのURLを指定する。AMP HTMLのみの場合は、当該ファイルを指定する
  4. charsetとviewportを指定する
  5. AMP JSライブラリを読み込む
  6. amp-boilerplateを含める
  7. ニュース記事を配信するような場合は、必ずSchema.orgの定義を含ませる

これが、AMP HTMLの前提です。

前提となるタグを記述したら、次にAMP HTML仕様に変換したり、削除したりします。

AMP HTMLタグ一覧
script使用禁止
noscript使用可能
base使用禁止
imgamp-imgタグを代わりに使ってください。画像サイズも必ず指定してください
videoamp-videoタグを代わりに使ってください
audioamp-audioタグを代わりに使ってください
iframeamp-iframeタグを代わりに使ってください
frame使用禁止
framset使用禁止
object使用禁止
param使用禁止
applet使用禁止
embed使用禁止
formamp-formを使ってください
styleamp-styleタグを代わりに使ってください
linkheadタグ内のlinkでは、microformats.orgに登録されているrel値は許可されます
metahttp-equiv属性は禁止されています。それ以外の場合は許可されます
ahref属性の値は、「j​​avascript:」で始めることはできません。また、target属性の場合は、「_blank」を使用してください。それ以外の場合は使用可能です
svgほとんどのSVG要素は許可されています

AMP HTMLとCSS

CSSファイルは読み込み不可です。

「style amp-custom」と「/style」タグの間に直接記述します。

ただし、裏ワザというわけではないですが、PHPで外部テキストファイルとして読み込むことはできます。

この場合、ソースコードがすっきりします。

AMP HTMLとJavaScript

JavaScriptは、原則として使えません。ですから、自由なWebサイトのデザインが阻害されるというAMPのデメリットはあります。

このあたりは、腹をくくるしかありません。

AMP HTMLの検証

AMP HTMLの記述が成功しているかどうかを確認する手段があります。

それが、対象ページのURLの後に「#development=1」を追加して、ブラウザのコンソールを開き、「AMP validation successful.」と表示されていれば、成功です。

  • LINEで送る
  • フェイスブックでシェアする
  • ツイッターでシェアする

関連キーワード

よく読まれている記事

最新の記事3件