提高网页SEO

omgEn
8 阅读6分钟

提高网页SEO

  1. 语言化
    • 使用语义化标签: <header><nav><main><article><h1-h6>
  2. 网页主题优化 <title></title>
  3. 头部优化
<meta name="keywords" content=""/>网页关键字
<meta name="description" content=""/>主要内容
<meta name="generator" content=""/>用以说明声明工具
<meta name="author" content="名字"/>
  1. 链接优化
    • 使用a标签做跳转，避免用div绑定onClick（爬虫无法识别）；
    • URL要语义化（如/article/seo-guide而非/article?id=33）
  2. 有作用的图片加上alt和title
  3. 页面加载速度和移动端体验，这两个指标会直接影响搜索排名
    • 加载速度优化：压缩代码、图片懒加载、使用CDN，页面加载速度是SEO核心排名因素。
    • 确保页面是响应式设计

二、渲染策略

1、静态站点生存 SSG Static Site Generation

在构建时HTML生成的地方，是SEO中最好的渲染策略

核心流程

  • 项目构建阶段（打包时）：服务端执行框架代码，获取数据，渲染出完整的静态HTML文件（每个路由对应一个HTML文件）
  • 部署时，将所有静态HTML、JS、CSS文件上传到CDN/静态服务器
  • 浏览器请求页面，CDN直接返回打包好的完整HTML，浏览器解析展示并完成水合

关键特点

  • 一次构建，多次复用：HTML在打包时生成，后续所有请求都返回同一个静态文件
  • 无需Node.js服务端环境，可直接部署到Netlify/Vercel/阿里云OSS等静态平台。

优缺点

优点缺点
SEO最优（静态HTML最易被爬虫读取）数据不实时（打包后数据固定，更新需重新构建部署）
首屏加载极快，CDN分发，无需服务端渲染不适合动态路由多的场景（如百万篇文章，打包会生成百万个HTML，耗时极长）
服务端压力为0，仅返回静态文件更新成本高，内容变动需重新打包、重新部署
部署简单，支持所有静态文件托管平台

适用场景

  • 博客、官网、帮助文档（内容变动少，需要优秀SEO，追求加载速度）
  • 营销页面、活动页面（无需实时数据，部署后长期稳定）

2、服务端渲染 SSR Server-Side Rendering

SSR的HTML在请求时生成的。

核心流程

  • 浏览器请求页面，服务端接收到请求
  • 服务端执行框架代码，发起数据请求（如查询数据库）
  • 服务端在服务器端渲染除完整的带有内容的HTML(包含页面的所有文本、结构)
  • 服务端将完整HTML返回浏览器，浏览器直接解析并展示（首屏无白屏，有内容）
  • 浏览器同时下载js打包文件，完成水合，使页面变成可交互状态（先见内容，后可交互）

优缺点

  • SEO好，爬虫可以拿到完整HTML内容，但服务端压力大
  • 首屏加载快，浏览器直接展示HTML，无需等待js执行，但是水合完成前，页面不可以交互，可能有交互延迟
  • 适合实时数据（每次请求都获得最新数据），但是部署复杂（需要Node.js服务端环境，无法自己部署静态文件）

3、增量静态再生 ISR Incremental Static Regeneration

若有大量页面，构建时全部生成可能不太现实。Next.js 允许在建好网站后创建或更新静态页面。通过ISR，可以保留静态的优势，同时拓展到数百万页。

核心流程： ISR是SSG的增强版，解决SSG数据不实时的问题，核心是构建时生成静态HTML，运行时按需更新静态HTML

  • 构建阶段：和SSG一致，生成静态HTML文件并部署到CDN
  • 运行阶段
    • 当有用户请求页面时，CDN先返回旧的静态HTML（保证快速响应）
    • 若该页面已经超过缓存过期时间，服务端在后台悄悄重新渲染HTML,更新CDN缓存
    • 下一个用户请求时，就能获取到更新后的静态HTML。

关键特点

  • [静态文件+后台更新]：兼顾SSG的性能和SSR的实时性
  • 支持【按需更新】：可指定单个页面更新，无需全量重新构建
优点缺点
兼顾SSG的高性能（CDN分发）和SSR的实时性配置略复杂，需要设置缓存过期时间、更新策略
服务端压力低，仅在缓存过期后重新渲染存在数据延迟，缓存过期前，用户看到的是旧数据
无需全量重新部署，支持单个页面增量更新部分平台不支持，需框架/部署平台适配，如Vercel完美支持

适用场景

  • 内容平台（如知乎、简书）：内容变动频繁，但无需实时更新（允许 1-5 分钟延迟）；
  • 电商商品列表页：商品价格 / 库存变动较频繁，且需要优秀的加载速度和 SEO。

4、客户端渲染 CSR Client-Side Rendering

一般来说， 客户端渲染并不推荐用于最佳SEO。

CSR非常适合数据量大的仪表盘、账户页面或任何不需要出现在任何搜索引擎索引中的页面。

核心流程

  • 浏览器请求页面，服务端返回空的HTML骨架（仅包含 <div id="root"></div> 和 JS 引用）；
  • 浏览器下载并执行js打包文件
  • js在客户端发起接口请求，获取数据
  • js渲染页面内容，插入到空骨架中，完成页面的渲染和水合

优缺点

  • SEO极差：爬虫只拿到空骨架，无法解析内容
  • 首屏加载慢，需下载完整js+等待数据请求
  • 白屏时间长，用户体验差

总结

  1. 核心选型逻辑：先看「是否需要 SEO」→ 再看「数据是否实时」→ 最后看「部署成本 / 性能要求」；
  2. SEO 优先：排除 CSR，优先选 SSG/ISR/SSR（静态内容选 SSG，动态内容选 ISR/SSR）；
  3. 性能优先：优先选 SSG/ISR（CDN 分发），实时数据选 SSR/Edge SSR；
  4. 开发 / 部署成本优先：小型项目选 SSG/CSR，大型项目选 SSR/ISR（结合框架落地）。

三、核心网页指标

LCP: 最大内容绘制 Larget Contentful Paint 加载性能

关注页面加载性能，衡量的是页面上最大页面上最大元素在视口中可见所需的时间。 这可能是占据页面主要空间的最大文本块、视频、图形

FID：首次输入延迟 First Input Delay 交互性

是对终端用户在与网页交互时体验的感知。

CLS: 累计布局偏移 Cumulative Layout Shift 视觉稳定性

衡量网站整体布局稳定性的指标。 每个元素的布局转换分数只有在发生意外移动的时才会计入CLS。

avatar
文章
阅读
粉丝