多くの検索エンジンでは、モバイル フレンドリーの程度に基づいてページをランク付けしています。 viewport メタタグがないと、モバイル デバイスで一般的なパソコン画面の幅でページをレンダリングした後、縮小されて読みにくくなります。
ビューポート メタタグを設定すると、ビューポートの幅とスケーリングを制御して、すべてのデバイスで適切なサイズを設定できます。
Lighthouse ビューポート メタタグの監査が失敗する仕組み
Lighthouse では、ビューポート メタタグのないページにフラグが設定されます。
次のすべての条件が満たされない限り、ページは監査に不合格となります。
- ドキュメントの <head>
に <meta name="viewport">
タグが含まれている。
- ビューポート メタタグに content
属性が含まれている。
- content
属性の値にテキスト width=
が含まれている。
ビューポート メタタグを追加する方法
適切な Key-Value ペアを含むビューポートの <meta>
タグをページの <head>
に追加します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
各 Key-Value ペアは次のように動作します。
- width=device-width
は、ビューポートの幅をデバイスの幅に設定します。
- initial-scale=1
は、ユーザーがページにアクセスしたときの初期ズームレベルを設定します。