AMP 紆余曲折を経て、Yoastにランディングしたものの…

“AMP”ことAccelerated Mobile Pagesは、ウェブのページを高速化する技術で、スマホで検索した際に稲妻マークがついているページです。

詳細は本場の「AMPについて」が分かりやすいです。

ワードプレスのプラグインでAccelerated Mobile Pages対応

ワードプレスでのAMP化は、プラグインが簡単です。

Automattic社のAMP」で機能としてのAMP化がなされます。

これにもう一つ装飾やSEO対応の補完的なプラグインを連携させたりしながら機能を充実させていくイメージです。

Accelerated Mobile Pages補完系のプラグインで大失敗

私はこの補完系のプラグインで大失敗しました。初めに入れた「AMPforWP – Accelerated Mobile Pages」というプラグインで大分苦戦を強いらされました。
最終的に「Glue for Yoast SEO & AMP」に落ち着いて、ようやく何とか形になった感じです。
変えたのはCSSぐらいですから、もしかすると、どちらも入れないで自分でボチボチ盛り付けていった方がマシだったかもしれません…

怒りの「AMPforWP – Accelerated Mobile Pages」

最初にプラグインを選ぶにあたって、(私の駐在員歴10年目の英語力で、)このプラグインでAMPの機能・装飾の両方が網羅されているように見えました。

ところが、インストールの最後のステップで、別のプラグイン「Automattic社のAMP」をインストールするように求められ、自力でAMP化しているわけではないことが分かりました。

これ以外のAMP補完系プラグインには、2つのプラグインを連携させて使用することがちゃんと書いてあります。

例えば、YoastのGlue(のり)は、名前からしてAutomattic社のプラグインとYoast SEOをくっつけるイメージですよね。

侵略的なプラグイン

実際の核となる機能は他のプラグインがやってくれている為、エラーは起きません。このプラグインがやっているのは、他のプラグインや他のコードへの干渉です。

このプラグインのレビューの一つに「Doesn’t work, invasive plugin」というコメントがありました。大いに同感です。

個人的には、「The plugin from the Automattic is working, but “AMP for WP” is too invasive.」といった感じでしょうか。

このレビューの人は、すぐに気づいてバックアップを使って元に戻せたらしいのですが、私は気づくのが遅くて、最古のバックアップがプラグインを投入後のバージョンだったので、はじめからやり直しました。がっかりです。

私の場合、妙なコードが吐き出されるので、プラグインを一つ一つ非有効化して調べましたが分かりませんでした。このために、別のアカウントを作って、一つプラグインを追加するごとに吐き出されるソースコードを比較して、このプラグインを突き止めました。
かなり時間がかかったので、ちょっと怒っています。

更に、他のプラグインのコードをカスタマイズしていたら、このプラグインが障害になって実行できないというエラーがでて、強制停止の上、それ以降使えなくくなってしまい、リカバリーすること数回。うんざりしています。

どこまで食い込んでいるのかよくわからないけれど、なんか物凄く侵略しているっぽい印象を持っています。

2017年4月の事ですので、既に改善しているかもかもしれませんが、挑戦する気になれません。
このプラグインを入れるなら、新しいレビューを読んで様子を見てくださいませ。
事前バックアップもお忘れなく。

Glue for Yoast SEO & AMP

Glue for Yoast SEO & AMP」は、Automattic社の「AMP」と「Yoast SEO」をつなぐ「Glue(のり)」です。

私は、SEOプラグインにYoastを使っているので、これを使って連携することが最もスムーズであろうことは見えていたので、初めからこれにすればよかったですね。

セットアップ方法は、↓のビデオが分かりやすくて、4分30秒でセットアップできます。

AMPの検索結果が、「5分で出来る」とか「30分でできる」とか唄っていたので、動画の再生時間を書いてみました。笑

Accelerated Mobile Pages化手順

  1. Automattic社のプラグイン」をインストール
  2. Glue for Yoast SEO & AMP」をインストール
  3. 管理メニュー→Yoast SEO→AMP→Post Typeで有効化するページタイプを選ぶ
  4. 管理メニュー→Yoast SEO→AMP→デザインで、icon、デフォルト画像、ヘッダーや文字、リンク、ホバーの色を選ぶ。
  5. 管理メニュー→Yoast SEO→AMP→AMP Analyticsとheadにそれぞれコードを埋め込む
  6. プラグインの編集でフォントを変更する

私がやったことはこのくらいです。レイアウトの色などけっこう悩んだので1時間ぐらいかかりました。笑。

有効化するページタイプ

管理メニュー→Yoast SEO→AMP→Post Typeで有効化するページタイプを選ぶことができます。残念ながら、2017年7月29日現在、固定ページには対応していないようです。

Glue for Yoast SEOのページタイプ設定
Glue for Yoast SEOのページタイプ設定

私は現在メディアをnoindexにしているので、有効化したのは「投稿(post)」だけです。

Accelerated Mobile Pagesページデザイン

管理メニュー→Yoast SEO→AMP→デザインで、画像、コンテンツの色、リンクの色、引用ブロックの色、追加CSS、追加headタグなどを設定できます。

AMP-design-setting
AMP-design-setting

↓はAMPテストでのプレビューです。
上図上段のAMPiconはファビコンかな?っと推測して、違う画像を入れてみたりしたのですが、ファビコンは変わらず。検索表示には影響しないみたいです。
クリック後のページ上はサイトロゴが変わっていました。

上図下段のDefault iamge(デフォルト画像)は、注記にも書いてある通り、画像を一枚も使用していない記事の場合に表れてくれるようです。

AMP icon
結果タイプ2

Google Analyticsとの連携

作業は2つあって、bodyとheadにそれぞれAMP専用のコードを埋め込みました。

bodyの方は、管理メニュー→Yoast SEO→AMP→AMP Analyticsにコードを埋め込む。

AMP GA Code
Google AnalyticsのAMP用コードを埋め込む

コードは、↓。UA-XXXXX-Yの部分を自分のコードに差し替えます。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

次に、head部分に、Google アナリティクスの組み込みサポートを有効にするためのコードをheadのどこかに貼ります↓。

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

詳しくは、Google Analytics「AMP ページにアナリティクスを追加する

AMP-TEST

Googleツール「AMPテスト」でチェックして、そのままインデックス申請したり、プレビューで検索表示のイメージを確認したりすることもできます。

因みに私はURLの後ろにampをつけ忘れて、パニックを起こしたりしますので、お忘れなく。

Googleツール、AMPテスト
Googleツール、AMPテスト

完成図、ちゃら~ん。

普通のページを開いて、最後尾に/amp/をつけると、実際のページを確認することができます。
更に右クリックで「検証」を選び、スクリーンサイズを変更すると、イメージが湧きやすくなりますね。

右側上部でコンソールを選ぶと、powered by AMPっと表示され、稲妻マークがついているのも確認できます。エラーがあるとここに表示されます。

Powered by AMP View
ampページの検証

欠陥

↑の完成図で衝撃を受けたのですが、関連記事やカテゴリー情報が存在していません。うぉ。

カテゴリー一覧などの入れ方は分かったのですが、CSSが微妙なので、そちらをカスタマイズしてみることにしました。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください