フロントエンド
投稿日:

【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの?

【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの?

FASTCODINGの波乗りディレクター尾島です。

AMPとは、Accelerated Mobile Pagesの略で
モバイル端末でホームページを高速表示するHTMLフレームワークであることは
前回の記事にてご紹介しましたが、今回は静的なHTMLページへの対応にフォーカスしてみます。

AMP対応のメリット・デメリット、導入する?


AMP対応のためのHTML記述方法

まず、AMPの仕様にあわせてHTMLを記述していきます。

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>タイトル</title>
<link rel="canonical" href="サイトのページURL">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "タイトル",
"datePublished": " ",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
~~~~~~~~~
</body>
</html>

普段HTMLを見慣れている方であれば、お気づきだと思いますが、
AMPフレームワークの独自タグを設定していく形となります。

主な記述ルールとして、

  1. <!doctype html>と宣言する。
  2. <html amp>とする。(絵文字でも可)
  3. rel=”canonical”を入れ、元のページとAMPページの繋がりを明記する。
    (AMPページのみの場合は、そのページを指定する)
  4. headの下に<meta charset=”utf-8″>を記述する。
    (文字コードとビューポートの指定は必須)
  5. <img> → <amp-img>
  6. <iframe> → <amp-iframe>
  7. <video> → <amp-video>

などが挙げられます。そのた必須の記述ルールに関してはGitHub-AMP HTMLから確認できます。

あとは、各種ツールなどでAMP対応の確認を行いエラーが出ていなければ対応完了です。

【Google AMPテストツール】


爆速!AMPトップニュース枠に表示される世界へようこそ!!

と、
ここまでAMP推しで来ていて何ですが、
個人的にはPWA(Progressive Web Apps)に注目していきたい所です。
AMPでは高速化の事だけが考えられている為、機能が制限されすぎており
すべてのサイトに向いた技術ではないと個人的には考えています。

その一方で、PWAは機能を削ることなく存分に利用できるというメリットがあります。
ただし、小規模サイトにはあまりオススメできないというデメリットもあります。
(前回の記事の通り、静的な記事コンテンツが中心であればAMPはオススメです)

国内では、朝日新聞や毎日新聞、マイナビニュース、exciteニュースといったサイトがAMPを採用しています。

え?
AMPかPWAのどちらかしか選択できないの?

と思われた方、ごめんなさい。
決してそんなことはありません。

PWAとAMPを組み合わせる、PWAMPという試みも行われています。
その形式は何通りかありますが、詳細は次回の記事にて触れようと思います。

AMP対応でお困りの方は、是非FASTCODINGにご相談ください!

FASTCODINGお問い合わせフォーム