内容をスキップ

製造業・メーカー企業のコンサルティング、Web制作、BtoBマーケティング

Web活用経営株式会社
  • メタバース企画
    • メタバースイベント企画
    • 自社企画
      • SUSHI DAO
      • 絶滅危惧種 山野草と暮らすまち
      • 弊社オフィス
    • Spatialブログ
    • Spatial 開発事例
  • Spatial研修・実験
    • GardenBeeについて
    • メタバース経済圏の可能性を実験するSUSHI DAO
    • YouTube動画
  • ダウンロード
  • Web運用
    • Web活用に対する考え方
    • Web運用について
    • BtoB向けeコマース&メタバース
    • 料金表
    • 実績・事例
    • 知識体系/ツール
      • Google対策(SEO)
      • Ahrefsについて
      • Web制作
      • Elementorについて
      • MAコンサルティング
      • BowNowについて
    • Web人材育成
    • お試し診断
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 会社案内
    • MVV
    • 会社概要
    • Q&A
お問い合せ
お問い合せ
Web活用経営株式会社

Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方

Home » Web活用経営(株)ブログ » Web構築 » Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方

Googleが発表した、WebページUX指標「コアウェブバイタル」には、「LCP」「FID」「CLS」の3つの指標があります。詳しくは Web担当者フォーラムの【重要】コアウェブバイタルとは? グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】に書かれています。

 

この中のCLS(Cumulative Layout Shift)とは「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。例えば画像を読み込む際、その画像サイズが指定されていなく、画像の次にはテキストが書かれていたとします。この場合、テキストの方が軽いため先に読み込まれます。まずテキストが読み込まれ、その間に画像が読み込まれますが、ブラウザは画像サイズが分かりません。読み込みながら「あ、この画像は500 x 500の画像だったのか」と理解し、テキストの上に縦横500の余白を作り、そこに画像を表示します。

 

この時ユーザーは、余白が後から作られることで、読みかけていたテキストが「下の方に追いやられる」という体験をします。これでは「読みにくい」ですよね。画像に縦横サイズが指定してあれば、ブラウザは最初から作るべき余白の大きさが分かりますので、このようなレイアウトの崩れ/後からレイアウトが動くということを起こさずに済みます。

 

しかし、スマートフォンにも対応しようと思いますと、「パソコンでは指定サイズで画像を表示しても、スマートフォンでは横100%表示にしたい」場面は多くあります。また、パソコンよりもスマートフォンの方が画面が高解像度ですから、「パソコンでは実際には幅1200pxの画像を600pxで表示し、スマートフォンでは横幅100%で表示する」という書き方をしたい場合もあるでしょう。どうしたらCLSエラーを起こさずにこの問題を解決できるのか?実験しました。画像はクリックすると別ウィンドウで拡大されます。

SEO対策 関連コンテンツ

  • テクニカルSEO監査チェックリスト by Moz
  • SEOで、タイトルタグに共通で「サイト名」等を表示する必要はあるのか?
  • SEOツールahrefsの使い方(動画)

文字だけを入力して、CLSエラーが無いことを確認する

まずは単純にテキストをいれ、このWebページでCLSエラーが無いことを確認します。確認にはGoogleクロームのアドオンを使用しています。

CLS 画像imgタグの書き方
まずは、単純な段落を書きます
CLS 画像imgタグの書き方
CLSエラーが無いことを確認します

WordPressの機能で画像を追加する

WordPressの「メディアを追加」から単純に数枚の画像を追加してみると、CLSエラーが出ます。

CLS 画像imgタグの書き方
「メディアを追加」から普通に画像を挿入してみます
CLS 画像imgタグの書き方
CLSエラーが出ます

WordPressが自動挿入したclassを削除

size-fullなど、画像サイズに関する指定が自動挿入されますので、これを削除すると、エラーが無くなりました。これは非常に当たり前でして、この時点ではimgタグにはwidthとheightがしっかり指定されていますので、レイアウトが崩れる要素がありません。

CLS 画像imgタグの書き方
imgタグからclassを削除
GoogleのCLS
CLSエラーが無くなりました。

しかし、これではレスポンシブになりません。この画像は横幅が900pxありますが、スマートフォンで見ると、画像がすべて入りきっていません。

GoogleのCLS

imgタグに横幅に関するCSSを指定

次は、HTMLの縦横指定がimgタグに書かれた状態で、CSSで横幅に関する指定を追加します。横幅は100%で、max-widthに実寸値を指定します。CLSエラーは無いものの、画像の縦横比が正しく保てていません。

GoogleのCLS
imgタグに横幅に関するCSS追加
GoogleのCLS
CLSエラーは無いものの、画像の縦横比が正しくない

スマホで見ても縦横比が保てていません。

GoogleのCLS

imgタグに横幅に関するCSSを指定したままHTMLを削除

では、HTMLの絶対値を削除してみるとどうでしょうか。実際のところ、わたしはこれまでこの方法でimgタグを書いてきたのですが…。当然エラーが出ます。今この状態を解決しようとしているのですから。

GoogleのCLS
imgタグからHTMLによる絶対値指定を削除
GoogleのCLS
当然、CLSエラーです

HTMLで画像の絶対値、CSSで相対値を指定する

そこで、一歩前に戻りまして、HTMLで縦横の絶対値が書き込まれた状態で、CSSにも縦横の情報を書きます。横は100%、max-width付き、縦はautoとします。これでCLSエラーが無くなりました。

GoogleのCLS
imgタグにHTMLで絶対値、CSSで相対値を指定
GoogleのCLS
CLSエラーが無くなりました

ページスピードインサイトのモバイルの画面でも、「累積レイアウトの変更」エラーはないことを確認しました。他の改善点はありますが。笑

ページスピードインサイト

これにより、imgタグには、HTMLで画像サイズの絶対値を指定し、CSSで相対値を指定することでCLSエラーを解消できることが分かりました。分かりやすいように全てインラインに書いていますが、実際には実寸はHTMLでインラインに、CSSは外部にまとめるのが良いでしょう。

SEO対策 関連コンテンツ

  • テクニカルSEO監査チェックリスト by Moz
  • SEOで、タイトルタグに共通で「サイト名」等を表示する必要はあるのか?
  • SEOツールahrefsの使い方(動画)

Home » Web活用経営(株)ブログ » Web構築 » Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方

Elementor
bownow

スタッフブログ

  • SUSHI DAO (0)
  • Web構築 (6)
  • Zoomでオンライン工場見学 (3)
  • お知らせ (6)
  • スタッフブログ (14)
  • メタバースSpatial.io (14)
  • 英語版Web制作 (2)

フィリピン

  • English (15)
  • アバカ (8)
  • 日本語 (12)

スタッフブログ新着記事

Spatial

Spatialビジネス活用研修

2022年11月13日
メタバースで田植え

プレスリリース『META田植えで地方創生』 ~メタバースで農業体験なんかできるのか?バーチャルの米で腹が満たせるか?~

2022年10月10日

GardenBeeが、日本人初のSpatial.io公式ガイドとして認定されました

2022年10月10日
メタバース田植え

メタバースで田植え、META田植え

2022年9月24日
ニュースレター
中小製造業のデジタル戦略
  • バックナンバー
  • BowNow・Elementorニュースはこちら
Web活用経営株式会社

技術に対話を起こし、 より良い世界に貢献する。

BtoB専門 & 中小企業向けの、Webコンサルティング、MAツール導入、Web制作会社です。ものづくり企業がITを活用して営業を強化することを専門としています。

  • コンサルティング
  • Web制作
  • 無料コース
  • 営業DXおもちゃ箱
  • 料金表
  • ウェビナー
  • 会社案内
  • 優先度お試し診断
  • 利用登録
  • ニュースレター
  • お問い合わせ
  • サイトマップ
  • 187-0032 東京都小平市小川町1-2591-18
  • 042-508-2904
  • info@web-keiei.com
  • メタバース企画
    • メタバースイベント企画
    • 自社企画
      • SUSHI DAO
      • 絶滅危惧種 山野草と暮らすまち
      • 弊社オフィス
    • Spatialブログ
    • Spatial 開発事例
  • Spatial研修・実験
    • GardenBeeについて
    • メタバース経済圏の可能性を実験するSUSHI DAO
    • YouTube動画
  • ダウンロード
  • Web運用
    • Web活用に対する考え方
    • Web運用について
    • BtoB向けeコマース&メタバース
    • 料金表
    • 実績・事例
    • 知識体系/ツール
      • Google対策(SEO)
      • Ahrefsについて
      • Web制作
      • Elementorについて
      • MAコンサルティング
      • BowNowについて
    • Web人材育成
    • お試し診断
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 会社案内
    • MVV
    • 会社概要
    • Q&A