WordPressでAMPを設定する方法

  1. 1. WordPress用Google AMPの概要
  2. 2. 現在読んでいる: WordPressでAMPを設定する方法

WordPressのAMPガイドのパート2へようこそ。前回の記事では、モバイルファーストのウェブ戦略の重要性と、AMPが潜在的なゲームチェンジャーになる方法について学びました。今日のガイドでは、以下について学習します。


  • AMPとWordPressを統合する方法
  • AMPのカスタマイズに最適なWordPressプラグイン
  • WordPressサイトにAMPを実装する必要があるか?

始めましょう.

AMP for WordPressビデオガイド

シリーズの最後の投稿が終わったところから始めて、WordPress WebサイトでAMPを簡単に設定する方法についてのWPCrafterのビデオをたどることができます。 Adamのビデオでは、ガイドの各ステップを順を追って説明しています–楽しんでください!

WordPress用のAMPを設定する方法

amp-plugin-wordpress-hero

セットアップ WordPress用AMP 非常に単純なプロセスです。 Automatticが開発したWordPress AMPプラグインをインストールするだけで、あとは続きます.

  • WordPressダッシュボード>プラグイン>新規追加に移動します
  • 検索する 「AMP」

プラグインを選択してクリック 今すぐインストール

インストール方法とワードプレスのプラグイン

プラグインを有効にすると、サイトのすべての投稿URLにAMPバージョンが含まれます。任意の投稿のリンクに移動して追加できます / amp / URLの最後に移動すると、AMPバージョンが表示されます。.

通常のバージョンのウェブページを見てみましょう.

test-site-no-amp_rz

そして、これは同じページのAMPバージョンです。

test-site-amp_rz

以上で、WordPressでのAMPの設定は完了です。信じられないくらい簡単ですよね?

ただし、持っていない場合 かなりパーマリンク 有効にすると、追加することでアンプバージョンを取得できます ?amp = 1 投稿のリンクへ。たとえば、投稿のリンクは次のようになります。

  • 通常版: http://example.com/2016/01/01/hello-mobile-web/
  • AMPバージョン: http://example.com/2016/01/01/hello-mobile-web/amp/
  • AMPバージョン(Pretty Permalinksが無効な場合): http://example.com/2016/01/01/hello-mobile-web/?amp=1

AMPプラグインは、「通常の」HTMLページの先頭に標準のメタタグを追加します。これにより、Googleや他の検索エンジンは、ページのAMPバージョンが存在することを認識できます。で設定できるサイトのロゴを使用します WordPressテーマカスタマイザー.

プラグインは投稿のAMPバージョンへの変換のみをサポートすることに注意してください。にアクセスしたプラグインの説明によると1st 2016年11月、AMPバージョンのWordPressページのサポートが開発中で、まもなく提供されます.

AMPパフォーマンスへの影響の測定

PingdomでAMPバージョンのページのパフォーマンスへの影響を測定することにしました。結果は劇的に異なっていました。 WordPressのセットアップは、キャッシュや最適化プラグインがインストールされていないデフォルトのTwenty Fourteenテーマを使用する共有ホスティング環境にあったことを覚えておいてください.

次のスクリーンショットは、ページの基本バージョンのパフォーマンスベンチマークを示しています。

test-site-no-amp-pingdom

そして、これはページのAMPバージョンの結果です。

test-site-amp-pingdom

結果は著しく離れています.

各コンポーネントは、大幅に改善されました。

  • ページサイズが70%減少
  • ロード時間は35%減少して900ミリ秒未満になりました
  • リクエストが17からわずか7にほぼ60%減少しました!

これはすべて、ページのコンテンツを維持しながら、AMPによって実現されました。次の表は、参考のためにテストの詳細を示しています。

因子 正常AMP改善
ページサイズ(KB)563.816770%
ロード時間(秒)1.420.92935%
リクエスト数17759%

これらの数値を見ると、AMPを取得するのは簡単ではないことは明らかです。それはあなたのSEOスコアを改善するのを助けるだけでなく、それはまた、美しく、整然としたユーザー体験を提供します.

さらに、ページのAMPバージョンにトラッキングメカニズムを含めることもできます。これについては、次のセクションで説明します.

AMPの機能の拡張

読者向けにコンテンツを最適化することは良い習慣ですが、ブランドの一貫性を維持することも重要です。つまり、既存のコンテンツのAMPバージョンでも、ブランドの配色、フォント、および一般的なユーザーインターフェイスに従う必要があります。.

AMP WordPressプラグインには、そのような変更を行うオプションはありません。その目的は、既存のWordPressコンテンツ全体をAMPと互換性のあるものにする迅速で簡単な方法を提供することでした。.

入力します AMP for WP –高速化されたモバイルページ プラグイン.

amp-for-wp-plugin-2-hero

この無料のプラグインは、次のような追加機能を提供することにより、WordPressのAMPの機能を拡張します。

  • Googleアナリティクスの統合
  • AMP WooCommerceページのサポート
  • 投稿の下の関連する投稿
  • 最近のコメントリスト
  • カスタムロゴのアップロード
  • ソーシャル共有バー
  • 動画、YouTube、Instagram、Twitter、Vineなどのコンテンツプラットフォームのコンテンツを含むリッチコンテンツの埋め込みのサポート.

前提条件として、プラグインが正しく機能するには、AMPプラグインをインストールしてアクティブ化する必要があります。通常どおり、このプラグインは、この投稿の冒頭でAMPプラグインをインストールした方法と同様にインストールできます。.

amp-for-wp-plugin-2-install-activate

有効化すると、プラグインが提供する必要のあるさまざまなオプションを構成する準備が整います。に向かう WordPressダッシュボード> AMP 設定にアクセスするには.

プラグインが提供する多くの設定から、私たちは試しました:

  • コメントをオンにする
  • 関連する投稿を追加する
  • 次/前の投稿へのナビゲーションの追加

変更を保存した後のAMPバージョンのスクリーンショットを次に示します。

amp-for-wp-plugin-2-hero-test-page-500-px

そしてここにパフォーマンスがあります:

amp-for-wp-plugin-2-speed-test

以下は、比較のためのバニラAMPページのスクリーンショットです。

test-site-amp-pingdom

ロード時間はさらに7.4%減少しました。ページサイズとリクエストの数はわずかに増加しましたが、全体的なパフォーマンスグレードは向上しました(3ポイントの増加)。.

全体的に見て、このプラグインは、AMPへの取り組みを真剣に考え、コンテンツ、広告、分析をプラットフォームでうまく機能させる場合に最適です。.

結論

過去数年間の携帯電話使用の爆発的な成長を考えると、それはもはや オプション オンラインビジネスがモバイル第一になるために。それは 絶対必要. Accelerated Mobile Pagesプロジェクトはその目標に向けた野心的な取り組みであり、ますます多くのメディア企業が急速にそれを採用しています.

新しいブログの方がAMPを組み込む方が簡単ですが、何千ページものコンテンツを含むブログは確かに特に難しいと感じるかもしれません。理由は簡単です。オンラインで公開するときに全員が適切な基準に従うわけではありません。組織は進化します。 5年前に「ホット」であったWebテクノロジーでさえ、今日では時代遅れです。 AMPは既存のウェブテクノロジーの上に構築するために最善を尽くしますが、いくつかの非互換性/エラーが存在する複数のケースが存在する可能性があります。そして、これらのエラーはあなたのSEOスコアに悪影響を与える可能性があります.

理想的には、企業は着信トラフィックソースを測定する必要があります。その何パーセントがモバイルデバイスからのものですか?それらのどれがモバイル検索から来ていますか?モバイルユーザーの直帰率はどのくらいですか?これらは、AMPを検討する前に確認する必要がある質問です.

ウェブサイトのコンテンツが最新の基準に従って技術的に構造化されていると確信している場合は、ぜひAMPに進んでください。あなたはあなたのSEOを後押しするだけです.

ただし、内部の設定ミス、リンク切れ、エラーがたくさんあることがわかっている場合は、AMPに進む前に、これらの問題に対処する(そしておそらく解決する)ことが最善です。.

AMPについてどう思いますか?コンテンツを使用するために使用しますか?あなたのウェブサイトにそれを実装しましたか?あなたからの御一報をお待ちしています!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map