企業がGoogleAMPストーリーを無視できない理由

Accelerated Mobile Pages（AMP）プロジェクトは、モバイルのパフォーマンスをウェブ上の他の何よりも優先することを目的として、2016年2月にGoogleによって開始されました。

そしてGoogleは間違いなく彼らの目標を達成しました。

AMPは、20億を超えるモバイルページと900,000の異なるドメインに電力を供給します。 AMPを含むページは、AMP要素を追加しないページの2倍の速度で読み込まれるようになりました。

AMPを無視できると思うなら、あなたは間違っています。 AMPには、コンテンツ作成の取り組みを次のレベルに引き上げることができる、非常に優れた機能と利点がいくつかあります。

時間をかけてAMPストーリーを理解したり使用したりしないと、見逃してしまいます。

これが、企業がそれらを無視する余裕がない理由です。

しかし、最初に、AMPストーリーが実際に何であるかを分析しましょう。

AMPストーリーとは何ですか？
GoogleのAMPストーリー機能を使用すると、サイト運営者は、モバイルウェブサイトを念頭に置いて設計されたInstagramストーリーと非常によく似たコンテンツを作成できます。

ただし、AMPで作成されたコンテンツはアプリに追加されません。代わりに、検索結果ページに直接配置されます。

AMPは、モバイルユーザーがウェブサイトよりもアプリに多くの時間を費やしているという事実に応えて作成されたオープンソースプロジェクトです。

Statistaのデータによると、正確には、77％の時間です。

モバイルユーザーは上位3つのアプリにほとんどの時間を費やしています

AMPを使用すると、コンテンツの読み込みが非常に速くなり、モバイルユーザーがこれらのページにアクセスしたりアプリから離れたりするのに役立ちます。

通常の検索エンジンの結果の代わりに、ユーザーはナビゲートしやすいスワイプ可能なストーリーを受け取ります。 UXは、人気のある出会い系アプリであるTinderにいくぶん似ています。

ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEO トラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

GoogleのCNNAMPストーリーをスワイプ
AMPパートナーには、CNN、Mic、Wired、The Washington Post、Mashable、Peopleが含まれます。
AMPパートナー

非常に高速でロードするだけでなく、ニュース記事を共有するのと同じ方法でAMPストーリーを共有することもできます。

それらがどのように機能するかの内訳は次のとおりです。

AcceleratedMobilePagesの仕組み
現在、JavaScriptは、ほとんどすべてのWebページで使用して、その一部を変更できます。

ただし、ページの読み込みとレンダリングも遅くなります。また、ページの速度は非常に重要であるため（これについては後で詳しく説明します）、それは避けたいものです。

AMPでは、非同期JavaScriptをページでのみ実行できます。つまり、JavaScriptコードは、サイトに存在する他のコードをブロックしません。

AMPの非同期JavaScript

ウェブマスターが作成したJavaScriptはAMPストーリーでは禁止されており、インタラクティブページにはカスタムAMP要素のみを含める必要があります。

カスタム要素は基本的にJavaScriptで構成できますが、ページの全体的なパフォーマンスに制限が生じないように特別に設計する必要があります。

サードパーティのJavaScriptもAMPで許可されていますが、ページのレンダリングをブロックすることはできません。

AMPは、ページレンダリングをブロックするための拡張メカニズムも許可していませんが、Instagramの埋め込み、ツイート、またはライトボックスに使用できます。

このため、ユーザーは、不必要な注意をそらすことなく、AMPページ上のモバイル向けに最適化されたコンテンツをスワイプできます。

AMPと非AMPのストーリー

すでにお分かりのように、AMPストーリーが急速に成長している理由はたくさんあります。

なぜAMPストーリーを使用する必要があるのですか？
競合他社の中には、おそらく一貫してAMPを使用しているものがあります。

そうでない場合は、敗北を受け入れたほうがよいでしょう。

一方、競合他社よりも先にAMPプロトコルの使用を開始すると、業界のフロントランナーとしての差別化を図ることができます。

なんで？ AMP機能はストーリーを伝えるのに役立ち、ストーリーテリングは強力だからです。

ストーリーテリングは強力です
誰もが良い話が大好きです。

平均的な米国市民は1日に少なくとも100,500のデジタル単語を消費しますが、消費者の92％は、物語のように感じられる広告を見たり読んだりしたいと考えています。

アメリカ人が消費する単語の量
人々が従来の代替案を見るよりもはるかに長くAMPストーリーを見るということを示唆するいくつかの証拠がそこにあります。
これは、読み込み時間が短いほど、より多くのコンテンツを長期間表示しやすくなるためである可能性があります。

AMPを使用すると、強力で高速かつ独自の方法でストーリーを伝えることができます。そして、良い話を上手に話すと、効果的に視聴者にリーチできるようになります。

読者のニーズに応え、各部分に興味深い弧を描き、あなたの主張を証明するために必要なすべてのハードデータを追加することを忘れないでください。

ページ速度は、AMPの成功にも大きな役割を果たします。

ページ速度は重要です
サイトの速度は重要です。読み込みに時間がかかるページは、コンバージョンを停止させる可能性があります。サイトの読み込みに時間がかかる場合は、コンバージョン数がますます少なくなります。

コンバージョン率と読み込み時間

幸い、AMPページの読み込み速度は通常のモバイルページの約2倍です。

AMPページの読み込みが速くなります

このように読み込み時間が短いため、顧客はこれまでになく速くコンテンツにアクセスできるようになります。

モバイルページの読み込みに3秒もかかる場合、バウンスの可能性が32％増加するため、これはすばらしいニュースです。

5秒かかる場合、バウンスの確率は90％増加します。

AMPによって提供される読み込み時間が短いため、ユーザーは先に進んであなたから購入する可能性が高くなります。

彼らが摩擦や待ち時間なしにあなたのブランドと対話できることを彼らが知っているとき、彼らは彼らのお金であなたを信頼することをいとわないでしょう。

AMPの主張をさらに強くするために、Googleはより高速なモバイルページの読み込みに特別な扱いとより良いランキングを与える傾向があります。

AMPが提供するクリエイティブなデザイン機能を利用して、視聴者の関心を引き付け、興味をそそります。

クリエイティブなデザインを活用する
まだご存じない方のために説明すると、デザインが重要です。また、AMPページを使用すると、コンテンツを次のレベルに引き上げるクリエイティブな要素を追加できます。

フォーム、ボタン、ビデオ、画像、ショッピングオプション、またはAMPストーリーへのリンクを追加することを恐れないでください。

サイトはより洗練された機能的なものになり、視聴者の注意を引き付け、引き付け、引き付ける機会がたくさんあります。

グーグルのAMPとAMPのレイアウト

AMPはあなたのサイトに必要なSEOブーストを与えることができます。

AMPはSEOを支援します
AMPは、サイトの可視性を大幅に向上させます。

現在のところ、AMPプロトコルを使用したページでは、サイトのページ権限やドメイン権限は増加しません。

そうは言っても、従来のGoogle検索結果の上に表示されるAMPカルーセルにページが表示される可能性があります。

AMPカルーセル

これは、サイトがカルーセルに表示される場合、ナンバーワンのプレースメントの前に表示されることを意味します。

ナンバーワンのスポットの前に置くよりも良くなることはありませんか？

これにより、必要なオーガニック検索結果が大幅に向上し、これまで以上に多くのトラフィックがサイトにもたらされます。

次に、AMPを非常に優れたものにするすべての可動部分を分解してみましょう。

AMPストーリー機能の紹介
従来のAMPコンテンツはテキストのみに依存していますが、新しく改善された形式には、ユーザーに完全なエクスペリエンスを提供するためのビデオ、アニメーション、および画像が含まれています。

出版社の場合、次のことができます。

アプリやウェブサイトにストーリーを埋め込む
デスクトップとモバイルの両方を介してストーリーにアクセスする
大量の技術的知識を必要とせずにストーリーを語る
一番良いところ？ AMPは誰でも無料で試すことができます。

AMPストーリーの完成に関係するすべての部分を調べてみましょう。

AMPストーリーの一部
最初のAMPストーリーを作成する前に、そのすべてのコンポーネントをマスターする必要があります。

すべてのストーリーは個々のページで構成されています。各ページは、HTMLコードとAMP要素の組み合わせで構成される個々のレイヤーで構成されています。

コードに追加したときのコンポーネントの外観は次のとおりです。

ストーリー=アンプストーリー
ページ=amp-story-page
レイヤー=amp-story-grid-layer

ページに追加すると、コードは次のようになります。

AMPストーリーコード

ストーリーコンポーネントにはAMPストーリー全体が含まれ、ページコンポーネントにはストーリー内に存在する特定の各ページが含まれます。

レイヤーコンポーネントには、ページに存在するすべての要素が含まれています。

いくつかのAMPストーリーの例を次に示します。

GoogleAMPストーリーの例
Googleがウェブページを好むため、利用可能な場合はいつでも、Googleが従来のウェブページよりもAMPバージョンのウェブページにリンクすることは周知の事実です。

このため、すべてのAMPパートナーは、サービスの機能をそれぞれの強みに合わせて使用しています。

最も一般的に知られているAMPアダプターは、AMPを使用して情報を検索者に迅速かつ効果的に提供できるため、ニュース組織でした。

CNNがAMPストーリーを利用して、最新ニュースを共有および増幅する方法の例を次に示します。

CNNAMPストーリー

一部の出版社は、まったく同じ種類のコンテンツ（同じカバー写真を使用）でAMPストーリーを書いています。

AMPの同じコンテンツ

しかし、AMPはニュースサイトだけのものではありません。必要に応じて、長い形式のコンテンツをAMPに変換できます。そして、あなたはすべきです。

全体として、人々はAMPについて何と言っていますか？

人々がそれについて言っていること
AMPプロダクトマネージャーのRudyGalfiは最近、AMPストーリーは「本当に魅力的な広告フォーマットになるはずだ」とAdWeekに語った。

しかし、他の誰もがAMPを使用してコンテンツを公開することについてどう思いますか？

EconsultancyのライターであるStuartShawは、AMPページにはある程度のメンテナンスが必要ですが、AMPページが提供する見返りと露出はそれだけの価値があると述べています。

2018年4月の投稿で、彼は次のように書いています。

「確かに、あなたがしたことは、モバイルユーザーのために物事を改善することだけです。そして、AMPを実装したわずかなページでのみ…しかし、最適化は、物事を瞬時に完璧にすることではありません。それは、適応しなければならない段階的なプロセスです。絶えず変化する「techscape」、つまり検索に。」

一般的に、TwitterのようなサイトでのAMPに対する反応はかなりポジティブです。一部の人々は、AMPを2018年の最も重要なトレンドの1つと呼んでいます。

2018年を見るAMPのトレンド

AMPの最近の変更や更新を本当に気に入っている人もいます。たとえば、Gumpoは、「リッチなビジュアルを備えたインタラクティブなコンテンツを配信する方法として、これが大好きです」と述べています。

Gump WebMarketingAMPツイート

の9月に

2017年、SEO会社のOptimizingは、FacebookのAMPについて次のように述べています。

AMPに関するFacebook投稿の最適化

「ここOptimisingではAcceleratedMobilePages（AMP）が大好きです。」

Search Engine Journalの専門家は、eコマースサイトにAMPを実装することで、ユーザーエクスペリエンスを向上させ、コンバージョンを促進する方法について、いくつかのすばらしいヒントを提供しています。」

全体として、AMPはここにとどまっているようです。

独自のAMPストーリーの作成を開始する方法は次のとおりです。

GoogleAMPストーリーの使用を開始する方法
AMPストーリーとは何か、それらがどのように機能するか、なぜそれらを使用する必要があるのか、そして人々がそれらについて何を言っているのかがわかったので、自分で作成するビジネスに取り掛かることができます。

開始するには、コードをダウンロードします。

1.コードをダウンロードします
Googleが記事のAMPバージョンを取得するには、記事ページのコードを変更する必要があります。

元の記事には、AMP標準タグである次のタグが必要です。

1つのページから必要なすべてのAMPコードが必要な場合は、amp-wp GitHubページをクリックして、[ZIPのダウンロード]ボタンを選択します。

AMPをダウンロード

次に、他のWordPress プラグインと同じように、このコードをWordPressサイトにインストールします。

または、次のコードをAMPから直接ダウンロードして、拡張子が.htmlのファイルに保存することもできます。

AMPコード

コードをダウンロードして追加したら、サンプルページを実行できます。

2.サンプルページを実行します
サンプルページをテストするには、サーバーからファイルにアクセスする必要があります。

テストに役立つ一時的なローカルWebサーバーを作成する方法はいくつかあります。

「Chrome用ウェブサーバー」GoogleChromeアプリ
Apache
ローカルHTTPPythonサーバー
Nginx
AMPでは、セキュリティを強化するために、ここではHTTPSを使用することをお勧めします。

ローカルWebサーバーをセットアップした後、次のURLにアクセスしてサンプル記事にアクセスできます。
http：// localhost：8000/article.html。

すべてが良さそうな場合は、先に進んで表紙を作成します。

3.表紙を作成します
表紙はタグで表されます。

ストーリー内に複数のコンポーネントを含めることができます。これらのコンポーネントには、そのストーリーの個々の画面が含まれています。

ただし、指定した最初のページが表紙として機能します。

表紙を作成するには、表紙の一意のIDを最初のページに割り当てます。

<アンプストーリースタンドアロン>
<amp-story-page id =” cover”>
</ amp-story-page>
</ amp-story>

そのコードは、表紙のシェルとして機能します。ただし、有効にするには、少なくとも1つのレイヤーを指定する必要があります。

AMPのレイヤー
AMPのレイヤーは、グラフィックスのレイヤーと同様に機能します。レイヤーは、互いに積み重ねられたさまざまな要素で構成されます。
上記の例では、レイヤー1にはカバー写真として機能する画像が含まれ、レイヤー2にはストーリーのタイトルと署名記事が含まれています。

レイヤー1を作成するには、<amp-story-grid-layer>要素を<amp-story-page>に追加します。

画像を画面全体に表示する場合は、template =” fill”属性をamp-story-grid-layerタグに追加します。

レイヤー内に、cover.jpgファイルの<amp-image>要素を追加し、タグlayout =” sensitive”を追加してレスポンシブであることを確認します。

最初のレイヤーのコードは、すべての説明と完了時に次のようになります。

AMPのレイヤーコード

次に進む前に、ページがどのように表示されるかを確認してください。

2番目のレイヤーを追加するには、ここにある「塗りつぶしテンプレート」の代わりに「垂直テンプレート」を使用します。

AMP垂直テンプレート
表紙が完成したら、さらにページを追加できます。
4.ページを追加します
さらにページを追加することは、サンプルページと表紙を追加することに似ています。

使用するコードは、選択したテンプレートによって異なります。

垂直テンプレートを使用してレイヤーにテキストを追加するには、次の要素のようなものを追加します。

タイトルを含む<h1>要素
レスポンシブamp-img
すべてのテキストを含む<q>要素
新しいページは次のように表示されます。

猫のAMPページ

アニメーション要素を追加して、ストーリーを強化することもできます。

5.アニメーション要素を追加します
ストーリーを次のレベルに引き上げたい場合は、タイトルをページにドロップしたり、フェードインしたり、回転させたりすることができます。

AMPフレームワークには、現在、次のプリセットアニメーション要素が含まれています。

AMPアニメーション要素

要素にアニメーションを追加する場合は、animate-in =” animationpresetcodehere”を追加します。

たとえば、パルスアニメーションを使用するには、コードは次のようになります。

<amp-story-page id =” page3”>

<amp-story-grid-layer template =” vertical”>
<p animate-in =” pulse”>このテキストをページにパルスします</ p>
</ amp-story-page>

アニメーション要素を追加したら、ブックエンドを作成する準備が整います。

6.ブックエンドを作成します
「ブックエンド」は、ストーリーをまとめる最後の画面です。

関連リンクやソーシャル共有リンクを追加するためにも使用できます。

amp-story要素に、bookend-config-src属性を追加します。次に、bookend.jsonファイルに向けます。

<amp-storyスタンドアロン
bookend-config-src =” bookend.json”>

</ amp-story>

終了すると、ブックエンドは次のようになります。

AMPブックエンド

これで、AMPHTMLを検証する準備が整いました。

7.ヴァリ

AMPHTMLの日付
AMPページを検証する方法はいくつかあります。

たとえば、ChromeDevToolsコンソールを使用できます。

ブラウザでページを開く
URLに「＃development=1」を追加します
Chrome DevToolsコンソールを開き、検証エラーがないか確認します
グーグルクロームインスペクターの検証エラー

AMPValidatorブラウザ拡張機能を使用することもできます。

AMPバリデーターブラウザ拡張機能

どちらのツールも、AMPコードの問題を示し、それらを修復する方法を説明します。

AMPストーリーを作成するときに覚えておくべき3つの簡単なヒントを次に示します。

3つのクイックヒント
優れたAMPストーリーを作成するには、動画、テキスト、写真、または上記のすべてを追加する必要があります。

ここでは、プロセスの時間を節約するためのすばやく簡単な方法をいくつか紹介します。

ビデオの場合
ウェブ全体の動画にクリックして再生するオーバーレイを追加することは珍しくありません。これを使用して、動画のタイトルとともにページのスタイルに一致するカスタム再生アイコンを追加できます。

AMPのビデオオーバーレイ

AMPストーリーには、この機能が自動的に追加されることはありません。

ただし、次のようなタグを使用して簡単に追加できます。

テキストの場合、特定のテキストが指定された領域に収まるようにサイズまたはフィットを管理することができます。

テキストの場合
amp-fit-textコンポーネントを使用すると、指定した領域内のテキストのサイズまたはフィットを管理できます。これは、1日中フォントサイズをいじりたくない場合に最適です。

コンポーネントは、利用可能なスペースにコンテンツを収めるのに最適なフォントサイズを自動的に検出するため、その必要はありません。

スケールに合う最適なフォントサイズ

一部のHTML画像タグは、AMPに関して問題になる可能性があります。

写真の場合
ほとんどのHTMLタグは、AMPHTMLに直接追加できます。

そうは言っても、一部のタグ（<img>タグなど）は、拡張AMPHTMLタグに置き換えられることがあります。いくつかの問題のあるHTMLタグは完全に禁止されています。

<img>タグの代わりに、必ず終了タグのある<amp-img>を使用してください。

AMPタグ変換の完全なリストはここで確認できます。

AMPのHTMLimgタグ

結論
AMPは、検索エンジンの検索結果ページとウェブ全体でモバイルを最優先するためにGoogleによって作成されました。

AMPのストーリーはInstagramのストーリーに似ており、多くの有名企業がインターネットを支配しています。あなたがそれらを無視できると思うなら、あなたは間違っています。

何十億ものモバイルページはAMPを利用しています。これらのページは、JavaScriptコードで速度を落とすことが許可されていないため、以前の2倍の速度で読み込まれます。

AMPストーリーを使用する理由はたくさんあります。ストーリーテリングの取り組みを改善し、ページの速度を上げ、サイトのクリエイティブデザインを改善し、SEOの取り組みを支援することができます。

AMPストーリーには、ストーリー、ページ、レイヤーの3つの部分があります。

CNNのような巨大なメディアサイトはAMPを使用して最新ニュースを共有していますが、他のサイトはAMPを使用して長編コンテンツやビデオコンテンツを共有しています。

そして、AMPに対する反応は全体的にポジティブです。ほとんどの人はそれを2018年の次の大きなものと呼んでいます。出版社はそれを気に入っています。

AMPストーリーの作成を開始するには、コードをダウンロードし、サンプルページを実行し、表紙を作成し、ページとアニメーション要素を追加し、ブックエンドを作成し、HTMLを検証します。

AMPコードを検証したときに問題が発見された場合は、すぐに修正してください。

時間を節約するために、ストーリーにビデオ、テキスト、および写真を追加するときに使用できるいくつかの簡単なヒントとコツがあります。

ビデオ用のカスタムClick-to-Playオーバーレイを追加し、amp-fit-textコンポーネントを使用してテキストのサイズを自動的に設定し、<img>タグを使用しないでください。代わりに、<amp-img>を使用してください。

さあ、先に進んで、あなたのサイトでもモバイルユーザーを第一に考えましょう。

最初にどのコンテンツをAMPストーリーに変えますか？