Responsive web design and SEO
-
Hi guys,
Do any of you know about responsive web design? In short it's a method that ensures that your website adopts to the resolution on the users screen. The point is that you don't have to make a site for each format, it's all there in your overall design.
So, to the question: Does, to your knowledge, an integration of responsive web design harm your SEO?
I tried to search for "responsive we design + SEO" but I really didn't get any useful information.
Thanks a lot - all comments are very much appreciated.
-
For regular websites this is a good solution. Except for the case in which the HTML and assets are quite large for a mobile device to load. In that case I always prefer to use a mobile version of the website on a subdomain.
I believe this is the best solution for high traffic websites which need to show quite some content per page.
-
You too buddy, take it good and easy!
-
Thanks Marcus. Nice article. There are arguments to and for the various ways to approach things especially as you say when user experience (load time) can be impacted and also of course when considering the particular client in question. But as you say in the article not only is Google recommending the responsive approach but it does have SEO management benefits.
Good chatting with you.
-
Hey Nick
It is worded pretty much perfectly on the Google blog post where they state their preference for responsive design even over same URLs with slightly different content.
"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"
So, you use the same HTML, nothing changes apart from the layout and you use CSS media queries to handle formating the CSS for each device.
Alternatively, you can serve different HTML content on the same URLs and technically do this however you see fit but this is not the preferred way of doing things but... if your site does this at the moment, I would not worry not about it too much for now. The idea behind this approach is that the content is equivalent - much like wptouch does and it shows the article but removes any supplemental widgets so the page retains it's essence, but drops any flab. Personally I would script this so those additional elements are not output at all rather than hide them with CSS though but that's just my take.
Short answer, go responsive if you can, it's what they want and creates the most consistent approach across devices but remember, that means not hiding anything and just moving it about.
Personally, I question if responsive is always the best option and if the mobile data connection is weak then a stripped down version works better but... hey, who am I to question big G's reasoning here!
As it goes, I wrote a piece about this yesterday that may help:
http://www.bowlerhat.co.uk/blog/responsive-web-design/
half way down there is a diagram showing how your responsive layout could work for various devices.
Hope it helps!
Marcus -
Hey Marcus,
Many thanks for your thoughts. So if I'm reading this correctly, you went with same URLS and check user agent on the server and then serve back the same content but a different CSS, which then controls the display of elements accordingly. This as opposed to building in rules in the CSS to control display of elements using media queries which as Google's Developer Site mentions has some advantages given the possible impact of the 'user-agent query' set-up on page load time. My preference would be to control display according to device with media queries but was just wondering whether we'd be penalised for the hidden elements in this manner. As you rightly say though, if the intention is not there to gain but to provide a good user experience, all should be OK!
Cheers, Nick
-
Hey Nick
Google have thrown their hat in the ring here and stated that responsive design is preferred, probably due to the reasons you are stating that people could start to try and play silly games with only rendering specific content for specific devices, but, as with everything SEO, I would not worry about that if you are not looking to cheat.
The article is here with further reading linked out:
http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html
& here
https://developers.google.com/webmasters/smartphone-sites/
They basically state that it depends on your requirements, as it always does but in order of preference they want the following.
1. Responsive Design
2. Mobile site on same URLs with containing 'equivalent content' - now this is important as if I serve my mobile site, the main piece of content is the same, but some of the widgets are dropped, but this is just extras and the main purpose of the page, page title, URL and everything else is the same - the page is a parred down equivalent for mobiles.
Alternatively, you may have a completely different site for mobile users but this is not really the route you want to take in this smartphone driven world.
If you did want to test this and make sure you were not going to run into any problems you could simply set up a wordpress site with some supplemental text widgets and then use the wptouch plugin to show trimmed down versions of the content on the same URLs. This will give you a test environment you can rig up in a couple of hours max and you can put your mind at rest.
Give me a shout if you need any help!
Marcus
-
Hi all, just came across this conversation string when I too was looking for information about SEO implications for responsive design and whether Google would penalise sites who were hiding elements using on a page with CSS with good intentions. I know hiding text blocks is generally a no-no but in some situations it might be preferable from a user experience point of view when they are accessing via a mobile device.
MPO - how did you get on with your project. Any thoughts?
Andreas - you mentioned some research you were doing in this area. Have you come to any further conclusions?
Thanks, Nick
-
Hi Marcus,
Thank you very much for your thorough reply.
Here is an example I stumbled upon which use hidden div's: http://www.fork-cms.com/
I will look into hiding content for mobile devices using scripting but since you say that it wont harm my SEO I might just go with the easy solution and hide the div's in the css files.
Thanks again!
-
Hey MPO, maybe an example could help?
But, there are lots of options here and there is nothing stopping a developer showing certain divs to certain devices although if you were going to take that approach I would favour doing this in scripting and not rendering the content at all.
Ultimately, googlebot should see the full page and get ranking should be based on that. It is not till you have searched, found a result and clicked on it that there will be any kind of filtering for the specific device.
Most mobile themes for wordpress just show the main content OR have a separate set of widgetised areas for the mobile theme to show a simplified menu or content blocks.
Really, you are just trying to let the user have the best experience on the device they have chosen to use and whilst many smartphones can do the full experience my data connection is not always so great that I would opt for that over the core article or content I was chosing to look at.
Also, you can always give people the option to view the full site if they so choose.
But to go back to the question, does it harm your SEO, well no, not unless you are doing something dodgy and cloaking content for google bot specifically, you will be fine!
-
Hey Marcus
Thanks for your reply, much appreciated.
Seems like there isn't any downside to use responsive webdesign.However, I noticed a lot of responsive websites using hidden div's to hide certain parts of their websites in smaller resolutions.
From what I understand Google are not very happy about hidden div's, so I was wondering how it would react to a responsive website using hidden div's.
Would the page get crawled as it was original intended or will Google crawl the website using a lower resolution to simulate a mobile device?
Hope you, or anybody else for that matter, might have some input regarding this issue.
-
Agree with Marcus. Using different CSS for different devices and same content will help to avoid content duplication and many other issues with SEO.
-
Hey MPO
This is a fairly common feature now and can be handled entirely in CSS rather than having some archaic system that detects the user agent and then displays a version relevant to that device. With this approach, the page is the page and the content is the same so there really is no SEO implication to worry about.
As a jump in point, if you pick up a Wordpress or Joomla theme from a vendor like woothemes.com or yootheme.com you will find they work on PC's, tablets and smart phones. They tend to trigger a simplified mobile theme for the smart phones whilst using the full theme for a tablet.
The themes have some great CSS features built in to automatically resize images for different devices etc and really take care of most of the heavy lifting.
Wordpress as well is a great SEO platform so as a starting point: Wordpress + Professional Theme + Yoast SEO plugin is pretty solid. Sprinkle a bit of design loveliness and some worthy content and you are well on your way.
In short, this should not be something you need to worry about in 2012!
Marcus
-
True, you wouldn't have to put rel=canonical all over the place (as suggested in this SEOmoz article: http://www.seomoz.org/ugc/top-8-mobile-seo-email-and-website-tips)
But does the Google Mobile Bot "understand" the responsive design? Technically it should be no problem but I haven't found any evidence for this yet.
Any idea/suggestion on this?
Thanks, Doug.
Andreas
-
Very interesting question, MPO. I am currently doing some research on the same topic and haven't come across anything useful either.
I'd especially like to know how responsive design impacts mobile SEO. As the design can also serve mobile devices does the Google Mobile Bot understand that the website servers both "normal computer devices" and "mobile devices"?
As MPO said, any suggestions greatly appreciated.
-
Having a website deliver platform optimised pages from the same URL is better than some of the alternatives such as having different URLs or subdomain delivering mobile content. Responsive web design should avoid the problem of having duplicate content all over the place!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
SEO Implications of using Images for Article Titles
Hi guys! New to Moz Pro. I just recently completed an online course with Moz... I have a client who is writing some new content for their site, and we are approaching it with SEO in mind. I was wondering about using an image with text on it as the article title, instead of an actual "text on the page" title. Wondering if that's going to "cost" us anything, SEO wise. I guess we could use alt-text/title/description fields to make sure the keywords are crawlable for our article title but do they have less "weight" than a standard title? How does that work? Hope my question makes sense. Article header attached mB0PXsA.jpg
On-Page Optimization | | JakeWarren1 -
What's the best SEO tactics when you have a dedicated web address pointing to a page on a different site?
Hope someone can help with a question I've got about sorting out some duplicate content issues. To simplify the question, imagine there is a website a.com which has a page a.com/newslettersignup. In addition to the a.com domain, there is also a different web address, ashortcut.com, which points to a.com/newslettersignup. ashortcut.com is the web address that is advertised in marketing material etc. So what is the best way then to tell Google etc. that ashortcut.com is the preferred URL for the page which sits at a.com/newslettersignup? The advice I've read about the canonical tag, for example, doesn't cover this exact scenario so although it can support cross-domain information, I'm not sure if that's the best route to follow. Thanks!
On-Page Optimization | | Nobody15755058948220 -
Our SEO suggests thinning our homepage - is this a good idea?
We provide a single medical service in London. Our domain is "service"london.co.uk. Our home page consists of: Welcome message (40 words) Reasons why customers choose us (720 words) - as bullet points Benefits of the service (380 words - as 6 subheadings) Then a small sample of testimonials It currently looks word doc boring so that's definitely an area we are talking to our designer about. We currently rank second or third for our most popular keywords which are mostly variations of "service london" - these go straight to our home page. Our competitors do the same. The only other pages that rank are /pricing (for "service london price") and /reviews (for a tiny proportion of rarer keywords) The main variations in the services we provide is adult and children. We have /adults and /children pages for this where we describe the actual procedures (these are relatively new pages so perhaps they will rank for "adult/children service london" in the future, but right now, they still go to the home page). Now our SEO agency suggests we spread the content into more pages: Why us page, Benefits of service page etc., (also suggested we add more high quality content pages). Our home page will be similar to what moz suggested on whiteboard Friday - a few key points then directing them towards the sub-pages to read more. However I am unsure if this is suitable for us where the great majority of our organic traffic comes from "service london". These visitors should ideally still come to our home page and I'm not sure if Google will be thrilled that my home page is now poorer in terms of content despite the fact that the home page still links to these high quality pages on my site. Would really appreciate this beautiful community's insights on this. Thank you.
On-Page Optimization | | LondonAli0 -
Prestige Kew Gardens Domain SEO
Hi Team, I have been doing off page seo for my prestige kew gardens for quite some time. It has already been 5 months. till recently is was ranking in range of 200. Now I am able to get to first page from last month. But still I feel I am missing something to get it on top. ON Page Grade for this domain is A. I have used all the moz tool to check any on page issue. Everthing seems to be proper. Can anyone help me on this? http://www.prestigekewgardens.org.in/
On-Page Optimization | | mithungowda0 -
Should a website have the same standard headings for product pages? And how does that affect SEO?
Hello! I hope my question is self-explanatory but let me give you an example. Suppose I have website X selling A, B and C and I have a dedicated page for each of those products. For SEO practises, Is it better to have the same webpage structure for all product pages (i.e. the same headings and sections) or is it better to vary the structure of the page? Or is it really not important? Again going back to the example, is it better for product page A, B and C to have the same sections in the same order (i.e. Pricing, Product Details, Product Reviews) or is it better to keep it as a flowing content page (product page A has same information in B and C but all those pages are different with different headings and questions asked depending on the product)? Many thanks!
On-Page Optimization | | MarketingDude0 -
Should I redirect mobile traffic to a different url? Will it hurt SEO?
I'm working on a site that has lots of great content and ranks well but essentially the money is generated by affiliate links. I don't have a mobile version of the site but the company I'm affiliated with does offer a mobile redirect to their domain. Will redirecting mobile traffic to a different url hurt my SEO? I think the user will get a better experience by landing on a mobile page but I don't know if google will see it like that. Any thoughts?
On-Page Optimization | | SamCUK0 -
Domain registered location - SEO
Hi, I just read if you are targeting a location specific term, it can help SEO if the registered address of the domain is in the same location as the location term your going after. erm, Really?
On-Page Optimization | | activitysuper0 -
Breadcrumb position SEO impact
Hi all, Our UX designers are working on a new page design, and the breadcrumb position looks somewhat strange - it's almost in the middle of the page. The new page looks like this (the breadcrumb is below the head banner), but it's a showcase page that contains about 150 items. Each of them has a small thumbnail, title, category and short description. They've decided to use the head banner's place and have there all items, grouped in categories that visitors can browse. The breadcrumb menu is at 900 pixels from the top of the page In other words, you have the major part of this page content in front of the breadcrumb menu. Are there any SEO implications in such case? Should we use breadcrumbs on this page if they're not at the top? Thanks,
On-Page Optimization | | lgrozeva
Maggie0