前端SEO

前端SEO

去年帮一个做二手乐器交易的前端朋友看他的网站。页面打开挺快，前端设计也干净，前端但百度收录只有首页。前端我翻了下源码，前端发现所有商品详情都是前端JS渲染出来的，HTML里只有一个空的前端<div id="app">。搜索引擎爬虫拿到的前端就是个白板。

这不是前端个例。前端圈子聊SEO的前端氛围一直很淡，大家更关心首屏时间、前端打包体积、前端框架选型。前端但流量这事儿，前端技术选型对它的前端影响比想象中大得多。

爬虫看到的和你看到的不一样

浏览器里右键查看源代码，和Elements面板里看到的DOM，是两码事。前者是服务器返回的原始HTML，后者是JS执行完之后的产物。大部分搜索引擎爬虫目前主要依赖原始HTML来理解页面内容。Googlebot对JS渲染的支持好一些，但也不是百分之百可靠，而且渲染队列有延迟。百度在这方面的能力更弱。

所以用React、Vue做SPA，如果没做SSR或预渲染，爬虫抓到的页面基本等于空页面。你精心写的title、description、结构化数据，全在JS里，爬虫看不到。

SSR不是银弹

有人说那就上Next.js或Nuxt呗。SSR确实能解决首屏HTML为空的问题，但它引入的复杂度是实打实的。服务端要跑Node进程，缓存策略要重新设计，部署成本上升。我见过一个团队为了SEO上了SSR，结果服务器渲染超时导致TTFB飙到3秒，反而把排名拖下去了。

预渲染（prerender）是另一个选项。构建时把静态页面生成好HTML，适合内容更新不频繁的站点。但商品价格实时变动、用户评论动态加载这类场景，预渲染就力不从心了。

几个容易被忽略的细节

路由用history模式而不是hash模式。hash路由的#后面内容爬虫直接忽略，这个坑现在踩的人少了，但偶尔还能见到。

meta标签别只写在JS里。用react-helmet这类库动态设置title和description，在客户端跳转时确实能生效，但爬虫如果只抓原始HTML，这些标签就不存在。SSR场景下没问题，纯CSR就要注意。

图片加alt属性。这事跟框架无关，但很多前端组件库的Image组件默认不传alt，开发者也就懒得加。搜索引擎读不懂图片内容，alt是唯一的线索。

内部链接用<a>标签。用onClick+router.push实现的“链接”，爬虫不认。它需要href属性来发现和传递权重。

性能本身就是SEO

Core Web Vitals已经是Google的排名因素。LCP、FID、CLS这三个指标，前端优化空间很大。图片懒加载、代码分割、字体预加载，这些常规操作直接影响得分。

我观察到一个现象：很多前端团队把性能优化和SEO当两件事做。性能优化是为了用户体验，SEO是“额外任务”。实际上Google的排名算法早就把页面体验纳入了。一个LCP超过4秒的页面，内容再好也难排上去。

结构化数据值得投入

JSON-LD格式的结构化数据，加在<script type="application/ld+json">里。商品页加Product schema，文章页加Article schema，能在搜索结果里显示评分、价格、发布日期这些富摘要。点击率提升很明显。这个工作前端做起来不复杂，但需要和后端协调数据字段。

说到底，前端SEO的核心就一句话：确保爬虫在不执行JS的情况下，也能拿到页面的核心内容和链接结构。SSR、预渲染、静态生成，都是实现这个目标的手段。选哪种，取决于你的内容更新频率、团队技术栈和运维能力。没有标准答案，但至少要知道自己的方案在爬虫眼里长什么样。

最新评论