西瓜业务是如何从 0-1 建设 SEO 的

发表于 1年以前 | 总阅读数：321 次

前言

对于各位前端开发者，SEO是一个老生常谈的话题，尤其对于运营着自己的博客、网店、个人网站的开发者来说，SEO是获取自然流量始终绕不开的话题。各大搜索引擎每天都会接收用户上亿次的搜索，是不可忽略的大流量入口，如何从这庞大的搜索流量中分一杯羹，是每一个站长都需要思考的问题。

本文将会具体结合西瓜热点详情页从0到1的SEO建设过程，为大家介绍作为FE业务方如何去学习了解、建设SEO；本文不会就SEO的一些基础理论和搜索引擎算法进行深入探讨，而是希望从热点推广的视角介绍一些SEO方法。

基础概念

SEO（Search Engine Optimization） 中文译为「搜索引擎优化」。

简单地说，SEO是指网站从自然搜索结果获得流量的技术和过程，复杂且较为严谨的定义如下：

SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索结果页面上的关键词自然排名，以获得更多流量，从而达成网站销售及品牌建设的目标。

搜索引擎如何工作

搜索引擎的工作过程大体可以分成三个阶段：

1 . 爬行和抓取

搜索引擎蜘蛛通过跟踪链接发现和访问网页，读取页面HTML代码，存入数据库。

2 . 预处理

索引程序对抓取来的页面数据进行文字提取、中文分词、索引、倒排索引等处理，以备排名程序调用。

3 . 排名

用户输入查询词后，排名程序调用索引库数据，计算相关性，然后按一定格式生成搜索结果页面。

image.png

如何优化建设SEO

搜索引擎的工作流程主要涉及了2个角色——网站和搜索引擎，我们将第3个角色用户也加入其中后，就可以形成包含3个主要角色和6个核心环节的搜索生态模型。

主要围绕着这6个环节，我们将对网站逐步进行SEO的优化和建设：

抓取、收录

这里我不会按照上图的顺序先讲投放，因为投放在优化过程中其实属于后置位；在没有对网站本身结构进行优化，没有进行竞争分析（关键词选择）之前，你肯定不会轻易把网站大量投放出去吧？

网站的优化大致可以分为两部分：一是网站结构调整，二是页面优化。

我们的网站如果要顺利地被蜘蛛抓取和收录，很大程度上依赖于良好的网站结构。

网站结构优化

避免蜘蛛陷阱

Flash
各种跳转
JS链接
要求登录

设置robots文件

西瓜M站的robots文件

robots文件属于网站禁止抓取、索引机制的一部分，搜索引擎蜘蛛访问网站时，会先查看网站根目录下是否有一个robots.txt文本文件，它用于指定蜘蛛禁止抓取网站某些内容，或者允许抓取某些内容。

一些网站不存在robots文件时会返回200状态码和一些错误信息，而不是404状态码，这可能使搜索引擎蜘蛛错误解读robots文件信息，所以建议就算允许抓取所有内容，也要建一个空的robots文件，放在根目录下。

URL设计

在设计网站页面的URL时尽量遵循下面几个原则：

越短越好
避免太多参数
目录层次尽量少
包含关键词（英文）
字母小写
连词符使用「-」分隔
使用https

西瓜热点H5详情页之前的URL：
https://h5.ixigua.com/xigua_hot_spot/detail/?hotspotId=7095918215196318727

现在的URL：
https://m.ixigua.com/xigua_hot_spot/detail/7095918215196318727
更换域名 & URL静态化

我们针对之前西瓜热点H5详情页的URL进行了域名更换和URL静态化。

域名更换：M站的域名拥有较高的权重（较长的域名年龄、收录页面总数多、特征关键词排名高等），将热点的域名更换至M站域名有利于我们的页面能够被搜索引擎收录，且在搜索排名上具有一定优势。

URL 静态化 ：一般来说URL中有两三个参数，对于收录来说不会造成任何影响，但还是建议将URL静态化，既能提高用户体验，又能降低收录难度。

网址规范化

网址规范化指的是搜索引擎挑选最合适的URL作为真正网址的过程。

那什么是不规范的网址呢？

举个例子，一般来说一个网站的首页URL应该是固定的，但在一些网站链接回首页时所使用的URL并不是唯一的，有时连到https://www.xxx.com，有时连到 http://www.xxx.com/index.html 。这样不规范化的网址会给搜索引擎造成困扰，可能造成权重分散、浪费爬取份额等问题。

解决方案：

百度站长平台中设置首选域名
使用301转向，将不规范化URL全部转向到规范化URL
使用canonical标签

在HTML文件的head中加上这样一段代码：
<link rel="canonical" href="https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356">
表示这个网页的规范会网址应该是:https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356

网站页面优化

良好的TDK

TDK标签包括标题标签title（T）、网站的描述标签description（D），关键词标签keywords（K），一般在搜索结果中，页面的title和description是最有可能被展示出来的。

在设置网站的TDK之前，还有一个重要的事情便是竞争分析和关键词研究，我们需要简单了解下为什么需要有这个步骤。

确保目标关键词有人搜索
降低优化难度
寻找有效流量
搜索多样性
发现新机会

TDK 通用标准：

Title 标题

标准格式 : 关键词 - 副关键词 | 品牌名

长度建议 : 50 ~ 60 个字符

Description 描述

长度建议: 网页描述的长度任意，最佳实践长度在 155 ~ 160 个字符间之间，描述文本尽量使用关键词和吸引用户的话术，提升点击率（CTR）。

Keyword 关键词

这里的keyword不仅仅指的是meta keywords，而是站点/文章title/视频描述中可以增加关键词

长度建议

主页关键词布局一般是核心词，以5~10个为宜。关键词之间用英文状态下的逗号或者下划线隔开，搜索量大的在前，搜索量小的在后，同个关键词不可以反复出现，以免堆积。
不同栏目设置不同的关键词。栏目页属于内页，所以关键词最好选择长尾关键词，并结合网站当前栏目名称选词，一般布局3~5个长尾关键词。
视频页主要布局的关键词是长尾关键词，1~2个为宜，一定要和视频主题高度吻合。

举个

image.png

西瓜热点详情页是一个静态的CSR站点，这样的页面渲染方式是无法对页面的TDK进行定制化处理的。

image.png

因此我选择采用模板引擎进行TDK定制化处理。

image.png

1 . 注入表达式： 由于在编译运行时代码时会利用到html模板，并将编译得到的js、css文件从html模板中引入，所以我们可以预先在html模板中注入模板语言表达式来占位TDK，{{title}}，{{description}}，{{keywords}}。

2 . 更改后缀： 在运行时代码编译完成得到最终产物后，其中html文件中便会包含之前注入的模板表达式，此时将html文件后缀更改为模板语言后缀(index.handlebars)。

3 . Node服务： 在router拦截到对应路由请求时(/xigua_hot_spot/detail/:hotspotId)，在controller中请求对应热点id的具体内容（标题、介绍）,利用ctx.render将对应的变量传递给模板文件(index.handlebars)并返回文件。

正确使用 `HTML` 标签

<a>标签需要有 href 属性，减少使用JS跳转

<img>标签需要补全 alt 属性值

全局只能存在一个不要滥用，合理使用此类标签

性能优化

页面速度是重要的排名因素，也影响到爬虫的爬取效率。无论百度还是Google都已经有数次以页面打开速度为目标的算法更新

优化页面耗时

网站在搜索结果中的排名会受到页面打开速度的影响，例如百度在2017年10月推出闪电算法，针对页面的打开速度给予政策支持，页面的首屏加载速度越快往往会获得更高的排名以及更多的流量倾斜。谷歌也在2021年6月发布公告称，网页核心性能指标(CLS、FID、LCP)将被视为排名因素之一。

良好的首屏加载耗时不仅会受到搜索引擎的青睐，同时也能为浏览网站的用户提供更好的体验和服务。

优化页面体积(< 125 kb )

搜索引擎受限于自身的技术能力和计算资源，对于页面源码尺寸有限制（百度限制128kb，Bing限制125kb），超过的部分会进行截断处理。

网页投放

通过网站地图，不仅用户可以对网站的结构和所有内容一目了然，搜索引擎也可以跟踪网站地图链接爬行到网站的所有主要部分；网站地图有两种形式，第一种被称为HTML版本网站地图，英文是sitemap，另一种是XML版本网站地图，英文Sitemap。

HTML网站地图

image.png

XML网站地图

image.png

API推送

概述

通过开放API接口将网页链接直接推送给搜索引擎，目前只有百度、Google、Bing三个搜索引擎支持该能力。

image.png

特点：速度快、权重高

相比于网站地图，API推送网页链接可以使得搜索引擎更加快速地爬取和收录网页，并且搜索引擎会认为站长主动推送的链接可能会有更高的质量，适合于更新速率快、时效性高的网页。

定时推送

热点事件的发生时机较为随机，且具有较强的时效性，为了能够让搜索引擎更加快速地爬取和收录西瓜热点页面，利用Timer触发器，定时将热点页面通过API推送给搜索引擎。

image.png

主动推送机器人

西瓜热点具有重运营的属性特点，热点的产生和推广与运营密切相关；从这点出发我思考能不能开发一个西瓜热点SEO相关的运营工具，当热点新鲜产生的时候，运营可以借助我的工具将该热点及时推送给搜索引擎，加快该热点被搜索引擎爬取收录的速度，获取更多的自然流量。

因此我开发了西瓜热点 SEO 机器人，利用飞书提供的企业机器人功能进行定制化开发，通过与机器人对话的形式，能够方便运营同学将新产生的热点快捷地进行推送。

image.png

内链/友链投放

内链，就是在同一个网站中，内容页面之间相互链接，也就是网站内部的链接。好的内链布局合理，结构清晰，能提高搜索引擎对我们网站的收录和权重，是很重要的。内链还可以控制成本，提高索引效率，提升网站的排名，传递权重，最终提升流量。

image.png

外链，就是别的网站导入自己网站的链接，即可以通过其他地方进我们网站，外链的作用有很多，不单单只是提高网站的权重，也可以提高某个关键词的排名，一个高质量的外链可以为我们的网站带来更多流量。

image.png

排名/点击

结构化数据

结构化数据，是一种提供网页相关信息并对网页内容进行分类的标准化格式，换句话说，就是搜索引擎使用的语义词汇代码语言。

这种代码可以帮助谷歌理解页面内容。同时，Google 搜索也会利用这种代码语言（结构化数据）启用特殊的搜索结果功能和增强功能，丰富搜索结果展示。

<script type="application/ld+json" id="scriptTag" nonce="-_vD_w5o44pwi2zXVWL8EA" class="style-scope ytd-player-microformat-renderer">
{ "@context": "https://schema.org",
"@type": "VideoObject",
"description": "《三体》完整合集浓缩版，真.完结撒花！增加了一些内容，修正了一些内容，删除了一些内容。片尾有彩蛋嘿嘿~\n希望你们喜欢。\n\n#三体 #名侦探拳头 #科幻",
"duration": "PT4560S",
"embedUrl": "https://www.youtube.com/embed/QO25QnboJG0",
"interactionCount": "7714441",
"name": "【三体解说】76分钟看完《三体》全集。宇宙很大，生活更大。【名侦探拳头】",
"thumbnailUrl": [ "https://i.ytimg.com/vi/QO25QnboJG0/maxresdefault.jpg"
] ,
"uploadDate": "2019-06-02",
"genre": "People & Blogs",
"author": "名侦探拳头"
}
</script>

除了谷歌的结构化数据外，我们在百度也会看到一些图文展现格式，在说明文字的左侧放上一张图片。

列表左侧的图片来源有两个，大部分情况下是从页面本身选取的，从百度官方介绍和经验来看，被选取的图片需要满足这些条件：