前言
对于Vue/React来说,对于他们的SSR/SSG框架出现的原因主要就是SEO和首屏加载速度
如果项目中真的对 SEO 和首屏加载速度有刚性需求,又使用 Vue/React 这类技术,且想尽量减少代码开发附加的难度,有一种比较直接的方式,就是直接使用服务端渲染的框架,Vue 的 Nuxt.js,React 的 Next.js/Gatsby。
一、搜索引擎工作原理
可以把搜索引擎看成一个大的爬虫,通常自己写爬虫就爬取某个页面或者某段数据等等
搜索引擎就是爬取整个网络上有关你在搜索框输入的关键字,将所有有关你输入的关键字全部内容展现在你的面前(如:标题,描述,关键字,内容链接,广告等)
通常输入一个关键字会出现多个网址,他会按顺序展示出来。相应的,与关键字最温和的网址就会排在最前面。
我们想让网站更加利于被各大搜索引擎抓取和收录,增加网站曝光度和搜索引擎友好度的方式我们称之为 SEO(Search Engine Optimization),即搜索引擎优化。
二、SEO优化方式
主要有:控制首页链接数量,扁平化目录层次,优化网站结构布局,分页导航写法等等
网页TDK标签
- title:当前页面的标题(强调重点即可,每个页面的 title 尽量不要相同)
- description:当前页面的描述(列举几个关键词即可,不要过分堆积)
- keywords:当前页面的关键词(高度概括网页内容)
每个页面的 TDK 都不一样,这个需要根据产品业务提炼出核心关键词。
语义化标签
- 根据内容的结构化,选择合适的 HTML5 标签(header,footer,)
- 合理使用H标签,通常首页的logo上会加上H1标签
- 在图片的alt属性中加上图片信息描述,方便浏览器引擎抓取
- a标签的title属性,与图片的alt属性作用类似
- nofollow忽略跟踪 :
a标签 < a rel=" nofollow" >(常用)
meta元标签<meta content=" nofollw"/ > - 404页面,可以防止页面错误而被搜索引擎停止抓取
建立robots.txt文件
- robots 文件是搜索引擎访问网站时第一个访问的。
- 通过设置Allow和Disallow访问目录和文件,引导爬虫抓取网站的信息。
如果不希望被抓取可以设置Disallow,允许抓取就可以设置Allow,即使网站上所有的都允许被抓取也要设置一个空的robot文件。
关键词
- User-agent 表示网页抓取工具的名称
- Disallow 表示不应抓取的目录或网页
- Allow 应抓取的目录或网页
- Sitemap 网站的站点地图的位置
参考例子:百度的 robots.txt
动态生成工具:robots生成文件
结尾
建立网站地图sitemap
sitemap是为了防止网站在刚刚上线的时候,浏览器找不到网页所创建的
关键词
- ioc:页面永久链接,也可以是动态页面
- iastmod:页面最后修改的时间。搜索引擎根据此项与 changefreq 相结合,判断是否要重新抓取 loc 指向的内容
一般网站开发完后,这个 sitemap 一般都是靠自动生成,比如 sitemap 生成工具
结尾
结构化数据
该SEO是优化谷歌网站特有的,一般都是JSON-LD格式,还有一种SEO优化方式是AMP网页
结构化数据测试工具 Structured Data Testing Tool
Lighthouse 性能优化工具
可以取谷歌商店安装Lighthouse,打开 F12,进入你的网站,点击Generate report,就会生成网站对应的报告
在它下面有一些提示,针对性能和 SEO 等,你可以根据提示去改善你的代码。
参考文章:
基于 SSR/SSG 的前端 SEO 优化
前端SEO优化