注目の記事 PICK UP

AMP for WPプラグインでAMPエラー問題を解決

AMP対応にはAMP for WPプラグインがおすすめ

AMP for WPプラグインでAMPエラー問題を解決
以前当サイトをAMP対応した時の記事を公開しましたが、その後記事の更新を続けているとGoogleサーチコンソール上でAMPページがきちんと生成されていないよというエラーが頻発しました。一時は当サイトの記事120記事程度きちんとインデックスされていたのですが、日に日にエラーページが増加し、最終的に全ページAMP未対応のエラーになってしまいました。
原因として考えられるのは、ちょうどWordPressが4.7.5にバージョンアップし、AMP対応のために使用していたプラグインがWordPressのバージョンアップによってうまく動作しない可能性が出てきました。そのため使用するプラグインを変更したところ再びAMP対応ページが正常にGoogleサーチコンソールにインデックスされ始めたので記事にしてシェアすることにしました。

Facebook Instant Articles & Google AMP Pages by PageFrogに問題あり?

以前AMP対応のために使用していたプラグインは、AMPプラグインとFacebook Instant Articles & Google AMP Pages by PageFrogプラグインでした。WordPressが4.7.5にバージョンアップした時にFacebook Instant Articles & Google AMP Pages by PageFrogはWordPressの4.7.5でテストされていないというアナウンスがあったので、一度Facebook Instant Articles & Google AMP Pages by PageFrogを無効化して様子を見てみました。
そしてAMPプラグインも一度無効化して削除して、再インストールして有効化しAMPページの再生成を試みました。
AMPプラグインだけの使用でAMPページが生成されることを確認できたので、問題はFacebook Instant Articles & Google AMP Pages by PageFrogプラグインにあることが濃厚なってきました。

AMPとは何か?AMP対応にするメリット

AMPとは何か?ということと、AMP対応にするメリットについては以前記事に書いていますのでそちらをご覧になってAMPとは何か?AMPにすることによるメリットについて理解を深めてみてください。

AMP対応とGoogleアナリティクスとGoogleアドセンスの設定方法
Googleが推奨するAMPへの対応とAMP対応ページにGoogleアナリティクスを設定し、Googleアドセンスを設置する方法を解説します。

AMP対応のために必要なプラグイン

今回のAMP再対応化のために必要なプラグインは、一つはAMPプラグインです。こちらはJetpackやAkismetプラグインを提供していて、WordPress開発のコア開発陣であるAutomatticが提供しています。そして今回新たに追加するプラグインは、AMP for WPというプラグインです。このプラグインはAMPプラグインではできないようなAMP対応ページの細かな設定ができる便利なプラグインです。AMP for WPプラグイン単体ではAMP対応ページ生成はできません。AMP for WPプラグインをインストールするとAMPプラグインをインストールして有効化してくださいとアナウンスされます。AMPプラグインとAMP for WPプラグインセットで機能するプラグインです。

AMP for WPプラグインのインストール

WordPress管理画面の「プラグイン」→「新規追加」から、プラグインの検索フォームに「AMP」と入力してAMP for WP – Accelerated Mobile Pagesのプラグインをインストールして有効化しましょう。
AMP for WP – Accelerated Mobile Pagesプラグインをインストールして有効化すると、WordPress管理画面の左側に「AMP」という設定項目が追加されます。AMP対応ページの細かい設定はこの「AMP」から設定していくことになります。

AMP for WP – Accelerated Mobile Pagesの設定

AMP for WP – Accelerated Mobile PagesのAMP設定は項目も多く、設定箇所が多いため主要な部分に絞って設定方法を解説していきたいと思います。

Getting Started項目

AMP for WP – Accelerated Mobile Pagesの設定は、「Getting Started」にほとんど集約されています。他の「Extensions」「Fix AMP Errors」は有料バージョンにすることで使用できる機能で、「Report an Issue / Request a Feature」「Import / Export」は基本使用しません。Getting Started項目のGeneralから一つづつ設定方法を解説していきます。

General

AMP for WP設定01
Generalでは主にAMP対応ページにサイトロゴをアップロードする設定ができます。サイズは190px×36px以上であればある程度サイズが違っても問題なくAMP対応ページにサイトロゴを表示できます。当サイトは通常サイトで使用しているサイトロゴと同じ画像をアップロードしています。サイズは280px×60pxです。AMP対応ページでは自動でリサイズされます。

General
Logo:ロゴをアップロードします
Custom Logo Size:サイトロゴをリサイズするかどうか選択します
Logo Width:ロゴ画像の横幅サイズを指定します
Logo Height:ロゴ画像の縦幅サイズを指定します
AMP on Pages:AMPページ全て有効にするか無効にするか設定します
Individual AMP Page (Bulk Edit):個々のAMPページを表示にするか非表示にするか設定

普通にAMPページを生成して表示させるならば上図のように、AMP on Pagesは「ON」、Individual AMP Page (Bulk Edit)は「Show by Default」にしておけば問題ありません。設定を有効にするために「Save Changes」ボタンを押して設定を保存します。

Homepage

AMP対応ページと通常ページについての設定をします。ここはあまり設定することなくデフォルトの状態で問題ありません。

Homepage
Homepage Support:ONにします
Front Page:OFFにします
Override Homepage Thumbnail Size:OFFにします
Non-AMP HomePage link in Header and Logo:OFFにします

上記のように設定したら「Save Changes」ボタンを押して設定を保存します。

Design

AMP for WP設定02
DesignはAMP対応ページの全体のデザインを設定できます。デザインについては3パターン用意されています。個人的には2番目のデザインが見やすいと思いますので2番目をおすすめします。

Design
Drag&Drop Post Builder:AMPページのデザインをウィジェットのようにドラッグ&ドロップで構成を変更できます。通常は使用しなくても問題ありません
Design Selector:AMPページのデザインパターンを選択します。ここではDesign Twoを選択します
Search:サイトが常時SSL化している場合はONにします
Call Now Button:Call to Actionボタンを表示するか設定します。ここではOFFにします
Custom CSS:スタイルシートを設定します。AMP対応のCSSである必要があります

注意する点はサイトが常時SSL化しているサイトは、「Search」をONにすることを忘れないようにしましょう。設定が終わったら「Save Changes」ボタンを押して設定を保存します。

AMPページのデザインで「Design Two」を選択すると、使用しているテーマによってはAMP対応ページ上部のグローバルメニューを個別に設定する必要があります。

AMP for WP設定03
WordPress管理画面の「外観」→「メニュー」から「位置の管理」タブに
AMP Menu
AMP Footer Menu
の項目が増えています。AMP MenuはAMPページ上部のグローバルナビ、AMP Footer MenuはAMPページ下部のフッターナビになります。
通常は通常ページで使用しているナビゲーションをプルダウンで選択して設定するだけで問題ありません。AMPページ用に新たにナビゲーションを作成する場合は「メニューを編集」タブでAMPページ用のメニューを作成して「位置の管理」でナビゲーションを設定してください。

Single

AMP for WP設定04
AMPの個別記事ページについての設定をします。

Single
Sticky Social Icons:記事下部にSNSのソーシャルボタンを表示するか設定します。ユーザビリティの観点からONを推奨します
Excerpt in single:記事の冒頭にメタ情報の抜粋を表示するか設定します。
Next-Previous Links:記事下部に前後の記事へのリンクを表示するか設定します。ユーザビリティ的にONを推奨します
Show Post Modified Date:最終更新日を表示するか設定します
Author Bio in Single:記事の投稿者の情報を表示するか設定します
Show Related Post from:関連記事の表示ルールをカテゴリかタグかを設定します。通常ページと同じ挙動にする場合は「タグ」にすることをお勧めします
Number of Related Post:関連記事の表示数を設定します

AMP for WPプラグインのバグなのかメタディスクリプションの抜粋部分の文章が冒頭10文字程度で省略されています。今後のバージョンアップで修正される可能性があります。抜粋文でユーザーを誘導したい場合は記事本文の冒頭に表示させることで対応可能です。その他の設定は赤枠の部分の設定だけ注意すれば他はOFFで問題ないと思います。
設定が終わったら「Save Changes」ボタンを押して設定を保存します。

AMP for WP設定05
AMP for WP設定06
AMPページに広告を掲載する設定です。対応しているのはGoogleアドセンスだけで他のASPの広告には対応していないことに注意してください。
上図の設定は、「記事冒頭」「関連記事前」「フッター部分」のユーザビリティの観点から記事を邪魔しない場所で、ユーザーに広告も見てもらえる配置に設定した例になります

Advertisement
AD #1:記事タイトル下に広告を表示します
AD #2:AMPページのフッター部分に広告を表示します。場所はフッターメニューと関連記事下になります
AD Size:表示する広告のサイズを指定します。モバイルで一般的に見やすいサイズの300px×250pxがお勧めです
Data AD Client:Googleアドセンスの広告コードをコピーするとコードの中に「data-ad-client=”ca-pub-1111111111111111″」という部分があります。その中から「ca-pub-1111111111111111」だけを抜き出して入力してください
Data AD Slot:Googleアドセンスの広告コードをコピーするとコードの中に「data-ad-slot=”1111111111″」という部分があります。その中から「1111111111」の数字だけの部分を抜き出して入力してください
AD #3:記事の冒頭に広告を表示します
AD #4:記事の下部に広告を表示します
AD #5:記事タイトル下に広告を表示します
AD #6:関連記事上に広告を表示します。場所は記事が終わり関連記事の項目の直上になります

広告の配置位置はかなり自由度が高いです。上図は当サイトの設定の一例ですのでご自分のサイトに合わせて効果的な場所に広告を配置してみてください。Googleアドセンスの規約でコンテンツボリューム以上に広告を配置するとペナルティを受けますので、広告を数多く配置するのは避けましょう。おすすめは3~4箇所に配置するのがお勧めです。
設定が終わったら「Save Changes」ボタンを押して設定を保存します。

Menu

AMP対応ページのメニューナビゲーションの設定です。

Menu
Auto Add AMP in Menu URL:ナビゲーションメニューのURLにAMP対応ページへのURLにするか、通常のページへのURLにするか設定できます。AMP対応ページへアクセスしてきたユーザーに対してメニューからページ移動する時、通常ページへ誘導するかAMP対応ページのまま見てもらうかで設定を変更してください

Social

AMP対応ページにSNSボタンを表示するかどうかの設定をします。

Social
Facebook:Facebookのシェアボタンを表示します
Facebook App ID:Facebookシェアボタンを機能させるにはFacebook App IDが必要です。Facebook App IDの取得については別途「Facebook App ID 取得」で検索して取得方法を検索してみてください
Twitter:Twitterのシェアボタンを表示します
Twitter Handle:サイトと連携しているTwitterアカウントを入力してください
GooglePlus:Google+のシェアボタンを表示します
Email:メール起動ボタンを表示します
Pinterest:Pinterestのシェアボタンを表示します
LinkedIn:LinkedInのシェアボタンを表示します
WhatsApp:WhatsAppのシェアボタンを表示します
LINE:LINEのシェアボタンを表示します

設定が終わったら「Save Changes」ボタンを押して設定を保存します。

SEO

AMP対応ページのSEO関連の設定をします

SEO
Meta Description:メタ情報に抜粋文を表示するか設定します
Additional tags for Head section AMP page:メタヘッダ部分に追加のタグを追加します
Yoast SEO Options
Meta Tags from Yoast:Yoast SEOプラグインを使用している時に機能します
Yoast Description in ld+json:Yoast SEOプラグインを使用している時に機能します
Advanced Index & No Index Options
Archive subpages (sitewide):アーカイブページのサブページ(2ページ目のURL)をGoogleにインデックスさせるか設定します
Author Archive pages:投稿者のアーカイブをインデックスさせるか設定します
Date Archive pages:日付のアーカイブをインデックスさせるか設定します
Categories:カテゴリーをインデックスさせるか設定します
Tags:タグクラウドをインデックスさせるか設定します

設定が終わったら「Save Changes」ボタンを押して設定を保存します。

Analytics

AMP対応ページのアナリティクス設定をします。複数のアナリティクスの中から選択できます。一般的なGoogleアナリティクスを使用する場合はGoogle Analytics IDが必要です。

Analytics
Analytics Type:使用するアナリティクスを選択します。Google Analyticsをおすすめします
Google Analytics:Analytics TypeでGoogle Analyticsを選択した時にIDを入力します
Use Google Tag Manager:Google タグマネージャを使用するか選択します

Googleタグマネージャについては、通常にWEBサイトを運用しているなら必要がないサービスだと思うので省略します。
設定が終わったら「Save Changes」ボタンを押して設定を保存します。

その他の設定

Structured Data
Notifications
Comments
Translation Panel
Advance Settings
上記の設定については特に細かく設定する必要がありませんので省略します。
AMP対応ページを細かく設定したい方は、ブラウザの翻訳機能を使用して大体の機能の意味を理解してから設定してください。ただ、デフォルトの設定のままでもAMP対応ページには大きく影響はしません。

以上がAMP for WPプラグインの設定についての解説でした。
当サイトでは現在のところAMPプラグインとAMP for WPプラグインの組み合わせで問題なくAMP対応ページが生成されています。ご自分の運営しているサイトに使用しているプラグインによっては、相性の問題でうまくAMP対応できない可能性がありますので注意してください。

SEO関連の設定はテーマやプラグインの方でSEO対策が施されているテーマやプラグインもあると思いますので、SEOの設定についてはテーマとプラグインとの相性も検証してください。

関連記事

  1. お名前.comアイキャッチ

    お名前.comで取得したドメインのDNS設定をする-CORESERVER編

  2. WordPressをインストールして最初にやるべき初期設定アイキャッチ

    WordPressをインストールして最初にやるべき初期設定

  3. TCD IZMテーマアイキャッチ

    TCD IZMテーマにリニューアルしました

  4. TCDのおすすめテーマ一覧

    TCDのおすすめテーマ一覧

  5. Google Language Translatorを使ってプチ多言語サイト化してみた

    Google Language Translatorを使ってプチ多言語サイト化してみた

  6. LastPassパスワード管理サービスアイキャッチ

    LastPass-アカウント情報管理クラウドサービス

  7. WordPressにおける投稿ページと固定ページの違い

    WordPressにおける投稿ページと固定ページの違い

  8. WordPressをインストールしたら最初に入れるプラグインアイキャッチ

    WordPressをインストールしたら最初に入れるプラグイン

  9. AMP対応とGoogleアナリティクスとGoogleアドセンスの設定方法

    AMP対応とGoogleアナリティクスとGoogleアドセンスの設定方法

特集記事

  1. バイクパッキングの入門にピッタリ-ワールドサイクルからR250サドルバッグ発売 バイクパッキングの入門にピッタリ-ワールドサイクルからR250サドルバッグ発売
  2. ワールドサイクルのR250防水スマートライドポーチDX試用レビュー ワールドサイクルのR250防水スマートライドポーチDX試用レビュー
  3. WordPress(ワードプレス)アイキャッチ WordPress(ワードプレス)はブログサイト構築システム
  4. ヒルクライムを楽に登るペースの作り方 ヒルクライムを楽に登るペースの作り方
  5. ロードバイクのポジションの考え方 ロードバイクのポジションの考え方
  6. ロードバイクライフを始めるために必要なこと ロードバイク初心者に最低限必要な装備
  7. Garmin EDGE 820J Garmin EDGE 820Jでバッテリー消費を抑える設定
  8. 40代からのロードバイク-体力の低下に向き合う 40代からのロードバイク-体力の低下に向き合う
  9. 短期間で鍛えるヒルクライム力-フィジカル編 短期間で鍛えるヒルクライム力-フィジカル編
  10. Garmin EDGE 820J Garmin EDGE 820Jに海外の地図を入れて海外ブルベに使う方法

PICK UP記事

  1. ロードバイクのエアロフォーム 尾根幹線コース-ロードバイク乗りのトレーニングコース
  2. コーナリングの成否を決定づけるブレーキング コーナリングの成否を決定づけるブレーキング
  3. ヒルクライム楽に登る正しいダンシング ヒルクライムを楽に登る正しいダンシング
  4. 女性のためのロードバイクの選び方 女性のためのロードバイクウェアの選び方
  5. 東レがカーボンを値上げ来年モデルの価格に影響か 東レがカーボンを値上げ2018年のロードバイク価格に影響か
  6. 40代からのロードバイク-加齢について考える 40代からのロードバイク-加齢について考える
  7. 普段の走行で意識することでトラブルを回避するポイント 普段の走行で意識することでトラブルを回避するポイント
  8. ブルベ用サイクルウェアアイキャッチ ブルベ用のサイクルウェアを考える
  9. EN1150規格をクリアしたブルベに最適な反射ベスト EN1150規格をクリアしたブルベに最適な反射ベスト
  10. スペシャライズドのプレミアムフィッティング販売システム スペシャライズドのプレミアムフィッティング販売システム

おすすめ記事

  1. eneloopアイキャッチ
  2. ペダリング時の筋肉の働きを理解して意識することで変わる
  3. ロードバイクのクリンチャータイヤについて知っておきたい知識
  4. グランフォンドとは何か-人気の高まる山岳ロングライド
  5. レンタルサーバー増強に伴うWEBサイト一時停止のお知らせ
  6. ロードバイク初心者がビンディングペダルを使いこなすポイント
  7. ロードバイクのエアロフォーム
  8. ピナレロ2018年ニューモデル発表会-GANシリーズ
  9. ロードバイク初心者の100kmロングライド-効率的な楽な走り方

Twitter

最近の記事

  1. ピレリからロードバイク用クリンチャータイヤが新発売
  2. PBP パリ・ブレスト・パリ
  3. ワールドサイクルのR250防水スマートライドポーチDX試用レビュー
  4. ワールドサイクルのR250サイクル反射ベスト試用レビュー
  5. ワールドサイクルのR250おにぎりリフレクター試用レビュー
  6. 保冷効果が長いおすすめの保冷ボトル
  7. デキるローディのUVケア-春から秋にかけての紫外線対策
  8. ロードバイク初心者の100kmロングライド-暑さ対策のポイント
  9. ロードバイク初心者の100kmロングライド-装備と持ち物
  10. ロードバイク初心者の100kmロングライド-補給のポイント

人気記事

  1. ワールドサイクルのR250サイクル反射ベスト試用レビュー
  2. ワールドサイクルのR250おにぎりリフレクター試用レビュー
  3. シマノR8000新型アルテグラ徹底解剖
  4. ワールドサイクルのR250防水大型サドルバッグラージ試用レビュー
  5. ロードバイク初心者がビンディングペダルを使いこなすポイント
  6. PBP パリ・ブレスト・パリ
  7. ワールドサイクルのR250パーキングストッパー&チェーンフック試用レビュー
  8. ロードバイク初心者の100kmロングライド-フォームとペース管理
  9. 普段の走行で意識することでトラブルを回避するポイント
  10. ロードバイクは恥骨で座ると安定する
PAGE TOP
Translate »