Question

I’m not sure I’ve asked that question correctly, but hear me out…

In my main navigation I am calling a number of my links via fancybox.ajax, which then displays a separate page (ie. clicking on a link entitled ‘INFO’ opens info.php within Fancybox).

This is working, but I also see examples where people use a hidden div.

This question is helpful, explains things from an SEO standpoint, and has caused me to rethink my structure. The question is why would I want to contain my data in a separate page rather than a hidden div, and what benefits does it bring me? I’ll note that I am currently using separate pages because I believed that was a good practice, but after reading that question I have been turned.

EDIT : I understand why I would use a separate page without a modal obviously…but I am specifically asking about not using hidden divs with a modal box

Answer 1

If you are calling those external pages via link, then Google follows the links regardless whether they are opened in a modal box or not. If you have javascript disabled those pages still will open. So

<a class="fancybox" href="info.php" rel="help">INFO</a>

… is a perfect valid structure from the SEO point of view. How the information will be shown to the visitor, in the same window, in a new tab or in a modal window is a matter of presentation.

Curiously, you could have a hidden <div> and open the contents of such in a modal window, but as mentioned by @zachary, having hidden content may affect the performance of your page load.

NOTICE that in this case we are talking about displaying “linked” content in a modal box, which is different than pulling the content dynamically via any ajax method (jQuery .load() or $.ajax() for instance) … that definitively has effects from the SEO point of view because Google won’t see the contents and the contents actually won’t show up at all if the visitor has javascript disabled.