スポンサーリンク

XeoryBaseからCocoonへテーマ変更 AMP対応後に発生したエラー等

WordPress
この記事は約7分で読めます。

この記事では、XeoryBaseからCocoonへテーマ変更し、AMP対応後に発生したエラー等を書いています。
「AMPへの対応方法」や「通常ページとAMPページの表示(見た目)の比較」、「発生したGoogle Search Consoleエラー」をまとめてみました。

私

Googleがサイトを『AMP対応』にすると人がたくさん来て、収益が向上するって教えてくれた!(自動最適化)

バズ部の『XeoryBase』テーマを使っていた頃から、Googleに勧められていたサイトの最適化対応の一つがAMP対応です。

AMP(Accelerated Mobile Pages)とは
AMPとは、Googleが中心となって開発したモバイル端末でのWEBページの表示を高速化する為のもの。PCでの速度は変わらない。
私

サイト内のページや広告の表示速度が爆速になるので、見てくれる人のストレスが減る!結果、ページビューや収益も向上する!

私

メリットしかない…。これはやるしかない。

ということで、AMP対応が無料で手軽にできそうな『Cocoon』テーマを使わせて頂き、当サイトをAMP対応にしてみました。

スポンサーリンク

CocoonでAMP対応する方法

CocoonでAMP対応するには、まずWordPressの管理画面から「①Cocoon設定」を選択します。

その後「②AMP」タブを開いて「③AMP機能を有効化する」にチェックを入れて、「④変更をまとめて保存」ボタンを押します。

私

これだけでOK。30秒で完了。

AMP対応ページの確認方法

私

あんなに簡単な方法で本当にAMP対応のページができてるの?

不安になり、AMP対応ページの表示方法を調べてみると、Cocoonでは2通りの表示方法があるとのこと。

1.ログインした状態でAMP対応ページを表示したいページを開き、画面下部にある【AMPページへ】をクリックする(簡単な方法)


これはCocoonの標準機能を使用した表示方法で、Cocoonには最初から上画像のような様々な表示確認用のツールバーが用意されています。

『Google AMPテスト』や『レスポンシブテスト』もよく使用しますので、覚えておくと便利です。

2.ページURLに対して「?amp=1」というクエリを加えてブラウザで開く

【https://taniado.com/◎◎◎◎?amp=1

これはAMP対応ができているか確認したいページURLの最後に「?amp=1」と手入力する方法です。

この「?amp=1」を自動入力してくれるのが【1.の「AMPページへ」ボタン】となります。

通常ページとAMP対応ページの比較

表示速度を高めるため、装飾などが少ないシンプルなページが多いAMP対応ページですが、Cocoonテーマの場合、通常ページとの差はほとんどありません

上画像は、当サイトの『通常ページ(画像左)』と『AMP対応ページ(画像右)』を比較したものです。

私

間違い探しレベルや…。
スマホでもほとんど同じ表示でしたよ。

Cocoonテーマに搭載されている独自の装飾機能を使った場合、通常ページとAMP対応ページでほとんど同じCSSが適用されますが、テーマ変更前に別の装飾機能を使用していた場合などは、AMPページでCSSが適用されず表示に違いが出ることがありますので注意しましょう。
スポンサーリンク

XeoryBaseからCocoonへテーマ変更、AMP対応後に発生したGoogle Search Consoleのエラー

ここでは、XeoryBaseからCocoonへテーマ変更し、AMP対応後に発生したGoogle Search Consoleのエラーをまとめています。

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

一番最初に検出されたGoogle Search Consoleのエラーは『推奨サイズより大きい画像を指定してください』というものでした。

調べてみると、アイキャッチ画像の幅が1200ピクセル以下の時に出るエラーということがわかりました。

この1200ピクセルという幅の指定は、比較的新しいGoogleの機能「Discover」でカード表示を出すための指定幅で、無理に訂正する必要のないエラーとのことです。

ただ当サイトの場合はまだ記事数も少ないですし、Cocoonのアイキャッチの推奨画像サイズが1280×1280px以上とXeoryBaseに比べてかなり大きいということもありましたので、記事のリライトと同時にアイキャッチ画像も修正しています。

許可されていない属性がHTMLタグ「FORM[method=POST]にあります

次に検出されたGoogle Search Consoleのエラーは『許可されていない属性がHTMLタグ「FORM[method=POST]にあります』というものです。

これは『Contact Form 7』という問い合わせフォームを作成するプラグインが原因で発生するエラーとなります。

『Contact Form 7』がAMP対応でないために発生しているエラーとなりますので、このプラグインを使用して作成したお問い合わせページ(*私の場合は固定ページ)をAMPページから除外することでこのエラーは解消されます。

具体的なエラーの解消方法は下記の通りです。

1.『Contact Form 7』を設置している固定ページを開く。
2.固定ページ内、右メニューにある「AMP設定」で「AMPページを生成しない」にチェックを入れて、更新する。

3.『Google Search Console』→『AMP』内の該当エラーページで「修正を検証」ボタンをクリックする。

4.数日後にエラー解消メールが届きます。
サイドバーに『Contact Form 7』を使用したお問い合わせフォームを設置している方は、上記のエラー解消方法が使えませんので、固定ページにてお問い合わせページを新たに作成し、サイドバーには固定ページへのリンクを作成するのが良いかと思います。
XeoryBaseからCocoonへテーマ変更し、AMP機能を有効化した後、当サイトに発生したSearch Consoleエラーは上記の2つでした。
スポンサーリンク

AMP表示時に埋め込んだインスタ投稿の間の本文が消える

これはSearch Consoleエラーではありませんが、私が管理している他のサイトで発生した不具合です。

この問題は『Cocoonフォーラム』に投稿し解決致しましたが、念の為追記しておきます。

AMP表示時に埋め込んだインスタ投稿の間の本文が消える
お世話になります。 Instagramを埋め込んだ記事をAMP表示にした際に、 「記事の最初に埋め込んだInstagram」と「記事の最後に埋め込んだInstagram」の間の本文が全て表示されなくなってしまいます。 埋め込み方法などになにか問題があるのでしょうか...

不具合発生時はAMP表示の際「記事の最初に埋め込んだInstagram」と「記事の最後に埋め込んだInstagram」の間の本文が全て消えてしまうという状態でした。

この時「Cocoon設定」→「高速化」から「HTMLを縮小化する」のチェックを外せば、本文は表示されるようになりました

しかし、このままでは「HTMLを縮小化する」機能が利用できない状態になりますので、Cocoon作成者のわいひらさんに質問したところ、原因を特定後すぐに修正してくれました。

ですので、次回のCocoonテーマアップデート以降は同じような状況になる可能性は低いかと思われます。

私

半日ぐらいで解決してくれました。まじCocoonのサポートは優秀すぎる…。

XeoryBaseからCocoonへテーマ変更 AMP対応後に発生したエラーまとめ

今回は、XeoryBaseからCocoonへテーマ変更し、AMP対応後に発生したエラーなどをまとめてみました。

当サイトの場合はこの記事をご覧頂いた通り、大きなエラーもなくスムーズにAMP対応が完了しました。

普段からあまりカスタマイズをしておらず、記事数も少ないサイトでしたらCocoonへテーマ変更し「AMP機能を有効化する」にチェックを入れるだけで、デザイン面なども満足いくレベルのAMP対応ができそうです。

アクセス数や収益の変化については現在計測中で、もう1ヶ月程様子をみた後、記事にまとめる予定です。

私

無料テーマでAMP対応したい方は、2020年5月現在は『Cocoon』一択かもしれません。

WordPress
スポンサーリンク
たにぽよをフォローする
たにぽよ

当サイトの運営者。
30超えてからいつもしんどい。

・32歳男
・大阪府出身→沖縄県在住
・個人事業主(アフィリエイト&クラウドワーク)

『趣味』
・オンライン麻雀(天鳳)
・格闘技観戦(プロレス・大相撲・ボクシング)

このサイトの他
沖縄巡り.com(沖縄の芸能人・観光・グルメ情報まとめサイト)』
天鳳マニアクラブ(オンライン麻雀ファンサイト)』
などを運営中。

たにぽよをフォローする
たにあど

コメント

おすすめサーバーランキング

アフィリエイター&ブロガー満足度No.1!

・日本で唯一の”LiteSpeed公式パートナー”
・元アフィリエイターが立ち上げたレンタルサーバー
・最高レベルのサイト表示速度
・無料独自SSL証明書対応
・復元無料の自動バックアップ機能
・WordPressクイックスタート機能
・大容量のディスク容量&転送量(高PVサイトも安心)
・サイト運用数20万件以上

格安料金ですぐに記事が書ける!

・月額費用が480円からと格安
・大容量のディスク容量&転送量(高PVサイトも安心)
・無料独自SSL証明書対応
・プランを自由自在に変更できる
・同サービス内でドメイン管理が可能
・「WordPress快速セットアップ機能」で簡単にSSL対応のWordPressサイトを作成できる
・安全性が高い遠隔地での自動バックアップも標準搭載(無料)
・データベース&ファイルの無料自動復旧可能(14日以内)

コストパフォーマンスNo.1!

・LiteSpeed対応のサーバーでは最安値(月額費用290円~)
・WordPressワンタッチインストール機能
・他サーバーからのサイトデータの引越代行が無料
・費用に対して利用できるサーバーのスペックが高い
・独自ドメインが無制限で利用できる
・ディスクの拡張だけでなくCPU、メモリを増強可能
・無料独自SSL証明書対応
・他のサイトが原因で自分のサイトが表示できなくなることがない
・24時間365日のサポートが受けられる
・無料お試しトライアルあり

低価格!初心者におすすめ!

・月額99円からという超低価格プランあり
・LiteSpeedを利用できるプランでも月額469円~
・無料独自SSL証明書対応
・自動バックアップ機能あり
・障害情報が少ない(安定性が高い)
・サポートの評価も高い

国内最速!サポート◎

・WEBサーバーの応答速度で国内最速を獲得している
・大容量のディスク容量&転送量(高PVサイトも安心)
・自動バックアップ機能あり
・データベース&ファイルの無料自動復旧可能(14日以内)
・WordPressかんたんインストール機能あり
・簡単サーバー移行ツールが用意されており、サイトの引越しが容易
・プランを自由自在に変更できる
・サポートの対応が迅速丁寧

初心者向き!安心と信頼の老舗!

・国内最大級のレンタルサーバー
・月額100円からという超低価格プランあり
・サーバーの管理画面が使いやすい
・これまでに170万人が利用している安心感

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