做性能优化时，如何兼顾SEO？

最近在对一个2c的产品做性能优化，leader提醒不要影响到SEO。故此做了一个简单的总结

首先需要了解SEO

baidu的，国内自己搜一下

这里贴一下google的，需要翻墙访问：谷歌SEO帮助文档：developers.google.com/search/docs…

简单总结

（SEO爬虫 希望以普通人的视角，去看更优质的网站内容，各种标签清晰表达，文件名和url和跳转和层级都简洁清晰）

• 非代码方面：（此处不太详细的展开seo的细节了，因为暂时我也没研究的很深 :) ）

  1. robot.txt，sitemap，友情外链

• 代码方面：（没有列全seo注意事项，主要针对做性能优化时要注意的点）

  1. 向 爬虫 和用户呈现相同的网页

  2. 网址要清晰简洁

  3. 网站性能优秀，有利于SEO

  4. 代码关键字方面

     1. 使用 JavaScript 创建网页时，请使用 a 元素，将网址用作 href 属性值，并在网页加载时生成所有菜单项，而不是等待用户互动时生成。

     2. 合理的设计、。HTML语义化（h1-h6） 、title属性

        1. 如果某个 <a> 的链接不需要跟踪，那么添加 rel='nofollow' 即可通知“爬虫”忽略跟踪

     3. Iframe，display: none，动态的内容（js动态输出HTML），爬虫会获取不到

     4. menu菜单 层级 结构一般不多于 3 级

     5. 使用<img>标签，而不是css引入图片。为图片设置 alt属性 说明。图片名要简短清晰

     6. 构建适合移动设备的网站

拎几个注意重点讲一下

向 爬虫 和用户呈现相同的网页

1. 所以CSR是肯定不行的（因为爬虫看到的是空html），要做seo，肯定要SSR

2. 另一点也是：js异步去填html的场景，也要考虑清楚。爬虫可能不会等js异步请求的返回，就扫描完了

网站性能优秀，有利于SEO

1. html需结构清晰，根HTML文件不能过大，否则爬虫会截断访问（大部分搜素引擎只会抓取网站页面200KB的内容，超过的部分不会爬取）

使用<img>标签，而不是css引入图片。为图片设置 alt属性 说明。图片名要简短清晰

1. 图片内容，爬虫是不会等加载的，所以，爬虫识别图片就是alt属性说明 + 图片名字

使用 JavaScript 创建网页时，请使用 a 元素，将网址用作 href 属性值，并在网页加载时生成所有菜单项，而不是等待用户互动时生成。

1. 跳链接要用a标签，这样爬虫可以收录到这些链接，会进而往这些链接里爬取

2. 在网页加载时生成所有菜单项，而不是等待用户互动时生成

Iframe，display: none，动态的内容（js动态输出HTML），爬虫会获取不到

1. 注意了！！！ iframe内的内容是爬取不到， 谨慎使用！！！

   • 之前忽略了这点，我们团队付出了一些代价 zzzz

menu菜单 层级 结构一般不多于 3 级

1. 多了爬虫就不会收录了（seo会觉得这么深的层级，对普通用户也不友好）

最后： 构建适合移动设备的网站！（不止pc端，移动端也得兼容好，格局要大）

---

码字不易，点赞鼓励！！