Our boss recently asked our dev team to build what he calls a "splash page" for the home page of our web site. Not the stand-alone, redirecting splash page of old. Instead, a home-page visitor would at first see nothing but a hard-sell, call-to-action "splash" message with two buttons: a mailto link and an "Enter Site" button. If the "Enter Site" button is clicked, the hard-sell message goes away the the "regular" home-page content is revealed.
The solution devised by a team member is to have a #hardsell div and a #main content div (which includes the site header and navigation). Both divs have display:none set with inline CSS.
Visibility between the two divs is toggled using sessionStorage. This avoids having to set a cookie.
function splashCheck() {
var readValue = sessionStorage['myvariable'];
if (readValue === "splash") {
$("#main").css( "display", "block" );
} else {
$("#hardsell").css( "display", "block" );
var myVariable = "splash";
sessionStorage['myvariable'] = myVariable;
}
}
splashCheck()
This is admirably simple, but I am concerned about two things:
Having
display: noneon the#mainand#hardselldivs means there's no visible content until thatsplashCheck()function fires. You see nothing if javascript is disabled.SEO: What will Google bots and other crawlers see on this page? Nothing? (Bad!) Only the
#hardsellcontent? (Also bad!) The#maincontent? (Preferred!) Both sets of content? (Acceptable!)
I cannot find a definitive answer as to what Google will and will not crawl in this case. Google bots will supposedly crawl hidden content like accordions, but Google docs also say that bots "may have" issues with dynamic hidden sections.
Are my concerns baseless? Is there a way to do this with sessionStorage that lets Google crawl the #main content while showing visitors just the #hardsell on initial visit?
