幅または初期スケールのタグがない

多くの検索エンジンでは、モバイル フレンドリーの程度に基づいてページをランク付けしています。 viewport メタタグがないと、モバイル デバイスで一般的なパソコン画面の幅でページをレンダリングした後、縮小されて読みにくくなります。

ビューポート メタタグを設定すると、ビューポートの幅とスケーリングを制御して、すべてのデバイスで適切なサイズを設定できます。

Lighthouse ビューポート メタタグの監査が失敗する仕組み

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 は、ユーザーがページにアクセスしたときの初期ズームレベルを設定します。

リソース