关于SEO的一些思路摸索之Nuxt框架｜ 青训营笔记

Zora178
188 阅读6分钟

SEO简介

seo.jpg

什么是 SEO？

SEO(Search Engine Optimization)，即搜索引擎优化。是一种通过有机搜索结果来增加网站流量的做法。它包括关键词研究、内容创建、链接建设和技术审计。

为什么要做SEO？

SEO的存在就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面，增加流量，改善潜在用户体验。

内容SEO

TKD设置

TKD是页面三要素Title、Keywords、Description的首字母简称。
TDK信息对应的html标签分别是<title></title>标签、<meta name="keywords" content="">标签、<meta name="description" content="">标签。
页面TKD通常包含品牌词及业务词,我们可以参考掘金的网站来进行详细说明。

  • <title>青训营-快乐出发 - 沸点 - 掘金</title>
    Title：青训营-快乐出发 - 沸点 - 掘金
    创建唯一且准确的网页标题，标题增加站点后缀，当有多个短语时使用“-”进行隔开
  • <meta data-n-head="ssr" vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">
    有多个关键词时使用英文逗号进行隔开，一般设置3-5个关键词即可，关键词太多容易被搜索引擎视为作弊降权，页面重点也不容易找到。 关键词最好是标题、页面内容的一部分，注意密度不能太高，容易造成关键词堆砌。
  • <meta data-n-head="ssr" vmid="description" name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台被我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。">
    可以使用 meta description 标签来准确概括总结网页内容。我们应避免内容中出现关键词的堆砌、描述过长或过于笼统简单，避免直接拷贝关键词或正文内容等没有实际性意义的描述现象。

语义化标签

  1. 对网页的代码进行语义化调整，多使用语义化标签，便于爬虫检索（我们常常用爬虫来模拟搜索引擎）。比如，<b> 、 <i> 这种没有实际意义的标签，可以换成使用 <em> 或 <strong> 来表示强调。

  2. Nuxt 提供 <Title>、<Base>、<Script>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html> 和 <Head>，我们可以直接在元件中模板 (Template) 使用这些元件进行设定网页的属性及标签。

  3. 由于爬虫对网页结构的爬取是自上而下的，对导航最好使用文字方式，其中使用的图片代码最好加上“alt”属性进行文字提示，设置宽高直接加载。

  4. 图片优化，需要添加alt标签，使用具有描述性的图片名称。
    文件名优化需要在图片地址中使用文字，并且用英文破折号区分开。如：

    文件名：  juejin-wechat-qr.jpg
    对于alt标签，请使用空格分开。

<img src=".../juejin-wechat-qr.jpg" alt="qr wechat">
  1. 文本缩进不要使用特殊符号，应当使用css进行设置，同时页脚用到的版权符号©，也建议不要用特殊符号，用输入法直接打出。
  2. hid属性可以用于帮助减轻默认vue-meta行为的属性。 默认情况下，当使用vue-meta

，它将创建重复标签而不是替换原始标签。但是谷歌在抓取你的网站时会因为你有重复的标签而惩罚你，所以最好总是有一个唯一的

引导链接

SEO相关链接包括内链和外链两个部分。

内链

页内链接，可以添加加 “title” 属性加以说明，各个内页相互联通，有利于爬取数据停留时间长，降低跳出率。

外链

链接到其他网站的链接，则需要加上 rel="nofollow" 属性, 避免爬虫爬了外部链接之后，就不会再回来了。

outsidelink.png

扁平化网站结构

一般，一个网站的结构层次越少，越有利于“爬虫”的爬取。“爬虫”就是模仿用户的心理，我们要控制首页链接数量，尽量让爬虫只要跳转3次，就能到达网站内的任何一个内页，增强用户体验。 尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。

新鲜度

新鲜度是一个依赖于查询的排名因素。众所周知，热点信息对于搜索引擎的搜索结果影响很大，更改热点文章话题、关键词的排列顺序，对于网页的流量冲击是不一样的。

导航栏

在每一个网页上加上“面包屑导航”，从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，，从而更好的了解网站组织形式，也有利于爬虫对网页结构的掌握。

技术SEO

使用逻辑 URL 结构

结构化的URL可以帮助搜索者理解页面的内容和上下文，比如

  • 日期和名称: /2021/03/04/seo/
  • 月份和名称: /03/04/seo/
  • 数字: /865/
  • 标签分类/ai/nlp

页面速度

什么是页面速度？

页面速度是网页加载所需的时间。一个网页的加载速度由几个不同的因素决定，包括网站服务器、页面文件大小和图片压缩。 页面速度的衡量因素常包括这三个方面：

  • 页面完全加载:  这是一个页面上所有的资源加载出来所需的时间。它是确定页面加载速度最直接的方法。

  • 第一个字节加载时间（TTFB）:  这是衡量页面开始加载过程所需的时间。

  • 首次内容绘制（FCP） : 一个页面加载足够的资源以便用户能够阅读该页面上的内容所需的时间。

图片加载处理

  • 采用lazyload

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量，来对前端网站性能优化。
在Nuxt框架中，使用了nuxt-img标签代替了原始的img标签，其中就包括了loading=“lazy”属性 load-lazy.png

  • 压缩图片

图片通常占用加载的大部分时间，压缩图片可以让页面加载更快。

tinyphoto.png tinypng.com/developers#…

使用 TinyPNG 可以缩小应用程序和网站的图像，使用更少的带宽和更快的加载速度。

代码压缩

Gzip是GNU zip的缩写，它是现在Internet上使用非常普遍的一种数据压缩格式。一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40％。

zip.png www.gnu.org/software/gz…

网站的 Open Graph (OG)

OG即Open Graph Protocol，由 Facebook 所提出，当网页中设定了 OG Tag，能让网页被分享至社群媒体时，能有呈现更为丰富的内容，例如标题、描述及缩图等，解析出“连结预览”的效果。“连结预览“”与 og:title、og:description 和 og:image 有着相应的设定关係。

og.png

avatar
文章
阅读
粉丝