AMP対応に3日ほど費やしてみたけど特に得られたものはなかった

どうも、ぶちくまです。

AMPという、モバイル端末でAMP対応ページにアクセスするとまじで秒速で表示されます。

当サイトでも採用してみましたが、色々なエラーが吐き出されて3日ほど対応費やしました。

めっちゃいろいろ書いていますけど、実はこれ、前のブログの記事でして、おそらくこのブログに訪問される方は「Cocoon」ユーザーがほとんどだと思いますので、クリックひとつで解決します。

サイト高速化するならAMP対応は必須！

AMPはGoogleが推し進めている、モバイルユーザーが離脱しないようにとにかく「高速」で表示できるようにする目的で推進しているものです。

AMPページは本当に表示が一瞬です。

導入方法

プログラム系が苦手な人は、自分でなんとかしようとせず、テーマ変更の方が楽だと思います。

サイトを高速表示をするなら別の方法もある

あと、PWAというアプリ化する方法もあるのだけど、それはまた別の機会で。

「えーえむぴー」とは

これはもう簡単に書きます。

Googleさんが、一昨年あたりから取り組んでいる事業です。

っていうやつです。

高速化された携帯端末の閲覧記事

この、AMPっていうのはAccelerated mobile pages が正式名称でして、和訳すれば、「高速化された携帯端末の閲覧記事」というところでしょう。

辞書は引いてない。

これは体感してもらえれば良いのですが、試しにぶちくまどっとこむ内の記事URLの最後尾に「/amp」をつけてみてください。多分スマホじゃなくても表示はされますが、スマホ表示に最適化はされています、そのはず。

ちょっとニュアンスは変わりますが、同じような記事が閲覧できますでしょうか。

SimplicityやCocoonはURLにつけるものが違う

ブログテーマをSimplicityに変更したので、AMP化のためには「/?amp=1」を後ろにつけるに変わりました。

要注意！TOTOのホッカラリ床のカビがすごくて萎える

TOTOのほっカラリ床のカビがすごくて修理依頼（という名のクレーム）をしてみましたという話。ネーミングセンスが良すぎてもうほっカラリしてないと許せないレベル。TOTOのお兄さんに掃除法を伝授してもらいました。結果、とにかく毎日掃除をするしか...

gatahome.com

怪しさMAXのリンクユニット風箇条書きリスト｜読者を困惑させてもメリットなし

クリックと同時に、画像イメージも含め、ほとんど全てのコンテンツが表示されたのではないでしょうか。

ちょっと遅れて広告が表示されるくらい。これが、AMP対応ということです。

AMPに対応するメリットとは

今の所、検索のランキング要件には絡まないとのことですが、今後、AMPに対応したウェブページが上位検索されることは間違い無いでしょう。

グーグルさんのご機嫌に合わせてウェブコンテンツを編集するのは我々ブロガーの宿命とも言えますが、もちろん、メリットもあるわけです。

①記事コンテンツのサイト表示が早くなる

これは当然のことですね、それが目的だから。

具体的に言うと、最近、コンテンツ表示も凝ったものが多くて、特に広告なんかは目を引くために色々な技巧（JavaScriptなど）を取り入れております。

処理が重くなるので、それらを求めていないニュース記事なんかでは、シンプルなAMP表示にすることで、読者はスムーズに記事内容に集中できるようになるわけです。

優良なサイトであれば他の記事も読みたいなぁ、となるのが一番ですね。

②検索結果のカルーセル表示部分にサイトが表示される

これは、モバイル探索結果で、トップニュース枠という別枠のカルーセルの中に、AMPに対応した記事を表示してもらえる、というものです。

検索結果の中から求めている情報を持った記事をユーザーは求めているので、みやすそうな記事を一瞬で見極めるのに、AMP対応ページは優秀といえます。

対応のデメリット

本記事の本題となります。
デメリット多すぎ。
導入面倒すぎ。

①デザインの変更を余儀なくされる

AMPに対応させる、ということは、サイトの表現方法をAMPに準拠させる必要があります。

つまり、できることが限られるということ。

サイトの表現に（知らず知らずに）使っていたタグが禁止されていることがままあるため、せっかく作り上げた自分のブログ（サイト）を見直す必要があります。

②対応プラグインを使用した場合、デザインが他サイトと似たような感じになる

WordPressでブログを管理している方は、プラグインでAMP導入すること自体はハードル低いです。

プラグインで生成されたサイト表示は、だいぶシンプルなものなので、AMP対応した他サイトと、見分けがつかなくなります。

③エラー対応面倒すぎ

ただ、HTMLをHTML AMPに切り替えるところまではやってくれるのですが、それによって生じるエラーは自分で直さないといけません。

そもそも、HTMLもCSSもチンプンカンプンのぶちくまからするとわからないことが一挙に押し寄せてきてパンク状態です。

導入までの備忘録

ここからは本当にメモがわりです。

何かのご参考になれば幸いですが、多分なんの解決にもならないと思う。

でも、一応、プログラムもHTMLもCSSも何も記述できないぶちくまでも、導入はできたので、皆さんもレッツトライです！

①wordpressの自分のサイトに「AMP for WP」というプラグインをインストール、有効化する。

なんと、これだけで、とりあえずAMP対応ページが生成されます。

ちなみに、Wordpressも「AMP」という、まんまなプラグインをリリースしており、多くの方はこのプラグインからAMP対応したページを作っています。

ので、何かトラブルあった時の解決方法は、たくさんの人で共有されているので「AMP」の方がお勧めではある。

②「AMP for WP」の設定を済ませる

「AMP」よりも使いやすいところは、この「AMP for WP」のプラグインだけで、Google Adsenseの設置や、Analiticsの有効化ができるところですね。

さらに、デザインも選択できるので、HTMLやCSSが記述できない（どころか読めもしない）くま達でもレイアウトができるというところ。

ぶちくまは見出しと、カエレバカスタマイズのCSSだけ記述しました。

勝手に関連記事も抜き出してくれているので、これはそのまま流用。その他設定も何となくやっていきます。

もし需要があれば詳しいところも書いていきますが、とりあえずはこんなで。

ちなみに、NIFの楽園さんの「【WordPress】【Plug-in】『AMP for WP– Accelerated Mobile Pages』の機能と使い方ーカスタマイズ編」が涙が出るほどわかりやすいので参考にしてます。

③Google Search Consoleを使ってAMP化したページを確認してみる。

テスト方法はいろいろありますが、ぶちくまはGoogle Search Consoleを使いました。

Googleさんが巡回（クロール）に来るまで待って、対応後数日してから右タブの「検索での見え方」の中に「Accelerated Mobile Pages」というものがあります。

そいつをチェックすると、面白いくらいにエラーを吐き出しているページがあるのを目の当たりにするはず。これが現状です。

ちなみに、生成されたAMPサイトURLに、「#development=1」をつけてディベロッパーツールで確認する、という方法もあります。

Google Chromeの右上の三本線のメニューボックスの中に、「その他のツール」→「デベロッパーツール」を開きます。

すると、何だか大量のアルファベットが襲いかかって来るので、うんざりするところ。ここの上部に「Console」メニューがあるので、そこを見てみると、「Powered by AMP ⚡HTML」うんちゃらなどという記述があります。

これがあれば、AMPとして認識はしてくれているみたいです。

④エラー対応として「JetPack」を無効

ちなみに、ぶちくまはもう一つほとんど役にも立たない記事（主にゲームなど）を寄せ集めている、別ブログ（このブログや）があるのですが、そちらで試して見たところ、なんとエラーがない！

まぁ、そっちはもともとほぼ装飾も何もないページなので、これでエラーが出たらプラグインの問題としか言いようがない。

とはいえ、ぶちくまどっとこむだって、そんなに大したことはしていない。

だってJavaScriptが何なのかすらわからないんだからね。

はて、何が原因なのかな、ということで、ネット検索してみると、JetPackというプラグインのPhoton機能というのが悪さをしているとのこと。

そして、エラーの出ないブログの方では有効化していない。

これだ、ということで、JetPackは無効にしたところ、AMPとして認識してもらえました。

ちなみに、出てきたエラーが、「img(画像？）のwitdh（幅）などが” ”（指定なし）となっており、無効」みたいな感じのやつでした。

多分、JetPackが何なのかは知らないけど、画像系に干渉するやつだったんでしょう。

⑤エラーは起きてないけど対応を要する案件

まだ終わってません。

なんとかAMPとしては認識してもらえませんが、エラーではないものの、なぜか、「カエレバ」さんのAmazon商品画像がとんでもない状態になっとる。

ちなみに、そういったエラーなどがどうして起きているのか、デザインは何のHTML、CSSの影響で表現されているのか、を調べるためにも、先のGoogleさんのデベロッパーツールが役に立ちます。

それで読んでみると、ちょっとどういうわけだかはわからないけど、画像が実際のサイズより、なぜか縦（height）に40％ほど圧縮されている、という記述があるのはわかった。

ただ、それがどうして起こっているのかがわからない。

そして、その記述に関与しているのが、どうやら「element.style」というものが、このような写真幅にしているみたいです。

ちょっと詐欺みたいな画像になってるので、なんとか直したいのですが、ここでお手上げ。

対策として、CSSを少し書き換えて（というか書き換えたものを拝借して）写真があまり目立たないようなサイズとなるように変更しました。

どうしたらいいか、続報ができることを願ってます。

⑥12/29追記　Table Of Contents Plusが原因と思われるエラー対応

全く年の瀬だというのにエラー対応することになるとは。
実は、この記事自体がAMPでエラーを起こしていました。
内容は、

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

というものでした。

自分でタグの設定をした覚えはないので、何かしら自動で勝手にタグ付けされているのだと思います。

多分、ですけど、ワードプレスでよく目次作成に利用されているTable of Contents Plusというプラグインがあるのですが、これが目次を引っ張ってくるために、見出し文にタグ付けしているのではないか、と、素人ながらに考えています。

ほんで、日本語はスルーして、アルファベット表記の部分をタグ付けの名前にしているみたいなので、見出しの中に「AMP」という単語があると、禁止されている属性「id」である「AMP」という値を出してしまっているのではないでしょうか。

まぁ、これはHTMLが全く読めないぶちくまの勝手な予想なのですが。

試しに、見出しの文章からAMPという文字を取り除いてやるとエラーは消えました。

こういうエラー対応していると、ちゃんと勉強してみたかったなぁという気持ちになりますね。

⑦結局、WordPressのテーマ変更が一番ラクだった件

はい、というわけで追記です。

ブログテーマをXeory BaseからSimplicityに変更しました。もうね、これだけで安定したAMPが楽しめますよ。

⑤のカエレバ にも対応しています。しかも、こちらで何もCSSいじらずにシンプルでみやすいリンクがボタン化されています。
至れり尽くせり。

シンプリシティではなくても、AMP対応しているテーマは昨年あたりから軒並み増えております。

Lionテーマは何もいじらずかっこいいし、今後有償版も出されるということで、今後もアップデートが期待できる優良テーマですね。

特にPV数も変化せず

まぁ、もともとそれほど多くの人が見に来るサイトではないので、激変することはないと思ったのですが、何も変わらず平穏無事な日々を過ごせてます（苦笑）

もちろん、今は検索ランキングにも影響ないとのことなので、ちょっと時期尚早だったのかもしれません。

エラーの対応ができないくらいだったら、エラーに対応したプラグインなどが出るのを待って、その間に記事内容を充実させて方がよっぽどメリットあるようです。

それに、苦労してデザインを起こしたところで、また仕様変更あればやり直しの可能性もありますし。

この辺りで妥協して、AMP記事は検索の着地点としてサイト内に誘導する入り口になればいいくらいの気持ちで、もう少し読みやすくて楽しい記事を書いて、少しでも訪問者がくるようなサイトにしたいと思いますよ

どちらにせよ、日に何人も来るようなサイトではない！（ポジティブ自虐）