关于前端如何处理SEO的问题

前段时间在去进行工作面试的时候，有被问到Vue如何解决SEO的问题，当时被问到了后面便去在网上找了找相关的资料看了看。
然后就在这个地方给大家分享一下。
首先SEO是什么：
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

前端对于SEO有什么要注意的：
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

1. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
   重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
2. 重要内容不要用js输出：爬虫不会执行js获取内容
3. 少用iframe：搜索引擎不会抓取iframe中的内容
4. 非装饰性图片必须加alt（通常当鼠标滑动到元素上的时候显示alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析）
5. 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

Vue如何解决对于SEO的问题呢？

1. 页面预渲染
2. 服务端渲染
3. 路由采用h5 history模式

我当时是找到了这三种方式，具体是从哪看到的我也记不大清楚了。
但是当时我在知乎上搜索到有关于Vue作者尤雨溪的回答。

在这里插入图片描述

所以对于Vue构建项目的时候，且又考虑SEO问题的时候，可以不用必须使用CLI全家桶，不是用SPA单页面应用，局部的使用Vue也是可以的。毕竟在Vue官方文档的介绍视频里面，就介绍了Vue是渐进式的，可以让页面的一部分作为Vue代码使用的部分。或者就是使用Vue专门针对SEO需求的另一个框架，SSR服务端渲染。