この度もしかしたらお門違いかもしれませんが藁にも縋る思いで質問させてください。
テーマはコクーンを使用しているのですが、記事本文下のSNSシェアのTwitterでシェアするボタンからツイッターでリンクを埋め込みアクセスしてみるとものの見事にデザインが崩れています。おそらくAMP対応をしてくれていません。(エラー画像参照:例、ヘッダーがぐちゃっと潰れている)
他のSNSシェアは問題なくAMP表示されますし、パソコンからだと正常に表示されるのでおそらくAMP非対応が原因かと思われます。
Twitterのこともあるのでお門違いかもしれませんが、もしよければよろしくお願いします。
>くまぞ~様
ご相談ありがとうございます。
いくつか確認事項をまとめましたのでご確認下さい。
僕自身AMP対応は積極的に行っていないのと、cocoonも利用したことがないので参考までに。
目次
公式の情報・フォーラムを確認
Cocoonといった国産テーマの魅力は、利用者が多く情報が豊富にある点と、Cocoon作者さんのようにフォーラムを設けたりしている点です。
まずは公式の情報から確認し、フォーラムの利用も検討してみましょう。
AMP対応についてはこちら
https://wp-cocoon.com/amp/
AMPのURLになっているか?
上記ページを確認すると、AMPのアドレスはURL末尾に/?amp=1 をつけたもののようです。
確認したいURL+/?amp=1 がAMPのURLとなります。頂いたURLはAMPのURLでは無いようなので、AMPのURLで確認をしてみましょう。
AMPは有効か?
AMPのチェックをするには、Googleのチェックサービスを利用してみましょう。
https://search.google.com/test/amp
こちらの前述のAMPアドレスを入れれば、チェックできます。(/?amp=1 をつけて確認したところ、有効ではないとなりました。)
設定でAMPが有効化されているかなども確認してみましょう。
スマホの検索結果にAMPページが表示されているか
貴サイト名などでスマホ検索したときに、AMPページが表示されているかも確認してみましょう。
AMPページにはAMPアイコンが表示されます。(丸に雷マーク)
貴サイト名でGoogleスマホ検索してみましたが、AMPアイコンは出ていませんでした。
「Cocoon テーマ」などで検索すれば公式サイトはAMPアイコンが表示され、アクセスした時のURLにも/?amp=1 が入っています。
なぜAMPが有効になっていないのか
有効になっていないとしたら、様々な原因が考えられます。
テーマの設定以外にも原因がある場合が多いからです。
例えばプラグインや自分で追加したコード、投稿内のHTMLコードがAMPの仕様に準拠していないものだと、AMPはエラーになるでしょう。
ヘッダー画像の崩れについて
以下は根本的な解決策ではありませんが、AMPのURLにアクセスすると確かにヘッダー画像は添付頂いたようになっていますね。
開発者ツールで確認すると画像部分に以下のCSSが設定されています。
.i-amphtml-layout-size-defined .i-amphtml-fill-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
positionのbsoluteをrelativeなどにすると画像は適正サイズで表示されました。しかし、このCSS修正はテーマの根幹部分を修正することになりますし、この記述自体に問題があるわけではないと思います。
まずは別の所から原因を探っていく形が良いでしょう。
1.AMP設定は適正か
2.AMPは正しく反映されているか
3.プラグインや自身で行った記述が妨げになっていないか
4.そして、公式をチェック&フォーラムの利用
といった形で進めて行くのが良いかもしれませんね。
解決策ではなくて恐縮ですが、参考にして頂ければ幸いです。