「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

サーチコンソール「AMP HTML タ...
 
共有:
通知
すべてクリア

[解決済] サーチコンソール「AMP HTML タグにレイアウト属性がありません。」のエラーを解消したい

27 投稿
4 ユーザー
25 Likes
781 表示
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

初めて投稿いたします。

ブログもHTMLも初心者です。

カスタムHTMLブロックを使って、記事にAmazonアソシエイトを埋め込もうとしています。

しかし、「AMP HTML タグにレイアウト属性がありません。」「タグ「amp-iframe」に不完全なレイアウト属性が指定されています。たとえば、属性「width」や「height」を指定してください。」のエラーが解消されず困っております。

 

解消のために行ったことは、iframeの直後にwidth="120" height="240"を追加することと、途中の marginwidth="0" marginheight="0"を削除することです。Cocoonフォーラムの過去のトピックなど様々なサイトを参照したのですがダメでした。ほんとに初心者なので、お恥ずかしいのですが内容を理解せず試している状態です。

 

Amazonアソシエイトのコード(一部)はこちらです。

【編集前】
<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="・・(以下略)

【編集後】
<iframe width="120" height="240" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" scrolling="no" frameborder="0" src="・・(以下略)

 

いっそのことAmazonアソシエイトを埋め込むことは諦めようかなという気持ちにもなるのですが、藁にも縋る思いでこちらにご相談してみました。

どなたかお詳しい方、超初心者にもわかるようにご教示くださいますと幸いです。

どうぞよろしくお願いいたします。

 

環境情報:

----------------------------------------------
サイト名:もものすけブログ メンタルヨワヨワ主婦の四方山話
サイトURL: https://www.momonosukeblog.com 
ホームURL: https://www.momonosukeblog.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/mil-light/style.css
WordPressバージョン:6.0
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.6
カテゴリ数:17
タグ数:3
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:4726バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2020/06/logo.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
BackWPup 3.10.0
Broken Link Checker 1.11.16
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.6
Custom Taxonomy Order 3.4.3
Easy FancyBox 1.8.18
EWWW Image Optimizer 6.6.0
Google XML Sitemaps 4.1.5
Jetpack 11.1
Lazy Load 0.6.1
Regenerate Thumbnails 3.1.5
Responsive Lightbox & Gallery 2.4.1
Rich Table of Contents 1.3.4
Rinker 1.9.8
Simple 301 Redirects 2.0.6
SiteGuard WP Plugin 1.6.1
TablePress 1.14
Ultimate Addons for Gutenberg 1.25.6
What's New Generator 2.0.2
WP-PageNavi 2.94.0
WP Multibyte Patch 2.9
WP ULike 4.6.2
----------------------------------------------

   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

実際に、そのエラーが出ている状態のページを拝見させていただくことは可能でしょうか。
(AMPのページ)

実際のサイトの状態を確認させていただくのが、1番だと思います。

私はAMPには疎いですが、詳しい方もご確認くださると思います。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

お世話になります。

ご返信くださり誠にありがとうございます!
URLを掲載すればよろしいでしょうか?

https://www.momonosukeblog.com/2022/04/26/nadia_doll/?amp=1

こちらになります。

ちなみに、通常のURLは  https://www.momonosukeblog.com/2022/04/26/nadia_doll/  です。

なお、最初の投稿で掲載したコードに誤りがありました。
大変申し訳ございません

正しくは以下のようになります。

↓↓↓↓↓訂正後↓↓↓↓↓
【編集前】

<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src=" ・・・(以下略)

 

【編集後】

<iframe width="120" height="240" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" scrolling="no" frameborder="0" src="

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

以上です。

お力添えくださいますと本当に助かります。。

どうぞよろしくお願い致します。

This post was modified 2年前 3回 by momonosuke

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

投稿者:: @momonosuke

URLを掲載すればよろしいでしょうか?

https://www.momonosukeblog.com/2022/04/26/nadia_doll/?amp=1

はい、これで大丈夫です。

 

ちょっと、この時間帯は私はなかなか時間がとれませんので、確認や返信は厳しいかもしれないです。
他の方も、ご確認くださると思います。

 

とりあえず、AMPテストの結果を共有しておきます。

https://search.google.com/test/amp/result?id=gUAvG7G68pGYnB3cH0sLIQ

確かにエラーが出ているようです。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

とりあえず、通常ページ(非AMPページ)でエラーが出ています。

 
以下プラグインが原因のようです。
投稿者:: @momonosuke

Lazy Load 0.6.1

WordPress 5.5以降は、標準でネイティブLazyLoad(遅延読み込み)に対応しています。
(iframeは5.7以降。)

そのため、このプラグインの機能を必要としません。
(不要です。)

WordPress本体の機能と重複(コンフリクト:機能衝突)して、不具合が発生することも有り得るかと思いますので、アンインストールなさることをお勧めします。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさんさん

あと、以下のプラグインの「サイトアクセラレータ」機能も有効になっているかと思います。

投稿者:: @momonosuke

Jetpack 11.1

上記も、このフォーラムで過去拝見した限りでは、不具合が起きがちなような気がしますので、機能だけ無効化していただいた方が良さそうに思います。
(プラグインの無効化ではなく、機能のみの無効化。)

今回の事象に関係あるかは分かりませんけれど。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

みなさまありがとうございます!!(涙)

LazyLoadをアンインストールしてみます!


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16317
 

まずは通常ページのiframeが表示されていないので、mk2さんが書かれているように、Lazy Loadを無効にした方が良いかと思います。

ただ、いずれにせよRinker等はAMPに対応していないので、Rinkerを使用するのであれば、AMPは無効にした方が良いかと思います。


   
momonosuke reacted
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

わいひら様、みなさま
ありがとうございます!

①Lazy Loadを無効化しました。
②jetpackのサイトアクセラレータ機能を無効化しました。

”Rinker等はAMPに対応していない”
→そうなんですね!知りませんでした。

Rinkerに拘っているわけではないので、使用しないようにします。
ちなみに、Rinkerの代替となるような、AMP対応している商品リンク作成プラグインは存在するのでしょうか・・・?
もし存在しないのであれば、AMPを優先させたいので、今後は商品リンクを載せることは諦めるつもりです。

質問ばかりで大変恐縮です。

This post was modified 2年前 by momonosuke

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

すみません、言い忘れました。

AMPキャッシュを削除していただいて、よろしいでしょうか。

AMPのキャッシュ機能について
https://wp-cocoon.com/amp-cache/


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

mk2様

キャッシュ削除いたしました。

なお、キャッシュ削除についてはエラー解消のため他サイトを参照していた際に知り、検証開始前に必ず行うようにしております。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

みなさまお世話になります。
HTMLコードはそのままで、以下の対応を行いました。

①Lazy Loadを無効化しました
②jetpackのサイトアクセラレータ機能を無効化しました
③Rinkerの埋め込みを削除しました(今回お伝えしているページのみ)
④AMPキャッシュを削除しました
⑤AMPテストを行いました

エラーのまま、「HTMLタグにレイアウト属性がありません。」と言われてしまいます。
https://search.google.com/test/amp/result?id=8oYpdwIjrTSslirJ-KRGZQ

Amazonアソシエイト、またはAMPをあきらめた方がよいのでしょうか・・・(T_T)

みなさまの続報を心よりお待ちしております。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

すみません、私はこの時間帯なかなか時間がとれず、できても途切れ途切れにしか顔を出せないです。

ところで、ちょっとソースの確認がしづらいのですが・・・。

環境情報ではオンにはなっていますが、おそらくCocoonの高速化は無効になっていそうに思います。

投稿者:: @momonosuke

HTML縮小化:1
CSS縮小化:1

もし、有効化なさっていたら、無効化をお願い致します。

 

そして、ふと思うのですが、もしかして「WEXAL」をご利用でしょうか。
「WEXAL」にはいろいろ機能があるようで、全部は把握しておりませんが、「WEXAL」にはソースの圧縮機能もあったと思います。

それを無効化していたたけますでしょうか。
(支障がなければ、「WEXAL」そのものを無効化していただいた方が良いかもしれないです。)


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

mk2様

ご多忙中ご連絡ありがとうございます!

Cocoonの高速化を無効化しました
 有効化のままになっておりました。申し訳ありません。

②WEXALⓇ Page Speed Technology をOFFに変更しました。
 コノハのコントロールパネルでONからOFFにしました。

至らないところばかりで恐縮です。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

momonosukeさん

ちょっと何が起きているのか・・・というところが、今のところ分からないのですが・・・。

通常(非AMP)ページの以下の部分。

 
 
AMPページでは、ナディアのねんどろいどが表示されず、その他にも・・・という感じですよね。
 
 
ねんどろいどの部分に、何故かlayout・width・height属性がないんですよね。
その理由は分からないのですが・・・。
 
詳しい方を待つしかないかも・・・です。
(今日は時間切れ、明日は私は通院があり、あまり時間がとれないかも・・・です。)

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

別件で気になったのは、AMP用の自動広告コードです。

bodyタグ直後のコードに、IDがない気がします。

 
何故ないのかは分からないのですけれど。

   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

mk2様

いろいろ見て下さり本当にありがとうございます!

投稿者:: @mk2_mk2

ちょっと何が起きているのか・・・というところが、今のところ分からないのですが・・・。

そうなんです。
こちらは単純に記事を書いて上げているだけのつもりなので、どうしてこのような違いが生まれるのか分からないんです。

 

 

投稿者:: @mk2_mk2

別件で気になったのは、AMP用の自動広告コードです。

教えて下さりありがとうございます。

なお、アドセンスはまだ審査に合格していなくて、アドセンス認証コードを「Cocoon設定」ー「アクセス解析・認証」の「ヘッド用コード」に貼り付けている状態です。

 

お詳しい人を首を長くして待ちます。。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@momonosuke さん

私のテスト環境で問題を再現できず、原因が分かりません。momonosuke さんのサイトの投稿本文の全てをコピペして試したのですが、正常な amp-iframe が出力されます。

そのため、お使いのプラグイン、またはサーバーの設定が関係しているかもしれないと思いました。全てのプラグインの停止をお試しください。それでも問題が解決しない場合は、関係ないかもしれませんが コンテンツキャッシュ機能 の無効化をお試しください。

AMPを優先させたいので

とのことですが、その理由は何でしょうか?理由によっては、AMP 機能の停止をおすすめします。尚、私であれば、Cocoon の AMP 機能は有効にしません。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

Akira様

御教示下さりありがとうございます!
現象の再現まで試して下さり、恐縮です。

さっそく、プラグインの停止を試してみます。

投稿者:: @akira

AMPを優先させたいので

とのことですが、その理由は何でしょうか?理由によっては、AMP 機能の停止をおすすめします。尚、私であれば、Cocoon の AMP 機能は有効にしません。

不勉強なので恥ずかしい回答になりますが、モバイル端末での表示が早くできるなら早いほうがいいな、という単純な理由です。

 

もし差し支えなければ、Akira様がCocoonのAMP機能を有効にしない理由を教えて頂いてもよろしいでしょうか・・・。

 

お手数をお掛けして申し訳ありませんが、どうぞよろしくお願い致します。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

お世話になります。

Akira様のメッセージを参考に対応してみました。

全てのプラグインの停止
 →停止後にAMPテストを実施したところ、エラーが発生しました

コンテンツキャッシュ機能 の無効化
 →こちらは最初からOFFになっておりました
  改めてAMPテストを行いましたが、エラーが出ました

 

以上です。
エラーは解消されておりません。

取り急ぎご報告いたします。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@momonosuke さん

もし、プラグインを全て停止してもサーバーの設定を変更しても問題が解決しない場合は、その投稿ページの HTML を添付していただけないでしょうか。

※ 添付画像をご参照ください。投稿の編集ページの右上にある三点アイコンをクリック → コードエディターをクリック → 表示される HTML を新規ファイルにコピペ → そのファイルを添付ファイルでアップロードしてください。

もし差し支えなければ、Akira様がCocoonのAMP機能を有効にしない理由を教えて頂いてもよろしいでしょうか・・・。

一言で言えば、ものすごく面倒だからです。

2019 年 4 月までの AMP は、サイトを高速にする仕組みと謳っていました。しかし、2019 年 4 月以降は、優れたサイトを簡単に作るための仕組みと謳っています。

この「簡単に作る」ために、現在の AMP は AMP ページのみを作ることを推奨しています。ただ、Cocoon は、AMP ページと非 AMP ページの 2 ページを作る方法を採用しています。そのため、簡単にサイトを作れず、ものすごく手間がかかります。

また、AMP ページは高速ですが、最速ではありません。現在の AMP の仕様では、超えられない壁があります。今後改善されるかもしれませんが、自分でやる方が高速になるのも理由です。

尚、サイトによりますが、Cocoon の高速化設定を使えば非 AMP ページと AMP ページの表示速度は大きくは変わらないと思います。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

Akira様

ありがとうございます!

ものすごく勉強になります。。
詳細に教えて下さり本当にありがとうございます(涙)。

AMPは最速ではないんですね。
自分でも改めて調べます。

投稿者:: @akira

その投稿ページの HTML を添付していただけないでしょうか。

教えて頂いた方法で添付しました。
ご確認下さいますと幸いです。

どうぞよろしくお願い致します。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@momonosuke さん

HTML のアップロードありがとうございます。

Amazon のコードの部分が、以下の再利用ブロックのコードになっていました。

<!-- wp:block {"ref":1602} /-->

この部分を Amazon のコードを書いたカスタム HTML ブロックに変えて試したのですが、問題を再現できませんでした。

※ AMP エラーは出ずに、添付画像のとおり表示されます。尚、Cocoon 設定 > AMP タブにある「インラインスタイルを有効にする」のチェックを入れた状態です。非 AMP ページとは違い商品が縦に並ぶため、別途 CSS の指定が必要です。

もしかすると、再利用ブロックが問題の原因かもしれません。再利用ブロックをお使いにならず、カスタム HTML ブロックに Amazon のコードを書くとどうなるでしょうか。

This post was modified 2年前 by Akira

   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

Akira様

本当にありがとうございます。。
感謝してもしきれないです。

投稿者:: @akira

もしかすると、再利用ブロックが問題の原因かもしれません。再利用ブロックをお使いにならず、カスタム HTML ブロックに Amazon のコードを書くとどうなるでしょうか。

カスタムHTMLにコードを書いてみましたが、エラーは解消されませんでした。

https://search.google.com/test/amp/result?id=Rd6cxvHItuSSJugDs1bsHQ

 

AMPエラーが出る原因は分かりませんが、少なくとも通常ページでは問題なく表示されます。

 

もうこれ以上皆様のお時間を頂くのは申し訳ないですし、Akira様の仰るようにAMPがそこまで必須機能でないのであればAMPを無効化しようという考えに傾きつつあります。。


   
返信引用
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@momonosuke さん

お役に立てず申し訳ありません。

Cocoon の AMP 対応の処理を見ているのですが、width と height の 2 つの属性がなくなる原因が分かりません。


   
わいひら reacted
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

Akira様!

投稿者:: @akira

お役に立てず申し訳ありません。

そんなことつゆほども思っておりません!!
こんな初心者のエラー対応にお時間を割いてくださり感謝しかありません。。

投稿者:: @akira

width と height の 2 つの属性がなくなる原因が分かりません。

Akira様でも原因不明なのですね。。


   
返信引用
momonosuke
(@momonosuke)
Eminent Member Registered
結合: 2年前
投稿: 22
Topic starter  

皆様ご無沙汰しております。

その後のご連絡が遅くなり申し訳ありませんでした。

検討した結果、AMPは無効にすることに決めました。

今回のAMPエラー” HTML タグにレイアウト属性がありません。”が出た原因は不明のままですが、
この投稿はいったん”解決済”にしてクローズしようと思います。
もし原因を突き止めた方がいらっしゃいましたら、いつでも構いませんので教えて下さると幸いです。

ご多忙中にもかかわらず、私のような初心者の質問に丁寧に対応して下さった皆様、
本当にありがとうございました!

今後も質問させて頂くこともあるかもしれません。
その際はまたよろしくお願いいたします!


   
わいひら reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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