速さと検索対策

1. なぜ「速さ」が大切なのか

ページの表示が遅いと、利用者は待たずに離れてしまいます。また、Googleは表示の速さや使いやすさを検索順位の判断材料の1つにしています。速さは、売上や集客に直接かかわる要素です。

Googleは、利用者が体感する表示品質を測る指標としてCore Web Vitals（コア・ウェブ・バイタル）を公開しています。中心となるのは次の3つです。

Next.jsには、これらの数値を良くするための仕組みが最初から組み込まれています。

2. 画像の自動最適化：next/image

ページを重くする最大の原因は、たいてい画像です。スマホで見ているのに、パソコンの大画面用の巨大な画像を読み込んでいる、ということがよく起こります。

Next.jsの画像部品 Image（next/image）を使うと、次のことを自動で行ってくれます。

• サイズの調整：見ている端末の画面に合った大きさに縮小して送る
• 形式の変換：WebP や AVIF といった、画質を保ったまま軽くできる形式に変換する
• 遅延読み込み：画面の下のほうにある画像は、スクロールして近づくまで読み込まない
• ズレの防止：画像の縦横の大きさを先に確保し、読み込み後に文章がガクッと動かないようにする（CLS対策）

<Image src="/shop.jpg" alt="店舗の外観" width={1200} height={800} />

alt は画像の説明文です。目の不自由な方の読み上げや、検索エンジンが画像の内容を理解するのに使われます。

3. 文字（フォント）と先読み

Webフォント（Noto Sans JP などの書体）も、読み込みに時間がかかると、文字が一瞬消えたり、書体が後から切り替わって配置がズレたりします。next/font を使うと、フォントを自分のサイトから効率よく配信し、こうした現象を抑えてくれます。

また、第2章で見た Link 部品は、画面に表示されているリンク先を裏で先読みします。これにより、ページを移動したときの待ち時間が短くなります。

さらに、第4章で学んだ「サーバーで作ったHTMLを送る」仕組みそのものが、最初の表示を速くしています。Next.jsでは、特別なことをしなくても、ある程度速いサイトになりやすいのです。

4. 見つけてもらうための設定：メタデータ

検索エンジンで上位に表示されるための工夫をSEO（検索エンジン最適化）と呼びます。その基本が、ページごとのメタデータの設定です。メタデータとは、画面には直接表示されないけれど、ブラウザや検索エンジン、SNSに向けてページの情報を伝える「ページの名札」のようなものです。

export const metadata = {
  title: "会社概要｜サンプル商店",
  description: "創業50年、地域の食卓を支えるサンプル商店の会社概要です。",
};

各ページの page.tsx や layout.tsx にこう書くと、そのページのタイトルと説明文が設定されます。

商品詳細ページのように中身が変わるページでは、generateMetadata という仕組みで、商品名に合わせたタイトルを自動で作れます。

サイトの地図：sitemap と robots

app/sitemap.ts を作ると、サイトにあるページの一覧（サイトマップ）を検索エンジンに伝えられます。app/robots.ts では「管理画面は検索結果に出さないで」といった指示を出せます。

5. 速さを確認する方法

完成したサイトの速さは、Googleが無料で提供しているPageSpeed Insights（ページスピード・インサイト）にURLを入れるだけで確認できます。LCP・INP・CLSの評価と改善のヒントが表示されるので、開発者やAIに改善を依頼するときの材料になります。Vercelで公開している場合は、管理画面の「Speed Insights」機能で、実際の利用者の数値を継続的に見ることもできます。