Skip to content

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

Web活用経営株式会社
  • Our Work
    • Concept for Web strategy
    • Marketing automation
    • SEO – Ahrefs
    • Cases
  • Services
    • SCRUM Web Development
お問い合せ
お問い合せ
Web活用経営株式会社

How to write img tag to eliminate CLS error, Google’s new UX index

Home » Web活用経営(株)ブログ » Web構築 » How to write img tag to eliminate CLS error, Google’s new UX index

The web page UX index “Core Web Vital” announced by Google has three indexes, “LCP”, “FID”, and “CLS”. For more information, see the Web Contact Forum[Important] What is Core Web Vital? Easy-to-understand explanation of the meaning and standard values of Google’s UX index LCP / FID / CLS [SEO information summary]It is written in.

Among them, CLS (Cumulative Layout Shift) means “cumulative layout change” and is an index showing the stability of visual elements. For example, suppose that when you load an image, the image size is not specified and the text is written after the image. In this case, the text is lighter and will be read first. The text is loaded first, then the image is loaded in the meantime, but the browser doesn’t know the image size. While reading, I understand “Oh, was this image a 500 x 500 image?”, Create 500 vertical and horizontal margins on the text, and display the image there.

At this time, the user experiences that the text that was being read is “pushed to the bottom” by creating a margin later. This is “difficult to read”, isn’t it? If the vertical and horizontal sizes are specified for the image, the browser will know the size of the margin to be created from the beginning, so it is possible to prevent the layout from collapsing / moving afterwards.

However, when trying to support smartphones, there %表示にしたい」場面は多くあります。また、パソコンよりもスマートフォンの方が画面が高解像度ですから、「パソコンでは実際には幅1200pxの画像を600pxで表示し、スマートフォンでは横幅100% “. How can I solve this problem without getting a CLS error? I experimented. Click the image to enlarge it in a separate window.

SEO measures related content

  • Technical SEO Audit Checklist by Moz
  • Is it necessary to display "site name" etc. in common with title tags in SEO?
  • How to use SEO tool ahrefs (video)

Enter only the characters and make sure there are no CLS errors

First, simply enter the text and make sure there are no CLS errors on this web page. I am using the Google Chrome add-on for confirmation.

CLS 画像imgタグの書き方
First, write a simple paragraph
CLS 画像imgタグの書き方
Make sure there are no CLS errors

Add images with WordPress features

When I simply add a few images from “Add Media” in WordPress, I get a CLS error.

CLS 画像imgタグの書き方
Try inserting an image normally from "Add Media"
CLS 画像imgタグの書き方
I get a CLS error

Delete class automatically inserted by WordPress

The specification related to the image size such as size-full is automatically inserted, so if you delete this, the error disappeared. This is very commonplace, and at this point the width and height are well specified in the img tag, so there are no elements that would break the layout.

CLS 画像imgタグの書き方
Remove class from img tag
GoogleのCLS
The CLS error is gone.

But this is not responsive. This image has a width of 900px, but when viewed on a smartphone, all the images are not included.

GoogleのCLS

Specify CSS for width in img tag

Next, with the HTML vertical and horizontal specifications written in the img tag, add the horizontal width specification with CSS. The width is 100%, and specify the actual size value for max-width. Although there is no CLS error, the aspect ratio of the image is not maintained correctly.

GoogleのCLS
Add CSS for width to img tag
GoogleのCLS
There is no CLS error, but the aspect ratio of the image is incorrect

Even if you look at it on your smartphone, the aspect ratio is not maintained.

GoogleのCLS

Delete HTML while specifying CSS related to width in img tag

So what about removing the absolute value of HTML? In fact, I’ve been writing img tags this way so far … Of course, I get an error. I’m trying to solve this situation right now.

GoogleのCLS
Removed absolute value specification by HTML from img tag
GoogleのCLS
Naturally, it's a CLS error

Specify the absolute value of the image in HTML and the relative value in CSS

So, let’s go back one step and write the vertical and horizontal information in CSS with the absolute values of vertical and horizontal written in HTML. The width is 100%, with max-width, and the height is auto. Now there are no CLS errors.

GoogleのCLS
Specify absolute value in HTML and relative value in CSS in img tag
GoogleのCLS
CLS error is gone

We also confirmed that there were no “cumulative layout changes” errors on the Page Speed Insight mobile screen. Although there are other improvements. Lol

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

From this, it was found that the CLS error can be resolved by specifying the absolute value of the image size in HTML and the relative value in CSS for the img tag. All of them are written inline for easy understanding, but in reality, it is better to put the actual size inline with HTML and put the CSS externally.

SEO measures related content

  • Technical SEO Audit Checklist by Moz
  • Is it necessary to display "site name" etc. in common with title tags in SEO?
  • How to use SEO tool ahrefs (video)

Home » Web活用経営(株)ブログ » Web構築 » How to write img tag to eliminate CLS error, Google’s new UX index

Elementor
bownow

スタッフブログ

  • Web構築 (6)
  • Zoomでオンライン工場見学 (3)
  • お知らせ (11)
  • スタッフブログ (9)
  • メタバースSpatialショールーム (6)
  • 英語版Web制作 (2)

フィリピン

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

スタッフブログ新着記事

February 2022 update! Changes in core web vitals due to HTTP / 2 support, Bootstrap, Metaverse, etc.

2022年3月5日

January 2022 update! Elementor video course, Google search console not indexed, etc.

2022年2月1日

Creating an organization that responds to “customer needs” learned from KEYENCE

2022年1月19日

Utilize online factory tours for sales

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

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

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

  • コンサルティング
  • Web制作
  • 無料コース
  • 営業DXおもちゃ箱
  • 料金表
  • ウェビナー
  • 会社案内
  • 優先度お試し診断
  • 利用登録
  • ニュースレター
  • お問い合わせ
  • サイトマップ
  • 187-0032 東京都小平市小川町1-2591-18
  • 042-508-2904
  • info@web-keiei.com
  • Our Work
    • Concept for Web strategy
    • Marketing automation
    • SEO – Ahrefs
    • Cases
  • Services
    • SCRUM Web Development
  • English
  • 日本語 (Japanese)