正確用於 SEO 的 Web 元素

最後更新於 2019 年 1 月 16 日

大多數網頁由 3 個基本元素組成，HTML、CSS 和 JavaScript。 這些構建塊構成了所有網頁，無論它們使用什麼來呈現它們。 每個網絡元素都有其適當的位置。 雖然可能存在一些重疊，但有目的地使用它們有助於製作 SEO 優化頁面。 那麼應該如何使用這些元素以及它們可能被誤用的方式有哪些？

基本的網絡元素功能

讓我們將網頁比作房子。 一所房子有幾個部分，每個部分都在它的位置並服務於它的目的。 在我們的網頁房屋中，HTML 類似於結構網絡元素、桁架、牆壁和地基。 HTML 提供了重要的頁面內容佈局，概述了它的順序以及哪些元素出現在哪裡。

CSS 應該用於樣式。 如果我們堅持使用房屋插圖，這將是牆壁的顏色、櫥櫃、地板的類型等。頁面的顏色、字體大小、頁面的實際佈局也可以在 CSS 中定義。 但是等等，佈局不應該在 HTML 中嗎？ 好問題。 HTML 應該對頁面上的元素進行佈局，而 CSS 應該控制這些元素在頁面上的顯示方式。 CSS 負責網絡的大部分響應能力。

現在你的房子已經建成，是時候使用一些公用設施了，比如你的電力和自來水。 JavaScript 應該用於頁面的交互元素，例如單擊時更改元素、顯示數據等。 JavaScript 可用於更改頁面的整體外觀和感覺，如果您要針對特定受眾或用例進行定制，這將非常有效。

為什麼要把它們分開？

那麼，如果您可以同時使用 HTML 和 CSS 進行佈局，並使用 JavaScript 和 CSS 進行樣式設置，為什麼要將它們分開呢？ 當 Google 為您的網頁編制索引時，它會尋找有關您的網頁內容和功能的關鍵指標。 如果您不恰當地使用其中一個元素，您可能會發出錯誤的信號並損害您的排名。 當使用 CMS 編輯器使用元素預設樣式或運行不必要的 JavaScript 以減慢頁面執行可以在 CSS 中完成的事情時，這種情況經常發生。

因此，讓我們回顧一些常見的誤用。

濫用標題標籤

最常見的誤用之一是使用標題標籤來設置 Web 元素的樣式。 標題標籤概述了頁面上的主要主題，從最重要的 H1 標籤（每個頁面都應該有）到 H6。 當用於設置元素樣式時，您是在告訴 Google 這些詞就是您的頁面的內容。 或者，您可能使用了錯誤的標題標籤（例如使用 h3 而不是 h2，因為您更喜歡字體大小）。 無論哪種情況，您都發送了錯誤的信息。 相反，您應該使用 CSS 將元素樣式設置為您想要的適當大小或字體。

雙H1標籤

另一個常見問題是頁面上有 2 個或更多 H1 標籤。 您的 H1 標籤應該是頁面的主要思想； 它應該告訴訪問該頁面的每個人（以及每個爬行機器人）它是關於什麼的，因此，您應該只有一個。 擁有兩個 H1 標籤就像在頁面上發送兩個不同的信號。 有些人甚至專業主題傾向於將他們的標誌放在 H1 標籤中。 因此，請注意確保每頁只有一個。

---

---

所有圖像都是背景圖像。

擁有圖像背景並沒有錯。 圖片引人注目，可以為您的網站增加很多價值並吸引用戶購買產品或服務。 但是您所有的圖像都不應該是背景圖像。 最近在一個網站上工作，我發現 CMS 將所有圖像都轉換為背景圖像。 這裡的目的是更容易地設置樣式和調整它們的大小。 雖然它可能會使它看起來更好，但您會失去頁面上圖像優勢的一個重要部分：替代文本。 替代文本描述圖像中的內容，屏幕閱讀器使用它來識別圖片中的內容。 通過將所有圖像設置為背景圖像，您會降低頁面的可訪問性，從而使殘障人士更難使用，並且可能會在您的排名中受到谷歌的打擊。

使用 JavaScript 渲染 CSS

通過 JavaScript 提供不必要的 CSS 會增加頁面的加載時間。 最好將 CSS 文件鏈接到標題中，而不是通過那個額外的步驟。 此外，使用 JavaScript 製作簡單的動畫或懸停效果會增加加載時間，因為它可以通過 CSS 更快地完成。 即使在不需要時添加 JavaScript 框架也會增加加載時間。 就像加載 jQuery 來為按鈕設置動畫一樣。 與其編寫普通的 JavaScript，甚至更好，使用 CSS 中的動畫元素甚至 CSS 動畫樣式表，加載速度要快得多。

在 HTML 中設置 Web 元素的樣式

直接在 HTML 文件中設置元素樣式是一個有爭議的話題。 WordPress 和其他 CMS 中的許多主題和插件不斷依賴於覆蓋樣式表和其他插件。 這通常被視為一種不好的做法。 一些內容創建者直接將樣式寫入他們的內容，因為他們想改變他們的主題樣式。 這有什麼問題？ 當直接寫入 HTML 元素的樣式覆蓋 CSS 文件中的樣式時，通常會導致 CSS 問題。 為避免這種情況，不要將其直接寫入 HTML，而是為 Web 元素分配一個類並添加一個新樣式表來添加樣式。 這可以避免衝突工作表的問題，這些問題可能會破壞您的網站或不正確地設置您的網站樣式。

使用 HTML 設置佈局樣式

這有點棘手，因為主題通常將 CSS 選擇器與 HTML 結構結合在一起。 這使得人們更難在不破壞使頁面可讀和功能的重要樣式的情況下更改 HTML 結構。 例如：

在示例中，如果您更改前者的 HTML 結構，您將丟失該元素的所有樣式，因為它依賴於結構。 相反，將樣式與結構分離，就像在後面的類中一樣，即使您更改了 HTML 結構，您也可以重用您的 CSS。

格式正確的頁面是優化良好的頁面。

您頁面的內容是排名的一個重要因素。 正確利用網頁元素也是如此。 具體來說，HTML、CSS 和 JavaScript 在優化您的頁面 SEO 方面發揮著同樣重要的作用。 通過了解每個網絡元素的作用並以適當的方式使用它，您可以提高您的排名。 只需構建一個既實用又有吸引力的頁面。 如果您正在考慮為 CMS 切換主題或將自定義 CSS 或 JavaScript 添加到您的頁面，請再次查看並確保您正確使用了 Web 元素。