SEO优化您必须了解的链接“rel”属性

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

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

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

什么是Rel属性？

rel属性的一般语法是：<a rel="nofollow" href="https://www.domain.com">这是一个链接</a>。

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或接受任何费用以换取链接。但是，如果您没有明确提及这一点，并且搜索引擎发现您一直在销售链接，那么您将遇到很大的麻烦，因为搜索引擎会手动标记您的网站，您的网站将失去自然排名。

链接在现代网页设计中发挥着不可或缺的作用。HTML中，href属性在anchor标签中扮演着关键角色，使得用户可以轻松地跳转到其他页面或特定部分。在本文中，我们将探讨href属性的基本使用方法以及一些高级技巧，帮助您提升网站用户体验。

基本使用方法

HTML中，anchor标签用于创建超链接，其基本结构如下：

<a href="链接地址">链接文本</a>

其中，href属性指定了跳转的目标地址，而链接文本则是用户在页面上看到的可点击的文本。

绝对路径与相对路径

绝对路径和相对路径是href属性中常见的两种取值类型。

绝对路径：完整的URL地址，包括协议（如http://或https://）、域名和页面路径。例如：https://www.example.com/page.html
相对路径：相对于当前页面的路径，省略了协议和域名。例如，假设当前页面为https://www.example.com/home.html，则可以使用/about.html指向https://www.example.com/about.html。

外部链接与内部链接

外部链接指向不同域名的页面，而内部链接则是指向同一域名内的页面或部分。在创建链接时，确保使用正确的协议（如http://或https://）以避免链接无法正常跳转。

使用target属性

通过使用target属性，您可以控制超链接的打开方式。常见的取值有：

_self：在当前窗口或标签页中打开链接。
_blank：在新窗口或新标签页中打开链接。
_parent：在上一级窗口或框架中打开链接。
_top：清除当前窗口的内容，然后在新的顶级窗口中打开链接。

使用rel属性

rel属性用于在超链接中添加关联信息，如：

nofollow：告诉搜索引擎不要按常规方式索引和跟踪链接。
target="_blank" rel="noopener noreferrer"：同时使用target属性的_blank值和rel属性，可以禁止在新窗口中打开链接的JavaScript代码访问原始页面的窗口对象。

访问性和 SEO 优化

为了提升网站的访问性和 SEO 排名，请确保链接文本清晰、描述性，避免使用过于短的单词（如 "点击这里"）。此外，使用有意义的 URL 以便搜索引擎更好地理解您的网页内容。

使用CSS美化链接

通过CSS，您可以对超链接进行样式定义，使其与网站设计相一致。例如，更改链接的颜色、字体、下划线等。

掌握href属性的使用方法和技巧，您可以创建更加易于导航且访问性较好的网站。在提升用户体验的同时，还能够为搜索引擎提供更多关于网页内容的信息，从而提高网站的 SEO 排名。

.说明：

1.1 推荐指数：★★★★

1.2 环境：谷歌浏览器、微软vscode编辑器

1.3 熟悉sin和cos的函数与圆（画圆弧的关系）深入理解

比较真实的雷达界面扫描图

2.本次的模拟效果图：

3.css和js文件的引入：

3.1 同一个文件夹或者目录下引入：./xxx.js或者./xxx.css

3.2 大型的html文件或者一般在html文件的同一个目录下，建css文件夹和js文件夹，放入相应文件夹下，那么导入就是：css/xxx.css和js/xxxx.js

3.3 外部引入法：找到网址：比如：网址在代码注释里query-3.4.1.min.js，引入即可。

但是如果没有网络，那么html文件就不可用了，怎么办呢？有办法。

用浏览器打开，复制：网址在代码注释里jquery-3.4.1.min.js，打开。

全选复制（ctrl+a），在本地文件夹新建一个js文件：jquery-3.4.1.min.js，将复制的内容，黏贴进入，保存即可。向上面的js文件和css文件一样，作为本地js文件引入。

4.本次html文件代码：index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas带坐标雷达扫描特效</title>
<!--在线引入地址：https://code.jquery.com/jquery-3.4.1.min.js-->
<!--script-- src="./jquery.min.js"></!--script-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--将style作为单独css文件，引入，否认就是style和/style的标签内-->
<!--采用下面格式：link法-->
<link type="text/css" href="./style.css" rel="stylesheet" />
</head>
<body>

<canvas id="myCanvas"></canvas>
<div class="info">
  <!--显示文字段落-->
  <h1>Warning！！Enemy is coming！！</h1>
  <!--初始化cs-xo，之后就是message弹出动态数据-->
  <p class="message">cs-xo</p>
</div>
<!--将radar.js作为单独js文件，引入，否认就是script和/script的标签内-->
<script src="./radar.js"></script>
</body>
</html>

注意：外部引入和本地引入基本没什么区别，如果css和js=JavaScript写在html内，可能有不同，上面注释里有提到。

5.jquery-3.4.1.min.js代码不写了，可以自己去下载，免费的，或者上面的有讲解如何操作，此处略。

6.新建一个radar.js文件，代码如下：

var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");
/*雷达界面颜色=草地绿色*/
var color_gold="124,252,0"
var ww,wh;
var center={x: 0,y: 0};
// 定义函数
function getWindowSize(){
  ww=$(window).outerWidth();
  wh=$(window).outerHeight();
  c.width=ww;
  c.height=wh;
  // 中心坐标是窗口的一半
  center={x: ww/2,y: wh/2};
  ctx.restore();
  ctx.translate(center.x,center.y);
}
// 启动函数
getWindowSize();
$(window).resize(getWindowSize);
// 10=敌机数量，随机出现
var enemies=Array(10).fill({}).map(
  function(obj){
    return {
      r: Math.random()*200,
      deg: Math.random()*360,
      opacity: 0
    } 
  }
);
setInterval(draw,10);
var time=0;
var deg_to_pi=Math.PI/180;
// 画圆的函数，三角函数sin和cos画圆法
function Point(r,deg){
  return {
    x: r*Math.cos(deg_to_pi*deg),
    y: r*Math.sin(deg_to_pi*deg),
  };
}
/*定义颜色函数*/
function Color(op){
  return "rgba("+color_gold+","+op+")";
}
function draw(){
  time+=1;
  /*画长方形的背景颜色填充 "#111"=黑色;*/
  ctx.fillStyle = "#111";
  ctx.beginPath();
  /*画长方形*/
  ctx.rect(-2000,-2000,4000,4000);
  ctx.fill();
  /*十字垂直水平坐标线，0.1~1代表粗细*/ 
  ctx.strokeStyle="rgba(255,125,64,0.5)";
  // ctx.strokeStyle="255,125,64";// 默认粗细值为1
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();
  // 雷达扫面绿色和半径大小
  ctx.strokeStyle=Color(1);
  var r=300;
  var deg=time;
  var newpoint=Point(r,deg);
  var line_deg = (time/2) % 360;
  // 雷达动态转动的扫描扇形的弧度为100，最大360
  var line_deg_len=100;
  for(var i=0;i<line_deg_len;i++){
    var deg1 = (line_deg-i-1) ;
    var deg2 = (line_deg-i) ;
    var point1=Point(r,deg1);
    var point2=Point(r,deg2);
    // 代表随着雷达扫描扇形的移动，颜色逐渐变淡
    var opacity=1-(i/line_deg_len)-0.3;
    if (i==0) opacity=1;
    ctx.beginPath();
    // 雷达扇形绿色动态渐变淡色
    ctx.fillStyle=Color(opacity);
    ctx.moveTo(0,0);
    ctx.lineTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.fill();
  }
  enemies.forEach(function(obj){
    // 敌机出现的原点
    ctx.fillStyle=Color(obj.opacity);
    var obj_point=Point(obj.r,obj.deg);
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      // 绿色敌机出现的小圆点4是半径
      4,0,2*Math.PI
    );
    ctx.fill();
    ctx.strokeStyle= Color(obj.opacity);
    /*如果这样直接设置，ctx.strokeStyle= '#FF4500，那么敌机就是一直出现在屏幕';*/
    var x_size=6;
    /* 雷达显示敌机目标大小设置*/
    ctx.lineWidth=4;
    ctx.beginPath();
    ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size);
    ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size);
    ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size);
    ctx.stroke();
    if (Math.abs(obj.deg - line_deg)<=1){
      obj.opacity=1;
      // 显示左上角侦查到的地理坐标
      $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
    }
    obj.opacity*=0.99;
    // 显示敌机出现的涟漪圈的颜色
    ctx.strokeStyle= Color(obj.opacity);
    /*目标敌机显示后的圆圈涟漪粗细设置*/
    ctx.lineWidth=1;
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      10*(1/(obj.opacity+0.0001)),0,2*Math.PI
    );
    ctx.stroke();
  });
  // 雷达虚点固定圆盘的颜色，半径等设置
  ctx.strokeStyle='yellow';
  var split =120;
  var feature =15;   // 15个小格
  var start_r=230; // 半径
  var len = 5;
  for(var i=0;i<split;i++){
    ctx.beginPath();
    var deg = (i/120) * 360;
    if (i%feature==0){
      len=10;
      ctx.lineWidth=5;
    }else{
      len=5; 
      ctx.lineWidth=1;
    }
    var point1 =Point(start_r,deg);
    var point2 =Point(start_r+len,deg);
    ctx.moveTo(point1.x,point1.y);
    ctx.lineTo(point2.x,point2.y);
    ctx.stroke();
  }
  /*画圈函数定义,下面三个画圆函数的定义*/
  function CondCircle(r,lineWidth,func_cond){
    ctx.lineWidth=lineWidth;
    /* 颜色定义*/
    /*注意颜色定义：有引号的和没有引号的区别，就是前面有没有颜色图标*/
    ctx.strokeStyle='#00C78C';
    ctx.beginPath();
    for(var i=0;i<=360;i++){
      var point =Point(r,i);
      if (func_cond(i)){
        ctx.lineTo(point.x,point.y);
      }else{
        ctx.moveTo(point.x,point.y);
      }
    }
    ctx.stroke();
  }
  // 雷达外围的移动半弧形，300为半径，2代表粗细
  CondCircle(300,2,function(deg){
    return ((deg+time/10)%180)<90;
  });
  // 雷达中间绿色的移动半弧形，160为半径，2代表粗细
  CondCircle(160,2,function(deg){
    return ((deg+time/5)%180)<90;
  });
  // 雷达内的小圆圈，绿色虚线圈，1代表粗细
  CondCircle(100,1,function(deg){
    // 如果这里没有，那么颜色就是三条线函数里统一的颜色，也可以单独设立
    ctx.strokeStyle='pink';
    return (deg%3)<1;
  });
  
}

7.新建一个style.css文件，代码如下：

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*隐藏浏览器的条形伸缩*/
  overflow: hidden;
}
/*定义画布*/
canvas {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
/*显示警告信息位置设置*/
.info {
  position: absolute;
  left: 10px;
  top: 10px;
}
h1 {
  /*显示警告信息文字颜色设置*/
  color:red;
  letter-spacing: 0.5px;
  margin: 0;
  font-size:smaller;
}
.message {
  /*显示雷达预警敌机的动态位置的文字颜色设置*/
  margin: 0;
  color:#00FFFF;
  font-size: x-large;
}

8.通过简单的例子，熟悉html、css和js的关系和布局等基本知识，熟练掌握基本操作。

在线咨询

上一篇：css3美化网页-第五章
下一篇：HTML常用代码有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商