ブログ PR

AMP設定方法完全ガイド【2025年最新版】

 
記事内に商品プロモーションを含む場合があります

WordPressサイトをAMP化する具体的な手順から、エラー解決方法、検証ツールの使い方まで完全解説。初心者でも迷わずAMP設定ができる実践的なガイドです。プラグイン使用から手動実装まで幅広くカバー。

私が初めてAMPの存在を知ったのは、競合サイトの表示速度があまりにも速いことに驚いたときでした。その瞬間、「これは何かが違う」と直感し、調べてみるとAMP（Accelerated Mobile Pages）という技術だったのです。

AMPを導入したWebサイトでは、導入していないWebサイトの4倍の速度でWebページが表示されるという事実を知ったとき、正直なところ半信半疑でした。しかし、実際に導入してみると、その効果は想像以上でした。

今回は、私が実際に複数のサイトでAMP設定を行った経験を基に、2025年最新の情報と共に、初心者でも確実にAMP設定ができる完全ガイドをお届けします。

Contents
  1. AMPとは？基本概念の理解
  2. WordPressでのAMP設定方法【プラグイン編】
  3. AMP設定の検証とエラー対処法
  4. 手動でのAMP HTML作成方法
  5. 構造化データの実装
  6. AMP設定時の注意点とトラブルシューティング
  7. AMP設定後のメンテナンスと最適化
  8. まとめ：成功するAMP設定のポイント

AMPとは？基本概念の理解

AMPの仕組みと重要性

AMP（Accelerated Mobile Pages）とは、Googleによって開発されたWebページを高速で読み込む技術です。

私が最初にAMPの概念を理解するのに苦労したのは、その仕組みの特殊性でした。通常のWebページとは異なり、AMPはWebページのHTMLを事前にGoogleやX（旧Twitter）がキャッシュしたページを表示する仕組みとなっています。

AMPの3つの核心技術：

技術要素役割特徴
AMP HTML高速化されたHTML制限された軽量なHTML
AMP JSJavaScriptライブラリ非同期読み込み専用
AMP CacheキャッシュシステムGoogleやTwitterによる配信

2025年現在のAMP状況

正直に言うと、AMPを取り巻く状況は複雑になっています。2021年6月にGoogleがトップニュースカルーセルへの優遇掲載を終了宣言して以降、Twitterやアメブロなどの有力メディアはAMPのサポートを終了しました。

しかし、それでも多くの企業がAMPを継続している理由があります。それは、モバイルユーザーの体験向上という根本的な価値は変わらないからです。

WordPressでのAMP設定方法【プラグイン編】

公式AMPプラグインのインストール

実際に私がクライアントサイトで最も推奨しているのは、AMPプロジェクト公式サポートページで紹介されているプラグインである「AMP」です。

ステップ1：プラグインのインストール

  1. WordPressダッシュボードにログイン
  2. 「プラグイン」→「新規追加」を選択
  3. 検索欄に「AMP」と入力
  4. 公式の「AMP」プラグインを「今すぐインストール」
  5. インストール完了後「有効化」をクリック

テンプレートモードの選択

プラグイン有効化後、WordPressダッシュボード左メニューに「AMP」が追加されます。初期設定で最も重要なのがテンプレートモードの選択です。

3つのテンプレートモード：

標準モード

  • 既存テーマをそのままAMP化
  • 技術的知識が必要
  • 高いカスタマイズ性

リーダーモード（推奨）

  • プラグイン側が用意したテンプレート使用
  • デザインが崩れないため推奨
  • 初心者に最適

移行モード

  • 段階的なAMP導入が可能
  • 既存サイトへの影響を最小化

私の経験では、初回導入時は必ずリーダーモードを選択することをお勧めします。標準モードは魅力的に見えますが、エラーが多発する可能性が高いためです。

コンテンツタイプの設定

プラグイン設定の「対応テンプレート」では、コンテンツタイプ別に表示させるページが設定できます。

設定項目：

  • 投稿ページ：✓（推奨）
  • 固定ページ：状況に応じて
  • カテゴリページ：△（エラーが起きやすい）
  • アーカイブページ：△（エラーが起きやすい）

実際の運用では、まず投稿ページのみでAMPを始めて、問題がないことを確認してから他のページタイプに拡張することが安全です。

AMP設定の検証とエラー対処法

GoogleのAMPテストツールの使用

AMP設定後の検証は必須です。私が愛用しているのは、GoogleのAMPテストツールです。

検証手順：

  1. AMPテストページにアクセス
  2. 確認したいページのURLを検索窓に入力
  3. 「有効なAMPページです」の表示を確認
  4. 「検索結果をプレビュー」をクリックして実際の検索結果での表示を確認

よくあるエラーと解決方法

私がこれまでに遭遇した代表的なエラーとその解決方法をご紹介します。

画像関連のエラー

エラー内容： <amp-img> タグにwidth、height属性が未指定

解決方法：

html
<!-- ❌ 間違った書き方 -->
<amp-img src="image.jpg"></amp-img>

<!-- ✅ 正しい書き方 -->
<amp-img src="image.jpg" width="300" height="200"></amp-img>

CSS関連のエラー

エラー内容： 外部CSSファイルの読み込み

解決方法：

  • CSSはstyle amp-customタグ内に記述
  • !important修飾子は使用不可

Chrome DevToolsでの高度な検証

より詳細な検証を行いたい場合は、#development=1 を付加したURLでAMPページを表示させ、Chromeのデベロッパーツールを用いてAMP HTMLの有効性を検証する方法があります。

手順：

  1. AMPページのURLの末尾に #development=1 を追加
  2. Chromeのデベロッパーツールを開く（F12キー）
  3. Consoleタブを確認
  4. 「AMP validation successful.」の表示を確認

手動でのAMP HTML作成方法

基本的なAMP HTMLテンプレート

プラグインに頼らず、手動でAMP HTMLを作成したい場合のテンプレートをご紹介します。

html
<!doctype html>
<html amp lang="ja">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>AMPページのタイトル</title>
  <link rel="canonical" href="https://example.com/original-page.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  
  <!-- AMP Boilerplate -->
  <style amp-boilerplate>
    body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
    -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
    -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
    animation:-amp-start 8s steps(1,end) 0s 1 normal both}
    @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
    @-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
    @-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
    @-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
    @keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  </style>
  <noscript>
    <style amp-boilerplate>
      body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
    </style>
  </noscript>
  
  <!-- カスタムCSS -->
  <style amp-custom>
    body { font-family: Arial, sans-serif; }
    h1 { color: #333; }
  </style>
</head>
<body>
  <h1>AMP対応ページ</h1>
  <amp-img src="image.jpg" width="300" height="200" alt="説明"></amp-img>
</body>
</html>

HTMLタグの置き換えルール

AMP で使用される HTML は、通常の HTML と少し異なります。主な置き換えルールは以下の通りです：

必須の置き換え：

  • <img> → <amp-img>
  • <video> → <amp-video>
  • <audio> → <amp-audio>
  • <iframe> → <amp-iframe>

使用禁止タグ：

  • <base>, <picture>, <frame>, <frameset>, <object>, <param>, <applet>, <embed>

構造化データの実装

基本的な構造化データ

AMP HTMLの構造化データは必須条件から外れ、任意に変更されましたが、検索結果での表示最適化のためには実装を推奨します。

BlogPostingの例：

json
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "headline": "記事のタイトル",
  "image": ["https://example.com/image.jpg"],
  "datePublished": "2025-06-24T10:00:00+09:00",
  "dateModified": "2025-06-24T12:00:00+09:00",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "publisher": {
    "@type": "Organization",
    "name": "サイト名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg"
    }
  }
}

AMP設定時の注意点とトラブルシューティング

広告表示の対応

AMPでの広告表示には特別な対応が必要です。利用する広告においても対応していないケースがあるため、自分のWebサイトがAMPを活用できるのかを見極めなければいけません。

対応手順：

  1. 使用している広告プラットフォームのAMP対応状況を確認
  2. 必要に応じてamp-adコンポーネントを実装
  3. 広告表示のテストを実施

Googleアナリティクスの設定

AMPページでのアクセス解析には、専用の設定が必要です。Googleアナリティクスの解析においてはamp-analyticsの設定をする必要があります。

よくある失敗パターンと対策

私の経験から、以下のような失敗パターンがよく見られます：

  1. 一度に全ページをAMP化する
    • 対策：段階的な導入を心がける
  2. エラーを放置する
    • 対策：定期的な検証とメンテナンス
  3. デザインを重視しすぎる
    • 対策：機能性を優先し、段階的に改善

AMP設定後のメンテナンスと最適化

定期的な検証の重要性

AMP設定は一度行えば終わりではありません。急激に増える場合は、直前のサイト内のプラグイン変更やAMP非対応のカスタマイズが原因となることが多いため、定期的な検証が必要です。

月次チェック項目：

  • Search ConsoleのAMPステータス確認
  • AMPテストツールでの再検証
  • 表示速度の測定
  • エラーログの確認

パフォーマンスの監視

AMPの真価は表示速度の向上にあります。以下のツールで定期的にパフォーマンスを監視しましょう：

  • PageSpeed Insights
  • Core Web Vitals
  • Search Console のページエクスペリエンス

まとめ：成功するAMP設定のポイント

私がこれまでの経験で学んだ、成功するAMP設定のポイントをまとめます：

段階的なアプローチ いきなり全ページをAMP化せず、重要な投稿ページから開始し、安定してから範囲を拡大する

継続的なメンテナンス 設定後も定期的な検証とエラー対応を怠らない

ユーザーファーストの思考 技術的な完璧さよりも、ユーザーの利便性を最優先に考える

現実的な期待値 AMPは万能ではなく、サイトの性質によって効果は異なることを理解する

AMP設定は確かに技術的な挑戦ですが、正しい手順で進めれば必ず成果を得られます。特に、モバイル端末からのアクセスが多いWordPressサイトならとくに、AMPの導入による表示速度の違いを大きく実感できるはずです。

最初は小さな一歩から始めて、徐々に最適化を進めていくことで、ユーザーにとって価値のある高速なWebサイトを実現できるでしょう。

AMP設定 Web開発 WordPress サイト改善 テクニカルSEO ページ速度 モバイル最適化 検索エンジン
ABOUT ME
松本大輔
LIXILで磨いた「クオリティーファースト」の哲学とAIの可能性への情熱を兼ね備えた経営者。2022年の転身を経て、2025年1月にRe-BIRTH株式会社を創設。CEOとして革新的AIソリューション開発に取り組む一方、Re-HERO社COOとColorful School DAO代表も兼任。マーケティング、NFT、AIを融合した独自モデルで競合を凌駕し、「生み出す」と「復活させる」という使命のもと、新たな価値創造に挑戦している。

著書：
・AI共存時代の人間革命
・YouTube成功戦略ガイド
・SNS完全攻略ガイド
・AI活用術
RELATED POST