Shimon Sandler

3 Things to Make the Collapsible DIV SEO Friendly

There are situations where a website needs to place a lot of additional text on a webpage, but it interferes with the visual designs & potentially user-experience. So, whaddya do?

For example, what if you want to include a video transcript on your video webpage, or place a list of UPC codes on an ecommerce site, it could be a very large amount of text.

How can you elegantly place the additional text on the page without messing up the user experience, and/or appearing spammy?

The answer is to create collapsible content that exists on a page that is still crawlable to the search engine spiders. But, if you use AJAX, can it still be SEO friendly?

One might wonder if the collapsible DIV is search engine friendly since it is in Javascript. However, it can still be crawled by making jQuery SEO friendly.

Google is able to read Javascript onclick textlinks.

If you’re defaulting to visible for the spiders, but hidding the DIV via javascript for normal users, that seems similar to cloaking. Is it considered Black Hat SEO because the content is hidden? Isn’t it intentionally differing the appearance for the search engines?

I wouldn’t consider this Black Hat SEO because you are showing the copy on the page without having to go to another page or even refreshing the page. The copy in the include file is being displayed on the page it is intended for when a user chooses for the full copy to be displayed.

White hat all the way!

I found a good example using the jquery framework.

It is spiderable. I used a Search Engine Spider Simulator to check:

collapsible div

Here are 3 things to remember to insure your collapsible DIVs are Search Engine Friendly:

  1. Make sure your page is configured with all of your DIVS expanded when JavaScript is disabled.
  2. Make sure all the divs and the text is on the page–and not called from an external file.
  3. Make sure the header line is visible, otherwise you might be considered as hiding text.
Be Sociable, Share!

Comments

  1. Aussiewebmaster says:

    another great article of informative insights

  2. It’s not black hat in nature, but it depends on what you hide and how much. Matt Cutts fairly recently talked about it in one of his videos: http://www.youtube.com/watch?v=UpK1VGJN4XY

  3. Winooski says:

    I dunno, I think this is one of those techniques you need to use sparingly for SEO purposes. It would only take one competitor dropping the dime on you to Google, saying, “Psst, check out all that hidden text these guys have.” The collapsable DIV is a useful design element, but I think SEOs need to be very careful using it.

  4. I have done a quite exhaustive search into how using collapsible DIVs to ‘hide’ very long content (text or sometimes images) – and using a Read more or Plus and Minus type button to open/collapse the DIV if the user is interested – might affect search results with respect to the Hidden Text penalty, but can not find anything conclusive. Does anyone know the possible pitfalls of using this technique?

    Specifically, this is for an Annual Report which has extremely long boring copy, and it is nicer to just show the intros and let the user decide if they want to read more. I have done it previously and the text that is hidden can be found on a SERP, so it is being indexed, but I wonder if there is a penalty to the rest of the site?

    There are also a couple of ways to do it, using either pure javascript to declare the CSS ‘hidden’ attribute, or javascript and hard coded (external) CSS with a hidden attribute. Is there a safe way to do it?

  5. My previous comment might have not gone through..
    Just wanted to thank for the insightful article. I actually used collapsable “read more” a lot on couple of my websites and SE bots were always able to crawl. If they ranked for those keywords in that content was another issue…. to find them indexed, you would need to search the keywords in double quotations which users hardly do

  6. The collasped content is indexed and does rank.

    So many legitimate websites use javascript sliders, “read more” buttons, etc., for very legitimate purposes (improving user experience)that Google can’t really punish that behavior. The quality of Google search results would suffer.

    I suspect that collapsed content is treated somewhat like content “below the fold” in Google’s page segmentation model. It’s indexed, it counts, it’s not penalized, but words in a boring annual report that’s collapsed dosn’t count as much as the first word in an h1 header at the top of your page.

  7. hmmm making divs collapsible is good but it should not be abused, i mean, if you are adding such divs to add more keywords to the posts, it should not be ranked by google.

    but i have seen in few websites where this technique is being used and google is ranking them on top, i wonder why.

    To me, i don’t see any difference between whitehat and blackhat seo, use it to beat your compititor not google.

    you will be a winner at the end.

Speak Your Mind

*

*