Google-amp-overview
Google AMP-概要
*Google Accelerated Mobile Pages* （Google-AMP）は、amp htmlを使用して軽量のWebページを構築するために特別に設計されたGoogleの新しいオープンソースプロジェクトです。 このプロジェクトの主な目的は、アンプコードが正常に動作し、スマートフォン、タブレットなど、考えられるすべてのデバイスで高速にロードされるようにすることです。AMPとは
Accerated Mobile Pages（AMP）は、あらゆるブラウザでコンテンツをより速く、よりスムーズに、そしてレスポンシブにすることにより、Webページをモバイルフレンドリーにするために特別に設計されたGoogleのオープンソースプロジェクトです。
Google ampの公式サイトは-https://www.ampproject.org/です
AMPを選ぶ理由
どのユーザーも、Webサイトがコンテンツを非常に高速にロードすることを期待しています。 ただし、画像、ビデオ、アニメーション、ソーシャルウィジェットがページにほとんどあふれている場合は、ページが非常に重くなり、読み込み時間が長くなります。 そのようなシナリオは、長期的にウェブサイトへのユーザーの損失を引き起こす可能性があります。
Google AMPは、この問題を解決するように設計されています。 AMPには、画像、iframe、javascript、広告、ビデオ、アニメーション、css、読み込まれたフォントなどを処理する特別な方法があります。 AMPページのコンテンツはGoogle側でキャッシュされるため、ユーザーが検索結果をクリックするたびに、キャッシュからコンテンツが提供されます。 キャッシュバージョンもタイムリーに更新されるため、ユーザーは常に最新の更新ページを取得できます。
AMPを選択する理由
このセクションでは、サイトでAMPを選択する必要がある理由を説明します-
Google検索を優先
今日、Googleで何かを検索すると、ページの上部にGoogleカルーセルが表示され、その後に検索への応答としてページのリストが表示されます。 表示されるニュースカルーセルはすべて有効なAMPサイトです。 これは、Googleがampページを優先し、ニュースカルーセルのランキングに従ってそれらを表示することを意味します。
キーワード「 latest indian news 」を使用してGoogleで行われた検索の例を次に示します-
上の画像に示すように、AMPページである上位のすべてのページがGoogleカルーセルの先頭に表示されます。
ユーザーがGoogle検索で何かを検索すると、Google AMPページは次のように表示されます。 AMPページにはGoogle AMPロゴがあります。
読み込み時間の短縮
ページがAMPに変換されると、ロード時間は非AMPページに比べてはるかに改善されます。 読み込み時間の短縮は、Google検索でのページランキングの重要な要素でもあります。
ポップアップなし
Google AMPを使用すると、ユーザーがGoogle AMPで設計されたページの不要なポップアップを表示しないため、快適なWebブラウジングエクスペリエンスが得られます。
トラフィックを生成する
ページの読み込み速度が速い場合、自動的に視聴者の数が増加するため、ページへのトラフィックが増加します。
AMPの仕組み
Webサイトの構築に使用される最も重要なコンポーネントは、javascript、画像、ビデオ、フォント、cssなどです。 AMPページの設計は、これらすべての要素を独自の方法で処理することにより行われます。 このセクションでは、ページを高速化するためにAMPが正確に行うことを簡単に説明します。
非同期JavaScript
Javascriptは、アニメーション、DOMの変更などの形式でページにインタラクティブ機能を追加するのに役立つため、ページで重要な役割を果たします。 また、ページの動作が遅くなり、他のコンテンツがページ上でレンダリングされないようにブロックできます。
AMPはJavaScriptにどのように取り組んでいますか？
AMPはJavaScriptを非同期的に読み込みます。 カスタムJavaScriptは、AMPページ内では厳密に許可されていません。 AMPには多くのコンポーネントが追加されており、それらの一部は既存のhtmlタグに置き換わるものです。たとえば、amp-img、amp-iframe、amp-video、amp-lightbox、amp-animationsなど。
このコンポーネントごとに、スクリプトタグに追加されたasync属性を持つJavaScriptファイルがロードされます。 ampコンポーネントに関連するJavaScriptファイルのみがページで許可され、AMPページまたはサードパーティのjavascriptファイル内の他のJavaScriptは許可されません。 AMPはGoogle AMPキャッシュを使用するため、ファイルはキャッシュからプリロードされ、ロードが高速化されます。
HTMLタグのサイズ
ampページがリソースをロードせずにページ上のスペースを見つけられるように、イメージ、iframe、ビデオタグのサイズを指定することが必須です。 ロードされるリソースは、ampページによって優先順位が付けられます。 コンテンツは、ロードされるリソースよりも優先されます。
ソーシャルウィジェット/AD
Ampは、ページに表示されるソーシャルウィジェットを処理する特別なコンポーネント、つまりamp-facebook、amp-twitter、amp-ad、amp-stickyを提供します。 AMP-adコンポーネントは、ページに広告を配信するために使用されます。 AMPは、コンポーネントの処理に特別な注意を払い、要件に基づいてコンテンツを優先的にロードします。
CSS
外部CSSはAMPページでは許可されていません。 amp-custom属性を使用して、スタイルタグ内にカスタムCSSを追加できる場合。 インラインCSSも使用できます。 AMPは、可能なすべての方法でhttp要求を削減します。
フォント
ampページではフォントが許可され、フォントのロードの優先順位はAMPによって決定されます。
アニメーション
AMPはアンプアニメーションコンポーネントをサポートし、最新のブラウザーでサポートされているように移行できます。
上記のすべての点を考慮して、AMPは、フォント、画像、iframe、配信される広告などに対して行われたHTTPリクエストに特別な注意を払います ページの折り畳みの上で利用可能なリソースが最初にレンダリングされ、後で折り畳みの下で利用可能なリソースの設定が与えられます。
その他のポイント
Google AMPキャッシュは、コンテンツがキャッシュからフェッチされるときにコンテンツをより速くレンダリングするのに役立つもう1つの重要な要素です。
出版社は、2つのサイトampとnon-ampページを維持する必要があります。 たとえば、サイトのアドレスがhttp://mypage.com/?reqp=1&reqr=[https://www.mypage.com]であるとします。 そうすると、デスクトップで提供されるnon-ampの内部ページは* [[1]] デバイスまたはAMPの場合：* https://www.mypage/com/news/amp/*
GoogleはAMPページと非AMPページをどのように識別しますか？
次に、GoogleがAMPページと非AMPページを識別する方法を理解しましょう。
- Google検索がページをクロールするときに、htmlまたは<html amp>または<html in>にampが含まれている場合、AMPページであることを認識します。
- また、Googleが非アンプページに遭遇した場合、まずアンプページについて知るには、アンプページと非アンプページの両方のHTMLページのヘッドセクションに次のリンクタグを追加する必要があります。
非ampページのページURL
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">ここで、_rel =” amphtml” _は、Googleがプラットフォームに基づいて適切なバージョンを表示するように、非ampページがampバージョンを指すように指定されています。
amp-pageのページURL
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnewsl">ここで、_rel =” canonical” _はampページでhtmlの標準バージョンを指すように指定されているため、Googleはプラットフォームに基づいて正しいバージョンを示します。
サイトにアンプページが1つしかない場合でも、rel =” canonical”を追加することを忘れないでください。
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">次の図は、ampページを指すrel =” amphtml”および標準のhtmlページを指すrel =” canonical”への参照を示しています。
Google AMPの機能
このセクションでは、Google AMPで利用可能な重要な機能について説明します-
アンプキャッシング
Google Ampキャッシングは、ampに追加されたコア機能の1つです。 純粋なampページを提供するプロキシベースのコンテンツ配信ネットワークを提供します。デフォルトでは、有効なすべてのampページで、Ampキャッシュを使用できます。 AMPキャッシュおよびCloudflare AMPキャッシュ。 ユーザーがクリックしてampページにリダイレクトされると、コンテンツはGoogleキャッシュから提供されます。
アンプ部品
Ampには、さまざまな目的のために設計されたコンポーネントの大きなリストがあります。 それらのいくつかは以下にリストされています-
- amp-img -ampページに画像を表示するために使用されます。
- amp-iframe -ページに表示される外部コンテンツとともにiframeを表示するために使用されます。 使用されているiframeはサンドボックス化されているため、ampページにデータを表示するには許可が必要です。 そのため、サンドボックス属性にクロスオリジンの詳細を指定する必要があります。
- amp-video -ページにビデオを表示します。
- amp-audio -ページに音声を表示します。
- amp-datepicker -ページに日付ウィジェットを表示するために使用されます。 サードパーティ製の日付ピッカーを探す必要はありません。同じものがampで直接利用できます。
- amp-story -ページにストーリーを表示する媒体。
- amp-selector -オプションのメニューを表示するアンプコンポーネントであり、ユーザーはオプションを選択できます。 表示されるオプションは、テキスト、画像、またはその他のアンプコンポーネントです。
- amp-list -CORS jsonエンドポイントを呼び出すampコンポーネントであり、jsonファイルからのデータはテンプレート内に表示されます。
広告
サイト運営者にとって収益はページに配信される広告に完全に依存するため、広告は非常に重要です。 Ampでは、外部javascriptをページに追加することはできませんが、ページに広告を配信するamp-adと呼ばれる特別なampコンポーネントが導入されています。
サイト運営者が自分のページに配信したいアドネットワークは、アンプ広告をサポートする必要があります。 たとえば、ページにダブルクリック広告を配信するには、ダブルクリックがamp-adコンポーネントを使用して配信される広告をサポートする必要があります。 次のコードは、doubleclickのamp-adタグを示しています。
<amp-ad width = "300"
height = "200"
type = "doubleclick"
data-slot = "/4119129/ad-layout">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>Ampは、AMPコンポーネントとhtmlから開発された純粋なampadであるamphtmladもサポートしています。 Ampは、ページの下部に表示されるフッター広告であるamp-sticky-adsもサポートしています。 ampの広告の詳細については、amp adsの章で説明します。
ソーシャルウィジェット
Facebook、Twitter、Instagramなどのソーシャルウィジェットは、サイト運営者のページに表示することが非常に重要になっているため、ページはソーシャルメディア間で共有されます。 AMPは、amp-facebook、amp-twitter、amp-instagram、amp-pinterestなどのAMPコンポーネントを開発することにより、ページで使用されるすべての重要なソーシャルメディアウィジェットにサポートを拡張しました。
アンプメディア
ページ上の別の重要なコンポーネントは、ビデオを表示するメディアであり、ミッドロール広告としてビデオ間の広告も配信します。 AMPは、amp-jwplayer、amp-youtubeなどを使用してメディアを提供します。 jwplayerやyoutubeをページに表示するために、追加のサードパーティファイルを読み込む必要はありません。
アンプ分析
Amp分析は、特定のページのデータを追跡するために使用されるAMPコンポーネントです。 ページ上のすべてのユーザーインタラクションを記録および保存して、データを分析し、さらなる改善やビジネス目的に使用できます。
アンプアニメーション
アンプアニメーションは、他のアンプコンポーネントで使用されるアニメーションを定義するアンプコンポーネントです。 ITは、最新のブラウザーでうまく機能するアニメーション、移行をサポートしています。 アニメーションを実行するために外部CSSライブラリを使用する必要はなく、アンプアニメーションコンポーネントを使用できます。
アンプのレイアウト
AMP-Layoutは、google-ampで利用できる重要な機能の1つです。 Amp Layoutは、ページが読み込まれたときに、ちらつきやスクロールの問題を引き起こすことなく、アンプコンポーネントが適切にレンダリングされるようにします。
Google AMPは、画像のhttpリクエストなどの他のリモートリソース、データ呼び出しが行われる前に、ページでレイアウトのレンダリングが行われるようにします。 レイアウトに使用できる属性は、すべてのアンプコンポーネントの幅/高さ、レスポンシブ、フィル、固定などの値を持つレイアウト属性、リソースの読み込みに時間がかかったりエラーが発生した場合に表示されるプレースホルダー属性、次の場合に表示されるフォールバック属性ですリソースにエラーがあります。
アンプ表示レイアウト
Ampは、サードパーティのライブラリを必要とせずに、またはページに重いCSSを作成することなく、ページにコンテンツを表示するために使用される多くのコンポーネントをサポートします。 リストに含まれるもの
- Accordion -Amp-accordionは、コンテンツを展開折りたたみ形式で表示するために使用されるampコンポーネントです。 ユーザーがモバイルデバイスで表示しやすくなり、アコーディオンからの選択に従ってセクションを選択できるようになります。
- カルーセル-アンプカルーセルは、画面上に一連の同様のコンテンツを表示し、矢印を使用してコンテンツ間を移動するアンプコンポーネントです。
- Lightbox -Amp-lightboxは、フルビューポートを占有してオーバーレイのように表示するアンプコンポーネントです。
- Slider -Amp-image-sliderは、画像上で垂直に移動するスライダーを追加して2つの画像を比較するために使用されるアンプコンポーネントです。
- サイドバー-アンプサイドバーは、ボタンをタップするとウィンドウの側面からスライドするコンテンツを表示するために使用されるアンプコンポーネントです。
AMPの利点
- AMPページは軽量で、読み込みが高速です
- Googleは、Google検索のAMPページを優先します。 AMPページは、ページの上部にカルーセル形式でリストされます。 より高いランキングを取得するには、ページをAMPに配置することをお勧めします。
- AMPページは、コンテンツがレスポンシブであり、追加のスタイリングを必要とせずにすべてのブラウザーで適切に調整されるため、モバイルフレンドリーです。
- 非AMPページと比較してページの読み込み速度が速いため、AMPページのユーザー満足度が向上し、帯域幅とモバイルバッテリーが節約されます。
AMPの欠点
Ampには次の欠点があります-
- パブリッシャーは、ページampとnon-ampの2つのバージョンを維持する必要があります。
- ユーザーは、非アンプページをアンプに変換するために、さらに努力する必要があります。 ampはカスタムjavascriptまたは外部javascriptのロードをサポートしていないため、ampで利用できるものであれば何でも同じことを実現する必要があります。
