phpjquerydynamicmetatag

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


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?


Solution

  • 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.