AMP。 それは何で、何と一緒に食べますか?

一般的な情報


AMPは、独立した開発者が開発したモバイルページテクノロジーであり、Googleの検索エンジンで積極的に宣伝されています。 Yandexはまだこのイニシアチブに参加していませんが、近い将来、この標準を実装するか、原則として同様のものを思いつくと確信しています。


要するに、サイトでは特別なタグが使用されており、そのタグの数と機能は厳密に制限されています。 開発者のタスクは、顧客の問題を解決する利用可能なスキームの寄せ集めを組み立てることです。


Googleはこれらの特別なタグを見つけ、その情報をキャッシュします。 その後、ユーザーがGoogleで何かを検索すると、バックグラウンドのブラウザーはGoogleのCDNから特別なiframeに情報を読み込み、リンクをクリックすると、既に読み込まれているページを特別なウィンドウで開きます。



AMPを含むページは、高速読み込みの要件を満たし、モバイルデバイスに適合しているため、他の検索クエリよりも上位にランクされています。


実際、このようなページはすべて、iframeと同様にフォーム送信を使用できるため、静的または条件付きで動的です。


適用分野:ニュースサイトおよびポータル。 ディレクトリ (フィルターを使用しない); サイトの軽量モバイルバージョン(機能を満たす場合); ページをフックしてユーザーの興味を引き、メインサイトに誘導します。

次に、AMPの主な機能について説明します。


カスタムスクリプトの欠如


標準サイトとの最初の最も重要な違いは、「通常の」スクリプトを挿入できないことです。 つまり、動的な変更(クリックアクション、アニメーション、フィルタリング、モーダルウィンドウ)に関連付けられている機能のほとんどはアクセスできなくなります。


解決策は、利用可能なコンポーネントとiframeを使用することです。


使用可能なコンポーネントを使用すると、完全ではありませんが、使い慣れた機能の実装を実現できますが、それらは価値のある代替品を提供し、高速ロードに最適化されています。


彼らの助けを借りて、サイドメニュー、カルーセル、フォーム送信、ダウンロード可能なコンテンツ、広告などを作成できます。
各コンポーネントは、サイトで使用するために接続する必要がある独自のjsライブラリに関連付けられています。


このサイトでは、使用例が記載されたすべての利用可能なタイプのコンポーネントを見つけることができます。




ドキュメントに通常の<img>タグがない。


ページ上のすべての画像は、特別な<amp-img>で記述する必要があります。これにより、ユーザーがテキストエディターから画像を挿入するのが難しくなります。 画像の出力が「手で」綴られている他の要素については、レイアウトを修正するだけで十分です。 また、カルーセルまたはライトボックスを使用している場合、コンポーネントからアナログを挿入する必要があります。




ページコードにはインラインスタイルを使用しないでください


編集スタイルはインラインであるため、主にテキストエディターに関係する別の機能。 style=“color:…”,などの属性を持つ要素は無効です。色またはフォントサイズを変更すると、このプロパティがコードに書き込まれます。




構造化データ


「Top stories google」コレクションに記事を含めるには、記事、著者、出版社、会社のロゴ、記事の発行日および変更日に関する簡単な情報を含むデータページをページに追加する必要があります。


構造データの使用は前提条件ではありませんが、編集中に検索エンジンがデータと変更を正しく表示するには、このスキームをサイトに配置する必要があります。 実際、このスキームなしでAMPを使用しても意味がありません。


タイプ「記事」のページのデータスキーマの例:


 <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://google.com/article" }, "headline": "Article headline", "image": { "@type": "ImageObject", "url": "https://google.com/thumbnail1.jpg", "height": 800, "width": 800 }, "datePublished": "2015-02-05T08:00:00+08:00", "dateModified": "2015-02-05T09:20:00+08:00", "author": { "@type": "Person", "name": "John Doe" }, "publisher": { "@type": "Organization", "name": "Google", "logo": { "@type": "ImageObject", "url": "https://google.com/logo.jpg", "width": 600, "height": 60 } }, "description": "A most wonderful article" } </script> 

いくつかの値が必要です。 データデータ構造のバリデーターもあります。 タイプ「記事」のスキームの入力および必須フィールドに関する情報は、 ここにあります


そこでは、他のタイプの回路に関する情報を見つけることができます。 (本、コース、音楽、ポッドキャスト、レシピ、レビュー、テレビと映画、ビデオ)


いくつかの機能:





正規リンクとその逆


検索エンジンがページのAMPバージョンがあることを理解するには、リンクを含める必要があります。
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">


そして、AMPページ-後方リンクがあります:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">




CSS 50 kb


Cssスタイルはインラインで記述され、サイズは50kbを超えてはなりません。




おわりに


AMPは興味深い技術ですが、狭いタスクにのみ使用できます。 サイトの「ライト」モバイルバージョン、または高度な機能を必要としない特定のセクションに使用できます。 情報サイト、ブログ、オンライン雑誌に適したソリューション。 コンテンツを可能な限り迅速かつ簡単な方法でユーザーに伝える必要がある場合。 大規模で複雑なプロジェクトの場合、少なくともこの段階では、AMPはモバイルバージョンまたはアダプティブバージョンの代わりにはなりません。


IT会社Wellsoftの Webサイトのニュースセクション(適応画像、フォーム、テキスト、構造化データ。さらに、機会があれば、この記事は「トップストーリー」ギャラリーに移動します)の機能の一部を実装しました。


GoogleはAMPアイコンを検索結果のすべてのAMP記事に追加し、モバイルデバイスからは主にAMPページを表示します。 また、AMPを使用していないページよりも上位にランク付けされます。


UPD:技術の調査と実装に多くの時間を費やしましたが、最終的にはAMPが不要であると判断したため、新しいサイト(リリースは2017年11月1日でした)にはAMPのページはもうありません。 興味のある人(サイト上の連絡先)の詳細を共有できます。



Source: https://habr.com/ru/post/J327108/


All Articles