SEO - hidden content for slideshow

Question

SEO - hidden content for slideshow

302 Views Asked by Laurent At 03 April 2025 at 21:42

I'm trying to optimize our SEO for the following kind of page: http://www.skynet.be/actu-sports/dossier/1549514/ces-acteurs-morts-sur-le-tournage#slide=5

Those are basically slideshows where all the content is available on the same page to avoid page reload but only the active slide is visible for the user. Google has indexed those pages with all the content, even the hidden one but we have two issues:

We can access any slides by using #slide=x in the url but Google doesn't understands that. The consequence is that the result shown in Google search pages always takes the title and description from the first slide.

Would it solve the problem if we used the ajax solution with !#slideX instead? We want to avoid having page reloads so using ? + parameters doesn't look like the best option.
It looks like content in hidden tabs is given less priority. Before implementing those slideshows where everything is on the same page, we were providing separate pages for each slide. SEO traffic went seriously down since we brought everything under the same page.

Any idea of what we could do to improve the visibility of hidden content for Google?

Each slide is "stored" in the following structure:

<section class="info">
<div class="adv-copyright-bar"></div>
<h3 class="slide-title">SLIDESHOW TITLE</h3>
<div class="slide-description">SLIDESHOW DESCRIPTION</div>
</section>

The active slideshow is set to display:block while non-active slideshows are set to display:none. JS controls the behaviour (hide/display) but JS is minified, I can't really take it out of the global JS file.

Thanks! Laurent

Original Q&A

There are 2 best solutions below

tarleb On 24 June 2015 at 09:06

SEO advice is difficult to give and is subject to constant change, so take this with a grain of salt.

A good option might be to switch to a CSS only slideshows (example). This would make it easier for google to recognize both content and anchor links. Maybe you can combine your JS with the CSS only slideshow to reproduce your current layout. A lot depends on how much effort you can and want to put into this.

Below is a proof-of-concept, badly styled example of what I have in mind. It uses the srcset attribute and Picturefill as a polyfill to get responsive images (only for "Top Gun"). An additional benefit are (anchor) URLs containing nearly arbitraty, SEO optimized strings.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Slideshow test</title>
<style type="text/css">
  .slide-image {
    display: inline;
  }
  .slide {
    display: none;
  }
  .slide:target {
    display: block;
  }
  .slide:target ~ section.slide {
    display: none;
  }
  .slide:last-of-type {
    display: block;
  }
</style>
<body>
<ul class="thumbnails">
  <li class="slide-image">
    <a href="#Brandon-Lee">
      <img alt="Brandon Lee"
           title="Brandon Lee"
           class="preview"
           src="http://images-mds.staticskynet.be/NewsFolder/w-132_h-75/37268_155.jpg">
    </a>
  </li>
  <li class="slide-image">
    <a href="#Tel-père,-tel-fils">
      <img alt="Tel père, tel fils"
           title="Tel père, tel fils"
           class="preview"
           src="http://images-mds.staticskynet.be/NewsFolder/w-132_h-75/37269_155.jpg">
    </a>
  </li>
  <li class="slide-image">
    <a href="#Top-Gun">
      <img alt="Top Gun"
           title="Top Gun"
           class="preview"
           src="http://images-mds.staticskynet.be/NewsFolder/w-132_h-75/37270_155.jpg">
    </a>
  </li>
</ul>

<div class="slides">
  <section id="Brandon-Lee" class="slide info">
    <img src="http://images-mds.staticskynet.be/NewsFolder/w-600_h-450_s-1/37268_155.jpg"/>
    <div class="adv-copyright-bar">
      <span class="copyright">&copy; Miramax Films</span>
    </div>
    <h3 class="slide-title">Brandon Lee</h3>
    <div class="slide-description">Le fils de Bruce Lee a été abattu sur le
    plateau de « The Crow »…</div>
  </section>
  <section id="Tel-père,-tel-fils" class="slide info">
    <img src="http://images-mds.staticskynet.be/NewsFolder/w-600_h-450_s-1/37269_155.jpg"/>
    <div class="adv-copyright-bar">
      <span class="copyright">&copy; Giga Paitchadze</span>
    </div>
    <h3 class="slide-title">Tel père, tel fils</h3>
    <div class="slide-description">Le destin n'a pas été plus souriant pour
    Bruce Lee.Le 10 mai 1973, il perd …</div>
  </section>
  <section id="Top-Gun" class="slide info">
    <img src="http://images-mds.staticskynet.be/NewsFolder/w-260_h-260_s-1/37270_155.jpg"
         srcset="http://images-mds.staticskynet.be/NewsFolder/w-335_h-335_s-1/37270_155.jpg 400w,
                 http://images-mds.staticskynet.be/NewsFolder/w-600_h-450_s-1/37270_155.jpg 600w"
         sizes="(min-width: 600px) 600px,
                (min-width: 400px) 400px,
                80vw"/>
    <div class="adv-copyright-bar">
      <span class="copyright">&copy; Paramount Pictures</span>
    </div>
    <h3 class="slide-title">Top Gun</h3>
    <div class="slide-description">Ce n'est pas un hasard si le célèbre « Top
    Gun » est dédié à Art Scholl.</div>
  </section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/2.3.1/picturefill.min.js"
        type="text/javascript">
</script>

**Laurent** · Accepted Answer

after some research I came accross something that might be a good option: https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

It is ajax based but proposes a solution for clean URLs. I'll give it a try to see if it works.

Thanks Laurent

SEO - hidden content for slideshow

There are 2 best solutions below

Related Questions in AJAX

Related Questions in SEO

Related Questions in HIDDEN

Trending Questions

Popular # Hahtags

Popular Questions