WordPress + nginx 環境でAMP対応してみました

2019年12月29日Webサイトnginx,WordPress

このブログをAMP(Accelerated Mobile Pages)対応してみました。AMPとは、スマホ等のモバイル端末からでもページを素早くロードできる技術らしく、Googleが推進しています。

WordPress自体は、プラグインを一つ入れるだけだったのですが、サーバーの方の設定がまずかったらしく、HTTP500エラーを出して少しハマったので対処法をまとめました。

環境

こちらの環境で試しています。

  • CentOS 7
  • nginx 1.15
  • WordPress 4.9.8

設定方法

サーバー側の設定

後ほどWordPressにAMPのプラグインを入れますが、そのプラグインは｢php-xml｣を必要としているようですので、こちらを入れます。

これをしないと、AMPのページを開いてもHTTP 500エラーを返してきて開けません。

php-xmlをサーバーにインストールし、nginxとphp-fpmを再起動します。

sudo yum install php-xml
sudo systemctl restart nginx
sudo systemctl restart php-fpm.service

WordPressにプラグインを追加

WordPressに｢AMP for WordPress｣を入れます。

設定はこれだけです。

うまくAMPの設定ができているか確認

上記だけで、各記事のAMP版ができているはずですので、開いてみます。

例えば、この記事の通常版は

https://astherier.com/blog/2018/12/amplify_wordpress_on_nginx/

ですが、AMP版は末尾に｢amp｣をつけたアドレスになります。

https://astherier.com/blog/2018/12/amplify_wordpress_on_nginx/amp/

こちらにアクセスし、表示されればOKです。

GoogleのAMPテストで確認

Googleは、AMP版ページが正しくできているか判定するサイトを提供しています。

https://search.google.com/test/amp

こちらにAMP版アドレスを入れて、見てもらうと安心です。何らかのエラーがある場合は修正しましょう。

AMP for WordPressプラグインの設定

ここまでの話でAMP版のページはうまくできているはずですが、Google Analytics等を使っている人は、AMPプラグインに追加設定が必要です。

WordPressの管理画面の左欄に｢AMP｣という項目が増えていると思いますので、そこの｢Analytics｣を開きます。

Google Analyticsを利用する場合はType欄にgoogleanalyticsと入力し、JSON Configuration欄には

https://developers.google.com/analytics/devguides/collection/amp-analytics/

を参考に、例えば下記のように記入します(もちろん、UA-XXXXX-Yの部分は書き換えます)。

{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
     }
  }
}

これらを入力し、SaveすればOKです。ID欄は、入力しなくてもSave時に自動付与されます。

Webサイトnginx,WordPress

Posted by 管理人：astherier