JavaScript and SEO. How Should I reconcile them?


Tags: javascript,css,seo

Problem :

According to some SEO experts and theories like Progressive Enhancement (PE), page content should be presented appropriately to users even with JS disabled. And I totally agree with this.

Here is my situation, on our client's About Us page, there is a div which lists their company events. Due to space and another considerations they hide some of event lists with JS as well as CSS element display:none.

So far, two things really really scare me about this.

  • One, CSS element-display:none. My experience tells this is very dreadful in terms of SEO.
  • Two, JavaScript disabled. With JavaScript of my browser disabled, I simply cannot see the hidden event lists. Obviously without JS, the learn more tag is nonfunctional. This kind of situation is definitely going against PE theory and SEO experts' warning.

In addition to those two scaring things, I also have one puzzlement.

I used Google web master tool to fetched this page and it showed all of hide event lists. If Google robot craws my site with JS disabled, how could it fetch those hidden content? or if it is able to fetch those hidden content, does it mean the PE theory is outdated and those experts are wrong?

What should I do now? Thank you for your time.



Solution :

Firstly, display:none is not universally considered to be a SEO faux pas; crawlers can still 'crawl' that text; there are just conflicting theories as to if it affects reputation, or if they'll index it with equal weight.

The PE theory and SEO/findability theory overlap, but their 'interests' differ at times; you could in theory do something thats bad PE without it being bad SEO.

If JavaScript is disabled, PE theory says 'you should be able to functionally use all of the site'. But, if the default is display:none; and it becomes display: block; via JavaScript, that's not PE, since a JS disabler could never view your content (though a crawler might).

The better practice is to have display:(not none) be the default, and set display: none; via JavaScript. That way, JS disablers see and use the content (even if in a visually unappealing way), and enablers experience it the way you inteded

That covers you on both counts, since crawlers can't tell if JS is being used to hide something, in case there IS SEO-negativity associated with display:none;


    CSS Howto..

    CSS How to Transition from White to Background on Hover

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    How to scale a website for mobile devices?

    How to make my phone number bold using css [closed]

    How to make existing javascript/css files be compitable in Google Chrome?

    How to underline gaps created with CSS columns property?

    How to convert SVG CSS animation to pure JS code

    How can I get this chart to display next to data table in CSS?

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    CSS How to set div height 100% minus nPx

    jQuery, how can i do to toggle a margin

    How to get menu text vertically aligned with inherited height

    How do I keep my background image at the bottom of the page?

    How do I edit the CSS of the Html.DisplayFor method in MVC 3?

    how to decrease the height of content area for with css?

    How to achieve CSS transitions with delay timers but without any easing function?

    How to organize user's shares to easily add comments to that particular post?

    How do I center all my elements?

    How to have only a vertical scroll bar on a div

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How to Position a CSS Element on the page? Without position properties?

    how to align div's horizontally in CSS

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How to make a disabled select box look like a normal text box(css only)

    How to align nav drop down menu in css?

    How to achieve a CSS footer “curtain” effect?

    How to limit width of

    -

    tag by length of content

    How to change expand div after click and collapse it after another click?

    How to add number to current CSS width with jQuery

    How to reveal part of blurred image where mouse is hovered?