みなさん、AMPってご存知ですか？私は知りませんでした。
詳細はあとに書きますが、普段Google検索しているだけでも目にしている機能なんです。
サイト開設直後に、なんか表示が速いらしいという情報を目にしたので何も考えず導入しました。
そしたら大変だった。
そこで…
- よく知らずにAMP対応したら
- エラーにまみれた
- よし…キレイにしてみよう！
- エラーにボコボコにされた
- そもそもAMP必要か？と目が覚めた
という流れについてまとめました。
自サイトのAMP化を考えている方、AMPに興味がある方の参考になれば幸いです。
「AMP」とは
改めて、AMPとは…
Accelerated Mobile Pages
加速 モバイル ページ
＝モバイルのページを高速表示される方法
のこと。
ページ表示に時間がかかるのは、どんな時でもストレス。
そのための仕組みが、AMPなんです。
AMPプロジェクトは、すべての人にとって
Webをより良くすることを目的としたオープンソースイニシアチブです。
（自動翻訳感満載）
どうやって判断する？
このAMPは検索結果から判断可能です。
Google検索を行った際に、↓のようにURLの頭にアイコンがつくことがあります。
このマークがついているサイトが、AMP＝高速表示に対応しているよ！の印です。
通常ページとどう違う？
URLが異なります。
通常ページ 指定したURL
AMPページ 指定したURL + ?amp=1
記事の見た目は、テーマなどにもよりますが大きくは変わりません。
Cocoonの場合はこんな感じ。
通常ページ 
AMPページ
こんな感じで、読者に優しい機能……のように見えますが、運営側になると話が変わってきます。
素人が適当に手を出したらボコボコにされます。
されました（小声）
WordPressテーマ『Cocoon』には、チェックだけでAMP対応になる設定があるんです。
これをふんふんと読んだだけで導入してしまった私に待っていたのは、エラー通知の嵐でした。
幸いにも私は色んな種類のエラーメッセージはなく、いくつかの通知程度で済みましたが。
ちなみに自分のサイトにAMPエラーが出ているかはGoogle Search Consoleで確認できます。
ただし修正の即時反映はされないので、お急ぎの方はコチラ。
「リンクされている AMP バージョンが無効です」
[エラー] カスタム JavaScript は使用できません。
心当たりがない。混乱。（※正確にはあるんだけど。詳細は後述）
カスタムも別にしてないし…と困っていると、どうやら以下の箇所はAMPへの影響があるよう。
- 問い合わせフォーム（コメント欄は影響なし）
- 各種広告
そこでCocoon公式フォーラムを参考にしつつ、これらの項目を正しくすることに。
問い合わせフォームを修正
固定ページ一覧
⇒ 編集
⇒画面右側の 文書
「AMPページを生成しない」にチェック。
補足
「どうしてもエラーが解決できない」「AMP対策するのが大変」
という記事への対処法にもなります。
（根本的な解決にはなりませんが）
広告表示設定を「分割」
広告で使うコードはAMPエラーの大きな一因。
そのため、サイト内広告はウィジェットで分割管理することでエラーを解消できます。
「通常ページ（非AMP）」
「AMPページ用」
に分けることで、それぞれに適した表示設定ができます。
他の方法もあるかもしれませんが、私はウィジェットを使うのが楽チンです
設定は簡単。
管理画面「外観」
⇒ ウィジェット「利用できるウィジェット」から
・[C] 広告
・[C] 広告（モバイル用）
・[C] 広告（PC用）
これらを使って「通常ページ」「AMPページ」それぞれに広告コードを貼ることで、AMP対応になります。
もう少しわかりやすくすると
例えばパソコンとモバイルで別の広告を表示したい場合は、こんな感じ。
・[C] 広告（PC用）
・[C] 広告（モバイル用） 通常ページ用
・[C] 広告（モバイル用） AMPページ用
パソコン・モバイル共通で広告を表示したい場合は、こんな感じ。
・[C] 広告 通常ページ用
・[C] 広告 AMPページ用
そしたら、
ウィジェットの表示設定「チェック・入力したページで表示／非表示」を使って
通常ページの広告はAMPページで非表示になるよう、
AMPページの広告は通常ページで非表示になるよう設定するといいです。
あるいはそれぞれ「表示」設定でもＯＫです。
これで、通常・AMP用にあわせて広告表示ができます。
無料プランにご用心
以上の設定をしても、エラーは止まりませんでした。
それもそのはず。見落としがあったのです。
よく確認してみると、エラー箇所が
※表示していいのかわからないので一部伏字に。
＞”//******.value-domain.***/***********.**”
そうだ（おっそ）
私はレンタルサーバーを無料で借りていましたので、広告が常に表示されていたのです。
ここが引っ掛かってた。
広告に使われているjavascriptは、AMP非対応！
これがエラーの原因だったんですね。
有料プランに切り替えれば広告は出なくなるので、有料切り替えで解消しました…。
[エラー] タグ「style amp-custom」で指定された作成者のスタイルシート～～上限は 50000 バイトです。
どうやらAMPにはCSSカスタマイズの上限もあるみたいで。
カスタマイズを続けたらこんなエラーが出るようになりました。
CSSを厳選してこの量なので、対処は一旦放置。
Cocoon公式では対処法をまとめてくれています。
[警告] 推奨サイズより大きい画像を指定してください
これはエラー判定ではないんだけども、警告が１件発生。
推奨サイズより大きい画像を指定してください。だって。
Googleは画像の推奨サイズというのがあって、1200ピクセル以上とのこと。
ただ、これは放置してもいいそうです。私は１件のみだったので差し替え。
現状はデメリットが大きすぎる
とまぁ、自分のわかる範囲内でAMPの情報収集や修正をしておりましたが…
おさまるどころか増えていく。
解消しているうちに、私の糸が切れました。
AMPも、やめました。
AMPのメリットって何だろうか？
高速表示以外によく言われているものは、この辺です。
- 検索結果でカルーセル表示がされる「かも」
- 離脱率や信頼度などの低下防止
- ユーザーのストレス緩和
検索結果で有利になるという情報もありますが、Googleはこれを否定しています。
実際検索結果に有利であればとっくに色んなサイトが力を入れていることでしょうｗ。
ということは、間接的に有利かも？将来的に有利かも？といった不確定要素のひとつでしかありません。
一方、AMPに適応するための条件は？
- 多すぎる「対象外」
- 大小様々な表示の違い
- カスタマイズのたびに不具合リスク
- AMP用カスタマイズが追加で必要な場合も
ちらっとAMP対応しただけでも…
JavaScriptなど非対応機能で壁にぶつかったり、商品リンク先の画像がつぶれたり、細かな表示の違いが見られました。
ユーザーにストレスなく記事を提供できるとはいえ、その分運営側がストレス。
サイト運営初心者に、この戦いを続ける体力はあるか？
いいえありません（即答）
快適さはいつだって気にしたい
サイト運営の目的は、勿論AMP対応ではなく
自分が伝えたいことを伝えられたり、作れたりと「サイト運営を通してやりたいことを達成すること」ではないでしょうか。
今後AMPが重要なSEO対策となる可能性は残されてますが、現状はAMP対応に注力したい感じではないかなと。
何より
快適に見てもらうための工夫は、
AMP関係なく常に意識したいこと
ですね。
以上、初心者がエラーでボコボコにされた話でした。
ひとつフォローしておくと、カスタマイズを最低限で終わらせるつもりだったり、積極的にサイトデザインする予定が無ければ、AMP対応は有効だと思います。
ただ、そうでなければ有益な記事を提供していくことを心がけるほうが、どちらも幸せではないでしょうか。
我疲労