Question

我使用jQuery滑块显示一系列图片，但在Google图片搜索中都没有显示这些图片，即使我们在相关关键字的常规搜索结果中排名靠前。我怀疑Google没有为图像建立索引，因为他们通过data-image属性将（lazy-）加载到滑块中。对于性能目的而言，我懒得加载图片而不是使用一组标准<img>标签，因此我试图找出以＆＃的方式提供资产的最佳方式。 39;更容易被搜索引擎索引。我考虑在幻灯片标记中使用<noscript>标记，如下所示：

<li class="slide" data-image="img/image.jpg">
    <div class="caption">IMAGE INFO</div>
    <noscript><img src="img/image.jpg" alt="Image info" width="x" height="x"></noscript>
</li>

我很好奇这种方法是否存在任何潜在问题，或者是否更适合某种情况？如果搜索引擎包含在<noscript>标签中，搜索引擎是否仍会将此标记视为与搜索引擎优化相关的标记？

感谢您的任何见解。

Answer 1

noindex标签是一种解决方案，但不是最好的解决方案。我有同样的问题，首先我尝试了图像站点地图，然后是noindex标签，最后我找到了最佳解决方案。我用一个完整的例子写了一篇关于此的博客文章： Lazy loading and the SEO problem, solved!

最佳解决方案是使用Google提供的方法来索引AJAX内容。但它不仅限于AJAX，实际上您可以在任何动态生成的内容上使用它。

在我的示例中，我将此方法用于动态加载图像的图库。简而言之，您必须使用转义的片段。片段是URL的最后一部分，以＃为前缀。片段不会传播到服务器，它们仅在客户端使用，以告诉浏览器显示某些内容，通常是移动到页内书签。如果不使用＃作为前缀，则使用＃!,这会指示Google使用丑陋的URL向服务器询问页面的特殊版本。当服务器收到这个丑陋的请求时，您有责任发送一个呈现HTML快照的页面的静态版本（在我们的例子中不是索引图像）。

我使用ASP.NET在服务器端生成HTML快照（但您可以使用任何技术生成它们）。

var fragment = Page.Request.QueryString["_escaped_fragment_"];
if (!String.IsNullOrEmpty(fragment))
{
    var escapedParams = fragment.Split(new[] { '=' });
    if (escapedParams.Length == 2)
    {
        var imageID = escapedParams[1];
        // Render the page with the gallery showing the requested image (statically!)
        ...
    }
}

noscript标签方法的缺点是您提供的用户体验较差，实际上用户无法为显示特定图像的页面添加书签。使用片段和JavaScript，您可以为用户提供最佳体验

if (window.location.hash)
{
    // NOTE: remove initial #
    var fragmentParams = window.location.hash.substring(1).split('=');
    var imageToDisplay = fragmentParams[1]
    // Render the page with the gallery showing the requested image (dynamically!)
    ...
}

使用<noscript> fallback </noscript>通过JS延迟加载图像

1 个答案: