Web サイトに AMP を実装して超音速の読み込み速度を実現する方法

公開: 2021-04-07

ページ速度を上げるために AMP を実装することをお勧めします。これが理由です

読み込みの速い Web サイトは、絶対に必要ありません。人間の注意持続時間は下降スパイラルにあります。特にモバイルデバイスを使用している場合は、誰も待ちたくありません。

どのくらい速くする必要がありますか? Google では、ページの読み込み時間を 2 秒未満にすることを推奨しています。

目標を達成するのに役立つ、SEO のオンページおよびテクニカルドメイン全体で多くの一般的な対策があります。

ただし、これらの対策の 1 つである、Web サイトのモバイルバージョン用のAccelerated Mobile Pages (AMP) の設定は控えめに使用されています。

なんで？簡単に言えば、AMP への移行には、Web サイトの規模に応じて、かなりの時間、労力、および資金が必要です。結局、それだけの価値さえないかもしれません。

AMP に投資する価値はありますか? 答えが「はい」の場合、この投稿は、WordPress Web サイトに AMP を効果的に設定するための段階的なプロセスを支援します.

AMP を実装するステップ 1: 適切なプラグインを選択する

プラグインオプション

WordPress は AMP 用のプラグインを多数提供しています。私はそれらのいくつかを試してみましたが、さまざまな程度で成功しました。そのうちの 1 つは、しばらくの間、Google Pagespeed Insights で素晴らしい結果を出しました。しかし、モバイルのすべての AMP ページが壊れてしまいました。

私のおすすめ

AMP for WP – Accelerated Mobile Pages – WordPress プラグインをお勧めします。このプラグインは、モバイル Web ページをカスタマイズするための多くのオプションを提供します。投稿の残りの部分では、このプラグインを使用して Web サイトに AMP を設定する方法について説明します。

プラグインをインストールして有効にすると、WordPress ダッシュボードに Web サイトの AMP バージョンを開くオプションが表示されます。下の画像で強調表示されているように、新しいプラグイン (AMP) も表示されます。

上の画像のように、一連のオプションが表示されます。それぞれを 1 つずつ説明します。

設定にジャンプしましょう。

AMP を実装するステップ 2: プラグインの基本設定

ウェブサイトの種類

あなたのビジネスを最もよく表しているオプションを選択してください。他に一致するものがない場合は、[その他] を選択します。その後、Web サイトの種類を入力するオプションが表示されます。

どこに AMP を実装する必要がありますか?

AMP を実装する場所を選択します。 AMP を使用する場合は、モバイル Web ページをほぼ完全に HTML のままにすることにします。読み込み速度を低下させる CSS/JS コードを手放す必要があります。

その欠点は、ユーザーエクスペリエンス (UX) が影響を受けることです。たとえば、訪問者の注意を引くために回転するコールトゥアクション (CTA) ボタンを使用することはできなくなりました。 AMP はそのコードをカットするため、ページの読み込み時間を節約できます。これにより、最終的にエンゲージメント率が低下する可能性があります。

上記のリストでは、ページ、投稿、またはその両方に AMP を使用することを選択できます。

デザインとプレゼンテーション

ここで、ロゴをセットアップできます。推奨サイズは 120 x 90 ピクセルです。ページの読み込み時間が長くなるため、ロゴを使用しないことをお勧めします。このパネルでロゴが更新されていない場合、AMP ページにはロゴの代わりに Web サイト名のみが表示されます。

グローバルカラースキームオプションは、ページの CTA リンクとフッターリンクに表示される AMP ページの色を選択するのに役立ちます。

たとえば、下の画像に示すように、グローバルカラーとして水色を選択しました。

分析追跡

このオプションパネルでは、追跡に使用するツールを有効にすることができます。たとえば、トラッキング ID を追加して Google アナリティクスを有効にすることができます。このようにして、AMP ページのデータが Google アナリティクスアカウントで直接更新されます。

同様に、上の画像にリストされているように、他の複数の追跡ツールを追加できます。

プライバシー設定

Cookie 通知バーを使用すると、Web サイトで使用している Cookie について訪問者に同意を求めることができます。下の画像で、黒色のダイアログボックスは Cookie 通知バーです。

画像ソース–モンスターインサイト

あなたまたはあなたの視聴者ベースが GDPR 対応国の場合、 GDPR – 一般データ保護規則の設定をオンにする必要があります。

選択する必要がある場合は、2 つのオプションのいずれかのみを選択できます。両方を選択することはできません。

サードパーティの互換性

最後のエンティティは、AMP 互換性が必要なプラグインのリストをキャプチャします。

AMP 用の Gravity Form と Elementor では、拡張機能の料金を支払う必要があります。 Structured Data、Ads for WP、および PWA for WP は無料のプラグインです。最後の 3 つについては、記事の後半でもう少し詳しく説明します。

AMP を実装するステップ 3: その他の AMP 設定

一般設定

[全般] タブには、基本的なセットアップで説明したオプションが含まれています。さらに、アーカイブ、カテゴリ、およびタグページに AMP を使用するかどうかを選択できます。

最後のオプションである AMP テイクオーバー (ベータ) を有効にすると、デスクトップバージョンとモバイルバージョンが同じになります。これは、デスクトップバージョンにも AMP ページがあることを意味します。

このオプションはオフにしておくことをお勧めします。通常、ページの読み込みはモバイルよりもデスクトップの方が優れています。デスクトップに AMP を搭載するということは、UX とページ速度のわずかな増加をトレードオフすることを意味します。お買い得ではありません。

SEO

メタディスクリプションをオンにすると、ヘッドセクションに入力したテキストが Google によって取得されます。これは、デスクトップ版で入力したテキストとは異なります。設定をオフのままにし、メタディスクリプションを 2 つのバージョン間で一貫させることをお勧めします。

OpenGraph メタデータタグは、ソーシャルメディアで共有されたときに URL がどのように表示されるかを制御するコードのスニペットです。このセクションは、SEO プラグインでタイトルとメタデータを設定しているときに、デスクトップバージョンで表示されます。以下は、Yoast SEO プラグインの例です。

投稿またはページの編集セクションに移動し、一番下までスクロールして見つけることができます。 Yoast のセクションが表示されたら、[ソーシャル] タブをクリックして、選択したソーシャルメディアプラットフォームを選択できます。

AMP プラグインを使用すると、同じオプションパネルで任意の SEO プラグインを選択できます。上記の例では、Yoast が選択されたプラグインです。デスクトップバージョンの Yoast に入力したすべてのデータは、AMP バージョンにコピーされます。

ページ分割されたページのインデックス作成とURL 検査ツールの互換性を削除するオプションが表示されます。

ページ分割されたページはインデックス化する必要がありますが、正規のものとしてのみです。この設定はオフにしておくことをお勧めします。

URL 検査ツールの互換性により、より透過的な検索が促進されます。 Google Search Console アカウントのクロール、インデックス、および提供情報に関する詳細なレポートを提供します。オンにしておくことをお勧めします。

エレメンターサポート

AMPforWP PageBuilderのオプションを使用すると、デスクトップバージョンとは異なり、AMP バージョン用に個別のページを作成できます。 AMPページにちょっと変わったテキストやCTAをつけたい時に便利です。

たとえば、デスクトップ用の「お問い合わせ」CTA を持っているが、モバイルの訪問者に電話してもらいたい場合は、このオプションを有効にして別のページを作成できます。

PWA

AMP for WP Plugin の説明によると、Progressive Web Apps (PWA) は Web サイトを Web アプリケーションに変換し、訪問者にネイティブモバイルアプリのようなエクスペリエンスを提供します。

デザイン性の向上です。モジュールのアクティブ化は選択の問題です。

パフォーマンス

パフォーマンスパネルでは、ページ速度の最適化について詳しく説明します。

CSS/JS を最小化して、UX や機能に影響を与えることなく帯域幅の使用を削減できます。 ブラウザキャッシュを活用すると、リピーターの読み込み時間を短縮できます。両方のオプションをオンにしておくことをお勧めします。

CSS の最適化を有効にすると、CSSを最適化するツリーシェーキング機能がトリガーされます。すでにその仕事をしている別のプラグインがない場合は、オンにしておくことができます。

分析、構造化データ、通知バー、GDPR

これらのセクションには、基本設定で説明したものと同じオプションがあります。

プッシュ通知

プッシュ通知を設定したい場合は、OneSignal、iZooto、Truepushのいずれかを選択できます。

上記の例では、OneSignal を選択しました。ただし、いずれかを選択すると、ページのプッシュ通知を有効にするオプションである APP ID を入力するセクションが表示されます。さらに、通知を配置する場所 (ページの下部など) と、表示するテキストを選択する必要があります。

お問い合わせフォーム

これにより、AMP を最適化する 3 つのプラグイン ( Contact Form 7、Gravity Forms、Ninja Forms) のいずれかを選択できます。

3 つすべてで、延長料金を支払う必要があります。 CTA が主にフォームに焦点を当てている場合は、拡張機能に投資するのが賢明です。

この画面では、ユーザーが作成したコメントを Web サイトのどこに表示するかを選択できます。コメントを表示するソースを選択することもできます。

最適な設定を選択してください。

インスタント記事

インスタント記事は、モバイルユーザー向けの Facebook アプリの機能で、ウェブサイトの記事をホストできます。

この機能をオンにする利点は、Web サイトに同じ記事を掲載する場合と比較して、読み込み時間がさらに短縮されることです。記事はアプリ内で読み込まれるため、読み込み速度が最大 10 倍速くなります。

ただし、コンテンツは Facebook にとどまるため、一部の Web サイトトラフィックを失う可能性があります。これは、ページ速度と Web サイトトラフィックの間のトレードオフです。オフにしておくことをお勧めします。

オンにしておくことを選択した場合は、以下の設定が表示されます。

実装-AMP-インスタント-記事-facebook-インスタント-記事-セットアップ

実装-AMP-インスタント-記事-facebook-インスタント-記事-セットアップ-2

Facebook ページ ID を入力すると、記事の設定をカスタマイズできます。詳細な説明が必要な設定は – Crawler Ingestionです。

Web サイトでホストされている記事のリンクが Facebook で共有されると、Facebook クローラーはia:markup_urlタグを探します。存在する場合、Facebook は記事を取り込み、Facebook ページにインスタント記事を作成します。

ツール

[個々の AMP ページ] オプションでは、デフォルトで AMP ページを表示するかどうかを選択できます。 [デフォルトで表示]を選択すると、すべてのページに AMP バージョンが表示されます。ただし、個々の投稿またはページに対して AMP を非表示にすることを選択できます。

これを行うには、任意のページに移動し、[ページの編集] をクリックします。右側の[設定] タブには、オフにするオプションがあります。

implement-AMP-home-settings-show-amp-for-current-page-bar

同様に、選択したカテゴリと投稿の AMP バージョンを非表示にすることもできます。

Query Monitorは、WordPress の開発者ツールパネルです。ページでクエリを表示する必要がある開発者の場合は、設定をオンにしておく必要があります。

詳細設定

詳細設定オプションパネルには、多くの設定があり、そのほとんどは一目瞭然です。

あなたがWP開発者であるか、専門家を雇ってWebサイトを設計している場合を除き、デフォルト設定をオンにしておくことをお勧めします.

eコマース

オンラインストアを所有している場合は、 WooCommerceの AMP バージョンをカスタマイズできます。主にデジタル資産を販売している場合は、 Easy Digital Downloads Supportオプションをオンにすることができます。どちらのオプションでも、有料の拡張機能を有効にする必要があります.

翻訳パネル

このパネルを使用すると、一般的に使用される一連の単語を選択した言語に適切に翻訳することができます。

たとえば、視聴者に適したView Non-AMP Versionの翻訳を入力する必要があります。

多言語翻訳の場合、 Translation の Use POT file メソッドをオンにできます。 POT (Portable Object Template) ファイルは、PO ファイルのテンプレートです。これらは、翻訳を含むプレーンテキストファイルです。各言語には独自のファイル拡張子があります。たとえば、フランス語には po.fr があります。

AMP を実装するステップ 4: 設計

テーマ

ウェブサイトのデスクトップバージョンと同様に、AMP バージョンのテーマを選択できます。

4つの無料オプションから選択できます。

迅速
デザインワン
デザイン 2
そして、デザイン3

さらに、すべてのページと投稿には、独自のデザインを作成できるセクションがあります。

見つける方法は次のとおりです。ページまたは投稿に移動し、上部のツールバーにある [ページを編集] をクリックします。下にスクロールして、下の画面を表示します。

Use Builderチェックボックスを選択すると、作成したテンプレートが表示されます。そうでない場合は、選択した無料のテンプレートが表示されます。

独自のテンプレートを作成する場合は、以下のモジュールから選択できます。

AMP は基本的に HTML ページです。多くのカスタマイズや派手なボタンを取得することはできません。

注意: テーマを選択する必要があります。 プラグインは、独自のデザインを作成する場合でも、アイコンと構造を選択する必要があります. AMP を実装する際に、このステップで詳細を確認できます。

グローバル

このオプションパネルでは、AMP のバージョンをカスタマイズできます。

上記のように好きな色を選択できます。さらに、 Google Fontsを選択できます。ただし、Google フォントを使用すると読み込み時間が長くなり、AMP の目的が損なわれるため、オフにしておくことをお勧めします。

さらに、Web ページの外観を希望する場合は、サイドバーと無限スクロールをオンのままにすることもできます。ただし、ページ速度の観点からは、オフにしておく必要があります。

フォントアイコンライブラリは、デザインパネルの最初に選択したテーマと同じになります。

ヘッダ

ヘッダーオプションパネルでは、ヘッダーのレイアウトとナビゲーションメニューの外観を決定できます。

また、 Call Now ボタンを追加することもできます。 モバイルユーザーにとって便利なボタンです。

非 AMP リンクをヘッダーに表示することもできます。 ただし、オーディエンスが技術的な SEO 志向でない場合、リンクをクリックしない可能性があります。

検索バーを有効にすることもできます。あなたがブログのウェブサイトを持っているなら、それは有益です。

Advanced Header Optionを使用すると、ヘッダーセクションの設定をより具体的にすることができます。それは選択の問題です。ただし、ページの読み込み速度に悪影響を与えるため、コードに追加しないように注意してください。

ホームページ、シングル、フッター、ページ、ソーシャル共有、日付、その他

これらのオプションパネルは、ヘッダーと同様に、完全に設計上の選択の問題です。最適な設定を選択できます。

まとめ

上記の手順は、ウェブサイトに AMP を効果的に実装するのに役立ちます。変更を保存したら、携帯電話で AMP バージョンを確認するか、URLの後に「/amp」を追加して確認します。

以下の画像は、AMP ページの機能をキャプチャしたものです。

AMGページビジュアル

フッター

そこにあります。次の手順に従って AMP を実装し、携帯電話の訪問者に対して 2 秒未満で読み込まれるエラーのない超高速ページを作成します。

Web サイトに AMP を実装して超音速の読み込み速度を実現する方法