はじめに
AMPは、モバイルデバイス向けの高速なウェブページを提供するためのオープンソース技術です。SEO向上やユーザーエクスペリエンス改善のために、WordPressサイトでAMP機能を導入することは非常に重要です。
症状・背景
このテーマが必要になる主な場面:
- AMPページがない場合
- サイトのロードタイムが長く、ユーザーからのフィードバックに問題がある場合
- 検索エンジンでのランキングが低いと感じている場合
- モバイルデバイスでの表示が劣悪であると感じる場合
手順・設定方法
ステップ1: AMPプラグインのインストール
# WordPressのダッシュボードからプラグインページへ移動します。
wp plugin install wp-amp --activate
# インストールされたプラグインを有効にします。ステップ2: AMPオプション設定
# AMP設定ページを開きます。
wp option get amp__settings
# デフォルトのAMP設定を確認します。
wp amp settings --view
# 必要なパラメータを更新します。（例：AMPページのカスタムサブドメイン）
wp amp settings --set canonical_base_url https://amp.example.comステップ3: AMPと他のプラグインとの連携
# Contact Form 7プラグインとAMPの連携を有効にします。
wp plugin install wpcf7-amp-helper --activate
# Yoast SEOプラグインとAMPの連携を有効化します。（設定ページから行います）ステップ4: AMPのパフォーマンス監視
# Google PageSpeed Insightsを使用してAMPページのパフォーマンスをチェックします。
https://pagespeed.web.dev/report?url=https%3A%2F%2Famp.example.com&form_factor=mobile注意事項
- AMPプラグインは定期的に更新されるため、最新版にアップデートすることが重要です。
- カスタムテーマやカスタムフックを使用している場合、それらがAMPページで正しく動作するように調整が必要なことがあります。
- パフォーマンスを最適化するために、AMPキャッシュとCDNの組み合わせは非常に効果的です。
- AMPページでのJavaScriptの使用は制限されています。必要に応じてAMPコンテナを使用しましょう。
まとめ
1. 設定: WP-AMPプラグインのインストールと基本設定を完了させます。
2. カスタマイズ: カスタムテーマやフックとの連携を確認し、必要な調整を行います。
3. 監視: Google PageSpeed Insightsを使用してパフォーマンスを定期的にチェックします。
4. セキュリティ: AMPページでのJavaScriptの制限に注意しながら、セキュアな実装を目指します。
関連記事: