SEO 实战

奔跑的蚂蚁

web前端工程师

在互联网发达的今天，每当我们遇到不懂的问题，首先问的就是百度，但是有时候度娘给出的并不是我们想要的答案或者根本搜不到答案，怎么办呢？如果你英语不错，用英文搜索可能会有意想不到的收获哦。

搜索引擎(全球Top5)

尽管越来越多的百度自家产品出现在了搜索结果的页面中，加上百度竞价，留给自然排名的位置越来越少，但是通过SEO优化提高百度关键词排名获得流量依旧是最稳定廉价的营销方法。一个好的网站，一份好的SEO方案依旧可以为企业带来非常可观订单。

SEO具体方法

HTML <meta> 标签

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

下面介绍常用的meta标签：

一个高质量的网页一般都具备完善的TDK，包括title、description、keywords，在HTML <head> 中添加如下标签（content替换成自己的内容）：

<title>IICOOM-个人博客 | 技术博客</title>
<meta name="keywords" content="个人博客,技术分享,IICOOM-技术博客，IICOOM">
<meta name="description" content="IICOOM的技术博客，记录工作学习过程中遇到问题和解决问题的经验方法。这是IICOOM技术博客的原创博文，或者是不错的译文。涉及技术包括前端技术(Vue.js，React.js)，服务端(Node.js，Golang，Java)，数据库(MySQL，MongoDB)。">
<!-- 添加禁止转码标记： -->
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 添加引导抓取标记： -->
<meta name="Robots" Content="index,follow">
<!-- 添加页面属性标记： -->
<meta name="applicable-device" content="pc,mobile">

添加权重标记canonical

什么是 canonical URL 标签？什么是 canonical URL 标签？为什么它对SEO至关重要标签也叫规范网址，出现在你网页代码的<head>里。

假如你的域名如下：

https://www.iicoom.top

一旦你的文章多了有了分页就会自动生成一个新的URL https://www.iicoom.top/posts/11

如果不做canonical URL标签优化，就搜索引擎机器人来看，上面两个URL的页面内容是一样的，所以机器人不知道到底要把哪个URL编入搜索结果里，也不知道哪个页面才是重要的。无形间的重复内容，大大降低了页面在搜索引擎的重要性，页面权重也全都分散了。

而canonical URL标签的目的就是告诉谷歌把你重要的页面和其它页面区别对待，在搜索结果中只显示唯一的URL，规范URL的结构，让其它重复内容的URL指向最主要的那个URL。将链接权重传递到主页面。

比如我可以在 https://www.iicoom.top/posts/11 这个页面配置 canonical

<link rel="canonical" href="https://www.iicoom.top">

百度站长工具

在百度站长工具网站验证后，在自己的页面中添加如下标签，具体方法查看百度站长工具使用教程。

<meta name="baidu-site-verification" content="TI4ZF9Ar4h" />

sitemap生成

生成sitemap（Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页）生成的链接页面里，内容是网站的静态路径，用于每天百度收录。

网站地图爬虫在线工具 v5.1.9 SiteMap,网站地图,站点地图,网页地图,SiteMap在线生成,生成工具,网页爬虫,天气预报,天气API - 帮!

Google：建议使用xml格式的网站地图

地图提交地址： https://www.google.com/webmasters/tools/dashboard?hl=zh-CN

Baidu:建议使用robots.txt提交html格式的网站地图 http://www.baidu.com/search/url_submit.html

manifest.json

manifest.json 是一个简单的JSON文件，告诉浏览器你的网站是在移动设备或是台式设备使用。当用户将你的网站收藏为标签时，manifest.json 就会很有用，它可以指示你的网站名称、icon、页面展示方向（横向或纵向）等等。

下面的方法也利于SEO

- 栏目页旁边要加推荐文章，10条左右

- 每个页面都要加h1 h2内容

- 首页的图片上，加title，把想加的关键词均匀分布在图片的title上

上面的配置完成，项目上线后我们可能需要一些工具来统计页面的流量，下面介绍常用的工具。

统计工具

- [百度统计]( https://wangzhan.baidu.com/)

- [Google 分析]( Redirecting...)

- [友盟]( 友盟+，国内领先的开发者服务及数据智能服务商)

SPA为什么不利于SEO？

随着前端技术的发展，一些单页面应用SPA(Single-Page App)的前端框架被广泛使用，如vue、react，这种应用有一个缺点就是不利于SEO，原因如下：

- 搜索引擎爬虫如 Googlebot、Bingbot 它们的工作原理是下载网站的index.html，然后分析里面的链接或内容，它们喜欢静态文件

- SPA应用是基于JavaScript的，当爬虫解析这种文件时，情况就变得复杂起来，它只能获取到页面部分链接，要想更深层的解析就需要执行JavaScript，这样就大大加剧了搜索爬虫的工作负担

解决方案(SSR)

SSR 就是服务端渲染的意思。相较于SPA (单页面应用)，SSR 主要的好处是：

- 更好的搜索引擎优化 (SEO)。因为搜索引擎爬虫会直接读取完整的渲染出来的页面

- 更快的内容呈现，尤其是网络连接缓慢或设备运行速度缓慢的时候

从头搭建一个服务端渲染的应用是相当复杂的。幸运的是社区已经有了优秀的SSR框架，vue 的可以使用 Nuxt.js，React 可以使用 Next.js)。

文章首发于我的博客 SEO实战

编辑于 2022-04-06 22:11

SEO 建议

搜索营销

搜索引擎优化（SEO）