エラー「コンテンツの幅が画面の幅を超えています」‐を解決する方法

テキスト
word press
広告1
.Word Pressのテーマ【Cocoon】を使用中の方が画像サイズを最適化したい人のための記事です。

「ブログ記事」書くの大変ですよね。

やっとの思いで書き上げ、写真も選んで張り付け公開!

数日後、[Google Searchi Console Team]からメールが来ました。

「コンテンツの幅が画面の幅を超えています」との事・・

この問題を解消してGoogleに報告しないとSEOに影響があるらしいです。

このエラーを簡単に対処した方法!解説します。

Word Press記事に適した画像サイズは?

スマホやデジカメで撮影したままの画像を、「ブログ」にそのまんま使うのはNG

実はスマホやデジカメで撮った画像って、”デカイ”です。

“デカイ画像”はページの読み込みが遅くなったり、閲覧者の画面からはみ出て表示されます。

なので、画像サイズを最適化してから「ブログ」に投稿しましょう。

最適な画像サイズは?

  • GoogleとTwitter推奨:画像サイズ「幅1200px以上」
  • OGP画像:推奨:「画像サイズ1200×630」
OGP画像とは?TwitterやFacebookで「ブログ」のURLがシェアされたとき表示される画像
  • Cocoonフォーラム推奨:「横幅1280px以上、できれば1920px」
  • Cocoon利用者口コミ:「画像サイズ1200×630」

結論:【1200px×630px】が最適サイズです。

おすすめのプラグイン

【Ewww Image optimizer】画像圧縮のプラグインです。

  • インストールしとくだけで自動で画像を勝手に圧縮してくれる
  • メタデータを削除してくれる。(写真の位置情報を削除してくれセキュリティ状も安心)
  • リサイズする画像サイズを指定できる

更にすごいことに、インストール前の画像までも最適化してくれちゃいます!

ただし!

モバイルの画像が消えてします

ひとつ問題が、「Word Pressの”Cocoon”と相性が悪いです」

画像を圧縮してくれるプラグインの[Ewww Image optimizer]と

Word Pressの”Cocoon”どちらにも「Lazy load」が搭載されていてこれが不具合の原因で「ブログ」の画像が見えなくなっています。

対処方法

[Ewww Image optimizer]の設定変更する

Lazy load設定の”遅延読み込み”のLazy loadを有効にするのチェックを外すことで解決します。

画像の圧縮機能はそんまま残ります。

まとめ

Word Press Cocoon利用で画像サイズを自動で最適化してくれる

プラグイン[Ewww Image optimizer]を使ってみて起きた不具合の

対処方法を解説しました。

[Google Searchi Console Team]から届いたエラー

「コンテンツの幅が画面の幅を超えています」

この問題もこのプラグインのおかげで解決できました。

画像サイズが最適化して、ネット環境も最適化していきましょう!

国内最速のプロバイダーは【ConoHa wing】自分も使っています

コメント

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