MENUMENU
  • Services
    • Services
      • Search Engine Optimization
      • International Search Marketing
      • Local Search Marketing
      • Pay Per Click Advertising
      • Social Media Marketing
      • Email Marketing
      • Conversion Rate Optimization
      • Public Relations
      • Website Design & Development
      • Reporting & Analytics
      • Amazon Marketing Services
      • Digital Marketing Strategy
      • Franchise Marketing
  • About Us
    • About Ignite Visibility
      • Careers
      • Clients
      • Our Values
      • Our Story
      • Our Team
      • Hiring Notice
      • UCSD Extension Courses
      • Diversity & Inclusion
  • Thought Leadership
      • Our Blog
      • Podcast
      • SEO: The Movie
      • Social Media Marketing: The Movie
      • Book: The Forecaster Method
      • Attend Our Next Digital Marketing Event
  • Contact
  • 619.752.1955
Home / Internet Marketing / SEO for Mobile, Google Recommendations

SEO for Mobile, Google Recommendations

December 14, 2012 By Ignite Marketing Team

To display websites properly on some mobile devices, its useful for those sites to be optimized for smartphones. Google provides support for smartphone-optimized websites in three main configurations:

1) Websites employing responsive web design.

This refers to websites avoid the use of a separate “mobile” version of the site by using only CSS to change the way in which the page is rendered on a particular device. In responsive web design all devices are served on the same collection of addresses (URLs); every URL serves identical HTML no matter what device is used to access the site. Google recommends this configuration.

2) Websites using non-responsive web design but serving all devices, regardless of configuration, on the same group of URLs.

Mobile SEO for Google

Mobile SEO for Google

In this case, all devices use the same set of web addresses; however, the content is dynamically delivered to each device such that different devices receive different HTML and CSS.

3) Websites using separate sets of URLs to serve mobiles and desktops.

In this article we will look at how these configurations should be implemented and the implications for SEO for mobile sites.

Responsive Web Design and SEO for Mobile

In responsive web design, the same HTML is always sent to all devices by the server. To change the way the page is rendered on a particular device, CSS is used, along with media queries. As long as both Googlebot and Googlebot-Mobile user agents are allowed to crawl all of the page assets, including images, CSS and javascript, Googles algorithms should detect a responsive web design setup. When conducting SEO for mobile sites, care should be taken that all Google user agents can crawl a pages assets.

For smartphones, Google recommends that the following media query is used:

@media only screen and (max-width: 640px) {…} (Where 640px is an example, not a requirement.)

Googles algorithms look for max-width values that are likely to refer to the resolution of a smartphone screen; Google attempts to monitor the max-width values used by typical mobile websites and plans to update its algorithms accordingly.

Media Queries and Google Mobile SEO

Standards allow for different ways in which to use media queries in your code and Google offers support for all of them. Different implementation techniques all have their merits and disadvantages; when determining how to specify the media query, designers should use the technique that best serves their site and its users. Typically, if a site works with recent browser types such as Chrome, it will work with Googles algorithms.

SEO for Mobile and Responsive Design

Google recommends the use of responsive design for various reasons:

1) Using one URL for a piece of content facilitates Google mobile SEO by making it easier for Googles algorithms to assign indexing properties to the websites content. Using the same URL also makes it easier for users to share and link to your content.

2) Loading times have implications for Google mobile SEO. By using responsive design instead of redirecting the user to a mobile version of your page, you reduce page loading times.

3) Responsive web design conserves resources by allowing Googles web crawlers to crawl your page once, rather than having to crawl multiple pages and assets. This improves SEO by helping Google to index more of your websites contents.

Crawling Requirements

Dont block any Googlebot from crawling any of your pages images, CSS and javascript assets, for example by using robots.txt. If Google cant fully access these external files, its algorithms will be less able to detect your websites configuration and recognize it as using responsive web design.

Different HTML Served Dynamically on the Same URL

In dynamic serving, the user agent requesting the page is detected by the page software. A different version of the page is served depending on the device thats detected. A desktop and a mobile device visiting the same URL would receive a different version of the page without the need for a redirect.

In this type of setup, the fact that the site serves different content to mobile users is effectively hidden from Googles crawlers. To ensure that Google can properly index your page, youll need to send a hint to the Googlebot-Mobile crawler that it should index the page too. This is accomplished using the Vary HTTP header.

The Vary HTTP Header

The Vary HTTP header does two useful things:

1) It indicates to caching servers that the user agent needs to be considered when determining whether or not the page should be served from cache. Without it, users on a mobile device may inadvertently be served a cached desktop version of the site.

2) A valid Vary HTTP header communicates to Google that mobile content is present and thus helps them to index your page more effectively.

When a server responds to a request, the Vary HTTP header forms part of this request. This means that the contents of the page which are actually served will depend on the agent that is currently requesting the page.

Separate Mobile URLs: SEO for Mobile Implications

Google also offers support for sites that use a distinct mobile version of each page at a different URL from the main version. For example, the main version of a page might be at www.examplepage1.com, while the mobile versions URL might be at www.m.examplepage1.com. Note that Google doesnt insist upon this or any other URL format as long as all pages are accessible both to Googlebot and to Googlebot-Mobile.

Annotating Desktop and Mobile Page Versions for Google Mobile SEO

To let Googles algorithms properly understand the way that your site is configured, Google recommend certain annotations. These annotations can be placed in the HTML of the site itself and in sitemaps.

1) On the desktop version of the page: place a special link rel=”alternate” tag that points to the URL of the mobile version. This assists Googlebot in discovering where your sites mobile pages are located.

2) On the mobile version, add a link rel=”canonical” tag that points to the desktop versions URL.

Watch a Video by Matt Cutts on Mobile SEO

HTML Annotation Example:

On the version of the page optimized for desktops, the annotation would be as follows:

On the mobile version of the page, the annotation would be:

Note that the rel=”canonical” tag pointing back to the desktop version is requires on the URL for the mobile page.

Where to Place Annotations in Sitemaps

Google supports the inclusion of the rel=”alternate” annotation in Sitemaps for the desktop pages in the following manner:

xmlns:xhtml=”https://www.w3.org/1999/xhtml”>

https://www.examplepage1.com/page-1/

rel=”alternate”

media=”only screen and (max-width: 640px)”

href=”https://m.examplepage1.com/page-1″ />

Note that the rel=”canonical” tag is still required on the mobile URL; and should also be added to the HTML of the mobile page.

Annotation in Detail

Note the attributes of the link tag that is to be used on the desktop page.

1) The rel=”alternate” attribute is a signal that this tag is specifying an alternative URL to the main desktop-optimized page.

2) The media attributes value takes the form of a CSS media query string. This string specifies the features of the media that the alternative URL applies to. In the example given above, the media query used is one thats generally used to target mobile devices such as smartphones.

3) The “href” attribute in the annotation specifies where the alternative URL is located – in this instance, the page on m.examplepage1.com.

This bidirectional (ie. two-way) annotation improves SEO for mobile by assisting Googlebot in discovering your online content. It also helps the algorithms in understanding how your desktop and mobile sites relate to each other and treating them appropriately. When using different URLs to serve similar content in mobile and desktop formats, using appropriate annotation helps Google to interpret them as one entity instead of two separate entities, indexing them accordingly. This improves SEO for mobile, since the page ranking isn’t split between two different URLs; the ranking for the mobile and desktop versions is calculated as for a single URL rather than two distinct sites, which would obviously result in a lower page ranking.

If your site automatically redirects visitors, you should make sure that your server is configured appropriately.

Now you know more about Google’s requirements for mobile SEO!

About Ignite Marketing Team

This blog was produced by the Ignite Visibility expert marketing team. It is the result of insight from our agency service lead, research and input from John Lincoln. Learn more about Ignite Visibility

You may also like:


  • The 5 Sales Funnel Stages (Helpful Tools & Tactics)

  • What is a Call to Action? 20 Standout Call to…

  • How to Find Your Customer Pain Points

  • What is a Local Business Listing? (& How to Increase…

Search Here

NEWSLETTER // SIGN UP NOW

About Ignite Visibility

Ignite Visibility is a premier full-service digital marketing agency based in San Diego, CA. The Ignite Visibility mission is to provide the most effective digital marketing solutions in the industry, a high-touch customer experience, deliver results and use profits to reinvest in client success, employee success and the community. Ignite Visibility is one of the highest awarded digital marketing agencies in the industry, works with some of the biggest brands in the world and is a 6x Inc. 5000 company. Learn more about our services.

 

Contact Us. Let’s Chat!

  • Hidden

Marketing Guides

SEO In 2020: How To Prepare For Major Disruption

"SEO: The Movie" - Have You Seen Our Film? Watch Now

"Social Media Marketing: The Movie" - Have You Seen Our Film? Watch Now

Amazon Seller Central vs Vendor Central

Listen To The Podcast Featuring The Best Minds In Marketing

John Lincoln Interviews Global Director of Digital Marketing & Strategy at Qualcomm, Jessica Jensen

Check Out 227 Free Online Marketing Classes

The 2020 Guide To Dominating SEO With Advanced Schema

Learn More About Our Digital Marketing Agency

Learn More About Our SEO Services

Learn More About Our Paid Media Services

SELECT CATEGORY

Become A Contributor

Interested in writing for Ignite Visibility?

APPLY NOW

Services

  • Search Engine Optimization
  • Pay Per Click Management
  • Conversion Rate Optimization
  • Website Design & Development
  • Social Media Company
  • Public Relations
  • Amazon Marketing Services
  • Franchise Marketing
  • International Services
  • Digital Marketing Agency Services

About

  • Our Team
  • Our Values
  • Clients
  • Reviews
  • UCSD Extension Courses
  • Careers
  • Tools & Resources
  • Sitemap

Contact

4250 Executive Square, Suite 100
La Jolla, California 92037

619.752.1955

Join The Newsletter

Sign up for our newsletter to get the latest from Ignite Visibility.

google parther logo

©2023 Ignite Visibility. All Rights Reserved. Privacy Policy