image - 使用

Question

我正在使用 jQuery slider 显示一系列图像，但在 Google 图像搜索中没有显示任何图像，即使我们在相关关键字的正常搜索结果中排名靠前。我怀疑 Google 没有为图像编制索引，因为它们是通过 data-image 使用 JavaScript(延迟)加载到 slider 中的。属性。出于性能目的，我延迟加载图像并且不使用一组标准 <img> 是至关重要的。标签，所以我试图找出以更容易被搜索引擎索引的方式提供 Assets 的最佳方式。我正在考虑使用 <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> 中，搜索引擎是否仍会认为它与 SEO 相关？标签？

感谢您提供任何见解。

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!)
    ...
}