Cara Optimasi Mobile SEO: Panduan Website Mobile-Friendly

What it means:
- Google primarily uses mobile version
- Mobile content = what gets indexed
- Desktop-only content may be missed
- Mobile experience affects all rankings

Checklist manual:
- Test on real devices
- Different screen sizes
- Touch interactions
- Load speed on 3G/4G

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

/* CSS Media Queries */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .content {
    width: 100%;
  }
}

Requirements:
- Tap targets: minimum 48x48 px
- Spacing between links: 8px+
- No hover-only interactions
- Easy to scroll

/* Minimum readable size */
body {
  font-size: 16px; /* minimum */
  line-height: 1.6;
}

/* Don't require zoom */
/* Content should be readable at default zoom */

/* Prevent overflow */
body {
  overflow-x: hidden;
}

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

Mobile-specific optimizations:
- Compress images more aggressively
- Reduce JavaScript
- Use AMP (optional)
- Lazy load below fold
- Minimize redirects

Ensure parity:
- Same text content
- Same images (optimized)
- Same structured data
- Same meta tags
- Same internal links

<!-- Use appropriate input types -->
<input type="email" />
<input type="tel" />
<input type="number" />

<!-- Makes mobile keyboards easier -->

Google penalizes:
- Full-screen popups on mobile
- Interstitials covering content
- Difficult to dismiss overlays

Allowed:
- Age verification
- Cookie consent
- Login dialogs
- Small banners

Mobile-specific targets:
- LCP: <2.5 seconds
- FID: <100ms
- CLS: <0.1
- Time to Interactive: <5s

1. Optimize images (WebP, lazy load)
2. Minimize CSS/JS
3. Use browser caching
4. Enable compression
5. Reduce server response time
6. Eliminate render-blocking resources
7. Use CDN

Mobile nav tips:
- Hamburger menu (3 lines)
- Sticky navigation
- Easy back button
- Search accessible
- Breadcrumbs

Mobile content:
- Single column layout
- Short paragraphs
- Bulleted lists
- Clear headings
- Visible CTAs

Mobile images:
- Responsive srcset
- WebP format
- Lazy loading
- Proper dimensions
- Alt text

Mobile SEO Checklist:
☐ Responsive design implemented
☐ Mobile-friendly test passed
☐ PageSpeed mobile score 90+
☐ Font size readable (16px+)
☐ Tap targets sized properly
☐ No horizontal scroll
☐ Same content as desktop
☐ No intrusive popups
☐ Forms mobile-optimized
☐ Fast load on 4G

Issues to fix:
- Text too small
- Links too close
- Viewport not set
- Content wider than screen
- Clickable elements too close
- Plugins not supported (Flash)
- Interstitials blocking content