这是对SEO的“延迟加载”图像的好方法吗？

14

对于通过AJAX加载的图像，或者说，我不希望索引，使用数据- *属性的方法：

<img data-src="path/to/image.jpg" class="js-lazy-load" />

javascript将data-src属性映射到src属性：

<img src="path/to/image.jpg" />

但是对于我确实希望索引的HTML中的图像：

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

JavaScript的替换锚与图片标签：

<img src="path/to/image.jpg" alt="Image alt text here" />

似乎可以保留索引功能和页面意图（用于可访问性），而又不影响SEO（希望如此）。但会喜欢第二意见。

编辑：关于此方法的任何反馈-具有图像链接的页面与具有内联IMG标签的页面-在页面排名方面的比较。我猜测内联IMG标签的效果会更好，因为每个传出的链接都会降低整体页面的排名（除非它们具有rel =“ nofollow”会适得其反）。

seo google javascript

— Aeron
source

传出链接不会影响您的网页排名。公关不是这样的。

— 冒犯君主

传出链接的总数会减损每个链接具有的PR吗？因此，如果该页面最初具有5个链接-每个链接的PR均为20％-但采用这种方法，则将有50个链接-现在每个链接的比例为2％？

— Aeron 2012年

没错传递的PR的量是通过页面上的链接数量划分，但是由于PR塑身，nofollow链接之间划分PR时，现在还包括链接。因此，即使您有45个nofollow链接和5个常规链接，这5个常规链接仍然只能传递2％的链接汁。尽管Google聪明，但他们将图像链接与HTML链接区别对待，因为您的解决方案对于可用性和可访问性是有效的解决方案，因此不应该因为稀释您的PR流程而气disc。

— 冒犯君主

10

那是个好方法。您可以采用的另一种方法是使用<noscript />元素存储img标记的普通版本（该标记将由Google索引），然后使用JS创建延迟加载版本。

另外，您可以结合使用Google的hashbang AJAX约定和HTML5的历史记录API来创建可书签和可索引的页面状态。如果您正在执行某种无限滚动页面，则这尤其可取，因为它提供了一种伪分页形式-大多数无限滚动实现都迫切需要的某种形式（:: cough :: Google Images :: cough ::）。

编辑：将链接用作图像的占位符可能导致页面上的PR流在更多链接之间分配，尽管PR始终保持不变，除非您使用nofollow理论上的做法，否则这将增加那些图像用于图像搜索的PR。

如果您不希望这样做，或者希望页面对非JS用户正常降级，则可以采用相反的方法，从常规图像开始，但使用阻塞 JS来替换src页面加载时图像的属性（甚至是只需删除图像元素并将src属性存储在延迟加载队列中即可。如果操作正确，则可以在实际下载任何图像之前完成此操作。

— 莱斯特·马耶斯特（Lèsemajesté）
source

2

我很乐意看到-Google没看过，<noscript>我还没有找到阻止Firefox中图像加载的方法。替换src（即使在<script>标签后立即加上<img>标签）似乎也不能阻止图像在最新版本的Firefox中下载。如果您知道另一种方法，请分享！

— mindplay.dk 2012年

@ mindplay.dk：Google可能选择不使用noscript摘要中的文本，但是我读过的所有内容都使我相信它noscript总体上可以索引内容。但是，关于替换，您是正确的src。我最初的想法是script 在第一个图像之前放置一个，以便它阻止图像的加载，直到脚本加载并执行之后。但经过更多检查，这将无法正常工作，因为此时图像不会显示在DOM中。您可以通过最大化与主机的并发连接来阻止下载，但是如今这是不切实际的。

— 冒犯君主

一个肮脏的黑客别人想出了就是用JS注释掉JS-免费图片像这样（有一个更长的版本，与投机性交易分析）<script>document.write('<'+'!--');</script><img src=...>。您必须自己决定这是否可以接受。

— 冒犯君主

2

我看过加载有此模式的图像：

<img data-src="path/to/image.jpg" class="js-lazy-load" />

被Google和Google图片搜索选中，其他人也发现了它。由于Google现在在您的页面上执行javascript，因此可能无需将实际图像放入src属性。忽略src属性可能会导致图像周围出现灰色边框，因此最好采用以下方法：

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb。这不一定适用于其他搜索引擎。

— 威尔斯特
source