WordPress で AMP をセットアップする方法

1. <スパン>1. WordPress 向け Google AMP の概要
2. 2.現在読んでいる記事: WordPress で AMP をセットアップする方法

WordPress 向け AMP ガイドの第 2 部へようこそ。前回の記事では、モバイルファーストのウェブ戦略の重要性と、AMP がどのようにゲームチェンジャーの可能性があるかを学びました。今日のガイドでは、次のことについて学びます。

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

始めましょう。

WordPress 用 AMP ビデオガイド

シリーズの前回の投稿が中断されたところから再開し、WordPress ウェブサイトで AMP を簡単にセットアップする方法についての WPCrafter のビデオをご覧ください。アダムのビデオでは、ガイドの各ステップを説明しています。お楽しみください。

WordPress 用に AMP をセットアップする方法

WordPress 用の AMP のセットアップは非常に簡単なプロセスです。 Automattic が開発した WordPress AMP プラグインをインストールするだけで、残りは後から進みます。

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

プラグインを選択し、[今すぐインストール] をクリックします。

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

通常バージョンの Web ページを見てみましょう。

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

これで、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 バージョンへの変換のみをサポートしていることに注意することが重要です。 2016 年 11 月 1 日にアクセスされたプラグインの説明によると、WordPress ページの AMP バージョンのサポートは開発中で、近日中に提供される予定です。

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

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

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

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

結果は驚くほど異なっています。

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

• ページサイズが 70% 削減されました
• ロード時間は 35% 短縮され、900 ミリ秒未満になりました
• リクエストの数は 17 件からわずか 7 件へとほぼ 60% 減少しました。

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

これらの数字を見ると、AMP を取得するのが簡単であることがわかります。 SEO スコアの向上に役立つだけでなく、美しく整然としたユーザー エクスペリエンスも提供します。

さらに、AMP バージョンのページに追跡メカニズムを組み込むこともできます。これについては次のセクションで説明します。

AMP の機能の拡張

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

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

AMP for WP – Accelerated Mobile Pages プラグインを導入します。

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

• Google アナリティクスの統合
• AMP WooCommerce ページのサポート
• 投稿の下にある関連記事
• 最近のコメント一覧
• カスタムロゴのアップロード
• ソーシャルシェアリングバー
• YouTube、Instagram、Twitter、Vine などのコンテンツ プラットフォームからのビデオやコンテンツを含むリッチ コンテンツの埋め込みのサポート。

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

有効化すると、プラグインが提供するさまざまなオプションを設定できるようになります。 WordPress ダッシュボード > AMP に移動して設定にアクセスします。

プラグインが提供する多くの設定の中から、次の設定を試してみました。

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

変更を保存した後の AMP バージョンのスクリーンショットは次のとおりです。

そしてパフォーマンスは次のとおりです。

比較のため、バニラの AMP ページのスクリーンショットを次に示します。

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

全体として、このプラグインは、AMP をさらに推し進め、コンテンツ、広告、分析をプラットフォームで適切に機能させることを真剣に考えている場合に最適です。

結論

過去数年間で携帯電話の使用が爆発的に増加したことを考慮すると、オンライン ビジネスにとってモバイルファーストになることはもはや選択肢ではありません。それは絶対に必要です。 Accelerated Mobile Pages プロジェクトは、その目標に向けた野心的な取り組みであり、ますます多くのメディア ハウスがこのプロジェクトを急速に導入しています。

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

理想的には、企業は受信トラフィック ソースを測定する必要があります。そのうちの何パーセントがモバイル デバイスからのものでしょうか?そのうち何件がモバイル検索から来ていますか?モバイル訪問者の直帰率はどのくらいですか?これらは、AMP を検討する前に尋ねるべき質問です。

ウェブサイトのコンテンツが最新の標準に従って技術的に構成されていると確信している場合は、ぜひ AMP を導入してください。 SEO が向上するだけです。

ただし、内部構成ミス、リンク切れ、エラーが多数あることがわかっている場合は、AMP に進む前にそれらの問題に対処する (場合によっては解決する) ことをお勧めします。

AMP についてどう思いますか?コンテンツを消費するためにそれを使用しますか?あなたのウェブサイトに実装しましたか?ぜひご意見をお待ちしております。