歌站長(zhǎng)工具頻道在 Youtube 上更新了最近一個(gè)視頻，分享了3個(gè)能夠改善谷歌SEO的內(nèi)鏈技巧。這一期的視頻由谷歌的 Martin Splitt 制作，基于用戶體驗(yàn)和SEO提供了一些內(nèi)鏈技巧。

內(nèi)部鏈接的3個(gè)技巧

Martin Splitt 強(qiáng)調(diào)了內(nèi)部鏈接的3個(gè)要點(diǎn)：

1. 用戶導(dǎo)航：內(nèi)部鏈接引導(dǎo)用戶瀏覽網(wǎng)站，幫助用戶找到相關(guān)內(nèi)容并了解網(wǎng)站的結(jié)構(gòu)。
2. 搜索引擎抓取：Google 的蜘蛛使用內(nèi)部鏈接來發(fā)現(xiàn)新頁(yè)面并了解網(wǎng)站上不同頁(yè)面之間的關(guān)系。
3. HTML：正確使用HTML 元素，帶有 href 屬性的 < a> 標(biāo)簽，對(duì)于創(chuàng)建有效鏈接來說很重要。

Google 的一項(xiàng)主要建議是在鏈接中使用描述性、有意義的錨文本。

Splitt 在視頻里面展示了錨文本的作用以及重要性，以下是他在視頻當(dāng)中用的例子：

Splitt表示：圖片右側(cè)的這些毫無意義的錨文本，就沒有太多的意義，并沒有好的用戶體驗(yàn)，沒有直觀的讓用戶知道通過這個(gè)鏈接可以去哪里，背后的內(nèi)容是什么，以及內(nèi)容之間的關(guān)系。

我的看法：這種錨文本被我們站長(zhǎng)成為 “General” 錨文本，它不具備任何含義，當(dāng)然我們很少或者說根本不會(huì)在自己的網(wǎng)站使用這些錨文本，但是當(dāng)我們進(jìn)行大量外鏈發(fā)布的時(shí)候會(huì)使用一部分這種 “General” 的錨文本來增加錨文本的多樣性，從而避免谷歌的懲罰。

使用合理數(shù)量的鏈接

Splitt 還警告不要過度使用內(nèi)部鏈接。

他建議在給相關(guān)內(nèi)容添加鏈接的時(shí)候要運(yùn)用批判性思維，判斷要不要加鏈接，需要讓用戶安心讀內(nèi)容，而不是添加非常多的鏈接來過度分散用戶的注意力。

這種從用戶體驗(yàn)的角度出發(fā)的思維，我個(gè)人覺得沒有太大問題，在用戶閱讀我們辛辛苦苦撰寫的內(nèi)容的時(shí)候，盡量不要添加很多錨文本，如果說你寫這篇內(nèi)容相關(guān)的鏈接確實(shí)特別多，我建議你可以修改元素的css樣式，這樣的內(nèi)部鏈接可以引導(dǎo)搜索引擎看到與這篇內(nèi)容相關(guān)的內(nèi)容，但是又不影響用戶的閱讀體驗(yàn)。

創(chuàng)建鏈接的注意事項(xiàng)

Splitt 不鼓勵(lì)使用非標(biāo)準(zhǔn)元素（例如 spans、div 或 buttons）來創(chuàng)建鏈接，并表示如果某個(gè)元素的行為類似于鏈接，這個(gè)其實(shí)不用過度擔(dān)心，我們使用的CMS里默認(rèn)的鏈接不會(huì)出現(xiàn)這種非標(biāo)準(zhǔn)元素鏈接，有些不熟悉HTML的站長(zhǎng)可能不太理解，可以看看以下2個(gè)例子：

示例1：

<span onclick="window.location.href='https://loriseo.com';">訪問 Lori 的網(wǎng)站</span>

示例2：

<a href="https://loriseo.com">訪問 Lori 的網(wǎng)站</a>

內(nèi)鏈要點(diǎn)總結(jié)

總結(jié)一下 Martin Splitt 在這個(gè)視頻里所提醒的內(nèi)鏈的技巧和注意事項(xiàng)：

1. 使用內(nèi)鏈的時(shí)候不光要考慮SEO，還得考慮用戶的瀏覽體驗(yàn)，尤其是過度使用內(nèi)鏈，這樣容易分散用戶注意力和視覺焦點(diǎn)。
2. 內(nèi)部鏈接的錨文本最好是描述性文字，錨文本需要有語(yǔ)義，而不是“read more”這種錨文本。
3. 使用正確的HTML結(jié)構(gòu) 標(biāo)簽做鏈接。

現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，超鏈接是非常重要的元素之一，它們使得用戶能夠輕松地跳轉(zhuǎn)到其他頁(yè)面或特定部分。在 HTML 中，使用 anchor 標(biāo)簽創(chuàng)建超鏈接是一種常見的方式。在本文中，我們將探討 anchor 標(biāo)簽的基本使用方法以及一些高級(jí)技巧，幫助您提升網(wǎng)站用戶體驗(yàn)。

1. 基本使用方法

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

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

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

2. 錨點(diǎn)引用

錨點(diǎn)引用（anchor）是一種用于在同一頁(yè)面內(nèi)跳轉(zhuǎn)的技巧。您可以在頁(yè)面中添加錨點(diǎn)，使用 anchor 標(biāo)簽跳轉(zhuǎn)到特定的部分。

<h2 id="section1">第一個(gè)部分</h2>
<a href="#section1">跳轉(zhuǎn)到第一個(gè)部分</a>

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

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

4. 使用 target 屬性

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

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

5. 使用 title 屬性

title 屬性用于提供關(guān)于鏈接的額外信息，例如鏈接目標(biāo)的描述或上下文。當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，瀏覽器會(huì)顯示這些信息。

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

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

7. 使用 CSS 美化鏈接

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

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

網(wǎng)頁(yè)設(shè)計(jì)中，添加圖片并為其添加超鏈接是常見的需求。通過使用HTML，我們可以輕松實(shí)現(xiàn)這些功能。下面將詳細(xì)介紹如何實(shí)用地添加圖片，并為圖片添加超鏈接。

首先，我們需要了解HTML中如何添加圖片。在HTML中，我們使用`<img>`標(biāo)簽來插入圖片。`<img>`標(biāo)簽有幾個(gè)重要的屬性，包括`src`、`alt`和`width`、`height`等。`src`屬性用于指定圖片的URL地址，`alt`屬性用于提供圖片無法加載時(shí)的替代文本，而`width`和`height`屬性則用于設(shè)置圖片的寬度和高度。

下面是一個(gè)簡(jiǎn)單的示例，展示如何在HTML中添加圖片：

<img src="這里寫圖片地址，要帶http協(xié)議，比如：https://www.chaojilu.com" alt="看不到圖片，就顯示這個(gè)文字" width="500" height="300">

在這個(gè)示例中，我們使用了`<img>`標(biāo)簽，并通過`src`屬性指定了圖片的URL地址。同時(shí)，我們還設(shè)置了`alt`屬性以提供替代文本，并通過`width`和`height`屬性設(shè)置了圖片的尺寸。

接下來，我們來看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標(biāo)簽來創(chuàng)建超鏈接。`<a>`標(biāo)簽的`href`屬性用于指定鏈接的目標(biāo)地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部。

下面是一個(gè)示例，展示如何為圖片添加超鏈接：

<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到圖片，就顯示這個(gè)文字"width="這里寫寬度" height="高度">>
</a>

在這個(gè)示例中，我們將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部，并通過`href`屬性指定了鏈接的目標(biāo)地址。當(dāng)用戶點(diǎn)擊圖片時(shí)，將會(huì)跳轉(zhuǎn)到指定的網(wǎng)址。同時(shí)，我們還通過`alt`屬性為圖片提供了替代文本，以便在圖片無法加載時(shí)為用戶提供提示。

除了基本的添加圖片和超鏈接功能外，我們還可以通過一些技巧來優(yōu)化圖片的顯示和加載效果。例如，我們可以使用CSS樣式來設(shè)置圖片的邊框、圓角等外觀屬性，提升頁(yè)面的美觀度。同時(shí)，我們還可以通過壓縮圖片文件大小、使用懶加載等技術(shù)來優(yōu)化圖片的加載速度，提高用戶體驗(yàn)。

需要注意的是，在添加圖片和超鏈接時(shí)，我們需要確保所使用的圖片資源是合法且可訪問的。避免使用未經(jīng)授權(quán)或侵權(quán)的圖片資源，以免引發(fā)法律問題。同時(shí)，我們還應(yīng)該關(guān)注圖片的版權(quán)和使用協(xié)議，確保在使用圖片時(shí)遵守相關(guān)規(guī)定。

總之，通過使用HTML的`<img>`和`<a>`標(biāo)簽，我們可以輕松地在網(wǎng)頁(yè)中添加圖片并為圖片添加超鏈接。通過合理設(shè)置屬性和優(yōu)化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶提供更好的瀏覽體驗(yàn)。

各位鹿友有什么不懂可以在評(píng)論區(qū)留言，咱們一起探討學(xué)習(xí)。