来自星星的码农 - 个人博客

前端如何优化SEO问题

前端技术飞速发展，但单页应用（SPA）等现代前端架构与搜索引擎抓取之间存在天然矛盾。传统爬虫（如Google早期版本）不执行JavaScript，或者异步加载的关键内容可能未被爬虫捕获，这些都会导致SPA内容无法被收录。

主流解决方案

• 服务端渲染（SSR） - 终极方案
  • 服务端渲染的原理：Node.js在服务器生成完整HTML送达浏览器
  • 框架推荐：Next.js、Nuxt.js、Universal
  • 优势：
    • 首屏速度提升 -
    • 完美兼容所有爬虫 -
    • 支持动态标签
• 动态渲染（Dynamic Rendering） - 折中方案
  • 原理：识别爬虫User-Agent，返回预渲染HTML
• 预渲染（Pre-rendering） - 静态SPA方案
  • 技术栈：
    • React：React Snap
    • Vue：vue-cli-plugin-prerender-sp
• 静态站点生成（SSG） - 内容站利器
  • 场景：博客/文档/营销页等半静态内容
  • 工作流： 内容源 -> 构建时生成HTML -> 部署到cdn -> 瞬时加载

SEO基础配置注意点

• 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小，title值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚⾯title要有所不同； description 把⻚⾯内容高度概括， ⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网⻚
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取
• 重要内容不要用 js 输出：爬虫不会执⾏js获取内容
• 少用 iframe ：搜索引擎不会抓取 iframe 中的内容
• ⾮装饰性图片必须加 alt
• 提高网站速度： 网站速度是搜索引擎排序的⼀个重要指标