作為一個資深的 SEOER 以及使用者體驗的極致追求者，總是會在實際的操作和使用中找到可以提升或簡化的地方，昨天在分享《WordPress 自動將當前文章標籤添加為關鍵詞內鏈》文章重新定義文章內鏈的時候就在思考，內鏈可以做到自動添加，那麼外鏈呢？
很多時候或者大多數人並不原因在文章中添加外鏈，所有很多時候即使是需要分享其它的網站也只會用文本鏈接，簡而言之就是看上去是個鏈接，但是實際上並不能直接點擊，需要複製到瀏覽器地址欄去訪問，原因就是懂點網站優化的朋友就知道是為了防止導出權重，所有這一點子凡可以理解，並且自己很多時候在編輯文章的時候也不願意給其它 URL 做超鏈接。
雖然從站長和編輯的角度來說我很理解，但作為使用者來說，就非常的不方便了。而今天子凡就要來解決這個問題，既然是解決問題，那麼就需要知其所以然。為了網站本身不導出外鏈，所有編輯使用文本 URL，這樣搜索引擎抓取的時候這個文本 URL 並不會被搜索引擎去訪問，那麼解決使用者無法直接點擊訪問的辦法就是利用 js 或者 jQuery 的方式自動給這些文本 URL 添加上超鏈接，因為搜索引擎本身不會去執行 js，所有只有當使用者訪問時用 js 渲染功能，這樣搜索引擎獲取的文章內容就是沒有超鏈接的文本 URL，而使用者訪問時則是可以點擊的超鏈接 URL。
//jQuery 自動給文本 URL 添加可點擊超鏈接鏈接
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%]*)*/g; //適配多樣化的 URL 正則表達式
$(".your-class-name *").not("a").addBack().contents().each(function() { //.your-class-name 為文章包裹的元素名稱
if(this.nodeType === 3 && this.textContent.trim().length > 0) { //非空文本節點
if ($(this).parents('a').length == 0) {//檢查當前文本節點是否在鏈接元素內部
var newText = this.textContent.replace(urlRegex, function(match) {
var url = match.startsWith('http') ? match : 'http://' + match; //判斷 URL 是否包含 http 協議前綴
return '<a href="' + url + '" target="_blank" rel="nofollow noopener">' + match + '</a>'; //將文本 URL 轉換為超鏈接
});
$(this).replaceWith(newText);
}
}
});
這段代碼的核心是一個正則表達式 urlRegex 和一個 jQuery 語句，它們分別用於匹配 URL 和遍歷 DOM 元素。
正則表達式 “/(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%])/g” 用於匹配文本中的多樣化 URL，子凡我可是測試了很多不用樣式的 URL，確保能夠竟可能的適配更多的 URL。這個表達式可以匹配以 http:// 或 https:// 開頭的 URL，也可以匹配沒有這些前綴的 URL。對於沒有 http:// 或 https:// 前綴的 URL，我們將自動添加 http:// 前綴。
接下來，我們使用 jQuery 的 $(“.your-class-name *”).not (“a”).addBack ().contents ().each () 語句來遍歷指定類名 “your-class-name” 下的所有子節點。我們檢查每個節點是否是文本節點，即 nodeType === 3，並且排除了空的文本節點，.not (“a”) 也排除了子節點已經是超鏈接的內容。如果滿足這些條件，我們就用 replace 方法替換文本中的 URL，並用 replaceWith 方法更新原始的文本節點。
在 replace 方法中，我們為匹配的 URL 生成一個新的超鏈接標籤。如果 URL 沒有 http:// 或 https:// 前綴，我們會自動添加 http:// 前綴。生成的超鏈接標籤使用 target=”_blank” 屬性，以便在新的瀏覽器標簽頁中打開鏈接，當然為了更好的保證即使是搜索引擎渲染了頁面，也能夠自動的禁止搜索引擎爬取，所有子凡也給鏈接的 rel 屬性設置了 nofollow。
除非註明，否則均為淚雪博客原創文章，禁止任何形式轉載