今天聊开发中的SEO技巧,主要是给技术同学看的,尤其是有网站要上线、有产品要迭代的。我们直接说具体的操作。
很多人觉得SEO是内容或市场部门的事,但很多问题根源在开发阶段。比如页面加载慢、结构混乱,这些问题上线后再改,成本很高。
搜索引擎蜘蛛来抓取你的网站,本质上也是一个访问者。首先要保证它能顺利进来,并且能看懂网站结构。
一个常见问题是动态URL参数混乱。比如一个商品页面,可能因为来源追踪产生多种URL:
https://example.com/product/123
https://example.com/product/123?source=ads
https://example.com/product/123?ref=social
对于搜索引擎来说,这可能被视为三个不同页面,导致内容重复,分散权重。解决方法是使用规范标签(canonical tag)。在页面`
`部分指定唯一的标准URL。另一个架构重点是面包屑导航。这不仅对用户友好,对搜索引擎理解网站层次更重要。面包屑的结构化数据需要用JSON-LD格式实现。下面是一个基础代码示例:
```json
```
页面速度是明确的排名因素。优化速度,首先要分析现状。可以使用Google PageSpeed Insights或Lighthouse。报告会给出具体瓶颈。
对于首屏内容加载,关键是将关键CSS内联到HTML中,避免外部CSS文件阻塞渲染。非关键的CSS和JS可以异步加载或延迟加载。
图片优化是另一个大头。开发阶段就要建立规范:
懒加载现在已经是标准做法。给图片和iframe添加`loading="lazy"属性即可。
现在流量大部分来自移动端,Google也采用移动端优先索引。移动端体验的核心是Core Web Vitals,主要包括三项:
提升LCP,需要优化服务器响应时间、启用缓存、压缩资源。优化FID,要分解长任务、减少JavaScript执行时间。优化CLS,就要确保图片和广告位有预留空间。
不同技术栈的优化重点不同,下面是一个简单的对比:
| 技术栈 | 速度优化重点 | SEO友好配置 |
|---|---|---|
| :--- | :--- | :--- |
| React/Vue(SPA) | 代码分割、预渲染、SSR | 使用Next.js/Nuxt.js做服务端渲染,管理meta标签 |
| WordPress | 缓存插件、图片优化、数据库查询优化 | 选择轻量主题,正确设置固定链接 |
| 静态站点 | 资源压缩、CDN部署、图片处理 | 确保每个页面有独立的标题和描述 |
结构化数据是一种标准化格式,用来提供页面信息的上下文。它不会直接提升排名,但能让你有资格获得搜索结果中的特殊展示,比如评分星标、面包屑路径、FAQ摘要等,这能提高点击率。
最常见的类型是`Article`、`Product`、`LocalBusiness`。实施后,必须在Google Search Console的“增强功能”报告中验证,确保没有错误。
一个常见的产品页结构化数据示例:
```json