> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile SEO optimization

> Tips and best practices for optimizing your ButterCMS-powered site for mobile search and ensuring excellent mobile user experience.

# Mobile SEO optimization

With mobile-first indexing, Google predominantly uses the mobile version of your content for indexing and ranking. This guide covers how to optimize your ButterCMS-powered site for mobile search and ensure an excellent mobile user experience.

## Why mobile SEO matters

Make your content mobile-friendly, as search engines consider mobile usability in rankings. Monitor content performance using tools like Google Search Console and regularly update outdated or underperforming content to maintain relevance.

{/* SOURCE: file_path="blog-posts/gsd/buttercms-integration-for-large-enterprises.md" section="Mobile SEO" */}

Ensuring that ButterCMS is optimized for SEO and performance from the outset is crucial. Disruptions can be mitigated with good planning, regular auditing, and remediation. This involves implementing best practices for site speed, mobile responsiveness, and search engine visibility.

## Mobile-first content delivery

ButterCMS enables mobile-first content delivery through its headless architecture:

| Feature                    | Benefit for Mobile                               |
| -------------------------- | ------------------------------------------------ |
| **API-First**              | Deliver only the content needed for mobile views |
| **CDN-Optimized Images**   | Automatic image optimization and compression     |
| **JSON Responses**         | Lightweight data transfer over mobile networks   |
| **No Monolithic Frontend** | Build mobile-optimized frontends independently   |

## Responsive images with ButterCMS CDN

Serving correctly sized images is one of the highest-impact mobile SEO improvements you can make — oversized images are a leading cause of poor LCP scores on mobile. ButterCMS CDN supports URL-based transformations so you can serve the right size and format for each device without storing multiple copies.

<CardGroup cols={2}>
  <Card title="Image Editing & Transformations" icon="wand-magic-sparkles" href="../../create-content/media-management/image-editing-transformations#responsive-images">
    CDN URL parameters for resizing, format conversion, and responsive `srcset` examples
  </Card>

  <Card title="Automatic Image Compression & WebP" icon="bolt" href="../../create-content/media-management/automatic-image-compression-webp">
    How ButterCMS automatically compresses and converts images to WebP on upload
  </Card>
</CardGroup>

## Mobile-friendly content structure

<AccordionGroup>
  <Accordion title="Headlines & Titles">
    * Keep headlines concise (under 60 characters)
    * Front-load important keywords
    * Use clear, scannable language
    * Avoid truncation on small screens
  </Accordion>

  <Accordion title="Paragraphs">
    * Use shorter paragraphs (2-3 sentences max)
    * Break up long content with subheadings
    * Include bullet points and numbered lists
    * Lead with the most important information
  </Accordion>

  <Accordion title="Media">
    * Use responsive images with proper srcset
    * Implement lazy loading for below-fold images
    * Consider video autoplay policies on mobile
    * Ensure touch targets are at least 44x44 pixels
  </Accordion>

  <Accordion title="Navigation">
    * Implement mobile-friendly navigation patterns
    * Use hamburger menus or bottom navigation
    * Ensure adequate spacing between links
    * Test tap targets with real mobile devices
  </Accordion>
</AccordionGroup>

## Page speed optimization

Page load speed affects both user experience and search rankings. Follow these tips to keep your app fast and responsive:

* Use lazy loading to load modules only when needed
* Minify JavaScript, CSS, and HTML files
* Enable HTTP compression on your server
* Optimize images using appropriate tools
* Use a Content Delivery Network (CDN) to serve static assets faster
* Preload important resources using `<link rel="preload">`
* Audit and monitor performance with tools like Lighthouse or WebPageTest

### Mobile performance checklist

| Optimization            | Implementation                                |
| ----------------------- | --------------------------------------------- |
| **Lazy Loading**        | Add `loading="lazy"` to images below the fold |
| **Image Compression**   | Use ButterCMS CDN transformations             |
| **Critical CSS**        | Inline above-the-fold styles                  |
| **JavaScript Deferral** | Use `defer` or `async` attributes             |
| **Resource Hints**      | Preconnect to ButterCMS CDN                   |
| **Caching**             | Implement appropriate cache headers           |

```html theme={null}
<!-- Preconnect to ButterCMS CDN -->
<link rel="preconnect" href="https://cdn.buttercms.com" />
<link rel="dns-prefetch" href="https://cdn.buttercms.com" />

<!-- Preload critical images -->
<link
  rel="preload"
  href="https://cdn.buttercms.com/resize=width:800/hero-image.jpg"
  as="image"
/>
```

## Mobile viewport configuration

Ensure your pages have the proper viewport meta tag:

```html theme={null}
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

<Warning>
  Never disable zooming with `user-scalable=no` or `maximum-scale=1.0`. This harms accessibility and may negatively impact SEO.
</Warning>

## Touch-friendly design

### Minimum tap targets

Google recommends tap targets of at least **48x48 CSS pixels** with adequate spacing:

```css theme={null}
/* Good tap target sizing */
.button,
.link {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px;
}

/* Ensure adequate spacing between targets */
.nav-link {
  margin: 8px 0;
}
```

### Interactive elements

| Element   | Mobile Consideration                           |
| --------- | ---------------------------------------------- |
| Buttons   | Large, clearly visible tap targets             |
| Links     | Adequate spacing, no link-to-link proximity    |
| Forms     | Large input fields, appropriate keyboard types |
| Menus     | Easy-to-tap menu items                         |
| Carousels | Swipe-enabled, visible navigation              |

## Mobile-specific meta tags

```html theme={null}
<!-- Mobile app capable -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- Status bar styling (iOS) -->
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

<!-- Theme color (Android) -->
<meta name="theme-color" content="#0505e5" />

<!-- Telephone number detection -->
<meta name="format-detection" content="telephone=no" />
```

## AMP (Accelerated Mobile Pages)

While not required, AMP can improve mobile performance for content-heavy pages:

### When to consider AMP

| Use AMP When              | Skip AMP When             |
| ------------------------- | ------------------------- |
| Publishing news articles  | Building interactive apps |
| High mobile traffic       | Complex dynamic content   |
| Ad-supported content      | E-commerce with checkout  |
| Discovery via Google News | Real-time applications    |

### ButterCMS Content in AMP

If you implement AMP, you can still use ButterCMS content—just ensure your AMP templates follow AMP specifications:

```html theme={null}
<!-- AMP-valid image from ButterCMS CDN -->
<amp-img
  src="https://cdn.buttercms.com/resize=w:800/your-image.jpg"
  width="800"
  height="450"
  layout="responsive"
  alt="Description"
>
</amp-img>
```

## Testing mobile SEO

### Essential testing tools

| Tool                                                                                   | Purpose                                 |
| -------------------------------------------------------------------------------------- | --------------------------------------- |
| [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)          | Check if pages pass mobile-friendliness |
| [Google PageSpeed Insights](https://pagespeed.web.dev/)                                | Analyze mobile performance              |
| [Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/) | Test responsive design                  |
| [BrowserStack](https://www.browserstack.com/)                                          | Test on real mobile devices             |

### Core Web Vitals for mobile

Monitor these metrics for mobile users:

| Metric                             | Good Score | What It Measures    |
| ---------------------------------- | ---------- | ------------------- |
| **LCP** (Largest Contentful Paint) | ≤ 2.5s     | Loading performance |
| **FID** (First Input Delay)        | ≤ 100ms    | Interactivity       |
| **CLS** (Cumulative Layout Shift)  | ≤ 0.1      | Visual stability    |

## Mobile content considerations

### Content priority

Structure your ButterCMS content with mobile in mind:

```
Mobile Content Hierarchy:
1. Hero/Key Message (immediately visible)
2. Primary Call-to-Action
3. Essential content (expandable if needed)
4. Supporting details
5. Secondary CTAs
6. Footer/Navigation
```

### Component design for mobile

When creating ButterCMS components, consider mobile variations:

```
Hero Component Fields:
├── headline (Short Text) - max 60 chars for mobile
├── subheadline (Short Text) - max 120 chars
├── desktop_image (Media) - Full-width hero
├── mobile_image (Media) - Square or portrait ratio
├── cta_text (Short Text) - Keep short for buttons
└── cta_link (Short Text)
```

## Mobile SEO checklist

<AccordionGroup>
  <Accordion title="Technical Requirements">
    * [ ] Viewport meta tag configured correctly
    * [ ] Responsive design implemented
    * [ ] Touch targets minimum 48x48 pixels
    * [ ] No horizontal scrolling required
    * [ ] Fonts readable without zooming (16px minimum)
  </Accordion>

  <Accordion title="Performance">
    * [ ] Page loads under 3 seconds on 3G
    * [ ] Images optimized and lazy-loaded
    * [ ] Critical CSS inlined
    * [ ] JavaScript deferred/async
    * [ ] CDN configured for assets
  </Accordion>

  <Accordion title="Content">
    * [ ] Content visible without JavaScript
    * [ ] Same content available on mobile and desktop
    * [ ] Headlines and meta descriptions not truncated
    * [ ] Videos mobile-friendly
    * [ ] Forms easy to complete on mobile
  </Accordion>

  <Accordion title="User Experience">
    * [ ] Navigation accessible on mobile
    * [ ] Pop-ups/interstitials non-intrusive
    * [ ] Search functionality works on mobile
    * [ ] No Flash or unsupported plugins
    * [ ] Error pages mobile-friendly
  </Accordion>
</AccordionGroup>