Wednesday, June 06, 2012 at 11:04 AM
Webmaster level: All
Every day more and more smartphones get activated and more websites are producing smartphone-optimized content. Since we last talked about how to build mobile-friendly websites, we’ve been working hard on improving Google’s support for smartphone-optimized content. As part of this effort, we launched Googlebot-Mobile for smartphones back in December 2011, which is specifically tasked with identifying such content.
Today we’d like to give you Google’s recommendations for building smartphone-optimized websites and explain how to do so in a way that gives both your desktop- and smartphone-optimized sites the best chance of performing well in Google’s search results.
Recommendations for smartphone-optimized sites
The full details of our recommendation can be found in our new help site, which we now summarize.
When building a website that targets smartphones, Google supports three different configurations:
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
Sites that have a separate mobile and desktop sites.
Responsive web design
Responsive web design is a technique to build web pages that alter how they look using CSS3 media queries. That is, there is one HTML code for the page regardless of the device accessing it, but its presentation changes using CSS media queries to specify which CSS rules apply for the browser displaying the page. You can learn more about responsive web design from this blog post by Google's webmasters and in our recommendations.
Using responsive web design has multiple advantages, including:
It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
Device-specific HTML
However, we appreciate that for many situations it may not be possible or appropriate to use responsive web design. That’s why we support having websites serve equivalent content using different, device-specific, HTML. The device-specific HTML can be served on the same URL (a configuration called dynamic serving) or different URLs (such as www.example.com and m.example.com).
If your website uses a dynamic serving configuration, we strongly recommend using the Vary HTTP header to communicate to caching servers and our algorithms that the content may change for different user agents requesting the page. We also use this as a crawling signal for Googlebot-Mobile. More details are here.
As for the separate mobile site configuration, since there are many ways to do this, our recommendation introduces annotations that communicate to our algorithms that your desktop and mobile pages are equivalent in purpose; that is, the new annotations describe the relationship between the desktop and mobile content as alternatives of each other and should be treated as a single entity with each alternative targeting a specific class of device.
These annotations will help us discover your smartphone-optimized content and help our algorithms understand the structure of your content, giving it the best chance of performing well in our search results.
Conclusion
This blog post is only a brief summary of our recommendation for building smartphone-optimized websites. Please read the full recommendation and see which supported implementation is most suitable for your site and users. And, as always, please ask on our Webmaster Help forums if you have more questions.
52 comments:
If Google wants us to use responsive design, then Google needs to update AdWords and AdSense to deliver responsive ads. Because they don't.
Gotta agree with unknown ad 11:49am, make responsive design easier to monetize with responsive ad code.
Who cares about ads. Certainly not the end user. Yay for awesomeness from Google.
Using responsive design also has disadvantages, and the advantages stated here for responsive design might not seem so magnificent if compared against advantages for a seperate domain.
Now this is what I like to hear. Besides, if you know your code, making AdWords and AdSense ads responsive in their own right would be fairly easy.
i never understand to google, im making a few new things for my web site but google doesnt make index, for my new articles =) and other side, im looking to bing.com there is a new index for my site :) i wanna ask to google ? What are you doing? or what your problem?
http://www.chatmax.net
I totally agree with Lysis' comment, it is all about the end user. That, in my opinion, is what keeps us coming back to Google. Do we really want a site to force us into doing something that promotes their business or revenue, or do we want to view content the way we wish to view it? That leads into the obvious question, "Should we auto-detect mobile browsers and redirect, or should we allow the use to chose?" As a user, I tend to opt for the latter.
As for chatmax's comment, maybe you should be optimizing for bing's search algorithms then. Is that were the majority of your references are coming from, or are you criticizing Google for catering to its users, and not your profit margins?
Hello Matt,
I am Mahendra Singh from India. I have a small travel business of Jaipur tourism(http://jaipursightseeing.wordpress.com/) but after penguin update my blog ranking is dropped so i am much worried. Please suggest me what should i do?
I can see that having a single URL with identical HTML (“responsive web design”) makes life easier for Google. However it comes at the price of condemning smartphone users to working with desktop-oriented sites - CSS3 alone can’t make up the shortfall.
If you focus solely on SEO and/or don’t have much need for smartphone users, then no doubt the responsive web design approach is the way to go. However if you really want to engage with your smartphone users then device-specific HTML allows you to create a much better (and more app-like) user experience, and takes full advantage of the mobile context.
Having said that, up to now we have always favored separate “M” and “WWW” sites, and having read this blog post and Google’s other recent recommendations I think we will consider moving to a single site with device-specific HTML. This will mean a single set of URLs, which appears to be the only real advantage of the responsive web design approach.
I’m pleased that Google recognises the need for these different options and supports all of them. However I would be happier if their recommendation was for single URL / device-specific HTML (option 2) because by favouring the responsive web design approach (option 1) they are missing an opportunity to encourage webmasters to create better sites for smartphone users.
About "canonical" in mobile site and "alternate" in desktop site.
Does it help me to rank my mobile site in Google mobile and desktop site in Google desktop?
Waiting for answer.
what happens if someone has Mobile App ? Google won't detect that while the end user will see the notification that "There is a app for our site"
-----
Comment #1 : and Google Analytics
So when will we be able to use Google Sites in the way Google recommends? Currently impossible.
But most playbooks can read full sites and some mobile why can Google come up with something responsive code that we can add to all pages and it would do its job.
A fair point, but I really expect Google to care about ads, since that's the main way Google makes money.
Thank you for posting this blog.. it is nice.
There are many benefits to responsive design beyond a single canonical URL. Read alistapart or smashing magazine for more; for me it boiled down to this: would I rather create a site that responds to general viewport dimensions (mobile, tablet, desktop), or make device-specific sites - which now number in the thousands? No thanks.
Talking about responsive designs is blogger team at google working on the way to make responsive designs because i tried making my blog template responsive but failed :(
Time has come for Google to think in terms overhauling their Blogger setup in such a way that the people who blog with the Blogger find that their blog posts automatically become multi-device friendly. That goes for Google Adsense too.
This should be the next big thing from Google which will have positive impact on adsense revenue both for publishes as well as to Google.
I just made my new revamped responsive website for www.dronamobile.com
Guys do check and let me know the feedback.
I'd like to thank you for the efforts you have put in writing this site. I really hope to see the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has encouraged me to get my own, personal website now ;)
As per my vision Google's is to give users a good experience in content of website and variety. As per their recommendation i have included all the terms in my website, done link building with appropriate website which relate to my product and following their latest updates to boost my rankings and visits. Rather being aggressive in social media. But I would like to tell that my competitors who do not have meta, heading, hyperlink, navigation bar, good content, backlinks and never active in social network. Why to they rank on top? After doing analytics research and webmaster tool survey, I am trying with new experiments. why they are not reflecting?
Would cross-domain canonicals affect their rel="alternate" href="m.domain.com" and rel="canoncial" href="www.domain.com"?
I personally think optimizing websites for smartphones is overvalued. Most smartphones are very much capable of displaying any website. Looking at growth patterns and technological trends the so-called mobile websites will not exist in a couple years.
Thanks for your information. and also discussion for something to learn in webmaster tools..
Incidentally, just a week ago I changed our mobile site from "separate URLs" for mobiles and desktops to "one URL for all", because it is a lot easier for the end user to handle.
However, after much deliberation we did not switch to responsive webdesign. Resposive design is nice for different screen sizes, but it offers no solution for the bandwith-problem.
And for mobile users, bandwidth is what matters most! You can't throw desktop-size images at mobile phones on EDGE and hope that the users will stick around long enough for the page to fully load And then to wait some more until the mobile browser manages to resize the image for a small screen.
Coty Lance I agree with that
I'm relieved.
We decided to put resources into making our site responsive instead of bundling everything together into a separate APP, and this seems to be right.
Data recovery services providers offer you fast and quality solutions to figure out the root of the problem recover data and offer correct advice to the customer for preventing such a thing from happening again.
"Sites that use responsive web design, i.e. sites that serve [...] the same HTML to all devices"
Why would you serve the same HTML to all devices? Adjusting the page layout seems cosmetic to me.
If you can identify the requesting device and serve an appropriate layout, then surely you can also serve device specific content. Mobile users benefit from different content, like directions to the nearest store.
So, having responsive web design would do and how easy would it be to implement for any web development and web designer. I would like to know as a signle googlebot would crawl so would its indexing be added automatically to google mobilebot and traditional bot??
Can a general desktop website be made compatible for various mobile devices and OS by changing CSS. Is this very complex and does this required extra skills. So, this responsive design would be preferred choice over mobile version of a website or seperate mobile domain or mobile sub-directory.
Is Google serving different results to mobile searchers than to desktop based on mobile ranking factors?
thank you for the blog... great work done......
We have an own handcrafted mobile version of our site (with different URLs). So not every desktop page has a mobile equivalent. Our strategy for Google is to serve the mobile pages in a Mobile Sitemap, like described in this article http://support.google.com/webmasters/bin/answer.py?hl=en&answer=34648. In our case, are you fine with that or would you recommend further steps, like handpicken matching sites and additionally use the rel="alternate" solution for them?
I have mixed emotions on this topic as well. If the site has content only with no real purpose other than sharing that information then I would definitely prefer having a responsively designed site.
However if there is any logic involved where the purpose is more than sharing textual information or displaying a form then having a separate site is preferred.
I dislike visiting a site and having a completely different content with the mobile site and having to select 'view full site' or 'view desktop version' and responsive design solves this issue perfectly.
You wouldn't expect your French or German visitors to search for you on Google UK, and you wouldn't expect your UK users to see your products priced in US dollars on Google.com.
Yet if you search on Google mobile from your smartphone you get no indication of sites which are mobile friendly, so you can end up pinch-zooming your way around a clunky "RWD" desktop site.
If smartphone users are important to you then you should be able to operate a parallel mobile site for them - which these latest guidelines allow. But if you have told Google there is a corresponding mobile site, that site, not your desktop one, should appear in Google mobile search results.
Thanks for sharing this useful stuff with us. As we know now a days people are being mobile, so the question really click in our mind, whether we should have mobile website, PC based website or responsive website. And your post really helps to get a clear conclusion.
How can I convert my website http://clarencelouie.info/ to a responsive. I know a lots of people are using smartphone.
I've designed my website according to google's guidelines, but it still showing a lot of errors, I don't know what to do please help.
http://www.dibexpress.com/
We may try to serve a different ad unit based on the visitor’s browser size
Thanks for the posts.
Is Google Calendar going to be redesigned to be responsive? I use embedded Google calendars in a couple of my websites, and they don't resize at all.
As with the changing technologies, the need of optimized designs is becoming an essential part of web development. As a web developer, I also try to make make my site as smooth, responsive and flexible as it can be for user platforms. Great article.
Anyone who does not update sites to be "responsive" clearly will loose marketability. I believe all users prefer auto detection over the mobile view or spending the time to download an app taking up precious screen real estate.
Mobile users are looking for different things than desktop users: mobile users are more action oriented while desktop users are more for research.
If I have different websites for mobile and for desktops, is it ok to serve a slightly different content on each version or Google would consider it cloaking?
There are a few advanced CSS3 generators which can generate the complete CSS3 style sheet in few minutes, that too at one go. Now as a website designer, you don't need to continue copying and pasting the code of a single property one by one for generating just a single style.
Responsive design works, just not with Googles adsense program. As Publishers we are not allowed to change the size of the ads! This has created a major issue when designing my most current website. The ads appear to large and there is no option to resize these ads so they flow with the pages content on mobile devices. Something needs to be done!
i feel this great article, tank to all webmasters that do comment here, am a newbie from naija i do like to partner with international webmasters feel free to mail me at jiireigedamola@gmail.com thanks
This greatly helps. Thanks for sharing.
Very nice recommendations, im learning so much of this blog, many thanks, the responsive design is a tendence of this year
Post a Comment