了解圖像標題屬性

已發表: 2020-10-23

優化您網站的圖像並非易事。 您不僅需要確保它們的文件大小易於管理以防止頁面加載時間過長，而且它們還提供了許多機會來改進您的搜索引擎優化 (SEO)，這些機會很容易被忽視。 例如，您可能不知道圖片標題屬性及其在您網站的視覺元素中所扮演的角色。

在這篇文章中，我們將闡明圖片標題屬性，討論它與 alt 屬性的區別，並討論它對您的 SEO 策略意味著什麼。 我們還將向您展示如何對您網站的訪問者隱藏它。

讓我們潛入吧！

訂閱我們的 YouTube 頻道

圖片標題屬性介紹

第一件事，就是先：圖像title屬性是不一樣的圖像的文件名。 相反，它是可以包含在照片或圖形的 HTML 標籤中的信息。 這是一個示例，最後是 title 屬性： 

<img src="filename.jpg" alt="description of your image" title="image title">

title 屬性最顯著的影響是，當用戶將鼠標懸停在圖像上時，他們可以將其視為網站前端的“工具提示”：

圖像標題屬性工具提示的示例。

並非所有瀏覽器都支持此功能。 但是，Firefox 是少數幾個這樣做的瀏覽器之一，它是網絡上第三大流行的瀏覽器。 您可以通過媒體庫在 WordPress 中添加圖片標題屬性。 只需單擊有問題的圖像並填寫標題字段：

在 WordPress 媒體庫中添加圖像標題屬性。

您也可以直接在塊編輯器中添加它。 展開圖像塊的高級設置並填寫標題屬性字段：

在塊編輯器中添加圖像標題屬性。

使圖像標題在懸停時可見的目的是為訪問者提供一些額外的上下文。 例如，一些內容創建者會包含圖像中描繪的人物的姓名，或者用戶可能會從了解中受益的關鍵細節。

但是，您不想完全依賴 title 屬性，特別是因為它不是所有瀏覽器中的用戶都可見。 在某些情況下，標題可能更有效。 此外，您應該始終確保為圖像添加替代文本，即使它們具有標題屬性。

創建標題屬性時，最好將它們保持在幾個字以內。 具有選擇性和描述性，以便懸停文本不會太長並為您的訪問者提供價值。

Title 屬性與 Alt 屬性的區別

我們之前提到過，即使您已經包含了標題屬性，向圖像添加替代文本也很重要。 對於內容創建者來說，混淆 alt 屬性的圖像標題屬性，或者認為兩者都使用是矯枉過正的，這是一個常見的錯誤。

alt 屬性在其 HTML 標籤中指定圖像的 alt 文本。 它是我們之前示例中列出的第二個屬性： 

<img src="filename.jpg" alt="description of your image" title="image title">

替代文字的目的是向無法看到它們的用戶描述視覺元素，因為圖像加載失敗或因為他們正在使用屏幕閱讀器。 在無法呈現圖像的情況下，此文本將代替圖像顯示：

代替無法加載的圖像顯示的替代文本。

在 WordPress 中，您可以通過媒體庫或塊編輯器中任何圖像塊的設置向圖像添加替代文本。 這是確保您的網站符合可訪問性標準的關鍵，因此我們強烈建議您這樣做。

不要嘗試使用圖像標題屬性來替換 alt 屬性，這一點非常重要。 並非所有屏幕閱讀器都支持 title 屬性，依賴鍵盤導航的用戶無法將鼠標懸停在圖像上進行查看，因此這可能會導致您網站上出現嚴重的可訪問性問題。

圖片標題屬性如何影響 SEO

當談到圖像標題屬性對 SEO 的重要性時，有很多混合的信息。 一些人聲稱這是合併其他關鍵字的絕佳方式，而另一些人則表示搜索引擎機器人甚至不會抓取它。

切入正題，圖像標題屬性不是直接的排名因素。 通過向所有圖像添加標題來優化圖像可能不會顯著改變頁面在搜索引擎結果中的可見性。

但是，從 SEO 的角度來看，包含標題屬性也不會損害您的網站。 事實上，谷歌推薦它。 如果搜索引擎機器人確實抓取了它們並且您合併了關鍵字，那麼您至少可以在 Google 圖片搜索結果中提升您的圖片。

此外，圖片標題可以通過與訪問者分享關鍵細節來改善您網站的用戶體驗 (UX)。 這可以通過影響排名因素（例如頁面瀏覽量、會話持續時間和其他此類指標）間接促進 SEO。

即便如此，正如我們多次提到的，並非所有瀏覽器和設備都支持懸停文本。 如果您的大多數用戶永遠不會看到它，那麼瀏覽您的媒體庫並向每個文件添加標題可能會浪費大量時間。

如何在 WordPress 中隱藏圖像標題工具提示

您可能更喜歡隱藏圖像標題工具提示。 也許您擔心訪問者會覺得它很煩人，或者想將它主要用於 SEO 目的，但認為它不需要幫助讀者理解您的內容。

您可以從塊編輯器和媒體庫中的圖像中刪除標題屬性。 但是，您將失去可能從中看到的任何潛在 SEO 優勢。

大多數想要隱藏工具提示的人最終都會在他們的網站中添加 JavaScript，這樣他們就可以將屬性保留在圖像標籤中，但不會在前端顯示。 我們建議使用插入頁眉和頁腳等插件來簡化此過程。

在<head>部分添加以下代碼，用腳本標籤包裝： 

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

如果您使用的是 Divi，則可以跳過安裝額外插件並通過導航到Divi > Theme Options > Integration來添加此代碼：

此屏幕上的第一個代碼編輯器會將 JavaScript 添加到您網站的<head>部分，就像插入頁眉和頁腳一樣。

結論

可以創建多年的在線內容而從不考慮圖像的標題屬性。 但是，完全忽略它們可能會錯失為用戶提供額外上下文的機會。 更重要的是，濫用此屬性可能會對您網站的可訪問性和 SEO 產生負面影響。

在這篇文章中，我們討論了圖像標題屬性和 alt 屬性之間的差異，以便您可以最大限度地提高 SEO。 我們還向您介紹瞭如何在前端隱藏圖像標題工具提示，以便訪問者將鼠標懸停在照片或圖形上時看不到它。

您對圖片標題屬性或圖片優化有任何疑問嗎？ 在下面的評論部分將它們留給我們！

圖片來自 Jane Kelly / Shutterstock.com