AMPとは何か？ AMPページとSEOの初心者ガイド

AMPとは何か？

AMP（以前はAccelerated Mobile Pagesと呼ばれていた）はオープンソースのHTMLフレームワークで、モバイルに最適化された読み込みの速いウェブページを作成するのに役立つ。

つまり、AMPページは基本的に、通常のウェブページの縮小版なのだ。

そして、それはこのように見える：

グーグルは、フェイスブックのインスタント・アーティクルズやアップルのニュースに対抗するため、このオープンソースプロジェクトを主導した。

どちらも、パブリッシャーが読み込みが速く、消費しやすいコンテンツを作成することを可能にした。

グーグルがモバイル検索結果でAMPページを初めて提供したのは2016年のことだ。そして、それらはSERPのトップにある "Top Stories "セクションに制限されていた。

こんな感じだ：

もともとはニュース出版社向けに設計された。しかしその後、あらゆる種類のウェブページを含むようになった。

AMPの仕組み

AMPのフレームワークは、3つの基本コンポーネントで構成されている：

AMP HTML
AMP JavaScript
AMPキャッシュ

AMP HTML

AMP HTMLとは、ページの読み込みを速くするために、一定の制限を加えたHTMLのことである。ウェブページの表示速度を低下させる可能性のある要素や属性を削除または変更します。

単純なHTMLファイルは次のようになる：

基本的に、AMPのHTML文書には以下のことが求められる：

<!doctype html>で始める（どのようなタイプの文書を期待するかという情報をブラウザに送るため）。
トップレベルの<html ⚡>または<html amp>タグを含める（AMP HTMLページであることを示す）。
<head>と<body>タグを含める（文書の内容、すなわち見出し、段落、画像、ハイパーリンク、表などを定義する）。
<link rel="canonical" href="URL">を含める（ページの通常のHTMLバージョンを示すか、通常のページが存在しない場合はそれ自体にリンクする）。
<meta charset="utf-8">タグを含める（文字エンコーディングを指定する）。
<meta name="viewport" content="width=device-width">タグを含める（ブラウザにページの寸法を制御する方法を指示する）。
<スクリプト async src="https://cdn.ampproject.org/v0.js"><スクリプト>タグを含める（ベース・ライブラリに拡張機能を追加する）。
AMPボイラープレート・コード（head > style[amp-boilerplate]およびnoscript > style[amp-boilerplate]）をheadタグに含める。

特別なタグ、属性、テンプレートに関する詳細は、AMPの公式AMP HTMLドキュメントをご覧ください。

AMP JavaScript

JavaScriptは厄介で、JSを使いすぎるとウェブページが遅くなったり、反応が悪くなったりするからだ。

しかし、AMPのJavaScriptライブラリにはフレームワークやコンポーネントが含まれており、JSを書いたりサードパーティのライブラリをインポートしたりすることなく、素早くページを構築することができる。

そのどれもが、読者の経験にとって極めて重要である。

AMPキャッシュ

AMP Cacheはプロキシベースのコンテンツデリバリネットワーク（CDN）で、ユーザーからリクエストされる前にAMPページをプリフェッチし、プリレンダリングする。

そして、それはサイトのスピードにとって画期的なことだ。

なぜですか？

異なるサーバーから複数のパーツを一度に読み込むことができるからだ。また、訪問者が最も近いサーバーからあなたのサイトを読み込むこともできる。

つまり、あなたのウェブサイトは、より多くの人々にとって超高速で読み込まれるということです。

そして、現在2つの主要なAMP Cacheプロバイダーがある：

これらのプラットフォームは、AMPフォーマットを使用するとページをキャッシュする。

たとえば、キャッシュ・プロバイダは、<html ⚡>または<html amp>タグを介してAMPページを検出し、そのコンテンツをキャッシュすることができます。

または、パブリッシャーが手動でページをAMPキャッシュに追加することもできます（Google AMPキャッシュにのみ適用されます）。

他のプラットフォームは、キャッシュされたAMPページにURL経由でアクセスできる。

例えば、ガーディアンのニュース記事の最後に/ampを付けると、AMPバージョンが表示される。

こんな感じだ：

Pro tip: 自分のサイトにAMPページがあるかどうかわからない場合は、SemrushのSite Audit Toolを使って確認することができる。

ドメイン名を追加し、"Start Audit"をクリックします。

次に、ダッシュボードの「統計」タブにアクセスすると、「AMPリンク」という行が表示されます。

こんな感じだ：

AMPページの利点と限界とは？

AMPはページのパフォーマンスとユーザー体験を向上させることができる一方で、一定のデメリットもある。

AMPページの長所と短所を見てみよう：

AMPの利点

ページの読み込みはほぼ一瞬
ページの作成が簡単
モバイルでのユーザー体験を向上
カスタムデザインが可能
GoogleやBingを含む複数のプラットフォームがサポート

AMPの制限

Googleは、AMPコンテンツを示すAMPバッジアイコンを表示しなくなりました。
デザイン要素が非常に制限されている
AMPページでは、1ページに1つの広告タグしか使用できません。

ウェブサイトにAMPを設定する方法

AMPページは、HTMLのマークアップに従って作成することも、CMSを使って（プラグインやカスタム機能を使って）作成することもできる。

HTML AMPページを作成する

基本コード

手始めに、基本的なAMPページのマークアップを紹介しよう：

<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical"
href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<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;アニメーション：-amp-start 8s steps(1、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>
</head>
<body>
<h1 id="hello">Hello AMPHTML World！</h1>
</body>
</html>

見ての通り、本文は単純だが、頭には追加のコードがある。

ヒント： AMPのスニペット "プレイグラウンド "を使ってコードを練習しよう。

画像の追加

画像を追加したい場合は、通常のHTMLタグをAMPに相当するものに置き換える必要がある。

この場合、<img> の代わりに<amp-img>タグを使用します。

試しに、以下のコードをコピーして、あなたのページの <本文>に貼り付けてください。

<amp-img src="https://source.unsplash.com/random/600x400" width="600"
height="400"></amp-img>

スタイルの追加

次のステップはスタイルの追加だ。

スタイリングはCSSプロパティを使って行わなければならない。しかし、AMPでは、すべてのCSSを、ドキュメントの<head>内の<style amp-custom>と呼ばれるカスタム・タグ内に含めることが規定されています。

例えば、次のようなスタイルをページに追加してみてください：

<style amp-custom>
h1 {
margin: 1rem;
}
 body {
background-color: green;
}
<./style>

ジャバスクリプト

AMPは、<amp-script>コンポーネントを通してカスタムJavaScriptを許可します。

これにより、AMPのパフォーマンス保証を維持したまま、独自のJSを書いて実行することができる。また、JavaScriptのコーディングや外部ライブラリを使用することなく、素早くページを構築することができます。

より詳細な情報については、AMPのカスタムJavaScript使用ガイドを読み、AMP JSチュートリアルに従って始めてください。

レビューと検証

有効なAMPページとは、キャッシュの対象となり、優れたユーザー体験を生み出すことを保証する厳格なガイドラインに従っていることを意味する。

AMPページを検証する前に、以下のベストプラクティスに従っていることを確認してください：

Googleに最適化する場合は、AMPページのガイドラインに従ってください。
AMPページをカノニカル（非AMPバージョン、またはAMPページそのもの）にリンクする。
AMPページと正規ページで同じ構造化データマークアップを使用する。
リッチリザルトテストを使用して、構造データが機能することを確認する。
robots.txtファイルがAMPページをブロックしていないか確認する
国際的なSEOhreflangガイドラインに従う

レビューの準備ができたら、AMPテストツールを使って、あなたのページがすべての要件を満たしていることを確認しましょう。

より詳細なガイドについては、AMPページの検証に関するAMPの公式チュートリアルをご覧ください。

また、ウェブ開発の初心者であれば、AMPのコースやGoogleのAMPファウンデーション・コードラボを利用しよう。

CMSでAMPページを作成する

CMSでコンテンツを管理するのであれば、Drupal、Joomla、WordPressなどが利用できる。

例えば、AMP for WPを使うとどのように見えるか見てみよう。

WordPressでプラグインを有効化したら、Accelerated Mobile Pagesの作成を開始できます。

新しいページや新しい投稿を追加することから始めましょう。

次に、"AMPページビルダーを開始"をクリックする。

あらかじめ用意されたレイアウトを使うか、ドラッグ＆ドロップで要素を選んで独自のレイアウトを作ることができます。

次に歯車のアイコンをクリックして、ページの要素を編集します。

そして、各モジュールを保存しながら進める。

ページを公開したら、ページのURLの末尾に「amp」を追加することで、AMPバージョンのページが表示されます。

AMPページの監視と改善

AMPページを監視し、改善する最善の方法の1つは、定期的にサイトを監査することです。 HTML、テンプレート、スタイルやレイアウトの問題を追跡するのに役立つ。

まずは、サイト監査ツールであなたのサイトをチェックしてみましょう。

ヒント 無料のSemrushアカウントを作成し、任意のドメイン、サブドメイン、またはサブフォルダーのURLを100件までクロールする。

サイトをクロールしたら、「統計」タブに向かう。 "AMPリンク "と表示された行に問題が表示されます。

このツールは、AMPページに関連する最も一般的な40以上のエラーをチェックする。そして、その修正方法も教えてくれる。

問題はできるだけ早く解決すること。これらは、検索エンジンがあなたのコンテンツを検索者に提供する方法に影響を与える可能性があります。