SSR 真的能让你的网站 SEO 起飞吗？别忘了还有懒加载这个坑

SSR 真的能让你的网站 SEO 起飞吗？别忘了还有懒加载这个坑

作为一个混迹于互联网的程序员，你肯定对 SSR (服务器端渲染) 和 SEO (搜索引擎优化) 这两个词不陌生。很多时候，大家会把 SSR 和 SEO 紧密地联系在一起，认为只要用了 SSR，网站的 SEO 就能蹭蹭蹭往上涨。那么，SSR 真的有这么神奇吗？今天咱们就来好好聊聊这个话题，顺便扒一扒懒加载这个经常被忽略的“坑”。

先说说，为啥大家都觉得 SSR 对 SEO 好？

这事儿还得从搜索引擎的工作原理说起。你想啊，搜索引擎的爬虫（比如 Googlebot）每天都在互联网上爬来爬去，抓取各个网站的内容。然后呢，它会根据这些内容来给网站排名。问题来了，如果你的网站是纯前端渲染的 (CSR, Client-Side Rendering)，爬虫看到的可能只是一堆 JavaScript 代码，而不是实际的内容。这就好比你给面试官看了一份空白简历，他怎么知道你有多厉害呢？

SSR 就不一样了。它是在服务器端就把 HTML 渲染好了，然后直接把渲染好的 HTML 返回给浏览器。这样一来，爬虫看到的直接就是完整的页面内容，就跟普通用户看到的一样。这下，搜索引擎就能更好地理解你的网站内容，给你一个更好的排名了。

举个例子，假设你有一个博客网站，用 React 或者 Vue 这样的框架写的。如果用 CSR，爬虫可能只能看到一个空的 <div id="root"></div>，根本不知道你博客里写了啥。但如果用 SSR，爬虫就能看到你的文章标题、正文、图片等等，这样它就能把你网站的内容收录进去，并根据相关性进行排名。

所以，从理论上讲，SSR 确实对 SEO 更友好。它可以：

1. 提高首屏加载速度 (FCP, First Contentful Paint)： SSR 直接返回渲染好的 HTML，浏览器可以直接解析显示，不用等 JavaScript 下载、执行、渲染，用户能更快地看到内容。
2. 改善用户体验： 更快的首屏加载速度意味着更好的用户体验，用户不用对着白屏等半天。
3. 更利于搜索引擎爬取： 搜索引擎爬虫可以直接抓取到完整的 HTML 内容，更好地理解网站内容。
4. 更好的社交媒体分享： SSR 可以让社交媒体平台正确地抓取到页面的标题、描述和图片，让分享的内容更丰富。

SSR 这么好，是不是用了就万事大吉了？

当然不是！SSR 只是解决了“爬虫能不能看到内容”的问题，但还有一个很重要的因素会影响 SEO，那就是页面性能。你想啊，如果你的网站打开速度慢得像蜗牛，用户等不及就关掉了，搜索引擎还会给你好脸色看吗？

而说到页面性能，就不得不提懒加载 (Lazy Loading) 了。懒加载是一种优化技术，它可以延迟加载页面上当前视口之外的资源（比如图片、视频等）。这样可以减少初始加载的数据量，提高页面加载速度。

但是！懒加载如果用得不好，反而会给 SEO 带来负面影响。为什么这么说呢？

懒加载的“坑”：让爬虫“看不全”你的内容

想象一下，你的网站上有很多图片，都用了懒加载。当用户滚动页面的时候，图片才会慢慢加载出来。这对用户来说可能没啥问题，但对搜索引擎爬虫来说，就有点麻烦了。

因为很多搜索引擎爬虫（尤其是 Googlebot）在抓取页面的时候，并不会像真实用户那样去滚动页面。它可能只会渲染视口内的内容，而那些需要滚动才能加载出来的图片，它就看不到了。

这就导致了一个问题：虽然你的网站用了 SSR，爬虫能看到 HTML 了，但它可能看不到那些懒加载的图片。这就像你写了一篇图文并茂的文章，但搜索引擎只看到了文字，没看到图片，那它对你文章的理解肯定是不完整的。

怎么填上懒加载这个“坑”？

既然懒加载可能会影响 SEO，那我们该怎么办呢？难道就不用懒加载了吗？当然不是！懒加载对于提高页面性能还是很有帮助的，关键在于我们要怎么用好它。

下面介绍几种常见的解决方案：

1. 使用 Intersection Observer API： 这是现代浏览器提供的一个 API，它可以用来监听元素是否进入或离开视口。我们可以利用这个 API 来实现懒加载，并且确保在元素进入视口之前，就给它设置一个占位符，或者直接把图片的 src 属性设置为真实的图片地址。这样，即使爬虫不滚动页面，也能看到图片的 URL，从而抓取到图片。

   const images = document.querySelectorAll('img[data-src]');
    
   const observer = new IntersectionObserver((entries, observer) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         const img = entry.target;
         img.src = img.dataset.src;
         observer.unobserve(img);
       }
     });
   });
    
   images.forEach(img => {
     observer.observe(img);
   });

2. 使用 loading="lazy" 属性： 这是 HTML 原生的懒加载属性，用法非常简单，只需要在 <img> 标签上加上 loading="lazy" 即可。但是，这个属性的兼容性还不是很好，有些老版本的浏览器可能不支持。所以，在使用之前，最好先检查一下兼容性。

   <img src="image.jpg" loading="lazy" alt="..." />
   

3. 使用noscript标签： 可以在<noscript>标签中包含图片的原始src，这样对于不支持JavaScript的爬虫或者用户，仍然能够看到图片。缺点是，如果用户浏览器支持Javascript，那么图片可能会被加载两次。

       <img data-src="lazy-image.jpg" alt="Lazy-loaded image">
       <noscript>
           <img src="lazy-image.jpg" alt="Lazy-loaded image">
       </noscript>

4. 结构化数据标记： 对于重要的图片（例如产品图片），可以使用结构化数据（如 Schema.org）来标记它们。这可以帮助搜索引擎更好地理解图片的内容和上下文。即使图片没有被直接加载，搜索引擎也可能通过结构化数据了解到图片的存在和相关信息。

5. 服务端渲染处理懒加载： 在SSR的场景下，如果可以检测到是搜索引擎爬虫（通过User-Agent），可以特殊处理，直接返回完整的、包含所有图片URL的HTML，而不是懒加载的HTML。 这种方法比较复杂，需要修改服务端渲染逻辑。

总结一下：SSR 和懒加载，一个都不能少

SSR 和懒加载都是优化网站的重要手段。SSR 可以让搜索引擎更好地抓取你的网站内容，懒加载可以提高页面性能。但是，懒加载如果用得不好，反而会影响 SEO。所以，我们在使用懒加载的时候，一定要注意采取一些措施，确保搜索引擎爬虫也能看到懒加载的内容。

总的来说，SSR 和懒加载就像一对好兄弟，一个负责“让爬虫看到”，一个负责“让用户更快看到”。只有它们俩配合好了，才能真正地提升你的网站 SEO 和用户体验。 别光顾着 SSR，忘了懒加载这个“坑”哦！

最后，想再啰嗦一句：SEO 是一个长期工程，没有一蹴而就的方法。除了 SSR 和懒加载，还有很多其他的因素会影响 SEO，比如网站内容质量、外链建设、用户体验等等。所以，要想让你的网站在搜索引擎中排名靠前，还需要不断地学习和实践。