Accelerated Mobile Pages –それらを実装する方法は?

公開: 2016-03-08

調査に基づいて、モバイルWebサイトはますます人気が高まっています。 特にインターネットをほとんどどこでも使用できるため、モバイルデバイスの人気はますます高まっています。 そのため、会社の所有者は、モバイルユーザーも自分のWebサイトを利用できるようにすることのメリットを考え直す必要があります。

Accelerated Mobile Pages

1月末に加えて、 GoogleはAMPと呼ばれるモバイルウェブサイトのアクセラレーションを有効にする機能を実装しました。 しかし、それは本当に何ですか?

Accelerated Mobile Pagesとして知られるAMPは、すばやくレンダリングする必要のある静的コンテンツに基づいてWebサイトを構築する方法です。

AMPの部分は何ですか?

  • AMP HTML –これはHTMLコードの一連の推奨事項であり、基本的なHTMLコードとAMPの一部として利用可能な拡張機能を使用してリッチコンテンツを作成できます。
  • AMP JS –コンテンツをWebサイトに即座に表示するJavaScriptライブラリ
  • AMP CDN –これはオプションの機能であり、AMPに基づくHTMLWebサイトの配信を担当します。
Accelerated Mobile Pages

http://pinterest.com

なぜAMPが作成されたのですか?

これは、モバイルWebサイトで作業する人々と関係のある人々によるオープンソースサービスとして設計されており、彼らの考えと長い議論の効果があります。 ウェブマスター、プログラマー、編集者だけでなく、ユーザーもいたので、それは彼らの経験に基づいています。 しかし、それはどういうことですか? これまでよりもはるかに速くコンテンツを提供するためだけに。

AMPは、Webサイトの読み込み時間に影響を与えるように作成されているため、コンテンツのアクセシビリティ(モバイルデバイス、PC、またはラップトップの場合)に関係なく、読み込みが遅いために発生するバウンス率は低下するはずです。

AMPはどのように正確に機能しますか?

Accelerated Mobile Pagesは、HTMLコードに基づく他のウェブサイトと同じように機能するため、メカニズムは非常にシンプルです 違いは、特定の場合にのみ使用できるため、このコードの一部にあります。

AMPのトリックは、サードパーティのWebサイトのクラウド/キャッシュに保存することです。 たとえば、Googleキャッシュの場合があります。

このソリューションは、サーバーと検索エンジンによって提供される技術要素を使用して機能します。これは、Webサイトの読み込み速度が向上し、ユーザーエクスペリエンスに影響を与えるためです。

ハイテクソリューションとしてのAMPアクセラレーションは、最新のすべてのブラウザで障害なく機能することは特筆に値します。

誰のためにAMPが設計されましたか?

コンテンツ提供の速度を上げたい人なら誰でも使用できます。 残念ながら、Webサイトを正しく高速化するためのHTMLおよびJavaScriptコードを知っていることによって制限されます 新しいタグとタグ宣言を追加し、JavaScriptを使用してそれらを説明すると説明されました。

AMPを使用した結果はどうなりますか?

ウェブサイトの読み込み遅いためにバウンス率が低下することは間違いありませんが、検索エンジンでのページ位置を上げることもGoogleに影響を与える可能性がありますか? 今のところ確実なことは何もないので、観察する価値があります。

AMPをどのように実装しましたか?

私たちは、WordPressに基づいたブログでAMPテクノロジーを実装することを決定しました。 最初は既製のプラグインを使用していましたが、その後、独自のプラグインを試してみることにしました。 すべての間違いを修正することは悪夢のようでした。

URLの下に/ ampまたは&amp = 1を追加することで、効果が表示され、比較できるようになりました。これは、URLがわかりやすいかどうかによって異なります。

AMPの追加–ステップバイステップ!

人々がモバイルデバイスまたはコンピューターを使用しているかどうかを識別できる機能を追加しました。

関数isMobile(){
preg_match(“ /(Googlebot-Mobile | googlebot-mobile | android | avantgo | blackberry | bolt | boost | cricket |
docomo | fone | hiptop | mini | mobi | palm | phone | pie | Tablet | up \ .browser | up \ .link | webos | wos)/ i”、$ _SERVER [“ HTTP_USER_AGENT”]);
} *

次に、モバイルデバイス用に別のヘッダーを作成し <html>の代わり<html amp>タグを配置し、すべてのdoctypeインジケーターを削除して、Google製のインジケーターに変更しました:<!doctype html> 、AMPスクリプトを含めるための行を追加しました:

<script src =” https://cdn.ampproject.org/v0.js” async> </ script>

次のステップは、CSSを切り取って圧縮し、タグにヘッダーを追加することでした

<style amp-custom> </ style>。

ヘッダーの作成中に、 wp_headとfooterもwp_footerから削除しました。 許可されているスクリプトはGoogleのものだけなので、不要なスクリプトもすべて破棄する必要がありました。

入力とフォームがあったすべての場所で、 isMobile()関数を使用したため、AMPでは非表示になりました。

また、すべてのimgインジケーターをamp-img変更することも重要であったため、適切な関数を作成しました。 ちなみに、AMPは間違いを表示するため、HTMLタグからstyle属性を削除すること追加しました

関数replace_content($ content)
{{
if(isMobile()){
$ content = scaleImages($ content、300);
$ content = str_replace( '<img'、 '<amp-img'、$ content);
$ content = str_replace( 'data-type =” image”>'、 '> </ amp-img>'、$ content);
$ content = preg_replace( '/(<[^>] +)style =”。*?” / i'、 '$ 1'、$ content);
}
$ contentを返します。
}
add_filter( 'the_content'、 'replace_content');

この関数は、isMobile()と同じで、functions.phpファイルに追加されました。

次に、DOMDocumentとloadHTMLを使用して、属性「width」と「height」のインティケーターの幅と高さを変更する機能が追加されました。

関数scaleImages($ html、$ new_width){
$ dom = new DOMDocument();
$ dom-> loadHTML( '<?xml encoding =” UTF-8″>'。$ html);
$ dom-> prepareWhiteSpace = false;

$ images = $ dom-> getElementsByTagName( 'img');
foreach($ images as $ image){

$ src = $ image-> getAttribute( 'src');
$ width = $ image-> getAttribute( 'width');
$ height = $ image-> getAttribute( 'height');

$ scale_factor = $ new_width / $ width;
$ new_height = floor($ height * $ scale_factor);

$ image-> setAttribute( "width"、 "$ new_width");
$ image-> setAttribute( "height"、 "$ new_height");
$ image-> setAttribute( "data-type"、 "image");
}

$ html = $ dom-> saveHTML();
return str_replace(array( '<!DOCTYPE html PUBLIC“-// W3C // DTD HTML 4.0 Transitional // EN”“ http://www.w3.org/TR/REC-html40/loose.dtd”>'、 '<html>'、 '<body>'、 '</ html>'、 '</ body>')、”、$ html);
}

念のため、cssに次のコードを追加します。

p amp-img {max-width:100%}

<p> </ p>インジケーターで見つかった可能性のある写真に関するすべての問題を取り除きます。

変更があった場合は、AMPバージョンをいつ表示するかを自分で決定します。 <head> </ head>セクションに次のコードを挿入する必要があります。

<link rel =” canonical” href =” https:// <?php echo $ _SERVER [“ HTTP_HOST”]。 $ _SERVER [“ REQUEST_URI”]?>” />

一部のプラグインは間違いを引き起こしましたが、それらは私たちにとって不必要だったので、私たちはそれらをオフにしました。

最終的な効果は何ですか? コンピューターでWebサイトを使用しているときは、従来のフルバージョンが表示されますが、モバイルデバイスではAMPによってすべてが高速化されています。

完全に説明するのは簡単ではありませんが、この簡単な説明が十分に理解できることを願っています。 効果を確認するには、isMobile()で何かを行うことが重要でした。 HTMLはもっと難しいかもしれないので、すべての問題はPHPによって解決されました。 使用できるコンテンツがないと、フォーム要素のために不可能になる可能性があります。cssでそれらを非表示にするのは非常に困難です。

これは、パスワードで保護された開発プラットフォームで作成され(コンテンツの重複を避けるため)、残念ながら、最終的にGoogle SearchConsoleを使用してテストすることができました。
結論として、AMPは、Google Search Consoleによって検証されたWebサイトでのみ使用できます(もちろん、Googleの場合)。
* 「|」の間のスペースを削除してくださいおよび「ドコモ」シーケンス。