4

I am planning to make a responsive+mobile first web design. So here is my plan:

  1. Making a mobile first website.
  2. Using Javascript to load desktop or big screen HTML

However, I have a problem here. From my knowledge, the HTML content which I will load using javascript will not be readable by search engines? I have searched a lot on internet but I could not find a reasonable answer to this problem.

Can anybody tell me if it is possible to do SEO friendly conditional loading using Javascript? Or do I have to look into server side language i.e PHP/ASP to load content using device detection?

Aamir
  • 5,324
  • 2
  • 30
  • 47
Umair Cheema
  • 403
  • 2
  • 6
  • 14

2 Answers2

4

If the content is the same for the mobile and desktop sites, and you are just formatting it different for each screen, then that should just involve CSS, Media Queries, and a little JS to help with backwards compatibility. This method should not hurt your SEO.

Here is a good tutorial: http://www.html5rocks.com/en/mobile/responsivedesign/

It's the hiding of content on the initial page load (so you show it later via JS or you pull it in via AJAX) that is not good for SEO.

To have google crawl AJAX content you would need to follow the steps here: http://developers.google.com/webmasters/ajax-crawling

Here is a good blog post by Google about responsive design: http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html

Justin
  • 26,443
  • 16
  • 111
  • 128
  • I disagree because a) Content can often be different between platforms and b) SEO can still be good even when using AJAX – Marko Oct 18 '12 at 02:04
  • In the question they state, "...the HTML content which I will load using javascript will not be readable by search engines." Which is precisely what I am responding about. Pulling in data via AJAX hurts your SEO because many search engines only index what is visible on the initial page load. – Justin Oct 18 '12 at 02:07
  • @Justin Aim is to keep the basic content same for mobile and desktop but to enhance it to detailed information/content when displayed on desktop or large screens. And I am planning to load it VIA JS. – Umair Cheema Oct 18 '12 at 03:38
  • A responsive design can show/hide content based on the screen size so I don't think you'd need different HTML or any server side code to check the device type. In order for the content loaded via JS to be indexed by Google, you'd need to follow the steps here: http://developers.google.com/webmasters/ajax-crawling – Justin Oct 18 '12 at 06:37
  • I need conditional loading because I don't want to load all the content at once and also I don't want to show/hide it using css/JS techniques. It makes the page size bigger and increase the download time. So, it is not a good mobile-first strategy. Thanks for the link from Google. As Marko said, I would need to do it using hashbang. – Umair Cheema Oct 18 '12 at 22:40
  • If performance is your concern, I would not recommend hashbangs. That is precisely why Twitter stopped using them (along with their many shortcomings). https://blog.twitter.com/2012/improving-performance-on-twittercom – Justin Jun 11 '15 at 16:31
1

Have a read about Hashbangs which allow for dynamically loading content into web pages.

I won't comment on whether you should use server side, Javascript or simply a responsive design as you've specifically mentioned Javascript.

From Google

This document describes an agreement between web servers and search engine crawlers that allows for dynamically created content to be visible to crawlers. Google currently supports this agreement. The hope is that other search engines will also adopt this proposal.

Marko
  • 71,361
  • 28
  • 124
  • 158
  • Aim is to keep the basic content same for mobile and desktop but to enhance it to detailed information/content when displayed on desktop or large screens. So, I really don't want to use Hashbangs. i.e is it possible to load enhanced content on index.asp instead of index.asp#!desktop_version. Does google treat index.asp#!desktop_version as a separate url than index.asp? – Umair Cheema Oct 18 '12 at 03:46
  • I have found the following solution: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started point 3. Handle pages without hash fragments answers what i exactly wanted to do. – Umair Cheema Oct 18 '12 at 23:47
  • Hashbangs are a valid solution but there are drawbacks. Twitter says they were able to improve their page speed by 80% when they removed them. http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html?m=1 – Justin Apr 17 '13 at 01:08