通过JS延迟加载图像<noscript>回退

我正在使用jQuery滑块来显示一系列图像，并且它们都不显示在Google图像搜索中，即使我们排在正常搜索结果顶部相关关键字。我怀疑Google不会将图像编入索引，因为它们正在通过data-image属性（惰性）通过JavaScript加载到滑块中。对于性能来说，延迟加载映像并不使用一组标准<img>标记是非常关键的，因此我试图找出以更容易被搜索引擎编入索引的方式提供资源的最佳方式。通过JS延迟加载图像<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>标签如下考虑？如果搜索引擎包含在<noscript>标签中，那么搜索引擎是否仍会考虑与SEO有关的标记？

感谢您的任何见解。

来源

2014-04-02 nickpish

这个问题似乎是题外话，因为它是关于SEO –

尽管这个问题肯定是涉及到搜索引擎优化的最佳体验，我的问题是纲领性所以我想它将与这个论坛有关。 – nickpish

noindex标签是一个解决方案，但不是最好的。我有同样的问题，首先我尝试了图像站点地图，然后noindex标记，最后我找到了最佳解决方案。我写了这一篇博客文章有充分的工作例如： Lazy loading and the SEO problem, solved!

最好的解决方案是使用由谷歌提供的索引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!) 
     ... 
    } 
}

脚本标记方法的缺点是，你提供一个不好的用户体验，其实用户不能够书签显示特定图像的页面。使用片段和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!) 
    ... 
}

来源

2014-05-19 11:35:08 Igor

+1：但缺点是，在高速缓存的环境中，您无法从缓存中提供此网页，该缓存还有其他一些draback（=> google与缓存相比收到较慢的页面...） – Markus

通过JS延迟加载图像<noscript>回退

回答

相关问题