前端SEO
打开浏览器，前端输入一个关键词，前端按下回车。前端你看到的前端第一个结果，不是前端因为它内容最好，而是前端因为它让搜索引擎“读得懂”。前端SEO干的前端就是这个活——把页面结构、内容、前端加载方式，前端翻译成爬虫能理解的前端语言。这件事从二十年前就在做，前端但今天的前端前端框架把很多基本功给弄丢了。
爬虫不是前端人，别让它猜
很多前端开发者习惯用React或Vue写单页应用，前端页面内容全靠JavaScript渲染。前端用户打开能看到，但搜索引擎的爬虫呢？Googlebot虽然能执行JS，但资源有限，它不会等你那三秒的接口请求。我见过一个电商站，商品列表用客户端渲染，结果收录量从两万掉到三百。后来改成服务端渲染，两周后恢复。这不是玄学，是爬虫的耐心问题。
最简单的验证方法：打开Chrome的开发者工具，禁用JavaScript，刷新页面。如果页面上只剩一个空白div，那你的SEO基本没戏。爬虫看到的就是这个。
语义化标签不是摆设
我见过太多前端用<div class="header">代替<header>，用<div class="nav">代替<nav>。视觉上没区别，但爬虫区分不了哪个是导航，哪个是正文。有个做博客的朋友，文章页的标题用<div class="title">包着，爬虫抓取时把侧边栏的“最新文章”当成了页面标题。后来改成<h1>，排名直接涨了。
HTML5那些标签——header、main、article、aside、footer——不是给开发者看的，是给机器读的。你用对了，爬虫就知道哪块是核心内容，哪块是辅助信息。这比堆砌关键词管用得多。
加载速度，爬虫也在意
Google明确说过，页面速度是排名因素。但很多人只盯着首屏渲染时间，忽略了爬虫的抓取预算。一个页面如果加载要五秒，爬虫可能只抓一半就走了。我测试过一个案例：把图片从PNG换成WebP，加上懒加载，页面体积从2.3MB降到480KB。收录速度从平均三天变成一天。这不是巧合。
还有个坑：前端路由的hash模式。比如example.com/#/article/123，爬虫根本不会把#后面的内容当成独立页面。换成history模式，配合服务端配置，每个URL才能被单独索引。这个坑我踩过，当时一个新闻站用hash路由，收录量始终上不去。改成history模式后，一周内索引量翻倍。
结构化数据，给爬虫划重点
JSON-LD这东西，很多前端觉得是后端的事。其实不然。你可以在<script type="application/ld+json">里直接写结构化数据，告诉爬虫这个页面是文章、产品还是问答。我帮一个本地商家加了个LocalBusiness的标记，结果在搜索结果里出现了营业时间和评分。点击率涨了17%。
别指望爬虫自己猜。你给它划重点，它才给你好位置。
移动端不是适配，是默认
现在Google用的是移动优先索引。你的桌面版再漂亮，爬虫主要看移动版。我见过一个站，桌面版内容完整，移动版为了“简洁”把产品参数藏进了折叠面板。结果爬虫抓不到那些参数，排名掉得厉害。后来把参数直接放在移动版页面上，哪怕视觉上折叠，HTML里也得有。
还有viewport标签。<meta name="viewport" content="width=device-width, initial-scale=1">这行代码不加，移动端体验直接崩，爬虫也会降低评价。这不是建议，是底线。
别把SEO当后端的事
很多团队把SEO推给后端或运维，前端只管画页面。但URL结构、状态码、重定向、canonical标签，这些全是前端能控制的。一个404页面返回200状态码，爬虫会以为这是个正常页面，反复抓取。一个该用301的地方用了302，权重传递就断了。这些细节，后端不一定管，前端也不管，最后就是没人管。
我自己的习惯：每次上线新页面，先跑一遍Lighthouse的SEO审计。不是看分数，是看具体问题。比如“链接不可抓取”、“robots.txt阻止”、“缺少meta description”。这些问题改起来不费劲，但不改就是硬伤。
前端SEO没什么高深理论。就是把该有的标签写对，该加载的内容加载出来，该告诉爬虫的信息别藏着。做到这些，剩下的交给内容本身。
```