SEO優(yōu)化您必須了解的鏈接“rel”屬性

常，您會看到特定鏈接具有關(guān)聯(lián)的rel屬性。rel="nofollow"是最常見的用法，您告訴百度和其他搜索引擎不要“關(guān)注”特定鏈接，并且不得通過該鏈接傳遞權(quán)重。

但是，您還應(yīng)該了解其他一些rel屬性，尤其是當(dāng)您作為SEO工作或想了解有關(guān)鏈接的不同rel屬性的更多信息時(shí)。

在列出所有rel屬性之前，讓我們首先嘗試了解什么是rel屬性以及它的實(shí)際含義。

什么是Rel屬性？

rel屬性的一般語法是：<a rel="nofollow" href="https://www.domain.com">這是一個(gè)鏈接</a>。

rel屬性定義了鏈接資源和當(dāng)前文檔之間的關(guān)系。因此，在上面的示例中，rel屬性定義了包含鏈接的頁面和鏈接到的頁面之間的關(guān)系。在這種情況下，該關(guān)系為nofollow。

在特定鏈接中，關(guān)系可能不同。它不必始終為nofollow。在某些鏈接中，可能根本沒有定義任何關(guān)系。您不必總是指定關(guān)系，并且每個(gè)鏈接都必須包含rel屬性，這不是強(qiáng)制性的。rel屬性是可選的，而不是強(qiáng)制性的。

總之，rel屬性定義了源文檔和目標(biāo)文檔之間的關(guān)系。rel屬性可以是其他HTML元素的一部分，而不僅僅是鏈接。因此，rel屬性不僅限于鏈接，還可以應(yīng)用于其他HTML元素（例如<form>或<nav>），在這些HTML元素中，必須將“關(guān)系”信息傳遞給搜索機(jī)器人，爬蟲和蜘蛛，以便他們了解正在發(fā)生的事情以及不同文檔之間的相互關(guān)系。

您應(yīng)該知道的最常見的Rel屬性

下面，我定義了一些您應(yīng)該知道的最重要和最常見的rel屬性，并且我還解釋了每個(gè)屬性的含義。

Rel="Nofollow"

這意味著將不通過給定的鏈接對目標(biāo)文檔進(jìn)行爬網(wǎng)，并且您不希望從現(xiàn)有文檔中傳遞權(quán)重。這也是告訴Google和其他搜索引擎的一種方式：我不認(rèn)可此鏈接，但是我在文檔中使用它作為參考。它不是為了背書或引用，只是供他人參考。

用在哪里？–超鏈接。

Rel="Canonical"

表示目標(biāo)文檔是頁面的主副本。rel規(guī)范元素中給出的任何值，即主副本，都可以等于源文檔，也可以與源文檔不同。這用于防止重復(fù)內(nèi)容問題。

用在哪里？–在給定頁面的頭部。

Rel="ugc"

UGC代表用戶生成的內(nèi)容。在內(nèi)容不是由頁面作者創(chuàng)建而是由其他閱讀文檔的用戶創(chuàng)建的情況下使用此rel屬性。這可能意味著博客和論壇的評論部分，或其他用戶使用該網(wǎng)站創(chuàng)建的單個(gè)內(nèi)容。由用戶生成但不是該文檔作者制作的任何內(nèi)容都可以標(biāo)記為UGC。

用在哪里？–在內(nèi)容是用戶生成的內(nèi)容而非作者生成的超鏈接中使用。

為什么這很重要？–重要的是指出用戶生成的指向百度和其他搜索引擎的鏈接和內(nèi)容，因?yàn)橛袝r(shí)網(wǎng)站所有者不能完全控制網(wǎng)站上顯示的內(nèi)容，因?yàn)槠渲幸徊糠謨?nèi)容可以由用戶生成（例如論壇，目錄網(wǎng)站）以及其他任何人都可以注冊和創(chuàng)建內(nèi)容的公共平臺。）因此，當(dāng)百度和其他搜索引擎從本質(zhì)上理解頁面的哪個(gè)部分是用戶生成的內(nèi)容以及本質(zhì)上是編輯的哪個(gè)部分時(shí)，他們可以更好地了解正在發(fā)生的事情，從而幫助他們在搜索結(jié)果中對頁面進(jìn)行排名。它還可以幫助網(wǎng)站所有者避免任何形式的算法懲罰，因?yàn)榘俣群推渌阉饕嬷涝搩?nèi)容是用戶自然生成的（因此，如果該內(nèi)容看上去是垃圾內(nèi)容并違反百度網(wǎng)站質(zhì)量準(zhǔn)則，則有時(shí)它們可能具有較高的容忍度）。

Rel="sponsored"

如果有人付錢給您手動鏈接到他們，或者您的頁面上有付費(fèi)廣告，則應(yīng)始終將其標(biāo)記為“贊助”。

用在哪里？–超鏈接。

為什么這很重要？ –重要的是要向百度和其他搜索引擎表明您明確告訴他們這是一個(gè)贊助鏈接，而不是自然的認(rèn)可。明確說明后，搜索引擎將了解發(fā)生了什么事情，并且您沒有做任何黑帽SEO或接受任何費(fèi)用以換取鏈接。但是，如果您沒有明確提及這一點(diǎn)，并且搜索引擎發(fā)現(xiàn)您一直在銷售鏈接，那么您將遇到很大的麻煩，因?yàn)樗阉饕鏁謩訕?biāo)記您的網(wǎng)站，您的網(wǎng)站將失去自然排名。

鏈接在現(xiàn)代網(wǎng)頁設(shè)計(jì)中發(fā)揮著不可或缺的作用。HTML中，href屬性在anchor標(biāo)簽中扮演著關(guān)鍵角色，使得用戶可以輕松地跳轉(zhuǎn)到其他頁面或特定部分。在本文中，我們將探討href屬性的基本使用方法以及一些高級技巧，幫助您提升網(wǎng)站用戶體驗(yàn)。

基本使用方法

HTML中，anchor標(biāo)簽用于創(chuàng)建超鏈接，其基本結(jié)構(gòu)如下：

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

其中，href屬性指定了跳轉(zhuǎn)的目標(biāo)地址，而鏈接文本則是用戶在頁面上看到的可點(diǎn)擊的文本。

絕對路徑與相對路徑

絕對路徑和相對路徑是href屬性中常見的兩種取值類型。

絕對路徑：完整的URL地址，包括協(xié)議（如http://或https://）、域名和頁面路徑。例如：https://www.example.com/page.html
相對路徑：相對于當(dāng)前頁面的路徑，省略了協(xié)議和域名。例如，假設(shè)當(dāng)前頁面為https://www.example.com/home.html，則可以使用/about.html指向https://www.example.com/about.html。

外部鏈接與內(nèi)部鏈接

外部鏈接指向不同域名的頁面，而內(nèi)部鏈接則是指向同一域名內(nèi)的頁面或部分。在創(chuàng)建鏈接時(shí)，確保使用正確的協(xié)議（如http://或https://）以避免鏈接無法正常跳轉(zhuǎn)。

使用target屬性

通過使用target屬性，您可以控制超鏈接的打開方式。常見的取值有：

_self：在當(dāng)前窗口或標(biāo)簽頁中打開鏈接。
_blank：在新窗口或新標(biāo)簽頁中打開鏈接。
_parent：在上一級窗口或框架中打開鏈接。
_top：清除當(dāng)前窗口的內(nèi)容，然后在新的頂級窗口中打開鏈接。

使用rel屬性

rel屬性用于在超鏈接中添加關(guān)聯(lián)信息，如：

nofollow：告訴搜索引擎不要按常規(guī)方式索引和跟蹤鏈接。
target="_blank" rel="noopener noreferrer"：同時(shí)使用target屬性的_blank值和rel屬性，可以禁止在新窗口中打開鏈接的JavaScript代碼訪問原始頁面的窗口對象。

訪問性和 SEO 優(yōu)化

為了提升網(wǎng)站的訪問性和 SEO 排名，請確保鏈接文本清晰、描述性，避免使用過于短的單詞（如 "點(diǎn)擊這里"）。此外，使用有意義的 URL 以便搜索引擎更好地理解您的網(wǎng)頁內(nèi)容。

使用CSS美化鏈接

通過CSS，您可以對超鏈接進(jìn)行樣式定義，使其與網(wǎng)站設(shè)計(jì)相一致。例如，更改鏈接的顏色、字體、下劃線等。

掌握href屬性的使用方法和技巧，您可以創(chuàng)建更加易于導(dǎo)航且訪問性較好的網(wǎng)站。在提升用戶體驗(yàn)的同時(shí)，還能夠?yàn)樗阉饕嫣峁└嚓P(guān)于網(wǎng)頁內(nèi)容的信息，從而提高網(wǎng)站的 SEO 排名。

.說明：

1.1 推薦指數(shù)：★★★★

1.2 環(huán)境：谷歌瀏覽器、微軟vscode編輯器

1.3 熟悉sin和cos的函數(shù)與圓（畫圓弧的關(guān)系）深入理解

比較真實(shí)的雷達(dá)界面掃描圖

2.本次的模擬效果圖：

3.css和js文件的引入：

3.1 同一個(gè)文件夾或者目錄下引入：./xxx.js或者./xxx.css

3.2 大型的html文件或者一般在html文件的同一個(gè)目錄下，建css文件夾和js文件夾，放入相應(yīng)文件夾下，那么導(dǎo)入就是：css/xxx.css和js/xxxx.js

3.3 外部引入法：找到網(wǎng)址：比如：網(wǎng)址在代碼注釋里query-3.4.1.min.js，引入即可。

但是如果沒有網(wǎng)絡(luò)，那么html文件就不可用了，怎么辦呢？有辦法。

用瀏覽器打開，復(fù)制：網(wǎng)址在代碼注釋里jquery-3.4.1.min.js，打開。

全選復(fù)制（ctrl+a），在本地文件夾新建一個(gè)js文件：jquery-3.4.1.min.js，將復(fù)制的內(nèi)容，黏貼進(jìn)入，保存即可。向上面的js文件和css文件一樣，作為本地js文件引入。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas帶坐標(biāo)雷達(dá)掃描特效</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作為單獨(dú)css文件，引入，否認(rèn)就是style和/style的標(biāo)簽內(nèi)-->
<!--采用下面格式：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彈出動態(tài)數(shù)據(jù)-->
  <p class="message">cs-xo</p>
</div>
<!--將radar.js作為單獨(dú)js文件，引入，否認(rèn)就是script和/script的標(biāo)簽內(nèi)-->
<script src="./radar.js"></script>
</body>
</html>

注意：外部引入和本地引入基本沒什么區(qū)別，如果css和js=JavaScript寫在html內(nèi)，可能有不同，上面注釋里有提到。

5.jquery-3.4.1.min.js代碼不寫了，可以自己去下載，免費(fèi)的，或者上面的有講解如何操作，此處略。

6.新建一個(gè)radar.js文件，代碼如下：

var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");
/*雷達(dá)界面顏色=草地綠色*/
var color_gold="124,252,0"
var ww,wh;
var center={x: 0,y: 0};
// 定義函數(shù)
function getWindowSize(){
  ww=$(window).outerWidth();
  wh=$(window).outerHeight();
  c.width=ww;
  c.height=wh;
  // 中心坐標(biāo)是窗口的一半
  center={x: ww/2,y: wh/2};
  ctx.restore();
  ctx.translate(center.x,center.y);
}
// 啟動函數(shù)
getWindowSize();
$(window).resize(getWindowSize);
// 10=敵機(jī)數(shù)量，隨機(jī)出現(xiàn)
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;
// 畫圓的函數(shù)，三角函數(shù)sin和cos畫圓法
function Point(r,deg){
  return {
    x: r*Math.cos(deg_to_pi*deg),
    y: r*Math.sin(deg_to_pi*deg),
  };
}
/*定義顏色函數(shù)*/
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();
  /*十字垂直水平坐標(biāo)線，0.1~1代表粗細(xì)*/ 
  ctx.strokeStyle="rgba(255,125,64,0.5)";
  // ctx.strokeStyle="255,125,64";// 默認(rèn)粗細(xì)值為1
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();
  // 雷達(dá)掃面綠色和半徑大小
  ctx.strokeStyle=Color(1);
  var r=300;
  var deg=time;
  var newpoint=Point(r,deg);
  var line_deg = (time/2) % 360;
  // 雷達(dá)動態(tài)轉(zhuǎn)動的掃描扇形的弧度為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);
    // 代表隨著雷達(dá)掃描扇形的移動，顏色逐漸變淡
    var opacity=1-(i/line_deg_len)-0.3;
    if (i==0) opacity=1;
    ctx.beginPath();
    // 雷達(dá)扇形綠色動態(tài)漸變淡色
    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){
    // 敵機(jī)出現(xiàn)的原點(diǎn)
    ctx.fillStyle=Color(obj.opacity);
    var obj_point=Point(obj.r,obj.deg);
    ctx.beginPath();
    ctx.arc(
      obj_point.x,obj_point.y,
      // 綠色敵機(jī)出現(xiàn)的小圓點(diǎn)4是半徑
      4,0,2*Math.PI
    );
    ctx.fill();
    ctx.strokeStyle= Color(obj.opacity);
    /*如果這樣直接設(shè)置，ctx.strokeStyle= '#FF4500，那么敵機(jī)就是一直出現(xiàn)在屏幕';*/
    var x_size=6;
    /* 雷達(dá)顯示敵機(jī)目標(biāo)大小設(shè)置*/
    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;
      // 顯示左上角偵查到的地理坐標(biāo)
      $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
    }
    obj.opacity*=0.99;
    // 顯示敵機(jī)出現(xiàn)的漣漪圈的顏色
    ctx.strokeStyle= Color(obj.opacity);
    /*目標(biāo)敵機(jī)顯示后的圓圈漣漪粗細(xì)設(shè)置*/
    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();
  });
  // 雷達(dá)虛點(diǎn)固定圓盤的顏色，半徑等設(shè)置
  ctx.strokeStyle='yellow';
  var split =120;
  var feature =15;   // 15個(gè)小格
  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();
  }
  /*畫圈函數(shù)定義,下面三個(gè)畫圓函數(shù)的定義*/
  function CondCircle(r,lineWidth,func_cond){
    ctx.lineWidth=lineWidth;
    /* 顏色定義*/
    /*注意顏色定義：有引號的和沒有引號的區(qū)別，就是前面有沒有顏色圖標(biāo)*/
    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();
  }
  // 雷達(dá)外圍的移動半弧形，300為半徑，2代表粗細(xì)
  CondCircle(300,2,function(deg){
    return ((deg+time/10)%180)<90;
  });
  // 雷達(dá)中間綠色的移動半弧形，160為半徑，2代表粗細(xì)
  CondCircle(160,2,function(deg){
    return ((deg+time/5)%180)<90;
  });
  // 雷達(dá)內(nèi)的小圓圈，綠色虛線圈，1代表粗細(xì)
  CondCircle(100,1,function(deg){
    // 如果這里沒有，那么顏色就是三條線函數(shù)里統(tǒng)一的顏色，也可以單獨(dú)設(shè)立
    ctx.strokeStyle='pink';
    return (deg%3)<1;
  });
  
}

7.新建一個(gè)style.css文件，代碼如下：

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*隱藏瀏覽器的條形伸縮*/
  overflow: hidden;
}
/*定義畫布*/
canvas {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
/*顯示警告信息位置設(shè)置*/
.info {
  position: absolute;
  left: 10px;
  top: 10px;
}
h1 {
  /*顯示警告信息文字顏色設(shè)置*/
  color:red;
  letter-spacing: 0.5px;
  margin: 0;
  font-size:smaller;
}
.message {
  /*顯示雷達(dá)預(yù)警敵機(jī)的動態(tài)位置的文字顏色設(shè)置*/
  margin: 0;
  color:#00FFFF;
  font-size: x-large;
}

8.通過簡單的例子，熟悉html、css和js的關(guān)系和布局等基本知識，熟練掌握基本操作。

在線咨詢

上一篇：css3美化網(wǎng)頁-第五章
下一篇：HTML常用代碼有哪些？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商