検索

ホームページ >CMS チュートリアル >＆＃＆プレス >WordPressでアンプの使用方法

WordPressでアンプの使用方法

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-10 15:47:09359ブラウズ

How to Use AMP with WordPress

コアポイント

  • Google Accelerated Mobile Pages（AMP）は、広告収益に影響を与えることなく、モバイルデバイスでのWebサイトの速度とユーザーエクスペリエンスを改善するための重要なツールです。
    • GoogleはWebサイトをランキングするときにロード速度を検討するため、
  • AMPはSEOランキングを改善できます。 AMPページのクリックスルー率が高く、負荷が速いため、バウンス率が低い場合、ランク付けが高くなります。
  • AMPを実装するには、開発者はWebページの2つのバージョンを作成する必要があります。デスクトップユーザー用の1つのオリジナルバージョンとモバイルユーザー用の1つのAMPバージョンです。 AMPでは、フォーム要素とサードパーティのJavaScriptを許可していないため、連絡先フォームやページのコメントなどのAMPバージョンでは、特定の機能を使用できない場合があります。
  • Google AnalyticsをAMPと統合して、Webサイトのパフォーマンスを追跡できます。複数の分析トラッカーが速度低下を引き起こすのを防ぐために、Googleは「1つの測定、複数のレポート」の原則を使用します。
  • 自動/WordPressを使用して開発された公式のAMPプラグインは、AmpをWordPress Webサイトに簡単に統合できます。ただし、各ページを確認し、プラグインを変更して、正しいスキーマタグ付けとGoogleアナリティクスの統合を確認してください。

How to Use AMP with WordPress

Google Accelerated Mobile Pages（AMP）プロジェクトは、2016年2月24日に開始されました。この発売により、数千人の開発者がプロ​​ジェクトに積極的に参加しました。数え切れないほどのWebサイトにはAMPバージョンページがあり、多くの開発者がAMPの使用を学んでいます。この場合、WordPressでAMPの使用方法を学びます。

Googleはアンプを非常に重要に添付しています。また、検索エンジンのランキング基準の1つです。このようにして、Googleは多くのWebサイトにAMPを必要としています。この記事では、GoogleのAccelerated Mobile Pageプロジェクトに関する詳細情報を提供します。これには、WordPressサイトでそれを呼び出す手順が含まれます。

ampとは何ですか？

一部の開発者はAMPに精通していない場合があります。これは、モバイルフレームワークで、モバイルブラウザにWebページをすばやくロードします。これは、ウェブサイトの出版社がモバイルデバイス上のコンテンツページをロードする速度とユーザーエクスペリエンスを効果的に改善できるように設計されたオープンソーステクノロジーです。これらのすべての拡張機能は、広告収益に影響しません。

経験豊富な開発者である場合、包括的なページの読み込み最適化で同様の機能強化を達成できます。ただし、モバイルページを加速すると、これらの最適化は、モバイルレイアウトに時間と労力を費やすことなく、非常に簡単に実行できます。

SEOランキングを倍加したサイトの場合、AMPページはWebサイトのSEOランキングを強化できるため、To Doリストにさらにタスクが追加されます。これが、大企業もAMPを採用する主な理由かもしれません。

ampプロジェクト

AMPには、3つの主要なコンポーネントが含まれています
  • amp html
  • amp js
  • ampキャッシュ

amp html

これは、多くの制限、カスタムタグ、およびカスタムプロパティを備えたHTMLのサブセットです。すでにHTMLに精通している場合、これに適応することは複雑ではありません。ただし、問題が見つかった場合は、このリンクにアクセスして、AMP HTMLページを作成する方法の詳細をご覧ください。

amp js

AMPは、モバイルWebページに限られた数のJavaScriptを提供します。現在、AMPのJSについて覚えておくべき重要なことの1つは、AMPがサードパーティのJavaScriptを許可しないことです。

ampキャッシュ

Google Ampキャッシュは、AMPページを配信するために使用されるCDNです。あなたは皆、コンテンツ配信ネットワークのコア機能を知っています。彼らはあなたのウェブサイトの視聴者に近いサーバーにリソースを配布します。 AMPページの場合、このCDNは、距離の遅延の可能性があるため、最小負荷時間を可能にします。

seo

上のampロゴの相関

2016年にGoogleがAMPを立ち上げたとき、Adage.comはGoogle News and Social ProductsのシニアディレクターであるRichard Gingrasとのインタビューを公開しました。そのインタビューで、彼は、AMPの使用は直接的な要因ではないため、検索ランキングに直接関係しないと述べました。彼は次のように付け加えました：「他のすべての（検索エンジンランキング）信号も満たす必要があります。」

しかし、この明確化の後、すべてがより明確になりました。彼は次のように述べています。「シグナルの観点から、他のすべての特性（速度を除く）で同じスコアである2つの記事がある場合、はい、私たちは最速の記事に焦点を当てます。 - キャッチ

Googleでさえ、AMP WebサイトのSEOとの関連性を否定していません。速度は、常に検索エンジンの最適化に影響を与える要因です。 AMPページがより速いロードによりクリックし、バウンス率が低くなると、Googleはユーザーエクスペリエンスの向上のためにWebサイトのランク付けを確実にランク付けします。

あなたのウェブサイトを増やす方法は？

ウェブサイトで記事ページの2つのバージョンを保持する必要があります。デフォルトのWebユーザー用のオリジナル記事ページ、および潜在的なモバイルユーザー用のAMPバージョン。 また、AMPはフォーム要素とサードパーティのJavaScriptを許可していないことに注意してください。これは、AMPが主にコンテンツ配信に使用されるため、標準の実装に連絡先フォームやページのコメントを入れることができないことを意味します。

  • これらの制限に対処するために、Webサイトテンプレート全体を書き換えることをお勧めします。たとえば、AMPページのCSSは、50 kb未満のページサイズにインラリングする必要があります。さらに、フォントの速度が高速であるため、ページを効率的にロードするために、AMP-Font拡張機能の助けを借りてロードする必要があります。
  • マルチメディアは注意して処理することをお勧めします。画像の場合、その要素を正確な幅と高さとともに使用する必要があります。また、画像がGIFの場合は、別のAMP-ANIM拡張コンポーネントを使用する必要があります。
  • ビデオには2つのオプションがあります。 Amp-Videoと呼ばれるビデオを埋め込むためのカスタムタグがあります。ただし、YouTubeビデオを埋めたい場合は、Amp-Youtubeと呼ばれる特定のタグがあります。
  • 埋め込まれたスライドの場合、アンプカルーセルを使用できます。それとは別に、画像ライトボックスを追加する場合は、Amp-Image-Lightboxを使用できます。
  • Twitter、Facebook、Instagram、Pinterest、Vineなどの埋め込まれたソーシャルメディアプラットフォームの場合、対応する各コンポーネントを使用できます。
  • これは非常に重要です。これで、すべてがセットアップされたら、アンプページを使用して、AMP WebサイトについてGoogleに知らせる必要があります。メインの投稿ページにアンプページのタグを追加する必要があり、アンプページのメインページに正規のタグを追加する必要があります。 ここでは、AMPタグとschema.orgメタデータの詳細をご覧ください。 schema.orgメタデータは、「Google Search News Carousel Demosに表示されるコンテンツを適格にするための要件です」。したがって、Google Ampで成功したい場合は、スキーマを正しく設定する必要があります。
Google AnalyticsはAMPに適していますか？

はい、もちろん、分析はAMPで動作します。実際、AMPの分析もスマートです。複数の分析トラッカーのためにウェブサイトが減速するのを防ぐために、それらは「1つの測定、複数のレポート」の中核哲学に基づいています。一般的に、ウェブサイトでAMPの分析を有効にするには2つの方法があります。

Amp-Pixel Element：Get Requestsを使用してページビューを計算できる単純なタグです（トラッキングピクセルと同様）。

AMP-ANAYLTICS拡張コンポーネント：このコンポーネントは、AMPピクセルよりも高度です。これを使用して、アンプページのアクティビティを測定できます。これにより、測定するものとレポートの送信に関する詳細情報を提供するJSON構成を指定できます。
  • WordPress WebサイトでAMPを使用する方法は？

実際、AMPを使用する最も簡単な方法の1つは、WordPress Webサイトに実装することです。 Automattic/WordPressによって開発された公式プラグインを使用できます。 ステップ1：WordPressプラグインをインストールします

インストールを始めましょう！上記のリンクからプラグインをダウンロードし、WordPress Webサイトにプラグインをインストールします。インストール後、「/amp/」を記事ページに添付するだけです。素敵なパーマリンクを有効にしない場合は、AMP = 1を試すことができます。

ステップ2：検証して調整します

Google検索コンソールは、プラグインで添付されるメタタグから記事ページのアンプバージョンを取得します。ただし、問題は、通常、そのような変化を検出するのに数日かかることです。

それで、私は今何をすべきですか？これらのトリッキーな状況を処理するには、Chrome検証プロセスと検索コンソールの組み合わせを使用することをお勧めします。 Chrome検証プロセスを使用するには、ChromeのAMPページをご覧ください。次に、URLの最後に＃開発= 1を追加します。ここで、Control Shift Iを押してChrome開発者ツールを開きます。

ページを更新すると、「アンプ検証が成功した」を表示するか、修正する必要がある問題の詳細なリストを提供します。

プラグインのインストールでは十分ではないことがわかります。ページにアクセスし、上記の手順を繰り返して、モバイルページを加速することから恩恵を受けることにより、各データを確認する必要があります。

ステップ3：スキーマタグ

を確認します

アンプページにスキーマタグを検証することが不可欠であることを学びました。 Googleの構造化データテストツールを使用して、ページに有効なスキーマタグがあるかどうかをテストすることをお勧めします。ただし、WordPressにはロゴの表示に問題があることがわかりました。それで、私はこれを克服するためにいくつかの変更を加えました。

プラグインに移動し、[エディター]をクリックし、アンプを選択します。エディターのこれらの行を変更して、プラグインを変更します。 

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>
to：

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>
URL内のロゴの位置を指定し、それに応じて高さと幅を指定してください。

ステップ4：Google AnalyticsをAMP WordPressプラグインと統合します。

今、あなたはほとんど終わりです。ただし、Googleアナリティクスを使用して統計を追跡することを好みます。 AMP WordPressプラグインは、AMPアナリチクスを積極的にアクティブにしませんが、実行するのは非常に簡単です。

AMP WordPressプラグインがGoogleアナリティクスを使用できるようにするには、プラグインに移動します。 

<code>add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
     async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">>
    <?php }

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics> type="googleanalytics" id="analytics1"></amp-analytics>
     type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    >
    >
    <?php }
</code>

値ua-xxxxx-yを独自のGoogle AnalyticsプロパティIDに変更してください！

この変更を行った後、AMPページを再現すると、アンプページが追跡可能になります。

Google Amp Project

での結論結論

Googleは、AMPプロジェクトがユーザーに良い体験を提供することを望んでいます。それでも、問題は、アンプがすべてを非常に高速にすることができるかどうかです。この質問に対する答えは非常にオープンエンドです。ウェブサイトをうまく最適化しないと、AMPはいくつかの大幅な改善をもたらします。

しかし、モバイルページをスピードアップすることは魔法の弾丸ではありません。ウェブサイトの速度を改善するためのテクノロジーは、最初から提供されます。 AMPは、すべての主要なゆっくりした負荷係数を組み合わせて排除し、ユーザーにより良いソリューションを提供しようとしているだけです。

アンププロジェクトについてどう思いますか？以下のコメントセクションでご意見を共有してください！

WordPress（faq）

でAMPを使用することについてのFAQ

AMPとWordPressを使用することの主な利点は何ですか？

WordPressでAMP（アクセラレーションされたモバイルページ）を使用することの主な利点は、モバイルブラウジングエクスペリエンスの強化です。 AMPは、モバイルデバイスでWebページをより速くロードするように設計されたGoogleが支援するプロジェクトです。これは、HTMLを合理化し、CSSの薄いバージョンを使用することにより行います。これにより、ページの読み込み速度が大幅に向上し、ユーザーのエンゲージメントが向上し、保持され、モバイルSEOが改善されます。

AMPはSEOにどのように影響しますか？

ページの読み込み速度がGoogleのアルゴリズムのランキング要因であるため、

AMPはSEOを大幅に改善できます。 Webページをより速く読み込むことにより、AMPは、特にモバイルユーザーの間で、検索エンジンの結果の視認性を向上させるのに役立ちます。さらに、Googleは通常、検索結果で強調表示されているカルーセルのアンプページを強調し、さらに可視性を提供します。

既存のWordPress WebサイトでAMPを使用できますか？

はい、既存のWordPress WebサイトでAMPを使用できます。 WordPress WebサイトにAMPを実装するのに役立ついくつかのプラグインがあります。これらのプラグインは、既存の投稿とページをAMP互換バージョンに変換するのに役立ちます。

AMPは私のWordPress Webサイトの機能に影響しますか？

AMPは、特定のHTML、CSS、およびJavaScript要素を制限して、ページの読み込み時間を速く確保します。これは、WordPress Webサイトのいくつかの機能が、WebサイトのAMPバージョンで期待どおりに機能しない場合があることを意味します。ただし、ほとんどのAMPプラグインは、AMP標準を順守することで機能に追加できるオプションを提供します。

アンプページの外観をカスタマイズする方法は？

CSSを使用して、AMPページの外観をカスタマイズできます。ただし、AMPは特定のCSSプロパティの使用を制限してページの読み込み時間を速く確保するため、より合理化されたアプローチを使用してスタイルを整えることをお勧めします。一部のWordPress Ampプラグインは、組み込みのカスタマイズオプションを提供します。

AMPの実装が成功しているかどうかを確認する方法は？

Googleが提供するAMPテストツールを使用して、AMPの実装が成功しているかどうかを確認できます。このツールは、アンプページを分析し、Google検索結果でアンプページとして提供されないようにする可能性のあるエラーを報告します。

WordPressでプラグインを使用せずにAMPを使用できますか？

はい、WordPressでプラグインを使用せずにAMPを実装できますが、これにはWeb開発とAMP標準を十分に理解する必要があります。投稿とページの別のアンプ互換バージョンを手動で作成し、必要なアンプHTMLタグを手動で追加する必要があります。

AMPは広告と分析をサポートしていますか？

はい、AMPは広告と分析の両方をサポートしています。ただし、AMPは特定のHTML、CSS、およびJavaScript要素を制限するため、広告と分析にAMP固有のタグとスクリプトを使用する必要がある場合があります。

特定の投稿またはページに対してアンプを無効にできますか？

はい、ほとんどのWordPress Ampプラグインは、特定の投稿またはページに対してAMPを無効にするオプションを提供します。これは、アンプの制限でうまく機能しないものがある場合に非常に便利です。

アンプはレスポンシブデザインの代替品ですか？

いいえ、AMPはレスポンシブデザインの代替品ではありません。 AMPは、ページをより速く読み込むことでモバイルブラウジングエクスペリエンスを向上させることができますが、さまざまな画面サイズのWebサイトデザインに適応する必要性を置き換えることはできません。最高のモバイルユーザーエクスペリエンスのために、レスポンシブデザインと組み合わせてAMPを使用することをお勧めします。

以上がWordPressでアンプの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript json css chrome html JS 算法 搜索引擎 WordPress SEO
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WordPressテーマのパフォーマンスを改善する方法次の記事：WordPressテーマのパフォーマンスを改善する方法

関連記事

続きを見る