Question

我正在尝试针对以下类型的页面优化我们的搜索引擎优化： http://www.skynet.be/actu-sports/dossier/1549514/ces-acteurs-morts-sur-le-tournage#slide=5

这些基本上是幻灯片，其中所有内容在同一页面上可用，以避免页面重新加载，但只有活动幻灯片对用户可见。 Google已将所有内容编入索引，即使是隐藏的内容，但我们还有两个问题：

我们可以在网址中使用＃slide = x访问任何幻灯片，但Google不明白这一点。结果是，Google搜索页面中显示的结果始终采用第一张幻灯片中的标题和说明。

如果我们使用#jlideX的ajax解决方案，它会解决问题吗？我们想避免重新加载页面使用？ +参数看起来不是最佳选择。
看起来隐藏标签中的内容优先级较低。在实现那些所有内容都在同一页面上的幻灯片之前，我们为每张幻灯片提供了单独的页面。由于我们将所有内容都放在同一页面下，因此SEO流量严重下降。

了解我们可以采取哪些措施来提高Google隐藏内容的可见性？

每张幻灯片都“存储”在以下结构中：

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

活动幻灯片设置为显示：阻止，而非活动幻灯片显示设置为显示：无。 JS控制行为（隐藏/显示）但JS被缩小，我无法真正将其从全局JS文件中删除。

谢谢！劳伦

Answer 1

搜索引擎优化建议很难给出，并且会不断变化，所以请耐心等待。

一个好的选择可能是切换到仅限CSS的幻灯片（example）。这将使谷歌更容易识别内容和锚链接。也许您可以将JS与仅CSS幻灯片组合在一起，以重现您当前的布局。很大程度上取决于您可以投入多少精力并希望投入其中。

以下是我所想到的概念验证，风格很糟糕的例子。它使用srcset属性和Picturefill作为polyfill来获取响应式图像（仅适用于“Top Gun”）。另一个好处是（锚）包含几乎任意，SEO优化字符串的URL。

<!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>

Answer 2

经过一些研究后，我发现了一些可能是一个不错的选择： https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

它是基于ajax的，但提出了一个干净的URL解决方案。我会试试看它是否有效。

由于劳伦

SEO - 幻灯片的隐藏内容

2 个答案: