前端开发者必看：结合西瓜热点详情页谈SEO建设与方法

前言

对于各位前端开发者而言，SEO是个老话题。特别是那些运营自己博客、网店、个人网站的开发者，SEO是获取自然流量必然会涉及的话题。各大搜索引擎每天接收用户搜索达上亿次，是不可忽视的大流量入口。怎样从这庞大搜索流量中分到份额，是每个站长都要思考的问题

本文会结合西瓜热点详情页从零到一的SEO建设过程。为大家介绍FE业务方怎样学习了解、建设SEO。本文不会深入探讨SEO的基础理论和搜索引擎算法。而是从热点推广角度介绍一些SEO方法。

基础概念

SEO即搜索引擎优化。它的中文译名为「搜索引擎优化」。

简单来讲 SEO 是一种技术和过程。它能让网站从自然搜索结果获取流量。其复杂且严谨的定义如下：

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

搜索引擎如何工作

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

爬行和抓取

搜索引擎蜘蛛发现并访问网页。其方式是跟踪链接。之后，它读取页面HTML代码。最后，将代码存入数据库。

预处理

索引程序会对抓取到的页面数据做处理。处理内容包括文字提取。还包括中文分词。也包括索引。以及倒排索引。处理完后供排名程序调用

排名

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

image.png如何优化建设SEO

搜索引擎的工作流程主要涉及两个角色，即网站和搜索引擎。当我们把第三个角色用户也加入其中后，就能形成一个搜索生态模型。这个模型包含三个主要角色和六个核心环节。

我们将对网站逐步进行SEO的优化与建设。主要围绕着6个环节展开。

抓取、收录

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

网站优化大体能分成两部分。一部分是网站结构的调整。另一部分是页面的优化。

我们的网站若想被蜘蛛顺利抓取。还要被顺利收录。在很大程度上依赖良好的网站结构。

网站结构优化避免蜘蛛陷阱设置robots文件

西瓜M站的robots文件

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

一些网站在不存在robots文件时，会返回200状态码以及一些错误信息，而非404状态码。这有可能致使搜索引擎蜘蛛对robots文件信息产生错误解读。所以即便允许抓取所有内容，也建议建一个空的robots文件，并放置在根目录下。

URL设计

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

西瓜热点H5详情页之前的URL：
请你明确一下具体需要改写的句子内容呀，目前只给出了一个链接，没有具体的句子呢。

现在的URL：
请你提供一下横线下的句子内容，以便我按照要求进行改写。
更换域名 & URL静态化

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

域名更换：M站域名权重较高。其域名年龄长，收录页面总数多，特征关键词排名高等。把热点域名更换为M站域名，利于我们的页面被搜索引擎收录。并且在搜索排名上有一定优势。

URL静态化：通常情况下，URL里有两三个参数。就收录而言，不会产生任何影响。不过，仍建议进行URL静态化。这样做既能提升用户体验，又能降低收录难度。

网址规范化

网址规范化是一个过程。在这个过程中，搜索引擎会挑选出最合适的URL。这个URL将作为真正的网址。

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

举个例子 通常情况下 一个网站的首页URL应是固定的 然而在一些网站 链接回首页时所使用的URL并非唯一 有时连到一个地方 有时又连到另一个地方 如此不规范的网址 会给搜索引擎带来困扰 可能引发权重分散 浪费爬取份额等问题

解决方案：

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

网站页面优化良好的TDK

TDK标签包含标题标签title（T）。还包含网站的描述标签description（D）。也包含关键词标签keywords（K）。通常在搜索结果里。页面的title最有可能被展示出来。页面的description也最有可能被展示出来。

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

TDK 通用标准：

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

长度建议 : 50 ~ 60 个字符

请你提供一下具体的句子内容，以便我按照要求进行改写。

在视频描述中也可增加关键词

长度建议

举个

image.png

西瓜热点详情页是静态的CSR站点。这种页面渲染方式不能对页面的TDK做定制化处理。

image.png

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

image.png

在编译运行时代码时会利用html模板。会将编译得到的js、css文件从html模板中引入。所以我们能够预先在html模板中注入模板语言表达式来占位TDK。比如{{title}}。还有{{description}}。以及{{keywords}}。

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

Node服务：当router拦截到对应路由请求，即/xigua_hot_spot/detail/:hotspotId时，在controller中请求对应热点id的具体内容，也就是标题和介绍。然后利用ctx.render将对应的变量传递给模板文件，即index.handlebars，并返回该文件。

正确使用 HTML 标签

性能优化

页面速度是关键的排名要素。它还会对爬虫的爬取效率产生影响。百度和Google都曾多次针对页面打开速度进行算法更新

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

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

搜索引擎受自身技术能力与计算资源限制。它对页面源码尺寸有要求。百度限制为128kb。Bing限制为125kb。超过限制部分会被截断处理。

网页投放网站地图

借助网站地图，用户能对网站结构和全部内容一览无余。搜索引擎可依据网站地图链接，爬行至网站的所有关键部分。网站地图存在两种形式。其一称作HTML版本网站地图。其二是XML版本网站地图。

image.png

image.pngAPI推送概述

把网页链接借助开放API接口直接推送给搜索引擎。当下仅有百度、Google、Bing这三个搜索引擎具备这种能力。

image.png

特点：速度快、权重高

与网站地图相比，API推送网页链接能让搜索引擎更迅速地爬取网页并收录。而且搜索引擎会觉得站长主动推送的链接质量可能更高。这种方式适合更新速率快、时效性高的网页。

定时推送

热点事件发生时机随机。它时效性强。为让搜索引擎更快爬取收录西瓜热点页面。利用Timer触发器。定时经API把热点页面推送给搜索引擎。

image.png主动推送机器人

西瓜热点有重运营的特性，热点的产生及推广和运营紧密相连。基于此我思索能否开发一款与西瓜热点SEO相关的运营工具。当热点刚出现时，运营可借助我的工具把该热点及时推送给搜索引擎。以此加快热点被搜索引擎抓取收录的速度，从而获取更多自然流量。

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

image.png内链/友链投放

内链是指在同一个网站里，内容页面相互进行链接，即网站内部的链接。好的内链布局合理且结构清晰。它能提高搜索引擎对网站的收录。还能提升网站权重。这是非常重要的。内链可以控制成本。能提高索引效率。可提升网站排名。能传递权重。最终提升流量

image.png

外链是别的网站导入自己网站的链接。通过其他地方能进入我们网站。外链作用众多。它不只是提高网站权重。还能提高某个关键词排名。一个高质量外链可为我们网站带来更多流量。

image.png排名/点击结构化数据

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

这种代码能助力谷歌领会页面内容。与此同时，Google搜索会借助这种代码语言（结构化数据）开启特殊的搜索结果功能以及增强功能，使搜索结果展示更为丰富

type="application/ld+json" id="scriptTag" nonce="-_vD_w5o44pwi2zXVWL8EA" class=风格范围 年初至今播放器微格式渲染器>
{ "@context": "https://schema.org",
"@type": "VideoObject",
"description": 《三体》完整合集浓缩版，真正完结啦！有内容增加，有内容修正，也有内容删除。片尾还有彩蛋哦！希望你们会喜欢。#三体 #名侦探拳头 #科幻,
"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": "名侦探拳头"
}

这些格式会在说明文字的左侧放置一张图片

列表左侧图片来源有两个。多数情形下是从页面自身选取。从百度官方介绍及经验可知。被选取的图片需满足这些条件。

需要注意的是，即便满足了上述这些条件。页面在搜索结果中或许依旧无法展现图片。这与百度自身的策略和算法有关。百度会更倾向于将资源分配给自家产品。比如好看视频、百家号等

图文展现这种形式直观性强。它能提高用户体验。能使用户更易快速判断页面内容。对页面吸引视线有明显作用。对提高点击率也有明显作用。

关联百度热搜词

我们使用百度搜索引擎时。常能在首页看到一个“百度热搜”。有时也会在搜索结果页左侧看到它。

image.png

我们点击一个热点。之后会进入该热点的搜索结果页。在搜索结果最上方。会聚合展示有关该热点的相关资讯网页。可以发现。网页标题含热搜词的页面搜索结果。往往能获较高排名。比如「韩国主帅赛后怒斥裁判被红牌驱逐」这个热搜词。能看到排名较前的几个搜索结果里。都包含了该热搜词

基于这样的推断 我思考能否联动西瓜热点与百度热搜词中的相关内容 当百度爬虫爬取西瓜热点页面时 判断百度热搜词中有无与该西瓜热点相近的内容 通过替换西瓜热点标题 在百度搜索中提升排名

image.png数据监控爬虫行为监控

收集爬虫日志。通过了解爬虫的行为变化。能够在流量变化之前。更灵敏地反映页面SEO的状态

新上SEO功能后，可以通过爬虫日志来灵敏得判断功能的影响

索引量监控

借助各个平台自身的站长平台 能够看到索引量的变化 有些平台更新或许不太及时

通过site: 语句，可以查询索引的数据

分页面索引的操作，运用inurl:/xigua_hot_spot site:这样的语句来进行

SEMrush

有一款SEO工具。它能在谷歌插件市场下载安装。其功能是展示当前站点的SEO相关数据。这些数据包含索引量。还有外链量。以及内链量等。

排名监控

搜素引擎自带的监控

通过脚本收集相关页面在指定搜索关键词下的排名情况

结语

SEO是个极为神奇之物 它有规律可寻 却又异常复杂 类似玄学 多数时候 需要经验积累 AB实验在一定程度上能缓解这种需求

本文主要包含了我这段时间的SEO优化经验。然而这仅仅是SEO的一小部分。并且SEO如今已不限于Web端。在APP端也日益兴起。所以要完全弄清楚掌握它的奥秘仍有很长的路要走。

做好SEO，最根本的是网站内容要丰富、有价值。没有好内容作基础，SEO的价值会被减损。

希望我的经验和积累能够给大家带来一些启发。

关于我们

我们隶属字节跳动。我们是旗下西瓜视频前端部门。我们负责西瓜视频的产品研发工作。

我们努力分享产品里的业务实践。为业界提供经验价值。业务实践涵盖多个方向。比如营销搭建。比如互动玩法。比如工程能力。比如稳定性。比如Nodejs。比如中后台