SEO 实战

IICOOM

已于 2022-04-06 15:55:00 修改

阅读量584

点赞数

分类专栏： Web开发文章标签：前端

于 2022-04-06 15:54:15 首次发布

本文链接：https://blog.csdn.net/IICOOM/article/details/123992160

版权

Web开发专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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

搜索引擎(全球Top5)

Google 月独立访问者：18亿

全球第一搜索引擎，不解释！不过国内可能用不了，你懂得。解决方法

Bing（必应）月独立访问者：5亿

Bing是微软旗下的搜索引擎，感觉它的搜索界面背景图超美，是谷歌最好的替代品，备胎中的战斗机。

Baidu（百度）月独立访问者：4.8亿

全球最大的中文搜索引擎，不解释！

Yahoo!（雅虎）月独立访问者：4.9亿

在搜索方面，雅虎表现中规中矩，网页搜索表现不错，但死链率较高而且缺少一些应有的高级搜索功能。

Yandex月独立访问者：0.3亿

Yandex搜索引擎是俄罗斯第一大搜索引擎，创建于1997年，目前已经发展成为一个提供搜索、图片共享、社交网络、网络支付、免费网站托管、以及其它服务的门户网站。

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

SEO具体方法

HTML 标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

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

下面介绍常用的meta标签：

一个高质量的网页一般都具备完善的TDK，包括title、description、keywords，在HTML 中添加如下标签（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 标签？标签也叫规范网址，出现在你网页代码的里。

假如你的域名如下：
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 https://help.bj.cn/

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上

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

统计工具

如果需要具体操作方式，评论留言，我具体介绍一下配置方式。

SPA为什么不利于SEO？

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

搜索引擎爬虫如 Googlebot、Bingbot 它们的工作原理是下载网站的index.html，然后分析里面的链接或内容，它们喜欢静态文件
SPA应用是基于JavaScript的，当爬虫解析这种文件时，情况就变得复杂起来，它只能获取到页面部分链接，要想更深层的解析就需要执行JavaScript，这样就大大加剧了搜索爬虫的工作负担