WordPressでAMP(Accelerated Mobile Pages)対応
このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問(現状では、表示速度やビジュアル性が低下する場合が多々ある)なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。
現状、手間をかけてAMP対応はしたくないので、プラグイン「Accelerated Mobile Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。(開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。)
ampプロジェクトのプラグイン「AMP」ではなく「Accelerated Mobile Pages」をインストール
最初、Googleも案内するampプロジェクトの「AMP」をインストールしてみましたが、単独では使用できず追加のプラグインを要求されるし、設定方法も分り難いので、設定が分かり易い「Accelerated Mobile Pages」を使用します。
Accelerated Mobile Pagesの設定は簡単
プラグインをインストールして、有効にした後、AMPforWP OptionsのSettingsとDesignを設定するだけ、沢山設定がありますが、とりあえずわかるところだけでも設定して、<your url>/ampを見てみましょう!
Accelerated Mobile Pagesの設定の注意点
Custom CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。Custom CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。
Google Search consoleで「重大な問題のある AMP ページ」と表示されてしまいます。
コメントに禁止CSSと類似の記載があっても「重大な問題のある AMP ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。
設定後はしばらくは、注意してGoogle Search consoleを見ましょう。もし、「重大な問題のある AMP ページ」と表示されてしまったら、速やかに修正しましょう。
その他、AMPページ作成でのポイント
各ページをAMP対応に変更したい場合は、SettingのPage Builder / Legacy Page Builder (widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。
モバイルページはAMPを標準としたい場合は、SettingのAdvance Settings / Mobile Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。ただ、この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。ちなみに、このRedirection設定をしなくてもGoogle Search consoleはAMPページを認識します。
実は、まだこのサイトも対応中の段階で、ここでの記載は最終的に変更される可能性があります….(^-^;
Accelerated Mobile Pages設定項目について(追加)
SettingsのStructured Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。