整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
所周知，函數(shù)節(jié)流（throttle）是 JS 中一個(gè)非常常見(jiàn)的優(yōu)化手段，可以有效的避免函數(shù)過(guò)于頻繁的執(zhí)行。
舉個(gè)例子：一個(gè)保存按鈕，為了避免重復(fù)提交或者服務(wù)器考慮，往往需要對(duì)點(diǎn)擊行為做一定的限制，比如只允許每300ms提交一次，這時(shí)候我想大部分同學(xué)都會(huì)到網(wǎng)上直接拷貝一段throttle函數(shù)，或者直接引用lodash工具庫(kù)
btn.addEventListener('click', _.throttle(save, 300))其實(shí)除了 JS 方式， CSS 也可以非常輕易的實(shí)現(xiàn)這樣一個(gè)功能，無(wú)需任何框架庫(kù)，一起看看吧
CSS 實(shí)現(xiàn)和 JS 的思維不同，需要從另一個(gè)角度去看待這個(gè)問(wèn)題。
比如這里的需要對(duì)點(diǎn)擊事件進(jìn)行限制，也就是禁用點(diǎn)擊事件，想想有什么方式可以禁用事件，沒(méi)錯(cuò)，就是pointer-events;
然后是時(shí)間的限制，每次點(diǎn)擊后需要自動(dòng)禁用300ms，時(shí)間過(guò)后重新恢復(fù)，那么，有什么特性和時(shí)間以及狀態(tài)恢復(fù)有關(guān)呢？沒(méi)錯(cuò)，就是animation;
除此之外，還需要有觸發(fā)時(shí)機(jī)，這里是點(diǎn)擊行為，所以必然和偽類(lèi):active有關(guān)聯(lián)。
因此，綜合分析，實(shí)現(xiàn)這樣一個(gè)功能需要用到pointer-events、animation以及:active，那么如何將這些思路串聯(lián)起來(lái)呢？
思考3秒...
你想到了嗎？
其實(shí)這種場(chǎng)景可以理解成是對(duì) CSS 動(dòng)畫(huà)的控制，比如有一個(gè)動(dòng)畫(huà)控制按鈕從禁用->可點(diǎn)擊的變化，每次點(diǎn)擊時(shí)讓這個(gè)動(dòng)畫(huà)重新執(zhí)行一遍，在執(zhí)行的過(guò)程中，一直處于禁用狀態(tài)，是不是就達(dá)到了“節(jié)流”的效果了？
接下來(lái)看看具體實(shí)現(xiàn)
假設(shè)有一個(gè)按鈕，綁定了一個(gè)點(diǎn)擊事件
<button onclick="console.log('保存')">保存</button>這時(shí)的按鈕連續(xù)點(diǎn)擊就會(huì)不斷地觸發(fā)，效果如下
下面定義一個(gè)關(guān)于pointer-events的動(dòng)畫(huà)，就叫做 throttle 吧
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}很簡(jiǎn)單吧，就是從禁用到可點(diǎn)擊的變化。
接下來(lái)，將這個(gè)動(dòng)畫(huà)綁定在按鈕上，這里為了方便測(cè)試，將動(dòng)畫(huà)設(shè)置成了2s
button{
animation: throttle 2s step-end forwards;
}注意，這里動(dòng)畫(huà)的緩動(dòng)函數(shù)設(shè)置成了階梯曲線(xiàn)，step-end，它可以很方便的控制pointer-events的變化時(shí)間點(diǎn)。
如下示意，pointer-events在0~2秒內(nèi)的值都是none，一旦到達(dá)2秒，就立刻變成了all，由于是forwards，會(huì)一直保持all的狀態(tài)
最后，在點(diǎn)擊時(shí)重新執(zhí)行一遍動(dòng)畫(huà)，只需要在按下時(shí)設(shè)置動(dòng)畫(huà)為none就行了
這個(gè)技巧之前在這篇文章中有更詳細(xì)的介紹： CSS 實(shí)現(xiàn)按鈕點(diǎn)擊動(dòng)效的套路
實(shí)現(xiàn)如下
button:active{
animation: none;
}為了演示方便，我們暫時(shí)把顏色變化也加在動(dòng)畫(huà)里
@keyframes throttle {
from {
color: red;
pointer-events: none;
}
to {
color: green;
pointer-events: all;
}
}現(xiàn)在如果文字是red，表示是禁用態(tài)，只有是green，才表示可以被點(diǎn)擊，非常清晰明了，如下
下面是最終點(diǎn)擊對(duì)比效果，很好地限制了點(diǎn)擊頻率
完整代碼如下，就這么幾行，如果需要改限制時(shí)間，直接改動(dòng)畫(huà)時(shí)間就行了
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}借用這種思路，也可以很輕松的實(shí)現(xiàn)節(jié)流的效果。而且為了更好的體驗(yàn)，可以用上真正的按鈕禁用
btn.disabled = true具體思路是這樣的，通過(guò):active去觸發(fā)transition變化，然后通過(guò)監(jiān)聽(tīng)transition回調(diào)去動(dòng)態(tài)設(shè)置按鈕的禁用狀態(tài)，實(shí)現(xiàn)如下
定義一個(gè)無(wú)關(guān)緊要的過(guò)渡屬性，比如opacity
button{
opacity: .99;
transition: opacity 2s;
}
button:not(:disabled):active{
opacity: 1;
transition: 0s;
}然后監(jiān)聽(tīng)transition的起始回調(diào)
// 過(guò)渡開(kāi)始
document.addEventListener('transitionstart', function(ev){
ev.target.disabled = true
})
// 過(guò)渡結(jié)束
document.addEventListener('transitionend', function(ev){
ev.target.disabled = false
})這樣做的最大好處是，這部分禁用的邏輯是完全和業(yè)務(wù)邏輯是解耦的，可以在任意時(shí)候，任意場(chǎng)合下無(wú)縫接入，也不受框架和環(huán)境影響，效果如下
以上通過(guò) CSS 的思路實(shí)現(xiàn)了類(lèi)似“節(jié)流”的功能，相比 JS 實(shí)現(xiàn)而言，實(shí)現(xiàn)更精簡(jiǎn)、使用更簡(jiǎn)單，沒(méi)有框架限制，下面一起總結(jié)一下實(shí)現(xiàn)要點(diǎn)：
原文鏈接：https://juejin.cn/post/7165828047520661534
要：在本文中，將重點(diǎn)關(guān)注網(wǎng)頁(yè)的初始渲染，即它從解析 HTML 開(kāi)始。 我將探索可能導(dǎo)致高渲染時(shí)間的問(wèn)題，以及如何解決它們。
本文分享自華為云社區(qū)《頁(yè)面首屏渲染性能指南-云社區(qū)-華為云》，作者：Ocean2022。
我們知道渲染頁(yè)面是一個(gè)將服務(wù)器的響應(yīng)內(nèi)容翻譯成圖片的過(guò)程。但是，如果你頁(yè)面的渲染性能比較糟糕的話(huà)，可能會(huì)帶來(lái)相對(duì)較高的跳出率。
在本文中，我將重點(diǎn)關(guān)注網(wǎng)頁(yè)的初始渲染，即它從解析 HTML 開(kāi)始。 我將探索可能導(dǎo)致高渲染時(shí)間的問(wèn)題，以及如何解決它們。
關(guān)鍵渲染路徑 (CRP) 是瀏覽器將代碼轉(zhuǎn)換為屏幕上可顯示像素的過(guò)程。 它有幾個(gè)階段，其中一些可以并行執(zhí)行以節(jié)省時(shí)間，但有些部分必須依次完成。 如下圖所示：
首先，一旦瀏覽器得到響應(yīng)，它就會(huì)開(kāi)始解析它。 當(dāng)它遇到依賴(lài)項(xiàng)時(shí)，它會(huì)嘗試下載它。 如果它是一個(gè)樣式表文件，瀏覽器必須在渲染頁(yè)面之前完全解析它，這就是為什么 CSS 會(huì)阻塞渲染的原因。
如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運(yùn)行。 只有在那之后它才能繼續(xù)解析，因?yàn)?JavaScript 程序可以改變網(wǎng)頁(yè)的內(nèi)容（尤其是 HTML）。 這就是為什么 JS 會(huì)阻塞解析的原因。
完成所有解析后，瀏覽器將構(gòu)建文檔對(duì)象模型 (DOM) 和級(jí)聯(lián)樣式表對(duì)象模型 (CSSOM)。 將它們組合在一起得到渲染樹(shù)。 頁(yè)面的不顯示部分不會(huì)進(jìn)入渲染樹(shù)，因?yàn)樗话L制頁(yè)面所需的數(shù)據(jù)。
倒數(shù)第二步是將渲染樹(shù)進(jìn)行布局， 這個(gè)階段也稱(chēng)為回流：就是計(jì)算每個(gè)渲染樹(shù)節(jié)點(diǎn)的每個(gè)位置及其大小的地方。
最后一步是繪制。 它會(huì)根據(jù)瀏覽器在前一階段計(jì)算得到的數(shù)據(jù)對(duì)像素進(jìn)行著色。
因此，根據(jù)這一過(guò)程，我們?cè)趦?yōu)化性能方面，得出了一些結(jié)論。如果你要提升頁(yè)面初始化渲染的性能，你需要：
同時(shí)，我們會(huì)根據(jù)下面 3 個(gè)指標(biāo)來(lái)衡量?jī)?yōu)化的效率：
除了渲染時(shí)間之外，還有其他一些因素也需要考慮。例如，你的頁(yè)面使用了多少阻塞資源以及下載它們需要多長(zhǎng)時(shí)間。
鑒于我們?cè)谏厦娴贸龅慕Y(jié)論，我們得出網(wǎng)站性能優(yōu)化有三種主要策略：
首先，移除所有未使用的部分，例如 JavaScript 中無(wú)法訪(fǎng)問(wèn)的函數(shù)、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠(yuǎn)隱藏的 HTML 標(biāo)簽。 其次，刪除所有重復(fù)項(xiàng)。
然后，我建議建立一個(gè)自動(dòng)壓縮過(guò)程。 例如，它應(yīng)該從你的后端服務(wù)中刪除所有注釋?zhuān)ǖ皇窃创a）以及每個(gè)不包含附加信息的字符（例如 JS 中的空白字符）。
完成后，我們剩下的可以是文本字符串。 這意味著我們可以安全地應(yīng)用諸如 GZIP（大多數(shù)瀏覽器都理解）之類(lèi)的壓縮算法。
最后，還有緩存。 瀏覽器第一次呈現(xiàn)頁(yè)面時(shí)它不會(huì)有幫助，但它會(huì)在以后的訪(fǎng)問(wèn)中節(jié)省很多。 但是，記住兩點(diǎn)至關(guān)重要：
當(dāng)然，應(yīng)該為每個(gè)資源定義緩存策略。 有些可能很少改變或根本不會(huì)改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數(shù)據(jù)）。
“關(guān)鍵”僅指網(wǎng)頁(yè)正確呈現(xiàn)所需的資源。 因此，我們可以直接跳過(guò)所有流程中沒(méi)有涉及的樣式以及腳本文件。
為了告訴瀏覽器不需要特定的 CSS 文件，我們應(yīng)該為所有引用樣式表的鏈接設(shè)置媒體屬性。 使用這種方法，瀏覽器將只根據(jù)需要處理與當(dāng)前媒體（設(shè)備類(lèi)型、屏幕尺寸）匹配的資源，同時(shí)降低所有其他樣式表的優(yōu)先級(jí)。 例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁(yè)面的樣式標(biāo)記，則這些樣式不會(huì)在不打印媒體時(shí)干擾你的關(guān)鍵渲染路徑。
為了進(jìn)一步改進(jìn)該過(guò)程，你還可以將一些樣式內(nèi)聯(lián)，這可以為我們節(jié)省了至少一次到服務(wù)器的往返行程。
如上所述，腳本會(huì)阻塞解析，因?yàn)樗鼈兛梢愿淖?DOM 和 CSSOM。 為了避免這一點(diǎn)，所有腳本標(biāo)簽都必須用屬性標(biāo)記——異步或延遲。
標(biāo)有 async 的腳本不會(huì)阻塞 DOM 構(gòu)建或 CSSOM，因?yàn)樗鼈兛梢栽?CSSOM 構(gòu)建之前執(zhí)行。 但請(qǐng)記住，內(nèi)聯(lián)腳本無(wú)論如何都會(huì)阻止 CSSOM，除非你將它們放在 CSS 之上。
相比之下，標(biāo)有 defer 的腳本將在頁(yè)面加載結(jié)束時(shí)進(jìn)行執(zhí)行。
換句話(huà)說(shuō)，使用 defer，腳本直到頁(yè)面加載事件被觸發(fā)后才會(huì)執(zhí)行，而 async 讓腳本在文檔被解析時(shí)就會(huì)在后臺(tái)運(yùn)行。
最后，應(yīng)將 CRP 長(zhǎng)度縮短到可能的最小值。
作為樣式標(biāo)簽屬性的媒體查詢(xún)將減少必須下載的資源總數(shù)。 script 標(biāo)簽屬性 defer 和 async 將防止相應(yīng)的腳本阻塞解析。
使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數(shù)據(jù)的大小（從而也減少數(shù)據(jù)傳輸時(shí)間）。
內(nèi)聯(lián)一些樣式和腳本也可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。
按照最新的最佳性能實(shí)踐理念，一個(gè)網(wǎng)站應(yīng)該做的最快的第一件事就是展示 ATF 內(nèi)容。 ATF 代表首屏。 這是立即可見(jiàn)的區(qū)域，無(wú)需滾動(dòng)。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關(guān)的所有內(nèi)容，而其他所有內(nèi)容都停止（既不解析也不渲染）。
總而言之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的各個(gè)方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但是所有這些都可以逐步完成。 作為 Web 開(kāi)發(fā)人員，你可以將本文作為參考，并始終記住在實(shí)驗(yàn)之前和之后測(cè)量性能。
瀏覽器開(kāi)發(fā)人員盡最大努力優(yōu)化你訪(fǎng)問(wèn)的每個(gè)頁(yè)面的網(wǎng)站性能，這就是瀏覽器通常實(shí)現(xiàn)所謂的“預(yù)加載器”的原因。 這部分程序會(huì)在你以 HTML 格式請(qǐng)求的資源之前進(jìn)行掃描，以便一次發(fā)出多個(gè)請(qǐng)求并讓它們并行運(yùn)行。 這就是為什么在 HTML（逐行）以及腳本標(biāo)簽中保持樣式標(biāo)簽彼此靠近的原因。
此外，嘗試批量更新 HTML 以避免多個(gè)布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發(fā)，而且在設(shè)備方向更改和窗口大小調(diào)整時(shí)也會(huì)觸發(fā)。
點(diǎn)擊下方，第一時(shí)間了解華為云新鮮技術(shù)~
華為云博客_大數(shù)據(jù)博客_AI博客_云計(jì)算博客_開(kāi)發(fā)者中心-華為云
果您想避免重復(fù)的內(nèi)容問(wèn)題，使用規(guī)范鏈接標(biāo)簽會(huì)有所幫助。這種技術(shù)性SEO最佳實(shí)踐相當(dāng)簡(jiǎn)單，在本文中，我將討論為什么以及何時(shí)應(yīng)該使用它，以及如何開(kāi)始的技巧。
規(guī)范 URL 是一組重復(fù)或近乎重復(fù)的網(wǎng)頁(yè)的最佳代表。
規(guī)范鏈接元素通過(guò)向 Google 等搜索引擎發(fā)出信號(hào)，從一組重復(fù)或接近重復(fù)的頁(yè)面中選出哪個(gè)網(wǎng)頁(yè)是原始網(wǎng)頁(yè)或最佳網(wǎng)頁(yè)，從而幫助解決重復(fù)內(nèi)容問(wèn)題。
Google 將規(guī)范網(wǎng)址定義為：
“根據(jù)谷歌的說(shuō)法，規(guī)范 URL 是一組重復(fù)頁(yè)面中最具代表性的頁(yè)面的 URL。例如，如果您在同一網(wǎng)頁(yè)上有兩個(gè)網(wǎng)址（例如：example.com？dress=1234 和 example.com/dresses/1234），Google 會(huì)選擇其中一個(gè)網(wǎng)址作為規(guī)范網(wǎng)址。同樣，如果您有多個(gè)幾乎相同的網(wǎng)頁(yè)，Google 可以將它們組合在一起（例如，僅通過(guò)內(nèi)容排序或過(guò)濾（例如按價(jià)格或商品顏色）而有所不同的網(wǎng)頁(yè)）。（您可能偶爾會(huì)聽(tīng)到“規(guī)范頁(yè)面”一詞，但這在技術(shù)上是不正確的，因?yàn)樗鼘?shí)際上是規(guī)范的特定 URL。
規(guī)范可以與副本（例如 en.example.com 和 fr.example.com）位于不同的域中。
希望規(guī)范 URL 是獲得 SEO 好處的網(wǎng)頁(yè)。雖然您可以指定規(guī)范網(wǎng)址，但 Google 表示它們都不是必需的：
“雖然我們鼓勵(lì)您使用這些方法，但它們都不是必需的;您的網(wǎng)站可能會(huì)在不指定規(guī)范首選項(xiàng)的情況下做得很好。這是因?yàn)椋绻恢付ㄒ?guī)范網(wǎng)址，Google 會(huì)確定哪個(gè)版本的網(wǎng)址客觀(guān)上最適合在 Google 搜索中向用戶(hù)展示。
在視頻中，谷歌的約翰·穆勒（John Mueller）指出，谷歌通過(guò)遵循兩個(gè)一般準(zhǔn)則來(lái)選擇規(guī)范URL：
如有疑問(wèn)，您可以使用 Google Search Console 中的網(wǎng)址檢查工具來(lái)了解 Google 認(rèn)為哪個(gè)網(wǎng)頁(yè)是規(guī)范網(wǎng)頁(yè)。
規(guī)范網(wǎng)址用于解決重復(fù)內(nèi)容問(wèn)題。這些重復(fù)的內(nèi)容問(wèn)題可能存在于您的網(wǎng)站上，也可能與其他網(wǎng)站共享。
重復(fù)內(nèi)容是 SEO 的禁忌，您可以在以下位置了解更多信息： 重復(fù)內(nèi)容對(duì)搜索引擎排名有害嗎？
使用規(guī)范鏈接元素的一些原因：
過(guò)去，如果您要跨第三方發(fā)布商聯(lián)合內(nèi)容，則經(jīng)常使用規(guī)范鏈接元素。
今天，谷歌說(shuō)：
“對(duì)于那些希望避免聯(lián)合合作伙伴重復(fù)的人，不建議使用規(guī)范鏈接元素，因?yàn)轫?yè)面通常非常不同。
最有效的解決方案是讓合作伙伴阻止對(duì)您的內(nèi)容進(jìn)行索引。
有關(guān)更多信息，請(qǐng)參閱避免 Google 新聞中的文章重復(fù)，其中還提供了有關(guān)阻止 Google 搜索中的聯(lián)合內(nèi)容的建議。
谷歌在其幫助文件中給出了規(guī)范化時(shí)該做和不該做的列表：
請(qǐng)勿將 robots.txt 文件用于規(guī)范化目的。請(qǐng)勿使用網(wǎng)址移除工具進(jìn)行規(guī)范化。它會(huì)在搜索中隱藏 URL 的所有版本。請(qǐng)勿使用不同的規(guī)范化技術(shù)為同一網(wǎng)頁(yè)指定不同的網(wǎng)址作為規(guī)范網(wǎng)址（例如，不要在站點(diǎn)地圖中指定一個(gè)網(wǎng)址，而是使用 rel=“canonical” 為同一網(wǎng)頁(yè)指定不同的網(wǎng)址）。我們不建議使用 noindex 來(lái)阻止在單個(gè)網(wǎng)站中選擇規(guī)范網(wǎng)頁(yè)，因?yàn)檫@會(huì)完全阻止該網(wǎng)頁(yè)進(jìn)入 Google 搜索。rel=“canonical” 鏈接注釋是首選解決方案。如果您使用的是 hreflang 元素，請(qǐng)確保指定相同語(yǔ)言的規(guī)范頁(yè)面，或者如果不存在同一語(yǔ)言的規(guī)范頁(yè)面，則指定最佳替代語(yǔ)言。在網(wǎng)站內(nèi)關(guān)聯(lián)時(shí)，請(qǐng)鏈接到規(guī)范網(wǎng)址，而不是重復(fù)的網(wǎng)址。始終如一地鏈接到您認(rèn)為是規(guī)范的網(wǎng)址有助于 Google 了解您的偏好。使用 hreflang 標(biāo)簽時(shí)指定規(guī)范頁(yè)面。指定相同語(yǔ)言的規(guī)范頁(yè)面，如果同一語(yǔ)言不存在規(guī)范，則指定最佳替代語(yǔ)言。在網(wǎng)站內(nèi)關(guān)聯(lián)時(shí)，請(qǐng)鏈接到規(guī)范網(wǎng)址，而不是重復(fù)的網(wǎng)址。始終如一地鏈接到您認(rèn)為是規(guī)范的網(wǎng)址有助于 Google 了解您的偏好。
另請(qǐng)注意，“Google 更喜歡 HTTPS 頁(yè)面而不是等效的 HTTP 頁(yè)面作為規(guī)范頁(yè)面，除非存在問(wèn)題或信號(hào)沖突。
在該視頻中，它們涵蓋了：
您可以通過(guò)兩種方式使用 rel=“canonical” 指定規(guī)范網(wǎng)址：
谷歌在這里給出了每種執(zhí)行類(lèi)型的優(yōu)缺點(diǎn)列表。
盡管 Google 給出了多種建議，但他們解釋說(shuō)您應(yīng)該選擇一種類(lèi)型的規(guī)范化方法并堅(jiān)持下去。
與使用單一類(lèi)型的規(guī)范化方法相比，使用多種類(lèi)型的規(guī)范化方法更容易出錯(cuò)。
要告訴搜索引擎一個(gè)頁(yè)面何時(shí)是另一個(gè)頁(yè)面的重復(fù)，您可以在所有重復(fù)頁(yè)面上使用 rel=“canonical” 鏈接標(biāo)簽，指示哪個(gè)頁(yè)面是規(guī)范 URL。
讓我們看一個(gè)例子。要指定指向虛構(gòu) URL 的規(guī)范鏈接，請(qǐng)執(zhí)行以下操作： http://www.example.com/product.php?item=swedish-fish，您需要?jiǎng)?chuàng)建一個(gè) <link> 元素，如下所示：
<link rel=“canonical” href=“http://www.example.com/product.php?item=swedish-fish”/>
然后，您可以將此鏈接復(fù)制到該頁(yè)面的所有非規(guī)范版本（例如 http://www.example.com/product.php?item=swedish-fish&sort=price）的<頭>部分。
如果同時(shí)在 http 和 https 上發(fā)布內(nèi)容，例如以下示例：
http://www.example.com/product.php?item=swedish-fish 和 https://www.example.com/product.php?item=swedish-fish，您還需要指定頁(yè)面的規(guī)范版本。
創(chuàng)建 <link> 元素，如下所示：
<link rel=“canonical” href=“http://www.example.com/product.php?item=swedish-fish”/>
將此鏈接添加到 https://www.example.com/product.php?item=swedish-fish 的 <head> 部分。
將 rel=“canonical” 添加到頁(yè)面的頭部部分對(duì)于 HTML 內(nèi)容很有用，但不能用于 PDF 和其他被 Google 編入索引的文件類(lèi)型。
在這些情況下，您可以通過(guò)使用鏈接 rel=“canonical” HTTP 標(biāo)頭進(jìn)行響應(yīng)來(lái)指示規(guī)范 URL，如下所示（請(qǐng)注意，要使用此選項(xiàng)，您需要能夠配置服務(wù)器）：
鏈接： <http://www.example.com/downloads/white-paper.pdf>;rel=“規(guī)范”
以下是我們收到的一些關(guān)于規(guī)范化的常見(jiàn)問(wèn)題及其答案：
rel=“canonical” 屬性是提示或建議，而不是指令。
rel=“canonical” 允許網(wǎng)站所有者建議 Google 應(yīng)將其視為規(guī)范的網(wǎng)頁(yè)版本。但是，rel=“canonical” 是一個(gè)強(qiáng)烈的信號(hào)，表明指定的 URL 應(yīng)該成為規(guī)范的。
Google 在確定哪些網(wǎng)址集具有相同的內(nèi)容時(shí)，以及在計(jì)算要在搜索結(jié)果中顯示的這些網(wǎng)頁(yè)中最相關(guān)的網(wǎng)頁(yè)時(shí)，會(huì)考慮這一點(diǎn)和其他信號(hào)。
rel=“canonical” 屬性只能用于指定具有相同內(nèi)容的頁(yè)面的首選版本（盡管排序順序等細(xì)微差異是可以的）。
例如，如果一個(gè)網(wǎng)站有一組相同型號(hào)的舞鞋頁(yè)面，每個(gè)頁(yè)面僅因圖片中鞋子的顏色而異，那么將突出顯示最流行顏色的頁(yè)面設(shè)置為規(guī)范版本可能是有意義的，這樣 Google 更有可能在搜索結(jié)果中顯示該頁(yè)面。
是的，在某種程度上，但為了確保最佳的規(guī)范化，我們的建議是更新鏈接以指向單個(gè)規(guī)范頁(yè)面。
301 重定向和規(guī)范標(biāo)簽都用于告訴搜索引擎一個(gè)網(wǎng)頁(yè)的多個(gè)版本。
當(dāng)頁(yè)面永久移動(dòng)時(shí)，將使用 301 重定向，而當(dāng)頁(yè)面有多個(gè)版本時(shí)，則使用規(guī)范標(biāo)簽。
以下是 301 重定向和規(guī)范代碼之間的一些區(qū)別：
谷歌在這里給出了一些你何時(shí)使用301重定向的例子。
Google 建議使用帶有 rel=“canonical” 鏈接元素的絕對(duì) URL，而不是相對(duì) URL。
盡管 Google 支持相對(duì)路徑，但從長(zhǎng)遠(yuǎn)來(lái)看，它們可能會(huì)導(dǎo)致問(wèn)題（例如，如果您無(wú)意中允許抓取您的測(cè)試網(wǎng)站），因此不建議這樣做）。
（詳細(xì)了解相對(duì) URL 與絕對(duì) URL。
不可以，規(guī)范鏈接元素僅在頁(yè)面重復(fù)或接近重復(fù)時(shí)才有效。
如果網(wǎng)頁(yè)不同，Google 將忽略規(guī)范鏈接元素，并將網(wǎng)址視為兩個(gè)不同的網(wǎng)頁(yè)
總而言之，如果您認(rèn)為可能會(huì)遇到重復(fù)的內(nèi)容問(wèn)題，那么值得花時(shí)間實(shí)施規(guī)范 URL。你的SEO程序會(huì)感謝你。
規(guī)范 URL 在網(wǎng)站優(yōu)化中起著至關(guān)重要的作用，使您能夠解決重復(fù)內(nèi)容問(wèn)題并增強(qiáng)您的 SEO 工作。了解它們的目的并正確實(shí)施它們可以對(duì)您的搜索引擎排名產(chǎn)生重大影響。
因此，讓我們討論有效使用它們的最佳實(shí)踐。
定義規(guī)范網(wǎng)址
規(guī)范網(wǎng)址是 HTML 標(biāo)記，當(dāng)有多個(gè)版本具有相似內(nèi)容時(shí)，它會(huì)通知搜索引擎網(wǎng)頁(yè)的首選版本。通過(guò)指定規(guī)范 URL，您可以引導(dǎo)搜索引擎朝著正確的方向發(fā)展，確保它們將所需的 SEO 值歸因于所選 URL。
為什么規(guī)范網(wǎng)址很重要？
當(dāng)搜索引擎遇到重復(fù)內(nèi)容時(shí)，他們可能會(huì)對(duì)在搜索結(jié)果中排名哪個(gè)版本感到困惑。因此，您網(wǎng)站的 SEO 可能會(huì)受到影響，流量可能會(huì)在不同的頁(yè)面之間分配。規(guī)范 URL 通過(guò)整合權(quán)威性并確保只考慮一個(gè)版本進(jìn)行排名來(lái)解決這個(gè)問(wèn)題。
正確實(shí)現(xiàn)規(guī)范網(wǎng)址
要有效地使用規(guī)范網(wǎng)址，請(qǐng)按照以下步驟操作：
規(guī)范代碼的最佳做法
要充分利用規(guī)范網(wǎng)址，請(qǐng)考慮以下提示：
買(mǎi)方意向搜索字詞
在優(yōu)化您的內(nèi)容時(shí)，請(qǐng)記住與規(guī)范網(wǎng)址相關(guān)的買(mǎi)方意向搜索字詞。一些示例包括“規(guī)范網(wǎng)址的最佳做法”、“規(guī)范標(biāo)簽實(shí)現(xiàn)”和“如何使用規(guī)范網(wǎng)址防止重復(fù)內(nèi)容”。
規(guī)范 URL 對(duì) SEO
的好處 通過(guò)正確使用規(guī)范 URL，您可以將重復(fù)內(nèi)容頁(yè)面的 SEO 值合并到一個(gè)首選版本中。這有助于搜索引擎更好地了解您的網(wǎng)站結(jié)構(gòu)，并使您的排名集中在所需的 URL 上。
定期監(jiān)控重復(fù)內(nèi)容
通過(guò)使用 SEO 工具密切關(guān)注您網(wǎng)站的重復(fù)內(nèi)容，這些工具會(huì)在檢測(cè)到新實(shí)例時(shí)發(fā)送警報(bào)。這種積極主動(dòng)的方法可確保您保持對(duì)網(wǎng)站 SEO 性能的控制。
規(guī)范 URL 是防止重復(fù)內(nèi)容問(wèn)題和增強(qiáng) SEO 策略的重要工具。通過(guò)正確實(shí)施規(guī)范標(biāo)簽，您可以引導(dǎo)搜索引擎走向首選版本并鞏固 SEO 價(jià)值。保持警惕，定期監(jiān)控重復(fù)內(nèi)容并優(yōu)化您的網(wǎng)站以提高搜索引擎排名。
分步程序：
實(shí)施本文中概述的步驟，以防止重復(fù)的內(nèi)容問(wèn)題，優(yōu)化您的網(wǎng)站并提高搜索引擎排名。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
