seo内部链接优化（前端优化网站性能的方法）

小红书笔记优化您必须了解的链接“rel”属性

通常，您会看到特定链接具有关联的rel属性。rel="nofollow"是最常见的用法，您告诉百度和其他搜索引擎不要“关注”特定链接，并且不得通过该链接传递权重。

但是，您还应该了解其他一些rel属性，尤其是当您作为SEO工作或想了解有关链接的不同rel属性的更多信息时。

在列出所有rel属性之前，让我们首先尝试了解什么是rel属性以及它的实际含义。

什么是Rel属性？

rel属性定义了链接资源和当前文档之间的关系。因此，在上面的示例中，rel属性定义了包含链接的页面和链接到的页面之间的关系。在这种情况下，该关系为nofollow。

在特定链接中，关系可能不同。它不必始终为nofollow。在某些链接中，可能根本没有定义任何关系。您不必总是指定关系，并且每个链接都必须包含rel属性，这不是强制性的。rel属性是可选的，而不是强制性的。

总之，rel属性定义了源文档和目标文档之间的关系。rel属性可以是其他HTML元素的一部分，而不仅仅是链接。因此，rel属性不仅限于链接，还可以应用于其他HTML元素（例如<form>或<nav>），在这些HTML元素中，必须将“关系”信息传递给搜索机器人，爬虫和蜘蛛，以便他们了解正在发生的事情以及不同文档之间的相互关系。

您应该知道的最常见的Rel属性

下面，我定义了一些您应该知道的最重要和最常见的rel属性，并且我还解释了每个属性的含义。

Rel="Nofollow"

这意味着将不通过给定的链接对目标文档进行爬网，并且您不希望从现有文档中传递权重。这也是告诉Google和其他搜索引擎的一种方式：我不认可此链接，但是我在文档中使用它作为参考。它不是为了背书或引用，只是供他人参考。

用在哪里？–超链接。

Rel="Canonical"

表示目标文档是页面的主副本。rel规范元素中给出的任何值，即主副本，都可以等于源文档，也可以与源文档不同。这用于防止重复内容问题。

用在哪里？–在给定页面的头部。

Rel="ugc"

UGC代表用户生成的内容。在内容不是由页面作者创建而是由其他阅读文档的用户创建的情况下使用此rel属性。这可能意味着博客和论坛的评论部分，或其他用户使用该网站创建的单个内容。由用户生成但不是该文档作者制作的任何内容都可以标记为UGC。

用在哪里？–在内容是用户生成的内容而非作者生成的超链接中使用。

为什么这很重要？–重要的是指出用户生成的指向百度和其他搜索引擎的链接和内容，因为有时网站所有者不能完全控制网站上显示的内容，因为其中一部分内容可以由用户生成（例如论坛，目录网站）以及其他任何人都可以注册和创建内容的公共平台。）因此，当百度和其他搜索引擎从本质上理解页面的哪个部分是用户生成的内容以及本质上是编辑的哪个部分时，他们可以更好地了解正在发生的事情，从而帮助他们在搜索结果中对页面进行排名。它还可以帮助网站所有者避免任何形式的算法惩罚，因为百度和其他搜索引擎知道该内容是用户自然生成的（因此，如果该内容看上去是垃圾内容并违反百度网站质量准则，则有时它们可能具有较高的容忍度）。

Rel="sponsored"

如果有人付钱给您手动链接到他们，或者您的页面上有付费广告，则应始终将其标记为“赞助”。

用在哪里？–超链接。

为什么这很重要？–重要的是要向百度和其他搜索引擎表明您明确告诉他们这是一个赞助链接，而不是自然的认可。明确说明后，搜索引擎将了解发生了什么事情，并且您没有做任何黑帽SEO或接受任何费用以换取链接。但是，如果您没有明确提及这一点，并且搜索引擎发现您一直在销售链接，那么您将遇到很大的麻烦，因为搜索引擎会手动标记您的网站，您的网站将失去自然排名。

做前端，你一定会SEO网页代码优化，完全搞懂有意外收获

你一定不知道，在前端代码规范上，还有 SEO 代码规范，作为学习前端的你稍后了解呢？SEO 代码规范一方面是为了获取流量，如果你能运用得炉火纯青，在移动端和 PC 端网站应用上，那么你就可以找老板谈谈了，有了排名，有了流量，就可以拿提成了！

SEO 优化的好处

• 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，为自己的网站获取免费流量；
• 以用户体验为核心，为目标用户提供高质量的内容；
• 对页面的代码和网页阅读体验，网站性能等进行优化，符合搜索引擎的规则，提升搜索引擎网页的自然排名。

一、网页三要素的基础优化规范

T 深入浅出 SEO 优化规范

1、页面标题 (Title)，30 字以内

网站首页：

品牌词 - 产品中文全称、特色服务、xxxx

<title>品牌名-正品低价、品质保障、配送及时、轻松购物 ！</title>

list 页面：

产品和主题概述 - 品牌词

<title>广州装修公司排行，联系地址-品牌词</title>

detail 页面：

具体产品或内容主题概述 - 品牌词

<title>广州番禺区百姓装潢设计_收费标准-品牌词</title>

注：强调重点即可，重要的关键词出现不要超过 2 次，而且要靠前，不同页面的 title 要有所不同

2、页面描述（Description）

150 字以内

• 不超过 150 个字符，描述内容要和页面内容相关。
• 对页面内容的高度概括，不可过分堆砌关键词，不同页面的 description 要有所不同

<metaname="description"content="品牌名-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>

3、页面关键字（Keywords）

Keywords 为产品名、专题名、专题相关名词，之间用英文半角逗号 ,隔开 ，告诉搜索引擎本页的重点、关键词。

<metaname="Keywords"content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜"/>

4、总结

书写顺序

代码顺序按照 标题 -> 描述 -> 关键字 依次

二、搜索引擎的索引方式

索引方式

• robot terms 是一组使用逗号 ,分割的值
• 通常有如下几种取值：none，noindex，nofollow，all，index 和 follow。确保正确使用 nofollow 和 noindex 属性值。

<metaname="robots"content="index,follow"/><!-- all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询，告诉蜘蛛可以被追踪，传递权重； noindex：文件将不被检索； nofollow：页面上的链接不可以被查询，告诉蜘蛛无需追踪，不传递权重。一般用于站外链接。 -->

页面重定向和刷新) 页面重定向和刷新

• content 内地数字代表时间（秒），既多少时间后刷新。
• 如果加 url，则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

<metahttp-equiv="refresh"content="0; url="/>

三、语义化内容标签的使用

语义化的好处

• 符合 W3C 规范
• 代码结构清晰，方便阅读，有利于团队合作开发
• 语义化代码让搜索引擎容易理解网页，有利于搜索引擎优化（SEO）

语义化内容标签如下：

1、超链接：a 标签

• 内部链接，要加 title属性加以说明
• 外部链接，要加 rel="nofollow"属性，告诉蜘蛛无需追踪，传递权重

2、图片：img 标签

TIP

img要加上 alt属性加以说明

3、表格：table 标签

标题使用 caption标签

4、标题：h1 ~ h6 标签

• h1一个页面只可有一个，首页多用于包含 logo，其他页面用于主标题
• h2模块标题
• h3段落的小节标题
• h4, h5, h6基本上不使用

具体标准参考百度百科文章页面代码

5、强调内容的重要性

• strong和 em都表示强调
• strong 显示为粗体 em 显示为斜体，且 strong 的强调程度要比 em 更高

<em>强调文本</em><strong>强调文本</strong>

6、视觉上突出显示文本

<!--如：搜索结果中高亮的关键词--><mark></mark>

7、时间

<p>文章发表于 <timedatetime="2022-06-01 12:00">2022-06-01</time></p>

8、定义联系信息

<address></address><!--也可定义 article 元素的作者信息，但不适用于嵌套的 article 元素-->

9、代表一段独立的内容，经常与说明配合使用

<figure><!-- 图片、图表、表格等 --><figcaption>标题/说明</figcaption></figure><!--figcaption 元素必须是 figure 元素的第一个或者最后一个子元素-->

10、换行、版权符号

• br只用于文本内容的换行
• 输入法输入 'banquan'，按序号选择版权符号

四、语义化结构标签的使用

TIP 语义化标签在 SEO 优化中的应用

1、section 标签使用场景

<header></header><section><h2>标题</h2><p>段落内容</p></section><section><h2>标题</h2><imgsrc="./img/pic.jpg"width=""height=""alt="图片说明"/></section><section><h2>标题</h2><p>段落内容</p></section><footer></footer>

注：

对页面中的内容进行分块，一个 section元素通常由标题以及内容组成

不推荐那些没有标题的内容使用 section 标签

2、article 使用场景

<article><header><h2>标题</h2><p>发表日期： <timedatetime="2022-06-01 12:00">2022-06-01</time></p></header><p>文章内容段</p><p>文章内容段</p></article>

对比：它比 section具有更明确的语义，代表一个独立的、完整的相关内容块，可以包含一个或多个 section

3、aside 使用场景

<aside><h2></h2><ul><li></li><li></li></ul></aside>

aside：独立于内容的一部分，且可以被单独的拆分出来而不会使整体受影响，常用于定义页面侧边栏

4、main 使用场景

<main></main>

只能有一个：用来呈现文档或应用的主体部分，一个页面只能有一个 main标签

5、header 使用场景

页面中的 header

<header><h1role="logo"><ahref="/">文字Logo</a></h1><nav><ahref="/">首页</a><ahref="/product">产品介绍</a><ahref="/about">关于我们</a></nav></header>

分块中的 header

<section><header><h2>标题</h2><p>信息介绍</p></header><p>分块内容段</p></section>

文章中的 header

<article><header><h2>标题</h2><p>发表日期： <timedatetime="2022-06-01 12:00">2022-06-01</time></p></header><p>文章内容段</p></article>

注：article、section、aside、nav 标签都可以拥有自己的 header 和 footer 标签

6、role 属性的使用场景

增强语义性：用来增强语义性，当现有的 HTML 标签不能充分表达语义的时候，可以借助 role属性来说明

五、搜索引擎优化的基础注意事项

注：

• 重要内容尽量靠前放
• 搜索引擎抓取 HTML的顺序是从上到下的，而有的搜索引擎对抓取的内容长度有一定的限制
• 重要内容不要用 JS 输出
• 搜索引擎不会抓取 JS的生成内容
• 其他
• 页面结构尽量扁平化，目录结构不宜过深，最好不超过 三级，每级都有 面包屑导航，成树状结构分布。否则不利于搜索引擎抓取
• 做 404页面，不仅提高蜘蛛体验，也提高用户体验

更多专业的 SEO 搜索引擎优化教程后续再做梳理

如果你才开始学习前端，我们这里有 html+css 阶段完整教程，我们在钉钉群里有全套的课程包含（入门到精通课程、4 综合项目（称之为 15 天训练营，在群里是从第二十三节课开始的）、30 个练习案例！）如果需要，给我发消息，邀请你进入钉钉群学习！

转载请注明来自专注小红书笔记推广,教程,推广 - 素仁帮，本文标题：《seo内部链接优化（前端优化网站性能的方法）》

标签：seo链接优化优化网站方法