メニュー

2021年6月以降のSEO対応

2021年6月以降のSEO対応

現在Googleは「Web Vitals」という新しい取り組みを発表しています。
これは”UXを向上させるために新しいガイダンスを提供するので、ユーザーをより満足させましょう”というもので、それを具体的に数値化している「Core Web Vitals」という3つの指標が重要になっています。

LCP(Largest Contentful Paint)

読み込み時間

LCPはページ内のメインコンテンツ(最も大きなコンテンツ)が読み込まれるまでの時間を指します。
ページ読み込みから2.5秒以内を目指しましょう。

FID(First Input Delay)

インタラクティブ性

FIDとは、ユーザーがページ内で最初に行ったアクション(ボタンを押すなど)に対して、ブラウザが応答するまでに要した時間を指します。
0.1秒以内の反応を目指しましょう。

CLS(Cumulative Layout Shift

レイアウトのずれ

CLSは意図せぬレイアウトの”ズレ”がどれぐらい発生したかを指します。

基本的に、ファーストビューはすぐ表示させる、画像は早くずれずに表示させることに注力すると良いと思います。
実際のサイトのWeb Vitalsの点数はPageSpeed Insightslighthouseで確認できます。

具体的な施策

画像について

  • ■Webpも一緒に記述する
  • ■lazyload.jsとloading=”lazy”で遅延読み込みをする
  • ■imgタグ内にwidthとheightを明記する

記述例

<picture><source srcset=”画像名.webp” type=”image/webp” />
<img src=”画像名.jpg” alt=”画像の名前” width=”750″ height=”584″ class=”lazyload” loading=”lazy” />
</picture>

head内について

  • ■第三者コードの影響を抑える

記述例

<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/maps”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/analytics/analytics/”>
<link rel=”preconnect dns-prefetch” href=”https://www.tiktok.com/en/”>
<link rel=”preconnect dns-prefetch” href=”https://marketingplatform.google.com/about/tag-manager/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/speed/libraries/”>
<link rel=”preconnect dns-prefetch” href=”https://fonts.google.com/”>
<link rel=”preconnect dns-prefetch” href=”https://www.doubleclickbygoogle.com/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/apis-explorer/#p/”>
<link rel=”preconnect dns-prefetch” href=”https://www.yahoo.com/”>

スクリプトの記述の方法と場所

スクリプトの記述にdeferを追加し</body>近くに配置する

記述例

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”></script>
<script defer src=”/js/lazyload.js”></script>
※defer属性を追加することでscriptは非同期でダウンロードされますが、HTMLパースは継続します。
その他、css、jsはなるべく一つにまとめて圧縮した方が良いです。

RYO

UX/UI デザイナー

岐阜大学 非常勤講師/日本工学院専門学校 非常勤講師

2006年POLS JAPAN入社。
心理学・認知バイアスを基にデータドリブンでマーケティングからUX/UI設計、マークアップまで幅広く手掛けております。

閉じる