PHP(?) or jQuery(?) Best method to change metatags?

Question

On my site, I present a slideshow of content, for which I'm using jquery. So the user will click on an arrow and the next div (which is hidden by default) will display. Within each div, (whether showing or not) there are hidden span tags that contain the title of the content the user is looking at and a summary of the content...

    <div id="content" style="display:block">
      <h2>Relevance of Oceanography</h2>
      <p>Some text</p>
      <span class="hiddentitle" style="display:none">Relevance of Oceanography</span>
      <span class="hiddencontent" style="display:none">Some content</span>
    </div>

    <div id="content" style="display:none">
      <h2>Seafloor Spreading and Earthquake Activity</h2>
      <p>Some text</p>
      <span class="hiddentitle" style="display:none">Seafloor Spreading and Earthquake Activity</span>
      <span class="hiddencontent" style="display:none">Some content</span>
    </div>

What I'm trying to do is to replace or update the tag based on the currently displayed div's hiddencontent. Since it's stored in a database, I thought I could just use php, but then, I realized that would probably mean that I'd have to reload the page each time, which kinda defeats the purpose of having a slideshow... But, then, if I use jquery, I'm concerned that search engines won't actually see the meta content, since it would change after the page loads...

Is there a way to do what I'm trying to do here, or am I just SOL?

Answer 1

Search engines will more than likely not see anything that is changed during the slideshow. You might consider creating a Google Sitemap that will contain deep links to each individual page in your slideshow. You can still use jQuery to run your slideshow, just provide a way to start the slideshow at any point via a parameter in the querystring.

Answer 2

You don't need to make the span tags hidden, as they're within a hidden div element already.

In terms of spidering, and even just usability, I'd suggest having an index with permalinks to the direct images, then you don't have to worry about what you want to do with the slideshow and users can link to a specific image.

There are two ways to go about this, one would be to use JavaScript to just change the visibility of the divs. This is simple enough, just changed the element's style.display attribute.

For this method, there are a lot of premade jQuery solutions such as LightboxJS. Here's an aggregated list of them:

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

The other would be to make an AJAX call to retrieve the markup. This limits the initial load, but can make switching between images slower.

Answer 3

It is often a good idea to do a javascript-free implementation of the interface before spicing it up with jQuery. That way, you still have a server-side logic for anyone browsing the site without javascript (f.ex searchbots).

Using click events and preventing default actions, you can seamlessly apply the presentational interface layer using jQuery or native javascript in the next stage. Sometimes you can re-use server-side logic using Ajax.