Going Mobile: How to Google-Optimize Websites for Smartphon…
Phones are funny things. I still remember times when I had to go outside to place a call to my friend from the phone booth that we had in our school yard. My kids probably will not even remember placing calls from our stationary home phone. Not only phones become mobile, they became computer-smart allowing users to not only browse web-pages but also make purchases and get access to other internet-services. Statistically today we have more smartphones than people inhabiting our planet faster than we could ever imagine. So if you have an ecommerce site and it's not mobile integrated and mobile-optimized you are missing on the huge opportunity to deliver your goods and services to millions of mobile device users. Once you configure your site for a mobile browsing the next thing is to optimize it for the best search rankings and better shopping experience.
What crawlers are looking for and how to make them like your site
Search engines crawlers could be divided into following categories: bots that crawl desktop-browser types of websites and bots that crawl mobile content that was specifically developed for mobile-device browsing.
For example, Google has developed and announced its own way to detect a mobile version of the website based on its configuration. So the mobile crawler works in the following way: in order to create a special index of mobile websites it crawls websites, showing them a special user-agent string (in most cases it's Samsung or iPhone), and in case of redirect to a special (aka mobile) URL, it sends a special signal to inner Google algorithms, asking them to replace original URL with the after-redirect URL, terminating all unnecessary latencies caused by useless redirects.
How to serve the mobile version, so all SEO value is kept on site and no rankings are lost?
The most common recommendation (mainly based on webmaster's experience) is so called "Same URL" strategy. The idea is in serving mobile content on same URLs as the main version of the site. Web server identifies which version to serve according to received signal about user-agent http string. The reason why this strategy is preferred is so your main site can accumulate all of the SEO benefits of your desktop and mobile versions.
What to consider while choosing the URL structure
Sometimes web developers are facing the dilemma of handling mobile version of a website, choosing the best mobile website strategy: either to use responsive web design (when the CSS / JS are capable of scaling to any resolution), or loading some extra style sheets in order to handle the mobile version, or redirecting to a sub-URL. The answer frequently lies in how the website was originally developed. Of course the best way is to serve same content & CSS responsive for all devices, as it simplifies server architecture and reduces infrastructure costs as the result, however there are situations when this is not available. For example, a website layout does not support scaling, or front-end functionality does not work on mobile. In this case you can try to include special extra CSS / JS to same page (using user-agent information) in order to patch the layout and functionality so it works. On the other hand if responsive web design is not available for the application it is strictly suggested to use the device specific configuration serving it from sub-URL like m.yoursite.com.
Still confused? Here are some of general recommendations to sum up on everything that we were talking about above:
1. Consider choosing one of the following configurations, which supported by Google:
- Responsive web design , when pages rendered depending on the features and resolutions of devices browsed with. Same URLs structure is used to serve same HTML for all devices, while CSS and JS are capable of displaying content on all mobile devices.
- Same URLs set and slightly different HTML / CSS / JS, served to mobile version of a website, based on user-agent (type of device).
- Separate versions for desktop and mobile devices: different URLs, HTML, and CSS.
2. In case of redirect to mobile version, it's strongly recommended to use 301 redirect.
3. Identify a default version of the website to store and accumulate all SEO value on the main domain, eg use canonical attribute.
4. Include only mobile content URLs in Mobile Sitemaps .
5. In case your server is serving different HTML layout for mobile devices (mobile content under, same URL) in order to help caching servers and Google algorithms to process the page property it's highly recommended to use VARY HTTP header. VARY header in this case is used as a special signal to Googlebot .
Please share your own recommendations in comments. Your input is highly appreciated.