Home

Canonicalization for Mobile Sites and Mobile-First Indexing

Mobile Site and Mobile-First Indexing Best Practices: A Deep Dive

Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. This is called mobile-first indexing. While it's not required to have a mobile version of your pages for inclusion in Google Search results, it is strongly recommended. This guide outlines best practices for mobile sites, specifically with mobile-first indexing in mind.

1. Create a Mobile-Friendly Site

A mobile-friendly site provides a seamless user experience for visitors browsing on smartphones. There are three main configurations for mobile-friendly sites:

a. Responsive Design (Recommended):

  • Single HTML Code: Uses the same HTML code across all devices (desktop, tablet, mobile, non-visual browsers).

  • Dynamic Display: Adapts the content layout based on screen size, providing an optimized view for each device.

  • Example:

    • HTML (Example.com/page):

    <!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <h1>Heading</h1>
    <p>Content goes here...</p>
</body>
</html>

    • styles.css:

    /* Styles for different screen sizes */
@media (max-width: 768px) {
    /* Styles for tablets and smaller */
}
@media (max-width: 480px) {
    /* Styles for mobile phones */
}

b. Dynamic Serving:

  • Single URL: Uses the same URL for all devices.

  • User-Agent Sniffing: Detects the user's device type and serves a different version of the HTML based on this information.

  • Vary: User-Agent Header: This HTTP header signals to browsers that different versions of the content might be served based on the user-agent.

  • Example:

    • Desktop User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

    • Mobile User-Agent: Mozilla/5.0 (Linux; Android 11; SM-G991B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36

    • Server Code (Python Example):

    from flask import Flask, request
app = Flask(__name__)

@app.route('/')
def index():
    user_agent = request.headers.get('User-Agent')
    if 'Mobile' in user_agent:
        return "<h1>This is the mobile version</h1>"
    else:
        return "<h1>This is the desktop version</h1>"

if __name__ == '__main__':
    app.run(debug=True)

c. Separate URLs:

  • Different URLs: Each device type (desktop, mobile) has a distinct URL.

  • User-Agent and Vary Headers: Similar to dynamic serving, these headers redirect users to the appropriate version of the site based on their device.

  • Example:

    • Desktop URL: www.example.com/page

    • Mobile URL: m.example.com/page

    • Server Code (Python Example):

    from flask import Flask, request, redirect
app = Flask(__name__)

@app.route('/')
def index():
    user_agent = request.headers.get('User-Agent')
    if 'Mobile' in user_agent:
        return redirect('m.example.com/page', code=302)
    else:
        return "<h1>This is the desktop version</h1>"

if __name__ == '__main__':
    app.run(debug=True)

Note: This guide focuses on dynamic serving and separate URL configurations. Responsive design does not require specific adjustments as the content and metadata are identical for both mobile and desktop versions.

2. Ensure Google Can Access and Render Your Content

Google needs to access and render your mobile page content and resources to index it properly.

a. Robots Meta Tags:

  • Consistency: Use the same robots meta tags on both the mobile and desktop sites.

  • Avoid Noindex and Nofollow: Be cautious with noindex or nofollow tags on the mobile site, as they can prevent Google from crawling and indexing your pages.

b. Lazy-Loading:

  • Avoid Lazy-Loading Primary Content: Google cannot index content that requires user interaction (e.g., swiping, clicking, typing). Ensure primary content is readily visible to Google.

  • Example: Loading images only when the user scrolls down is fine for secondary content, but essential information like product descriptions should be visible immediately.

c. Resource Crawling:

  • URL Consistency: If your mobile site uses different URLs for resources compared to the desktop site, ensure Google can access them by not blocking them with disallow rules in your robots.txt file.

3. Consistent Content Between Desktop and Mobile

Even with equivalent content, differences in DOM structure or layout between desktop and mobile pages can lead to Google interpreting the content differently.

a. Content Equivalence:

  • Equivalent Content: Ensure the mobile site contains the same primary content as the desktop site.

  • Design Differences: Design variations (like moving content into accordions or tabs) are acceptable on mobile for usability, but maintain content equivalence.

  • Example:

    • Desktop: A product page might have a detailed description, specifications, reviews, and images.

    • Mobile: The same product page might organize the description, specifications, and reviews using tabs or accordions to optimize space. The images should be the same.

b. Heading Consistency:

  • Clear and Meaningful Headings: Use the same clear and meaningful headings (H1, H2, etc.) on both versions of your site.

4. Structured Data: Consistency and Correct URLs

Structured data helps Google understand the content of your pages, and it should be present on both your desktop and mobile versions.

a. Consistency:

  • Same Structured Data: Use the same structured data types on both versions of your site.

  • Prioritization: If you need to prioritize structured data types on the mobile site, focus on Breadcrumb, Product, and VideoObject.

b. Correct URLs:

  • Updated URLs: Ensure the URLs used in structured data on the mobile site match the actual mobile URLs.

  • Example:

    • Desktop: <link rel="canonical" href="https://www.example.com/product">

    • Mobile: <link rel="canonical" href="https://m.example.com/product">

    • Structured Data (JSON-LD Example):

    {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Example Product",
  "description": "Description of the product",
  "image": "https://m.example.com/product/image.jpg",
  "url": "https://m.example.com/product" 
}

c. Data Highlighter:

  • Regular Checks: If you use Data Highlighter, regularly check the Data Highlighter dashboard for extraction errors, particularly on your mobile site.

5. Metadata Consistency: Title and Description

Both the title element and meta description should be equivalent across your desktop and mobile versions to ensure consistency in search results.

6. Ad Placement: Follow Best Practices

Avoid hindering mobile page ranking by adhering to the Better Ads Standard when displaying ads on mobile devices. For example, avoid excessive ads at the top of the page, as this can negatively impact user experience.

7. Visual Content: Images and Videos

a. Image Best Practices:

  • High-Quality Images: Use high-quality images (not too small or low resolution) on your mobile site.

  • Supported Formats: Use supported image formats (e.g., SVG). Avoid unsupported formats or tags. Google can't index a .jpg image placed within an inline SVG, for instance.

  • URL Consistency: Avoid URLs that change every time the page loads for images, as this hinders indexing.

  • Alt Text: Use descriptive alt text for images on the mobile site, mirroring the desktop site.

  • Content Quality: Maintain the same image titles, captions, filenames, and related text on both mobile and desktop versions.

b. Video Best Practices:

  • URL Consistency: Don't use URLs that change for your videos.

  • Supported Formats and Tags: Use supported video formats (e.g., MP4, WebM) and embed them in supported tags (e.g., <video>, <iframe>).

  • Example (HTML):

    <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

8. Mobile-First Indexing: Considerations

  • Temporary Image Traffic Loss: If your site uses different image URLs for desktop and mobile, you may experience a temporary image traffic loss during the transition to mobile-first indexing. This is due to Google indexing new image URLs, and it takes time for them to gain search results history.

  • Solution: Use the same image URLs for both versions of your site to avoid this temporary loss.

  • Traffic Loss with Reduced Content: If your mobile site intentionally has less content than the desktop site, you can expect some traffic loss with mobile-first indexing. Google will have less information to index.

  • Alternatives: Instead of removing content, consider moving it into accordions or tabs to optimize space.

By following these best practices, you can optimize your mobile site for mobile-first indexing, ensuring that your content is effectively crawled, indexed, and ranked by Google. This leads to a more engaging user experience and improved visibility in search results.

PreviousResolving Canonicalization IssuesNextAMP (Accelerated Mobile Pages)

Last updated