Mobile-first indexing berarti Google menggunakan versi mobile website untuk ranking. Website yang tidak mobile-friendly akan kesulitan ranking.

Pentingnya Mobile-Friendly

Mengapa Penting

Fakta:
- 60%+ traffic dari mobile
- Google mobile-first indexing
- User experience factor
- Core Web Vitals include mobile
- Ranking factor langsung

Mobile-First Indexing

Google:
1. Crawls mobile version primarily
2. Uses mobile content for indexing
3. Uses mobile signals for ranking
4. Desktop secondary

Website harus optimal di mobile.

Tools untuk Cek Mobile-Friendly

Google Mobile-Friendly Test

URL: search.google.com/test/mobile-friendly

How to use:
1. Enter URL
2. Click Test
3. Wait for results
4. Review issues

Result:
✓ Page is mobile friendly
✗ Page is not mobile friendly

Google Search Console

GSC → Mobile Usability report

Shows:
- Mobile issues across site
- Affected pages
- Issue types
- Fix validation

PageSpeed Insights

URL: pagespeed.web.dev

Shows:
- Mobile performance score
- Core Web Vitals
- Mobile-specific issues
- Optimization suggestions

Chrome DevTools

Manual testing:
1. Open website
2. F12 (DevTools)
3. Toggle device toolbar (Ctrl+Shift+M)
4. Select device type
5. Test interactions

Common Mobile Issues

1. Content Wider Than Screen

Problem:
Content extends beyond viewport
Users must scroll horizontally

Fix:
- Set viewport meta tag
- Use relative widths
- max-width: 100%
- Responsive images

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Required for responsive design. Must be in
<head>
  .
</head>

2. Text Too Small

Problem:
Text unreadable without zooming
Below 12px typically flagged

Fix:
body {
  font-size: 16px;
  line-height: 1.5;
}

Minimum 14px recommended.

3. Clickable Elements Too Close

Problem:
Buttons/links too close together
Fat finger problem

Fix:
- Minimum 48x48px touch targets
- 8px+ spacing between elements
- Adequate padding

CSS Fix

a,
button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

nav a {
  display: block;
  padding: 12px 16px;
}

4. Viewport Not Set

Problem:
Page loads at desktop width
Then scales down

Fix:
Add viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">

5. Plugins Not Supported

Problem:
Flash or other plugins
Not supported on mobile

Fix:
- Remove Flash content
- Use HTML5 video
- Modern alternatives

Responsive Design Basics

Media Queries

/* Mobile first approach */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}

Flexible Images

img {
  max-width: 100%;
  height: auto;
}

/* Responsive background */
.hero {
  background-size: cover;
  background-position: center;
}

Flexible Grid

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 280px;
}

Mobile-Specific Optimization

Font Sizes

/* Readable without zoom */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.75rem;
}
h2 {
  font-size: 1.5rem;
}
p {
  font-size: 1rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

Navigation

<!-- Hamburger menu for mobile -->
<nav class="mobile-nav">
  <button class="menu-toggle">☰</button>
  <ul class="nav-menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

Forms

/* Mobile-friendly forms */
input,
select,
textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px; /* Prevents iOS zoom */
  border-radius: 0; /* iOS fix */
}

button[type="submit"] {
  width: 100%;
  padding: 15px;
  font-size: 18px;
}

Testing Across Devices

Device Emulation

Chrome DevTools:
- iPhone SE, 6/7/8, X, 12, 14
- Galaxy S series
- iPad
- Custom dimensions

Test multiple viewports.

Real Device Testing

Options:
- Your own devices
- BrowserStack (paid)
- LambdaTest
- Cross Browser Testing

Real devices show real issues.

Common Breakpoints

Standard breakpoints:
- Mobile: 320px - 480px
- Mobile landscape: 481px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
- Large: 1200px+

Test at each breakpoint.

Mobile Page Speed

Mobile-Specific Speed

Focus on:
- Smaller images for mobile
- Reduced JavaScript
- Critical CSS inline
- Lazy loading
- AMP (optional)

Mobile Speed Test

PageSpeed Insights:
- Select Mobile tab
- Check Core Web Vitals
- Follow recommendations

Target:
- LCP < 2.5s
- FID < 100ms
- CLS < 0.1

GSC Mobile Usability Report

Accessing Report

GSC → Experience → Mobile Usability

Shows:
- Valid pages
- Pages with errors
- Error types
- Affected URLs

Common GSC Errors

1. Text too small to read
2. Clickable elements too close
3. Content wider than screen
4. Viewport not set

Click each error → See affected URLs.

Validating Fixes

After fixing:
1. Update pages
2. GSC → Validate Fix
3. Wait for Google to crawl
4. Check validation status

Mobile-Friendly Checklist

Technical:
☐ Viewport meta tag set
☐ Responsive CSS
☐ Flexible images
☐ No horizontal scroll

Usability:
☐ Readable text (16px+)
☐ Touch-friendly buttons (48px+)
☐ Adequate spacing
☐ Mobile navigation

Performance:
☐ Fast load time
☐ Optimized images
☐ Minimal JavaScript
☐ Core Web Vitals passed

Testing:
☐ Mobile-Friendly Test passed
☐ GSC Mobile Usability clean
☐ Multiple devices tested
☐ PageSpeed mobile score acceptable

Kesimpulan

Mobile-friendly adalah requirement, bukan optional. Gunakan tools seperti Mobile-Friendly Test dan GSC Mobile Usability untuk identifikasi masalah, lalu fix dengan responsive design principles.

Cara Cek Website Mobile Friendly untuk SEO