【AMP】CocoonでAMP対応時、画像サイズ指定がとても重要
Wordpressで最近AMP対応を実施しました。
CocoonでのAMP設定方法
と言っても『Cocoon』であれば管理画面でチェックを入れるだけで設定完了と言う手軽さ。
・チェックボックスで有効＆無効の切替が可能
・カテゴリ別に除外が可能
・投稿画面で記事別に有効無効の切替も可能
素晴らしいですね！！
画像が崩れる
Before
これ、めっちゃ崩れてる・・・（汗）
理由としては、imgタグにサイズ指定いていないと崩れてしまうんですね。
とりあえず一括置換でサイズ指定は試みましたが、大体これでOKなはず。
After
うん。これならOKそうですね。
ちなみに注意点＆面倒なのが、％指定ができないんです。
最初100%x100%でよくないか？と思いやってみたのですがエラー扱い・・・（苦笑）
固定で定義している人なんて中々いないと思うので、こればかりは結構対応必要な人がいそう。
GoogleSeachConsole でエラー確認
こんな感じで、サーチコンソールでエラーのチェックが可能です。
実際にエラーが出ている記事が確認できるので、その記事のエラー内容を修正しましょう。
僕が今回遭遇したのは、
・タグ「table」の属性「border」に無効な値「2」が設定されています。
・属性「xx%"」はタグ「th」で使用できません。
・タグ「h2リーパーの」は許可されていません。
などでした。
大体HTMLの記述ミスでしたw
お恥ずかしい。
AMPの確認方法
URLを入れるとテストしてくれ、以下のような画面が出ればOKです。
まとめ
こんな感じで設定と少量の修正でAMP対応が完了しました。
今後スマホ検索はAMP有利になる気がしていますので、時間を見つけて対応することをおすすめします。
