Lesson 13 / 32

Mobile-First Indexing

Understand that Google now indexes the mobile version of your site first and evaluates it for ranking.

Mobile-first is the default

Since 2018, Google crawls and indexes the mobile version of your site first. Desktop version is secondary. If your mobile site is slower, has missing content, or poor UX, your rankings suffer — regardless of desktop quality.

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>