3

I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?

I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!

My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.

Do you experts have any advice? Thank you!

magz
  • 175
  • 2
  • 8
  • I doubt you're going to get around the display:none problem since it's equiv to making text color the same as the background color. It would help to know what type of content you're trying to hide. Is it paragraphs? Links? etc. – JMC Aug 30 '10 at 22:08
  • It's a div block element containing paragraphs, images and maybe a textbox or two. – magz Aug 30 '10 at 22:17
  • Since it's the core content of your site, the small user experience gain is not worth giving up SEO. You have two things going against you: 1. You want dynamically loaded content: see 'SEO and Ajax' for a general idea of the problem , 2. You are going against search engine rules for indexing content. In the case of Ajax, the search engines will eventually figure out how to index it. In your case, they are always going to hate hidden content. Using a delay timer to display the content might be smarter, but you should research if that option is SEO friendly. I'm interested to see a solution also – JMC Aug 30 '10 at 22:48
  • I'm not sure if what you are doing is actually a problem though, because the content is accessible to the crawler via a link. I think a bigger penalty is given when there is a block of content that is hidden and inaccessible to the crawler from the user's view. – JMC Aug 30 '10 at 22:57
  • actually, its really dynamically loaded via Ajax methods or the like - it is just content that is present in the original HTML markup, that just needs to be hidden before the page starts rendering. And then to be shown upon mouseover or mouseclick of its parent. – magz Aug 30 '10 at 23:52
  • acidjazz, consider this - all of these concerns relate to Google warning about hidden text using `display:none`, but makes no mention of content that is hidden using Javascript. Whilst a spammer may take advantage of this, I would rather use this in this fashion: right at the top of my page in the head tag place `` before everything executes. Then at the bottom of my page, once its loaded, I can then use JS to toggle visibility of that element. what do u think? – magz Aug 31 '10 at 00:30
  • I wouldn't do it personally, because it seems high risk and low reward in your case. You're relying on the search engine to trust your page enough to not consider your actions a spamming technique. However, if you're following a strict content theme and everything seems related, then it's less risky. For a more general take on when it's safe to use javascript, see my answer below. – JMC Aug 31 '10 at 03:54
  • Don't forget that not all browsers support JavaScript, and even in those that do, some people turn it off. So it's smart to have the content fully visible if there's no JavaScript, which means it would be fully visible to search engines. Then use jQuery's `ready` event to hide the content as soon as the page is loaded, but before it renders. – Joe White Aug 31 '10 at 11:47

2 Answers2

1

google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html

Steven A. Lowe
  • 60,273
  • 18
  • 132
  • 202
0

If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.

Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.

EDIT, additional info as pertaining to the original question: The search engine friendly way to display content dynamically is to load it, then hide it from the user.

JMC
  • 1,700
  • 7
  • 25
  • 34