前端工程如何进行SEO？

什么是SEO？

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。简单地说SEO就是为了让搜索引擎更容易搜查我们站点内容而诞生的。

如何进行SEO？

个人了解到的SEO方式可以分为两种，分别为：

1.编码层面

首先是编码层面，顾名思义就是在我们编写代码的时候就应该要去进行的一个方式。普遍了解到的有以下这几种方式：

①语义化标签的使用
搜索引擎爬取我们页面的方式就是获取我们页面的代码内容，如果直接获取到的代码就能够清晰的知道你每个区块所代表的涵义，那无疑 是对其分析网站的速度效率，质量评分是有所帮助的。语义化标签是HTML5的新特性，其中我们常用的语义化标签有：

<header></header>
<section></section>
<footer></footer>
<aside></aside>

这几大语义化标签都是平时开发所常用的，同时我们使用标签的方式也应该将它们摆放到正确的位置，例如以上结构就是一个常规的页面结构的形式，这同时也是对SEO有所帮助的一种编码行为。

②给h1，img，a等这些标签的title或alt属性赋予正确的参数值。
这个方式是在编码过程中容易被忽视疏漏的，但是它对于我们SEO也是有所帮助的，道理同第一种方式一致。

<h1 class="logo" alt="网易云音乐" title="网易云音乐"></h1>
<img src="一张图片.jpg" alt="一张图片">

③给每个页面定义一个恰当的keyword和content值。（这个是最重要的，因为它是最直观地展现给搜索引擎看到的东西）

<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />

2.非编码层面。

①使用sitemap（站点地图），画一张地图，有目的地引导搜索引擎去发掘我们的网站。通常是一个xml文件，可以在线上去生成，也可以本地自己项目里生成，这里我用Nuxt.js举个例子，如下：

第一步，安装依赖：

npm install @nuxtjs/sitemap

第二步，打开nuxt.config.js，将其依赖添加进去，代表我们整个项目使用这个依赖：

{
  modules: [
    '@nuxtjs/sitemap'
  ],
}

第三步，创建一个sitemap.js文件，然后填写配置：

import axios from "axios";  // 引入axios，动态生成站点地图需要用到
const sitemap = {
  path: "/sitemap.xml", //生成的文件路径
  hostname: "http://www.baidu.com/", // 你的网站地址
  cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用
  gzip: true, //用gzip压缩优化生成的 sitemap.xml  文件 
  generate: false, 
  exclude: [], //排除不需要收录的页面，这里的路径是相对于hostname, 例如: exclude: ['/404',...]
  // 每个对象代表一个页面，这是默认的
  defaults: {
    changefred: "always", // 收录变化的时间，always 一直，daily 每天
    lastmod: new Date(), // 生成该页面站点地图时的时间
    priority: 1, // 网页的权重  1是100%最高，一般给最重要的页面，不重要的页面0.7-0.9之间
  },
  
  //   需要生成的xml数据，return 返回需要给出的xml数据，如果地址是动态ID拼接的这里可以做请求ID列表，进行地址拼接，将所有可能出现的路由添加。
  routes:()=>{
      const routes = [{
          url:"/",
          changefred:'always',
          lastmod:new Date()
      }]
        let axiosUrl = "你的接口请求前缀";  // 示例 "http://www.baidu.cn/api/"
	    let prodRoutes = [];
	    let newsRoutes = [];
	
	    // Promist.all并发调接口  所有异步接口同时调用，缩短生成站点地图的时间,通过解构取出接口返回的数据
	    let [productList, newsList] = await Promise.all([
	      axios.get(axiosUrl + "product/list"),
	      axios.get(axiosUrl + "news/list"),
	    ]);
	   
	    // 商品详情   
	    /* 200状态码判断这块属于代码优化  成功才进来，否则之间打印错误信息，由于nuxt有时出问题能提供给我们的信息非常匮乏，
	    	假设某天接口出问题，到时很难定位问题，所以加这个主要是方便我们后期的维护。  */
	    if (productList.data.code == 200) {
	      let proList = productList.data.rows; // 这个对应接口返回的列表
	      // 用map将列表里的每个对象的id组装同时生成新的对象，每个对象生成后的样子，见下面标注1
	      prodRoutes = proList.map((item) => {
	        return {
	          url: `/product/twoPage/threePage?id=${item.id}`,
	          changefred: "daily",
	          lastmod: new Date(),
	          priority: 1,
	        };
	      });
	    } else {
	      console.log(productList.data.msg, "sitemap调用错误+productList");
	    }
	
	    // 文章详情
	    if (newsList.data.code == 200) {
	      let newsArr = newsList.data.rows;
	      newsRoutes = newsArr.map((item) => {
	        return {
	          url: `/pressCenter/article?id=${item.id}`,
	          changefred: "daily",
	          lastmod: new Date(),
	          priority: 1,
	        };
	      });
	    } else {
	      console.log(newsList.data.msg, "sitemap调用错误+newsList");
	    }
	    // 最后统一将所有组装好的数组合并到总数组中,记住传入合并的数组顺序要跟Promise.all调用接口的顺序一致，否则会出问题
	    // 合并后的样子 见下面标注2
	    return routes.concat(prodRoutes, newsRoutes);
  }
  
};
export default sitemap;

第四步，在nuxt.config.js引入并全局使用sitemap.js 配置文件

// nuxt.config.js
import sitemap from "./static/sitemap";
// sitemap跟modules是同级的，一般放在modules的上面或者下面
 modules: [
    "@nuxtjs/sitemap"
  ],
sitemap: sitemap,

第五步，在根目录创建robots.txt文件

# 该文件可以通过`你的网站域名/Robots.txt`直接访问

# User-agent作用：描述搜索引擎的名字，对于该文件来说至少药有一条user-agent记录，则该项的值设为*
User-agent: *
# Disallow:  描述不希望被访问到的一个url
Disallow: /bin/
Sitemap: /sitemap.xml

最后运行项目，我们可以通过localhost去访问sitemap.xml，如果能访问到则说明成功。

②让更多的其他网站链接我们的网站地址，如果我们的网站地址更多地出现在别的网站中，说明它是一个有含金量的网站。这就是很多个网站都有合作伙伴，案例客户模块的原因之一。

③让网站的内容更加丰富，网站如果空空如也，就像一个空壳，那就是没有价值的网站，不会引起搜索引擎的注意。通常地我们会在网站中建立一个资讯信息的模块，分享一些资讯，从而达到吸引流量，提高网站收录数量的目的。

④金钱的力量。氪金，付费百度就可以迅速提升我们网站在搜索排名中的顺序。这个是最直接最粗暴最有效的方式。

关于Vue项目的SEO

通常来说，如果想要兼容SEO和单应用程序，我们只能选择SSR（服务器端渲染），众所周知单页面应用的两大缺点之一就是不利于SEO，从而服务器端渲染就是有必要做的一个操作，在也是在确立项目之初需要考虑到的事情。