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:
- Enter URL
- Click Test
- Wait for results
- 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.
Ditulis oleh
Hendra Wijaya