🍊柑橘 RSS 阅读器 - 鸿蒙首款原生 RSS 阅读器

这篇文章最后更新的时间在六个月之前，文章所叙述的内容可能已经失效，请谨慎参考！

搜索引擎优化（英语：search engine optimization，缩写为SEO）是透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

SEO 的方法要跟随搜索引擎的规则不断调整。如果没有精力研究 SEO 的技巧，那么只需要记住内容是满足用户需求的，有价值的。这样不管规则怎么改动，站点都不会受到太大的影响。

SEO 的三个方面

内容
声望（外链）
技术

内容

内容的数量
内容的质量
- 尽量使用原创程度高的内容
- 成人内容或儿童内容需要显式声明
内容的更新频率
- 理想状态下最好每天都更新
- 更新的时候要同步更新 sitemap
关键词
- 要选择合适的关键词
- 3-5 个
- 长尾关键词：将关键词进行多重排列组合；尽量不要使用行业通用词；擅于利用地理位置；确定关键词的价值；长尾词的选择；关键词的时效性；
- 可以用组织名称和服务内容名
- 可以参考竞争对手的关键词
- 可以参考搜索下拉框和相关搜索的推荐
- 关键词要在内容里有所体现
  - title 和 description 包含关键词
  - h 标签里有包含关键词
  - 内容里有包含关键词
  - 图片的 alt 或 title 有包含关键词
  - 包含和关键词相近的词语也是可以的

声望（外链）

外站链接本站的数量和页面权重 (PageRank)
本站链接外站的数量和页面权重 (PageRank)
- 网页上的链接数量限制在合理范围内（最多几千个）
- 网页里的链接要保持有效的
- 移除网页中的死链
本站在搜索引擎结果里被点击的次数

SEO 技术方面的优化

URL

尽量避免使用子域，因为搜索引擎会将子域视为不同的实体，进而分割站点的 SEO 价值
URL 里不要带着文件后缀（例如 .cgi .pl .php .jsp 这类），动态页面页面最好搞一个伪静态的 URL 重写
URL 层级最好不超过三级
URL 最好不要带着 ? 的参数，如果一定要带上 ? 参数，那么参数越少越好
URL 路径最好用小写英文字母和数字
URL 使用 - 避免使用驼峰式拼写，下划线和空格
URL 里最好有一个 slug
- URL 文件路径里最后的一部分, slug 的词源来在于出版界一般是指简短的新闻标题
URL 尽量与页面标题匹配
URL 要尽量保持简单，搜索，分页，排序这类 url 可以用 robots.txt 阻止搜索引擎访问
文件和目录命名的规范做法是使用英文而不是拼音字母
尽可能避免在网址中使用会话 ID 。可考虑改用 Cookie

HTTP

使用有意义的 HTTP 状态代码
响应速度不要大于 5s
要有友好 404 页面， 404 页面最好包含可以返回根网页的链接，还可以提供指向您网站上热门内容或相关内容的链接
sitemap 里的链接不能返回 404 403
不能返回 5xx
网站要使用 https
网页里的链接要尽量也是 https
https 的 tls 尽量使用 1.2 或以上版本
对已停用的网址使用 301 重定向
http 都和 html 文档里都应该指明编码，且两个编码要一致
确保您的网络服务器能够正确地支持 If-Modified-Since HTTP 标头。此功能可指示您的网络服务器告诉 Google，自我们上次抓取您的网站以来，您的内容是否发生了变化。支持此功能可以节省带宽和开销。

HTML 标签

返回有完整内容的 html 文件
html 代码大小最好不要超过200K
head
- 要有 tkd 标签
  - 每个页面最好具有唯一专用 title
  - title 需要是简短且描述准确的
  - description 需要准确总结网页内容并且是简短的
- 最好显示声明 ico 图片
- 要有 canonical 标签
- 如果页面有地域属性，可以添加如下代码: <meta name="location" content="province={信息所在省};city={信息所在城市}" />
内容相关
- 页面里需要有导航栏
- 至少有一个 h1 标签，h1 尽量靠近 body 标签
- 尽量地使用 html5 里那些语义化标签，不要全用 div
- 网页的节点结构要对 seo 友好
- 避免表格的嵌套，表格嵌套不要超过三层
- 少用 iframe 标签
链接
- a 标签最好有 title 属性
- 链接应该使用 a 标签
- 交互相关的应该使用 button 或 input ，不要使用 a 标签
- a 标签要能链接到实际的网址，不要用 js 转跳之类的
- 不需要收录的 a 链接要加上 nofollow 属性
- 增加首页到内页和内页到首页的链接通路
图片和其它文件
- 图片的体积不能太大，最好是 webp 格式的
- 图片或其它文件的文件名最好是有意义的
- 链接需要保持有效
- img 要有 alt 属性
- img 的 alt 和 title 需要是简短且有描述性的
- 单纯为了视觉效果的图片应该使用 css 引入，其它的图片应该使用 img 标签引入
移动设备适应
- 自适应（推荐）
- 通过 ua 来判断浏览器，然后返回不同的版本
- 或者使用单独的域名，例如 m.qq.com 这类的
RTL
- Right-to-Left 从右到左
- 指的是文本和元素的布局方向，主要用于支持从右到左书写的语言，如阿拉伯语和希伯来语
- 支持 RTL 布局是 i18n 和 l10n 工作的重要部分
i18n l10n G11N
- Internationalization 国际化
- Localization 本地化
- Globalization 全球化
a11y
- Accessibility 可访问性
- 网页的配色方案要保持良好的对比度
- 表单的输入项 input 最好有对应的 label
- 尽量使用表单验证而不是用 js 验证表单的数据
- 尽量减少输入项，可以尝试使用 select 替代输入项，使用合适的输入类型和原生的输入框
- 可聚焦元素应该要有聚焦样式
- 不要删除 a 标签的伪类
- 使用语义化标签，布局要现代化
- 理想状态下，页面的全部内容都应该可以用键盘访问
- 如果浏览器的原生多媒体控件，不能通过键盘访问，那么应该用 js 来实现
- 音频和视频最好有描述和文本轨道

sitemap 和 robots.txt

正确地填写 sitemap 并放在网站根目录里
正确地填写 robots.txt 并放在网站根目录里
robots.txt 声明不需要抓取的页面
robots.txt 不要阻止访问 ico 图片
sitemap 更新要及时
sitemap 要根据内容跟新，不要 sitemap 更新了，但内容没更新
robots.txt 里的 sitemap 地址要用绝对 URL

其它

html 代码要符合标准， css 最好也要符合相关标准
网站结构的扁平化规划，目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数
避免投放会分散用户注意力的广告
主动地提交网站地址给搜索引擎
使用搜索引擎提供的站长工具
使用一个站点分析工具
除了 sitemap 和 robots.txt 之外，还可以再加上 atom 和 rss 和 JSONFeed
重视链接的分享
js 和 css 等静态资源尽量合并和压缩
静态资源和图片如果可以就加上 CDN
加速页面的打开速度也是 SEO 优化的一部分
tls 证书要及时更新
如果条件允许就不要用太冷门的域名
不要搞 SEO 的作弊

SEO 的辅助工具

搜索引擎的站长工具

Google Search Console https://search.google.com/search-console/about
必应站长工具 https://www.bing.com/webmasters/about
百度搜索资源平台 https://ziyuan.baidu.com/site/index

页面检测

insights https://developers.google.com/speed/pagespeed/insights
是否适合移动设备浏览 https://search.google.com/test/mobile-friendly
检查 html https://validator.w3.org/nu/
检查 css http://jigsaw.w3.org/css-validator/
检查 https https://myssl.com/ssl.html
苹果的 ats https://myssl.com/ats.html
Web 辅助功能评估工具 https://wave.webaim.org/
站长之家 http://tool.chinaz.com/
另一个网页评价工具 https://www.webpagetest.org/

可以根据 insights 的建议来优化页面

SEO 分析工具

Soovle
KWFinder
MOZ
ahrefs
Semrush
Answerthepublic

站点分析

Google Analytics https://analytics.withgoogle.com/
百度统计 https://tongji.baidu.com/

一个站点里只需要一个站点分析工具

搜索引擎的搜索指令

可以使用这类的搜索指令来判断搜索引擎的收录情况

这是谷歌的搜索指令，其它搜索引擎也会有类似的指令

site: 域名
关键字 site: 域名

谷歌更多的搜索指令可以参考这里 https://www.google.com/advanced_search

SPA 如何做 SEO

基本原则是页面被搜索引擎爬虫访问时，返回完整的页面内容。

SSG (Static Site Generation , 静态站点生成)
- 提前生成静态页面，对于中小型网站或更新不频繁的网站这是一个很好的解决方案
- 但如果页面里有动态的内容，例如留言评论这类的，就不好处理了
预渲染 (pre render)
- 类似于 SSG ，但一部分内容还是通过接口获取
- 大多数情况下预渲染并不能很好地应对 SEO ，因为大多数情况下，预渲染只是预渲染了前端的框架部分和一些很少修改的页面，页面的主要内容还是会通过接口请求
- 其实可以把 SSG 看作预渲染的一种
SSR (Server Side Rendering , 服务端渲染)
- 全站 SSR
- 首屏 SSR ，其它页面依然保持 CSR
谷歌的爬虫是能执行 js 的，如果只做谷歌的 SEO ， SPA 其实可以不做 SSR 的，但是爬虫执行 js 有时间限制，如果渲染的速度太慢，页面可能渲染不完整。

SPA 的 SSR

使用 node 实现的 SSR
- 使用 nuxt 这类框架实现，需要改动前端的代码
- 虽然 vue 和 react 都有提供原生的 SSR 方案，但都比较简陋
使用 headless 浏览器实现的 SSR
- 可以在不改动前端代码的前提下实现，通过 ua 来转发搜索引擎爬虫的请求，所以只能针对搜索引擎
  - 通过 ua 来判断搜索引擎的爬虫，其实不是很好，最好的方式还是通过 dns 反查来确定请求的来源
  - 实时渲染速度可能有点慢，可以定时生成纯静态的 HTML 文件，类似于 SSG
- 具体的实现可以参考笔者的这个仓库 https://github.com/f2h2h1/seo-ssr
- 现在的网站推广仅针对搜索引擎是不够的，还要考虑各种社交平台和内容平台

笔者比较推荐的还是使用 nuxt 这类框架，因为这类框架能很好地实现首屏 SSR ，其它页面依然保持 CSR ，同时能应对 SEO 和其它各种平台，虽然对前端的代码改动有点大，但如果一开始就使用这类框架，开发体验和普通的 CSR 基本没区别

需要重视的平台

搜索引擎

国内
- 百度
- 360
- 搜狗
- 神马
国外
- Google
- Bing
- Yahoo
- Yandex
- DuckDuckGo

社交平台

国内
- 微信
- 微博
- 小红书
- 抖音
- 快手
- bilibili
- 知乎
- 豆瓣
国外
- X
- 脸书
- tiktok
- Instagram
- Pinterest
- Youtube

这几个平台都有特定的分享标签和分享 api 。例如谷歌的结构化数据， Open Graph 和 Twitter Card 标签。谷歌的结构化数据可以更好地呈现搜索结果 https://developers.google.cn/search/docs/advanced/structured-data/intro-structured-data

使用通用的 Web Share API ，虽然还只是草案，但 Chrome Edge 和 Safari 都已经支持了 https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

针对社交平台的优化会被称为 SMO (Social Media Optimization 社交媒体优化)

参考

https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96

https://developers.google.cn/search/docs

https://developers.google.cn/search/docs/beginner/seo-starter-guide

https://backlinko.com/introducing-content-marketing-hub-2-0

这篇文章最后更新的时间在六个月之前，文章所叙述的内容可能已经失效，请谨慎参考！

搜索引擎优化（英语：search engine optimization，缩写为SEO）是透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

SEO 的三个方面

内容
声望（外链）
技术

内容

内容的数量
内容的质量
- 尽量使用原创程度高的内容
- 成人内容或儿童内容需要显式声明
内容的更新频率
- 理想状态下最好每天都更新
- 更新的时候要同步更新 sitemap
关键词
- 要选择合适的关键词
- 3-5 个
- 长尾关键词：将关键词进行多重排列组合；尽量不要使用行业通用词；擅于利用地理位置；确定关键词的价值；长尾词的选择；关键词的时效性；
- 可以用组织名称和服务内容名
- 可以参考竞争对手的关键词
- 可以参考搜索下拉框和相关搜索的推荐
- 关键词要在内容里有所体现
  - title 和 description 包含关键词
  - h 标签里有包含关键词
  - 内容里有包含关键词
  - 图片的 alt 或 title 有包含关键词
  - 包含和关键词相近的词语也是可以的

声望（外链）

外站链接本站的数量和页面权重 (PageRank)
本站链接外站的数量和页面权重 (PageRank)
- 网页上的链接数量限制在合理范围内（最多几千个）
- 网页里的链接要保持有效的
- 移除网页中的死链
本站在搜索引擎结果里被点击的次数

SEO 技术方面的优化

URL

尽量避免使用子域，因为搜索引擎会将子域视为不同的实体，进而分割站点的 SEO 价值
URL 里不要带着文件后缀（例如 .cgi .pl .php .jsp 这类），动态页面页面最好搞一个伪静态的 URL 重写
URL 层级最好不超过三级
URL 最好不要带着 ? 的参数，如果一定要带上 ? 参数，那么参数越少越好
URL 路径最好用小写英文字母和数字
URL 使用 - 避免使用驼峰式拼写，下划线和空格
URL 里最好有一个 slug
- URL 文件路径里最后的一部分, slug 的词源来在于出版界一般是指简短的新闻标题
URL 尽量与页面标题匹配
URL 要尽量保持简单，搜索，分页，排序这类 url 可以用 robots.txt 阻止搜索引擎访问
文件和目录命名的规范做法是使用英文而不是拼音字母
尽可能避免在网址中使用会话 ID 。可考虑改用 Cookie

HTTP

使用有意义的 HTTP 状态代码
响应速度不要大于 5s
要有友好 404 页面， 404 页面最好包含可以返回根网页的链接，还可以提供指向您网站上热门内容或相关内容的链接
sitemap 里的链接不能返回 404 403
不能返回 5xx
网站要使用 https
网页里的链接要尽量也是 https
https 的 tls 尽量使用 1.2 或以上版本
对已停用的网址使用 301 重定向
http 都和 html 文档里都应该指明编码，且两个编码要一致
确保您的网络服务器能够正确地支持 If-Modified-Since HTTP 标头。此功能可指示您的网络服务器告诉 Google，自我们上次抓取您的网站以来，您的内容是否发生了变化。支持此功能可以节省带宽和开销。

HTML 标签

返回有完整内容的 html 文件
html 代码大小最好不要超过200K
head
- 要有 tkd 标签
  - 每个页面最好具有唯一专用 title
  - title 需要是简短且描述准确的
  - description 需要准确总结网页内容并且是简短的
- 最好显示声明 ico 图片
- 要有 canonical 标签
- 如果页面有地域属性，可以添加如下代码: <meta name="location" content="province={信息所在省};city={信息所在城市}" />
内容相关
- 页面里需要有导航栏
- 至少有一个 h1 标签，h1 尽量靠近 body 标签
- 尽量地使用 html5 里那些语义化标签，不要全用 div
- 网页的节点结构要对 seo 友好
- 避免表格的嵌套，表格嵌套不要超过三层
- 少用 iframe 标签
链接
- a 标签最好有 title 属性
- 链接应该使用 a 标签
- 交互相关的应该使用 button 或 input ，不要使用 a 标签
- a 标签要能链接到实际的网址，不要用 js 转跳之类的
- 不需要收录的 a 链接要加上 nofollow 属性
- 增加首页到内页和内页到首页的链接通路
图片和其它文件
- 图片的体积不能太大，最好是 webp 格式的
- 图片或其它文件的文件名最好是有意义的
- 链接需要保持有效
- img 要有 alt 属性
- img 的 alt 和 title 需要是简短且有描述性的
- 单纯为了视觉效果的图片应该使用 css 引入，其它的图片应该使用 img 标签引入
移动设备适应
- 自适应（推荐）
- 通过 ua 来判断浏览器，然后返回不同的版本
- 或者使用单独的域名，例如 m.qq.com 这类的
RTL
- Right-to-Left 从右到左
- 指的是文本和元素的布局方向，主要用于支持从右到左书写的语言，如阿拉伯语和希伯来语
- 支持 RTL 布局是 i18n 和 l10n 工作的重要部分
i18n l10n G11N
- Internationalization 国际化
- Localization 本地化
- Globalization 全球化
a11y
- Accessibility 可访问性
- 网页的配色方案要保持良好的对比度
- 表单的输入项 input 最好有对应的 label
- 尽量使用表单验证而不是用 js 验证表单的数据
- 尽量减少输入项，可以尝试使用 select 替代输入项，使用合适的输入类型和原生的输入框
- 可聚焦元素应该要有聚焦样式
- 不要删除 a 标签的伪类
- 使用语义化标签，布局要现代化
- 理想状态下，页面的全部内容都应该可以用键盘访问
- 如果浏览器的原生多媒体控件，不能通过键盘访问，那么应该用 js 来实现
- 音频和视频最好有描述和文本轨道

sitemap 和 robots.txt

正确地填写 sitemap 并放在网站根目录里
正确地填写 robots.txt 并放在网站根目录里
robots.txt 声明不需要抓取的页面
robots.txt 不要阻止访问 ico 图片
sitemap 更新要及时
sitemap 要根据内容跟新，不要 sitemap 更新了，但内容没更新
robots.txt 里的 sitemap 地址要用绝对 URL

其它

html 代码要符合标准， css 最好也要符合相关标准
网站结构的扁平化规划，目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数
避免投放会分散用户注意力的广告
主动地提交网站地址给搜索引擎
使用搜索引擎提供的站长工具
使用一个站点分析工具
除了 sitemap 和 robots.txt 之外，还可以再加上 atom 和 rss 和 JSONFeed
重视链接的分享
js 和 css 等静态资源尽量合并和压缩
静态资源和图片如果可以就加上 CDN
加速页面的打开速度也是 SEO 优化的一部分
tls 证书要及时更新
如果条件允许就不要用太冷门的域名
不要搞 SEO 的作弊

SEO 的辅助工具

搜索引擎的站长工具

Google Search Console https://search.google.com/search-console/about
必应站长工具 https://www.bing.com/webmasters/about
百度搜索资源平台 https://ziyuan.baidu.com/site/index

页面检测

insights https://developers.google.com/speed/pagespeed/insights
是否适合移动设备浏览 https://search.google.com/test/mobile-friendly
检查 html https://validator.w3.org/nu/
检查 css http://jigsaw.w3.org/css-validator/
检查 https https://myssl.com/ssl.html
苹果的 ats https://myssl.com/ats.html
Web 辅助功能评估工具 https://wave.webaim.org/
站长之家 http://tool.chinaz.com/
另一个网页评价工具 https://www.webpagetest.org/

可以根据 insights 的建议来优化页面

SEO 分析工具

Soovle
KWFinder
MOZ
ahrefs
Semrush
Answerthepublic

站点分析

Google Analytics https://analytics.withgoogle.com/
百度统计 https://tongji.baidu.com/

一个站点里只需要一个站点分析工具

搜索引擎的搜索指令

可以使用这类的搜索指令来判断搜索引擎的收录情况

这是谷歌的搜索指令，其它搜索引擎也会有类似的指令

site: 域名
关键字 site: 域名

谷歌更多的搜索指令可以参考这里 https://www.google.com/advanced_search

SPA 如何做 SEO

基本原则是页面被搜索引擎爬虫访问时，返回完整的页面内容。

SSG (Static Site Generation , 静态站点生成)
- 提前生成静态页面，对于中小型网站或更新不频繁的网站这是一个很好的解决方案
- 但如果页面里有动态的内容，例如留言评论这类的，就不好处理了
预渲染 (pre render)
- 类似于 SSG ，但一部分内容还是通过接口获取
- 大多数情况下预渲染并不能很好地应对 SEO ，因为大多数情况下，预渲染只是预渲染了前端的框架部分和一些很少修改的页面，页面的主要内容还是会通过接口请求
- 其实可以把 SSG 看作预渲染的一种
SSR (Server Side Rendering , 服务端渲染)
- 全站 SSR
- 首屏 SSR ，其它页面依然保持 CSR
谷歌的爬虫是能执行 js 的，如果只做谷歌的 SEO ， SPA 其实可以不做 SSR 的，但是爬虫执行 js 有时间限制，如果渲染的速度太慢，页面可能渲染不完整。

SPA 的 SSR

使用 node 实现的 SSR
- 使用 nuxt 这类框架实现，需要改动前端的代码
- 虽然 vue 和 react 都有提供原生的 SSR 方案，但都比较简陋
使用 headless 浏览器实现的 SSR
- 可以在不改动前端代码的前提下实现，通过 ua 来转发搜索引擎爬虫的请求，所以只能针对搜索引擎
  - 通过 ua 来判断搜索引擎的爬虫，其实不是很好，最好的方式还是通过 dns 反查来确定请求的来源
  - 实时渲染速度可能有点慢，可以定时生成纯静态的 HTML 文件，类似于 SSG
- 具体的实现可以参考笔者的这个仓库 https://github.com/f2h2h1/seo-ssr
- 现在的网站推广仅针对搜索引擎是不够的，还要考虑各种社交平台和内容平台

需要重视的平台

搜索引擎

国内
- 百度
- 360
- 搜狗
- 神马
国外
- Google
- Bing
- Yahoo
- Yandex
- DuckDuckGo

社交平台

国内
- 微信
- 微博
- 小红书
- 抖音
- 快手
- bilibili
- 知乎
- 豆瓣
国外
- X
- 脸书
- tiktok
- Instagram
- Pinterest
- Youtube

使用通用的 Web Share API ，虽然还只是草案，但 Chrome Edge 和 Safari 都已经支持了 https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

针对社交平台的优化会被称为 SMO (Social Media Optimization 社交媒体优化)

参考

https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96

https://developers.google.cn/search/docs

https://developers.google.cn/search/docs/beginner/seo-starter-guide

https://backlinko.com/introducing-content-marketing-hub-2-0

这篇文章最后更新的时间在六个月之前，文章所叙述的内容可能已经失效，请谨慎参考！

搜索引擎优化（英语：search engine optimization，缩写为SEO）是透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

SEO 的三个方面

内容
声望（外链）
技术

内容

内容的数量
内容的质量
- 尽量使用原创程度高的内容
- 成人内容或儿童内容需要显式声明
内容的更新频率
- 理想状态下最好每天都更新
- 更新的时候要同步更新 sitemap
关键词
- 要选择合适的关键词
- 3-5 个
- 长尾关键词：将关键词进行多重排列组合；尽量不要使用行业通用词；擅于利用地理位置；确定关键词的价值；长尾词的选择；关键词的时效性；
- 可以用组织名称和服务内容名
- 可以参考竞争对手的关键词
- 可以参考搜索下拉框和相关搜索的推荐
- 关键词要在内容里有所体现
  - title 和 description 包含关键词
  - h 标签里有包含关键词
  - 内容里有包含关键词
  - 图片的 alt 或 title 有包含关键词
  - 包含和关键词相近的词语也是可以的

声望（外链）

外站链接本站的数量和页面权重 (PageRank)
本站链接外站的数量和页面权重 (PageRank)
- 网页上的链接数量限制在合理范围内（最多几千个）
- 网页里的链接要保持有效的
- 移除网页中的死链
本站在搜索引擎结果里被点击的次数

SEO 技术方面的优化

URL

尽量避免使用子域，因为搜索引擎会将子域视为不同的实体，进而分割站点的 SEO 价值
URL 里不要带着文件后缀（例如 .cgi .pl .php .jsp 这类），动态页面页面最好搞一个伪静态的 URL 重写
URL 层级最好不超过三级
URL 最好不要带着 ? 的参数，如果一定要带上 ? 参数，那么参数越少越好
URL 路径最好用小写英文字母和数字
URL 使用 - 避免使用驼峰式拼写，下划线和空格
URL 里最好有一个 slug
- URL 文件路径里最后的一部分, slug 的词源来在于出版界一般是指简短的新闻标题
URL 尽量与页面标题匹配
URL 要尽量保持简单，搜索，分页，排序这类 url 可以用 robots.txt 阻止搜索引擎访问
文件和目录命名的规范做法是使用英文而不是拼音字母
尽可能避免在网址中使用会话 ID 。可考虑改用 Cookie

HTTP

使用有意义的 HTTP 状态代码
响应速度不要大于 5s
要有友好 404 页面， 404 页面最好包含可以返回根网页的链接，还可以提供指向您网站上热门内容或相关内容的链接
sitemap 里的链接不能返回 404 403
不能返回 5xx
网站要使用 https
网页里的链接要尽量也是 https
https 的 tls 尽量使用 1.2 或以上版本
对已停用的网址使用 301 重定向
http 都和 html 文档里都应该指明编码，且两个编码要一致
确保您的网络服务器能够正确地支持 If-Modified-Since HTTP 标头。此功能可指示您的网络服务器告诉 Google，自我们上次抓取您的网站以来，您的内容是否发生了变化。支持此功能可以节省带宽和开销。

HTML 标签

返回有完整内容的 html 文件
html 代码大小最好不要超过200K
head
- 要有 tkd 标签
  - 每个页面最好具有唯一专用 title
  - title 需要是简短且描述准确的
  - description 需要准确总结网页内容并且是简短的
- 最好显示声明 ico 图片
- 要有 canonical 标签
- 如果页面有地域属性，可以添加如下代码: <meta name="location" content="province={信息所在省};city={信息所在城市}" />
内容相关
- 页面里需要有导航栏
- 至少有一个 h1 标签，h1 尽量靠近 body 标签
- 尽量地使用 html5 里那些语义化标签，不要全用 div
- 网页的节点结构要对 seo 友好
- 避免表格的嵌套，表格嵌套不要超过三层
- 少用 iframe 标签
链接
- a 标签最好有 title 属性
- 链接应该使用 a 标签
- 交互相关的应该使用 button 或 input ，不要使用 a 标签
- a 标签要能链接到实际的网址，不要用 js 转跳之类的
- 不需要收录的 a 链接要加上 nofollow 属性
- 增加首页到内页和内页到首页的链接通路
图片和其它文件
- 图片的体积不能太大，最好是 webp 格式的
- 图片或其它文件的文件名最好是有意义的
- 链接需要保持有效
- img 要有 alt 属性
- img 的 alt 和 title 需要是简短且有描述性的
- 单纯为了视觉效果的图片应该使用 css 引入，其它的图片应该使用 img 标签引入
移动设备适应
- 自适应（推荐）
- 通过 ua 来判断浏览器，然后返回不同的版本
- 或者使用单独的域名，例如 m.qq.com 这类的
RTL
- Right-to-Left 从右到左
- 指的是文本和元素的布局方向，主要用于支持从右到左书写的语言，如阿拉伯语和希伯来语
- 支持 RTL 布局是 i18n 和 l10n 工作的重要部分
i18n l10n G11N
- Internationalization 国际化
- Localization 本地化
- Globalization 全球化
a11y
- Accessibility 可访问性
- 网页的配色方案要保持良好的对比度
- 表单的输入项 input 最好有对应的 label
- 尽量使用表单验证而不是用 js 验证表单的数据
- 尽量减少输入项，可以尝试使用 select 替代输入项，使用合适的输入类型和原生的输入框
- 可聚焦元素应该要有聚焦样式
- 不要删除 a 标签的伪类
- 使用语义化标签，布局要现代化
- 理想状态下，页面的全部内容都应该可以用键盘访问
- 如果浏览器的原生多媒体控件，不能通过键盘访问，那么应该用 js 来实现
- 音频和视频最好有描述和文本轨道

sitemap 和 robots.txt

正确地填写 sitemap 并放在网站根目录里
正确地填写 robots.txt 并放在网站根目录里
robots.txt 声明不需要抓取的页面
robots.txt 不要阻止访问 ico 图片
sitemap 更新要及时
sitemap 要根据内容跟新，不要 sitemap 更新了，但内容没更新
robots.txt 里的 sitemap 地址要用绝对 URL

其它

html 代码要符合标准， css 最好也要符合相关标准
网站结构的扁平化规划，目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数
避免投放会分散用户注意力的广告
主动地提交网站地址给搜索引擎
使用搜索引擎提供的站长工具
使用一个站点分析工具
除了 sitemap 和 robots.txt 之外，还可以再加上 atom 和 rss 和 JSONFeed
重视链接的分享
js 和 css 等静态资源尽量合并和压缩
静态资源和图片如果可以就加上 CDN
加速页面的打开速度也是 SEO 优化的一部分
tls 证书要及时更新
如果条件允许就不要用太冷门的域名
不要搞 SEO 的作弊

SEO 的辅助工具

搜索引擎的站长工具

Google Search Console https://search.google.com/search-console/about
必应站长工具 https://www.bing.com/webmasters/about
百度搜索资源平台 https://ziyuan.baidu.com/site/index

页面检测

insights https://developers.google.com/speed/pagespeed/insights
是否适合移动设备浏览 https://search.google.com/test/mobile-friendly
检查 html https://validator.w3.org/nu/
检查 css http://jigsaw.w3.org/css-validator/
检查 https https://myssl.com/ssl.html
苹果的 ats https://myssl.com/ats.html
Web 辅助功能评估工具 https://wave.webaim.org/
站长之家 http://tool.chinaz.com/
另一个网页评价工具 https://www.webpagetest.org/

可以根据 insights 的建议来优化页面

SEO 分析工具

Soovle
KWFinder
MOZ
ahrefs
Semrush
Answerthepublic

站点分析

Google Analytics https://analytics.withgoogle.com/
百度统计 https://tongji.baidu.com/

一个站点里只需要一个站点分析工具

搜索引擎的搜索指令

可以使用这类的搜索指令来判断搜索引擎的收录情况

这是谷歌的搜索指令，其它搜索引擎也会有类似的指令

site: 域名
关键字 site: 域名

谷歌更多的搜索指令可以参考这里 https://www.google.com/advanced_search

SPA 如何做 SEO

基本原则是页面被搜索引擎爬虫访问时，返回完整的页面内容。

SSG (Static Site Generation , 静态站点生成)
- 提前生成静态页面，对于中小型网站或更新不频繁的网站这是一个很好的解决方案
- 但如果页面里有动态的内容，例如留言评论这类的，就不好处理了
预渲染 (pre render)
- 类似于 SSG ，但一部分内容还是通过接口获取
- 大多数情况下预渲染并不能很好地应对 SEO ，因为大多数情况下，预渲染只是预渲染了前端的框架部分和一些很少修改的页面，页面的主要内容还是会通过接口请求
- 其实可以把 SSG 看作预渲染的一种
SSR (Server Side Rendering , 服务端渲染)
- 全站 SSR
- 首屏 SSR ，其它页面依然保持 CSR
谷歌的爬虫是能执行 js 的，如果只做谷歌的 SEO ， SPA 其实可以不做 SSR 的，但是爬虫执行 js 有时间限制，如果渲染的速度太慢，页面可能渲染不完整。

SPA 的 SSR

使用 node 实现的 SSR
- 使用 nuxt 这类框架实现，需要改动前端的代码
- 虽然 vue 和 react 都有提供原生的 SSR 方案，但都比较简陋
使用 headless 浏览器实现的 SSR
- 可以在不改动前端代码的前提下实现，通过 ua 来转发搜索引擎爬虫的请求，所以只能针对搜索引擎
  - 通过 ua 来判断搜索引擎的爬虫，其实不是很好，最好的方式还是通过 dns 反查来确定请求的来源
  - 实时渲染速度可能有点慢，可以定时生成纯静态的 HTML 文件，类似于 SSG
- 具体的实现可以参考笔者的这个仓库 https://github.com/f2h2h1/seo-ssr
- 现在的网站推广仅针对搜索引擎是不够的，还要考虑各种社交平台和内容平台

需要重视的平台

搜索引擎

国内
- 百度
- 360
- 搜狗
- 神马
国外
- Google
- Bing
- Yahoo
- Yandex
- DuckDuckGo

社交平台

国内
- 微信
- 微博
- 小红书
- 抖音
- 快手
- bilibili
- 知乎
- 豆瓣
国外
- X
- 脸书
- tiktok
- Instagram
- Pinterest
- Youtube

使用通用的 Web Share API ，虽然还只是草案，但 Chrome Edge 和 Safari 都已经支持了 https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

针对社交平台的优化会被称为 SMO (Social Media Optimization 社交媒体优化)

参考

https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96

https://developers.google.cn/search/docs

https://developers.google.cn/search/docs/beginner/seo-starter-guide

https://backlinko.com/introducing-content-marketing-hub-2-0