サイトや管理人についてはコチラをタップ!

【エラーが】初心者がAMPに手を出してボコボコにされた話【エグいっす】

サイト運営(&定期報告ログ)
スポンサーリンク

みなさん、AMPってご存知ですか?私は知りませんでした。

詳細はあとに書きますが、普段Google検索しているだけでも目にしている機能なんです。

サイト開設直後に、なんか表示が速いらしいという情報を目にしたので何も考えず導入しました。

そしたら大変だった。

そこで…

  • よく知らずにAMP対応したら
  • エラーにまみれた
  • よし…キレイにしてみよう!
  • エラーにボコボコにされた
  • そもそもAMP必要か?と目が覚めた

という流れについてまとめました。

自サイトのAMP化を考えている方、AMPに興味がある方の参考になれば幸いです。

「AMP」とは

改めて、AMPとは…

Accelerated Mobile Pages
加速           モバイル    ページ

モバイルのページを高速表示される方法

のこと。

ページ表示に時間がかかるのは、どんな時でもストレス。

そのための仕組みが、AMPなんです。

AMPプロジェクトは、すべての人にとって
Webをより良くすることを目的としたオープンソースイニシアチブです。

(自動翻訳感満載)

AMP - a web component framework to easily create user-first web experiences
Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to b......

どうやって判断する?

このAMPは検索結果から判断可能です。

Google検索を行った際に、↓のようにURLの頭にアイコンがつくことがあります。

AMPの見分け方

このマークがついているサイトが、AMP=高速表示に対応しているよ!の印です。

通常ページとどう違う?

URLが異なります。

 通常ページ  指定したURL
 AMPページ 指定したURL + ?amp=1

記事の見た目は、テーマなどにもよりますが大きくは変わりません。

Cocoonの場合はこんな感じ。

 通常ページ 
通常ページスクリーンショット

 AMPページ
AMPページスクリーンショット

こんな感じで、読者に優しい機能……のように見えますが、運営側になると話が変わってきます。

素人が適当に手を出したらボコボコにされます。

されました(小声)


WordPressテーマ『Cocoon』には、チェックだけでAMP対応になる設定があるんです。

AMP有効化

これをふんふんと読んだだけで導入してしまった私に待っていたのは、エラー通知の嵐でした。

幸いにも私は色んな種類のエラーメッセージはなく、いくつかの通知程度で済みましたが。

ちなみに自分のサイトにAMPエラーが出ているかはGoogle Search Consoleで確認できます。

ただし修正の即時反映はされないので、お急ぎの方はコチラ

「リンクされている AMP バージョンが無効です」

[エラー] カスタム JavaScript は使用できません。

心当たりがない。混乱。(※正確にはあるんだけど。詳細は後述)

カスタムも別にしてないし…と困っていると、どうやら以下の箇所はAMPへの影響があるよう。

  • 問い合わせフォーム(コメント欄は影響なし)
  • 各種広告

そこでCocoon公式フォーラムを参考にしつつ、これらの項目を正しくすることに。

 問い合わせフォームを修正

固定ページ一覧
編集
画面右側の 文書

AMPページを生成しない」にチェック。

 補足 
「どうしてもエラーが解決できない」「AMP対策するのが大変」
という記事への対処法にもなります。

(根本的な解決にはなりませんが)

AMPページを生成しない

 

 広告表示設定を「分割」

広告で使うコードはAMPエラーの大きな一因。

そのため、サイト内広告はウィジェットで分割管理することでエラーを解消できます。

「通常ページ(非AMP)」
「AMPページ用」

に分けることで、それぞれに適した表示設定ができます。

管理人
管理人

他の方法もあるかもしれませんが、私はウィジェットを使うのが楽チンです

設定は簡単。

管理画面「外観
⇒ ウィジェット「利用できるウィジェット」から

[C] 広告
[C] 広告(モバイル用)
[C] 広告(PC用)

これらを使って「通常ページ」「AMPページ」それぞれに広告コードを貼ることで、AMP対応になります。

ウィジェット配置例

もう少しわかりやすくすると

例えばパソコンとモバイルで別の広告を表示したい場合は、こんな感じ。

[C] 広告(PC用)
[C] 広告(モバイル用) 通常ページ用  
[C] 広告(モバイル用) AMPページ用 

パソコン・モバイル共通で広告を表示したい場合は、こんな感じ。

[C] 広告  通常ページ用  
[C] 広告  AMPページ用 

そしたら、

ウィジェットの表示設定「チェック・入力したページで表示/非表示」を使って

通常ページの広告はAMPページで非表示になるよう、

AMPページの広告は通常ページで非表示になるよう設定するといいです。

あるいはそれぞれ「表示」設定でもOKです。

通常ページ表示設定

AMP表示設定

これで、通常・AMP用にあわせて広告表示ができます。

 無料プランにご用心

以上の設定をしても、エラーは止まりませんでした。

それもそのはず。見落としがあったのです。

よく確認してみると、エラー箇所が

<script type=”text/javascript” charset=”UTF-8″ src=”//******.value-domain.***/***********.**” async=”async”></script>
※表示していいのかわからないので一部伏字に。

>”//******.value-domain.***/***********.**”

これレンタルサーバーの広告じゃん。
管理人
管理人

そうだ(おっそ)

私はレンタルサーバーを無料で借りていましたので、広告が常に表示されていたのです。

XREA無料プラン広告バナー

ここが引っ掛かってた。

広告に使われているjavascriptは、AMP非対応!

これがエラーの原因だったんですね。

有料プランに切り替えれば広告は出なくなるので、有料切り替えで解消しました…。

[エラー] タグ「style amp-custom」で指定された作成者のスタイルシート~~上限は 50000 バイトです。

どうやらAMPにはCSSカスタマイズの上限もあるみたいで。

カスタマイズを続けたらこんなエラーが出るようになりました。

CSSを厳選してこの量なので、対処は一旦放置。

Cocoon公式では対処法をまとめてくれています。

[警告] 推奨サイズより大きい画像を指定してください

これはエラー判定ではないんだけども、警告が1件発生。

エラーは赤、警告は黄

推奨サイズより大きい画像を指定してください。だって。

Googleは画像の推奨サイズというのがあって、1200ピクセル以上とのこと。

ただ、これは放置してもいいそうです。私は1件のみだったので差し替え。

現状はデメリットが大きすぎる

とまぁ、自分のわかる範囲内でAMPの情報収集や修正をしておりましたが…

おさまるどころか増えていく。

解消しているうちに、私の糸が切れました。

AMPも、やめました。


AMPのメリットって何だろうか?

高速表示以外によく言われているものは、この辺です。

  • 検索結果でカルーセル表示がされる「かも」
  • 離脱率や信頼度などの低下防止
  • ユーザーのストレス緩和

検索結果で有利になるという情報もありますが、Googleはこれを否定しています。

実際検索結果に有利であればとっくに色んなサイトが力を入れていることでしょうw。

ということは、間接的に有利かも?将来的に有利かも?といった不確定要素のひとつでしかありません。

一方、AMPに適応するための条件は?

  • 多すぎる「対象外」
  • 大小様々な表示の違い
  • カスタマイズのたびに不具合リスク
  • AMP用カスタマイズが追加で必要な場合も

ちらっとAMP対応しただけでも…

JavaScriptなど非対応機能で壁にぶつかったり、商品リンク先の画像がつぶれたり、細かな表示の違いが見られました。

ユーザーにストレスなく記事を提供できるとはいえ、その分運営側がストレス。

サイト運営初心者に、この戦いを続ける体力はあるか?
いいえありません(即答)

快適さはいつだって気にしたい

サイト運営の目的は、勿論AMP対応ではなく

自分が伝えたいことを伝えられたり、作れたりと「サイト運営を通してやりたいことを達成すること」ではないでしょうか。

今後AMPが重要なSEO対策となる可能性は残されてますが、現状はAMP対応に注力したい感じではないかなと。

何より

快適に見てもらうための工夫は、
AMP関係なく常に意識したいこと

ですね。


以上、初心者がエラーでボコボコにされた話でした。

ひとつフォローしておくと、カスタマイズを最低限で終わらせるつもりだったり、積極的にサイトデザインする予定が無ければ、AMP対応は有効だと思います。

ただ、そうでなければ有益な記事を提供していくことを心がけるほうが、どちらも幸せではないでしょうか。

管理人
管理人

我疲労

この記事を書いた人
ちゅる

北海道の30代女性。

周りの評価欲しさに仕事を頑張ったら、心身が壊れて20代が強制終了。

強制終了の原因は自分だと気づいたので、思考や心の話から趣味に関する情報まで発信中。

Twitterでは「今日の気付き」的な言葉を毎日つぶやいてます。

>>詳しくはコチラ

スポンサーリンク
スポンサーリンク
スキマ
スポンサーリンク
スキマ
とにかき。―とにかく何かに書きたいのです。

タイトルとURLをコピーしました