[レベル: 上級]

この記事では、WordPressをAMP対応させるプラグインについて解説します。
AMPプラグインを使えば、WordPressで構築したサイトをいとも簡単にAMP化できます。

しかし初期ステージでのバージョンの公開のため機能が不完全です。
今すぐに利用する必要はまったくありません。
AMPにものすごく興味があったりSearch Consoleに実装予定のAMP機能のベータテストに参加したかったりする場合のみ、試してみるとよさそうです。

WordPressのAMPプラグインの設定方法や仕上がり

WordPressのAMPプラグインのインストールや設定の方法、仕上がりをここから説明します。

インストール

WordPressのプラグインサイトにあるAMPプラグインのページからファイルをダウンロードし、 /wp-content/plugins/ ディレクトリにアップロードします。

あるいは、WordPressのプラグイン管理画面から直接インストールすることもできます。
「AMP」で検索すればすぐに見つかるはずです。

WordPressの管理画面からAMPプラグインをインストール

インストールしたら、「有効」にします。

設定

設定項目はありません。
しかし、1つだけ大切な操作があります。

[設定]―[パーマリンク設定]へ進んで、[変更を保存]ボタンを押してください。
設定を変更する必要はありません。
Rewriteルールを“フラッシュ”させるためだそうです。

AMPページヘアクセス

インストールに問題がないようであれば、AMPページにアクセスしてみましょう。
2種類のURLでアクセスできます。

  • 通常のURLの終わりに /amp/ を付ける
  • 通常のURLの終わりに ?amp=1 を付ける ※すでに?パラメータが付いてるときは &amp=1 になるはず

たとえば、この記事のURLは https://www.suzukikenichi.com/blog/amp-pluguin/ です。
これを https://www.suzukikenichi.com/blog/amp-pluguin/amp/ にすればAMPバージョンのこのページにアクセスできます。

AMPページのデザイン

AMP化したページのデザインは非常にシンプルです。
スマホで閲覧したときの元のレスポンシブウェブデザインのページと、AMPのページを比べてみました。

レスポンシブウェブデザインとAMPの比較

そんなに大きくは違いません。
レスポンシブウェブデザインでもモバイルではシンプルにしているので当たり前といえば当たり前です。

とはいえ、レスポンシブウェブデザインは記事が終わった後にPC版のサイドバーのコンテンツが続きます。
一方でAMPページは記事だけです。

AMPページ全体

先程も書いたように設定項目がないのでデザインの変更は管理画面からできません。
どうしても変更したければ、プラグインを構成するファイルの template.php でスタイルシートを修正できます。

ただし、このプラグインはバージョンが0.1で正式版ではありません。
正式版がリリースされてアップデートしたなら、上書きされ変更が失われるでしょう。
また正式版にはデザインをカスタマイズするオプションが付くかもしれません。
今の時点で修正しても正式版ではやり直しになる可能性がある点に注意してください。
現在のバージョン(0.1)はあくまでも、自動でAMP化することだけを目的に公開されています。

僕は、フォントのサイズやタイプ、ロゴなどどうしても気になるところだけを変えました。

構造化データ付き

AMPプラグインには、schema.orgを用いたAMP向け構造化データを出力する機能が初めから備わっています。
ただし不完全で、欠落したプロパティがいくつかあります。

AMPページを構造化データテストツールで検証

上のキャプチャでは image プロパティだけのエラーですが、もっとたくさんのエラーが出ます。
僕は、class-amp-post.php を自分で修正しました(完全に修正しきれていませんが)。
こちらも正式版ではどうなるかわからないので、無理して直す必要はないと思います。

Search ConsoleのAMP機能のベータテストに参加

もしAMPに興味を持って早々と実装したのであれば、Search Consoleに実装される予定のAMP用の機能のベータテストに参加してみましょう。
GoogleのJohn Mueller(ジョン・ミューラー)氏が、テスターを募集しています。
こちらのフォームから応募できます。

Interested in trying out AMP features in Search Console?

If your game this year includes working on Accelerated Mobile Pages (AMP), especially if you’ve already implemented AMP for a site, and you’re keen on giving us feedback on new features, you might want to sign up as a beta-tester at http://g.co/SearchConsoleTester . You can find out more about AMP at http://ampproject.org

バリデーションエラーが多数

最後になってなんですが、AMP HTMLのバリデーションをチェックするとエラーがたくさん出ています。(汗

バリデーションエラー

これらのエラーがどのくらい深刻なのか僕にはちょっとわかりません。
正式版では解消されていることを願います。

【UPDATE】このエラー状態だとおそらくGoogleにはAMPページとして認識されなさそうです。

【UPDATE 2】僕がこのブログで使っている別のプラグインの影響でエラーが発生していました。現在は解消できています。

ということで、さっそく今すぐにWordPressのAMPプラグインを使う必要はないでしょう。
少しでも早くAMPを体験したい、Search Consolenベータテストがとても気になる、そんな思いがあなたにあるなら試してみてください。

【UPDATE 3】WordPressをAMP対応するためのほかのプラグインも別記事で解説しています。
[WordPressブログをプラグインを使って30分でAMP化する方法]

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPモバイルSEO › WordPressのプラグインでブログをAMP対応にしてみた

Comments

  1. By はるか on

    私ページ更新をしてなかったので、反映されてなかったかもです。
    ありがとうございました。これでテストできます。

    ところで、
    https://www.harukas.org/blog/3350/?amp=1
    を見て頂ければわかりますが、
    レシピのマークアップが思いっきり表示されています。

    JSON-LDは、確かにJavaScriptなので、AMPでは読み込まない仕様ですが
    これって、Webマスター側が、ampの時はスクリプトを出さないように
    しなければならないのでしょうか?

    ※プラグインでJSON-LDだったら自動的にカットするなどに
    してほしい気持ちもあります^^;
    #きっとそんなのより対応しなければならない事の方が多いのでしょうね>プラグイン

    *** Reply from Suzuki Kenichi ***
    JSON-LDはどこに埋め込んでますか?
    メインコンテンツ部分に書いていたとすると、記事本文と同じようにテキストとして表示されてしまうんじゃないんですかね。
    メインコンテンツ以外のところにあるJSON-LDのコードは(僕の場合は)、AMPページではカットされてるので表示されていませんよ。
    テンプレートでどうにかできると思います。

  2. By はるか on

    >テンプレートでどうにかできると思います。
    ですね。そろそろ私も、amp対応を本気でと思いましたが
    ついこの前のアップデートで対策してくれました!
    このampの人、好感度さらに++です。
    JSON-LDは記述する場所を問わないマークアップですので、
    なんとかして欲しかったのですが、まさかこの段階での対応とは思いませんでした。

    上述のリンクで修正が確認できます。
    ということで、JSON-LDを記事本文に記載しても、
    ちゃんとドロップしてくれたので報告します。

    (鈴木さんのページを開発者が見ているんじゃ無いでしょうかwそもそも
    記事にJSON-LDをマークアップする変人なんて日本で何人いるか?というレベルのような^^;)

    *** Reply from Suzuki Kenichi ***
    改善されて良かったですね!

    ただ、プラグインがバージョンしたら構成がとても複雑になってしまって、自力での編集ができなくなってしまいました。
    JSON-LDを直接書けるようになったのは良いことですが、困った。

  3. By Shingo on

    お世話様です。

    鈴木さん、ampの際の投稿日の表示形式はどこで修正されました?

    *** Reply from Suzuki Kenichi ***
    僕はPageFrogというプラグインも使っていて、そのプラグインの pagefrog-amp-template-meta-time.php というファイルを修正しました。
    AMPプラグインだけの場合は、meta-time.php というファイルを修正すればいいと思います。

  4. By Shingo on

    ありがとうございます。

    修正できました。

    デフォルトがj M Y だったので、6 9月 2016といった表示になり見づらく感じたものですから。

    助かりました。

    *** Reply from Suzuki Kenichi ***
    お役に立てたようでなによりです。:)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る