Mobile-First Indexing

Mobile-first is the default

Google now uses the mobile version of every site for indexing. If your mobile page is slower, hides content or has poor UX, rankings can suffer regardless of how good the desktop page is.

Responsive design example

Use responsive CSS to make your site work on all screen sizes. Use the viewport meta tag and CSS media queries.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* Mobile first */
    body { font-size: 16px; }
    .container { width: 100%; padding: 10px; }
    
    /* Tablet and up */
    @media (min-width: 768px) {
      body { font-size: 18px; }
      .container { width: 750px; margin: 0 auto; }
    }
    
    /* Desktop */
    @media (min-width: 1024px) {
      .container { width: 960px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Mobile-Friendly Content</h1>
  </div>
</body>
</html>