縦長の画面でヒーローが巨大になる問題：vh に上限を付ける

現象

Search Console の「テスト済みのページを表示」で、スクリーンショットが、ほとんど真っ暗になりました。

原因

ヒーローを min-height: 56vh〜78vh にして、中身を下寄せにしていました。Google は、非常に縦長（数千px）の画面で描画するため、ヒーローが巨大になり、ロゴとキャッチコピーが、画面の下に押し出されていました。インデックスには影響しませんが、スクリーンショットや共有のプレビューには影響します。

対策

min-height に、px の上限を併記しました。たとえば、min-height: min(56vh, 520px) です。通常の画面の見た目は変わりません。

確認

高さ8000pxの画面で描画し、ヒーローの高さが520〜560pxに収まること、ロゴが、上から218px（PC幅）・313px（スマホ幅）の位置に出ることを確認しました。

学び

vh を使うときは、上限のpx指定を、いつも併記します。