サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年11月8日 18:00
wordpressでCocoonを使ってブログをやっております。最近Cocoonの機能でAMP化したところ、Googleさんから「HTML タグに必須属性がありません」と指摘されました。当該箇所は「ivedoor 相互RSS」を表示させている部分で、「必須属性「rel」がタグ「link」にありません」とのこと。( 添付ファイル参照)
私の場合はサイドバーに表示させているので、全ページに影響するため一旦削除し、LINE株式会社 livedoorお客様サポートセンターに何か解決策はあるでしょうかと連絡しました。
すると本日11月8日回答があり、その内容は
livedoorサービスをご利用いただきありがとうございます。
LINE株式会社 livedoorお客様サポートセンターです。
お問合せいただきましたlivedoor 相互RSSサービスに関しましては、
誠に恐れ入りますが、AMPに対応しておりませんので、
何卒ご了承くださいますようお願いします。
というものでした。
Cocoonだけでなく広い範囲で使われているサービスですが、残念ながらAMP化するなら今のところは表示させないしか手がないようです。
以上既出かも知れませんが、ご参考まで。
トピックスターター 2021年11月9日 00:46
すみません…「l」が抜けておりました…
livedoor 相互RSSサービス です…
2021年11月9日 16:02
livedoor 相互RSSサービスを使ったことがなかったのですが、試してみました。
AMP ページでも表示できました。また、「レポート」の「クリックログ」に、AMP ページでのクリック数が反映されていました。
やったことは、こんな感じです。
まず、「貼付けコード」を取得します。「貼付けコード」には「通常版」と「iframe版」がありますが、使用するのは「iframe版」です。
「iframe版」の基本的なコードは、このようなものです。
<iframe src="https://blogroll.livedoor.net/012345/iframe" allowtransparency="true"></iframe>
このコードに、width 属性と height 属性を追加します。例えば、こんな感じです。
<iframe
width="300"
height="100"
src="https://blogroll.livedoor.net/012345/iframe"
allowtransparency="true"></iframe>
あとは、このコードを表示したい場所に追加します。AMP への対応は Cocoon が自動的に行なってくれます。
● 注意点
width 属性と height 属性を追加した「iframe版」のコードで表示すると、通常ページと AMP ページとで見た目が若干異なります。
見た目は、CSS で調整できます。また、通常ページには「通常版」、AMP ページには「iframe版」を使えば、CSS での調整は不要かもしれません。
トピックスターター 2021年11月9日 20:46
@akira さん、解決策ありがとうございました！
通常版がダメだったのでiframe版も試し、それでもだめだったのでローテクな私にはお手上げでした。
アドバイスどおりにやってみたところ、無事AMPテストでも問題なしでした。
この投稿が他のユーザーさんの参考になれば幸いです。
トピックスターター 2021年11月11日 11:07
一旦解決したかと思った数日後、Google Search Consoleから再度エラーが検出されたとの連絡がありました。
「AMP HTML タグの属性で指定されたレイアウトが無効です」
問題の箇所は前回と同じくlivedoor 相互RSSサービス,内容は「必須属性height」がないとのこと。あと「amp-iframe」に変わっています。(添付ファイルご参照下さい)
1)Google AMPテストで問題がなかったのに、何故また違う属性で問題ありに変わったのか
2)上記とは別問題かも知れませんが、エラー回避のためサイドバーからlivedoor 相互RSSサービスを含むウイジットを外し、実際にこのウイジットが外れていることAMPオフ/オン両方の状態で確認し、そのページでGoogle AMPテストを行ったところ、何故か該当ウイジットが外れておらず、そのためAMPエラーが解消されない
という状態です。
実際にサイトを見て表示されていないのに、Google AMPテストでは存在する？というわけのわからない状態になって困っています。
(雑談コーナーの域を超えているかも知れませんが、ご容赦下さい)
2021年11月11日 12:07
問題の箇所は前回と同じくlivedoor 相互RSSサービス,内容は「必須属性height」がないとのこと。
以下のように、width 属性と height 属性は必須です。height 属性はありますか？
<iframe
width="300"
height="100"
src="https://blogroll.livedoor.net/012345/iframe"
allowtransparency="true"></iframe>
あと「amp-iframe」に変わっています。
はい。変わります。
AMP では iframe タグではなく、amp-iframe タグを使用します。そして、iframe を amp-iframe にする変換を Cocoon が行っています。
何故か該当ウイジットが外れておらず、そのためAMPエラーが解消されない
Cocoon 設定 → 「キャッシュ削除」にある「AMPキャッシュの削除」をお試しください。
サイトの管理者には、サイトを変更すれば、その変更が AMP ページですぐに反映されているように見えます。
しかし、管理者以外には、「AMPキャッシュの削除」をするか、キャッシュが作られてから 1 日経たないと変更が反映されません。管理者以外には、Google クローラーも含まれます。
この投稿は3年前ずつAkiraに変更されました
トピックスターター 2021年11月11日 12:51
@akira 早速のアドバイスありがとうございました。
属性は、当初アドバイスいただいたときから下記のように両方ともあります。
<iframe
width="300"
height="100"
src="https://blogroll.livedoor.net/138473/iframe"
allowtransparency="true"></iframe>
この状態でGoogle AMPテストは一旦クリアしていました。その後またエラー報告が来たのか(それもheightだけ)よくわかりません。
AMPキャッシュの削除」は全く知りませんでした。ブラウザ再起動とかもしたのですが、こういう機能があったとは。おかげさまでこれで今はテストクリアとなりました。heightなしと指摘された件もこれと関係があるのかも知れません。
どうもありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。