HTML 看似複雜,其實簡單易學。透過這篇文章,我們希望向那些對 HTML 毫無經驗的人掌握基本知識,並介紹 7 個對 SEO 極其重要的 HTML 標籤,助您提升網站的搜尋引擎排名。
HTML 基礎知識
什麼是 HTML?
HTML(英語:HyperText Markup Language,簡稱:HTML),也可以稱為超文本標記語言,是一種用來建立網頁的標準標記語言。 HTML 通過使用各種標籤和屬性來格式化文本、插入圖像和建立超連結等,我們可以透過使用不同的標籤和屬性來定義網頁的結構和外觀,同時它也是整個網頁開發過程的基礎。
就像人們需要語言來溝通一樣,人們依靠語言來說明需求和意圖,而人們與瀏覽器之間的溝通則是需要依靠 HTML 語言。它的運作過程有點複雜,本篇不在此多著墨,簡單來說當我們在瀏覽器中打開一個網頁時,瀏覽器會解析 HTML 代碼並將其轉譯為我們看到的視覺內容,這個轉換過程被稱為渲染(Render)。
HTML 的基本結構
HTML 是建立網頁的基本工具,透過使用不同的標籤和屬性,我們可以控制網頁的結構、外觀和功能,就像建造一座房子需要使用各種建材和工具一樣,建立網頁內容也需要 HTML 作為基礎材料。
在 HTML 的基本結構中,我們可以將它分為宣告、Head 和 Body 三個主要部分,每個部分都扮演著不同的角色,接下來該段落會介紹這三個部分的功能,讓您對 HTML 結構有更清晰的了解,從而消除對 HTML 原始碼的困惑。
- 宣告
儘管宣告只有一個標籤,但它是必不可少的。
(每個網頁都需要宣告)
在 HTML5 普及之前,需要冗長的宣告說明,不過從全球資訊網協會(W3C)於 2014 年 10 月完成標準制定後,只需要在文件開頭的寫入 <!DOCTYPE html> 就可以向瀏覽器宣告網頁使用 HTML5 編程,而這個宣告的意義是讓瀏覽器知道網頁使用 HTML 來撰寫網頁,以利協助瀏覽器能夠正確地解析我們的編碼資料,並且提供給使用者完整的內容。
- 標頭(Head)
(標頭區塊 Head 放置網頁的名稱等重要訊息)
網頁中的「Head」部分是 HTML 的一個重要區塊,它包含了網頁的名稱、css 樣式、JavaScript 程式碼以及其他相關的資訊。這些資訊不會直接顯示在網頁上,但它們對於網頁的結構、樣式和功能都至關重要。簡單來說,「Head」提供了瀏覽器關於網頁的重要指示,幫助瀏覽器正確地解析和顯示網頁內容。
- 網頁內容主體(Body)
(網頁主體 Body 放置我們在網頁上看到的所有內容)
網頁主體「Body」承載了網頁中所有我們在網頁上看到的內容,常見的包括文字、圖片、表格、連結等等 ,在網頁主體「Body」除了文字、圖片外,我們還可以加入文章目錄、產品列表和其他內容,所有顯示在網頁上的內容都放置在「Body」中,並且這些內容都直接呈現給使用者,使用者可以閱讀文章、觀看圖片、填寫表單等與之互動。
值得一提的是,HTML 不僅僅是單個標籤的排列,像 <div> 這樣的標籤通常包含著其他多個標籤,然後再形成一個包含多種標籤的區塊。例如,一個 <div> 可以包含著活動商品清單、活動日期和商品連結等內容,這些元素共同構成了一個獨立的區塊,為使用者提供更完整的資訊和體驗。
關鍵 HTML 標籤:提升網站 SEO 的七個秘訣
在這個數位時代,了解如何運用 HTML 標籤最大程度地優化您的網站至關重要。接下來,我們將向您介紹 7 個關鍵的 HTML 標籤,它們與 SEO 緊密相關。正確運用這些 HTML 標籤,能夠為您的網站帶來更好的 SEO 效果,讓我們一起認識這些 HTML 標籤,並了解如何利用它們來提升您網站的能見度和效果。
網頁標題 (Title)
程式碼:<title>頁面標題</title>
網頁標題(Title)在 SEO 中扮演著關鍵的角色,因為它是使用者在搜尋引擎結果中首先看到的內容,一個吸引人又富含關鍵字的標題是至關重要的。為了避免標題在搜尋結果(SERP)中被截斷,包含標點符號,建議將標題總字數控制在約 30 個中文字左右(約 60 個字符)。
網頁描述 (Meta description)
原始碼:<meta name=”description” content=”頁面描述內容” >
網頁描述(Meta description),在搜尋結果(SERP)提供了網頁內容的摘要,雖然它們不直接影響搜尋排名,但引人入勝的描述可以影響頁面的點擊率,建議將頁面描述內容的總字數控制在 75 到 80 個中文字左右(約 150 到 160 個字元)。
相關文章:Meta Title Description 怎麼寫?別小看標題、摘要,SEO 老司機就是你!
網頁內容的標題標籤(Heading Tags)
原始碼:<h1>標題名稱</h1> (其他 H 標籤寫法雷同)
網頁文章內容的標題標籤,常見的有 <h1>、<h2> 和 <h3>,其中 <h1> 代表頁面的主標題,而 <h2> 和 <h3> 則分別用於副標題和其子標題。
適當地使用這些標籤來代表文章內容的標題,不僅增強了使用者的可讀性,同時也有助於搜尋引擎理解內容的層次結構和相關性。
相關文章:如何透過H標籤做好網站 SEO?H 標籤重要性介紹
圖片的文字描述(img alt 屬性)
原始碼: <img src=”圖片位址” alt=”圖片文字描述”>
搜尋引擎的爬蟲無法直接理解圖片的內容,因此透過 <img> 標籤的 alt 屬性提供的文字描述,可以讓搜尋引擎能夠更好地理解圖片的內容和意義。此外,它還能提供更友善的閱讀環境,對於視覺障礙的使用者,或者因為網路問題等原因無法正確載入圖片的狀態,可以透過 alt 文字對圖片的文字描述,協助使用者能夠理解圖片的內容和意義,從而提高網站的無障礙訪問性。
相關文章:
HTML Image Alt 全攻略!簡單四原則,讓 Google 輕鬆看懂你的圖片!
連結和連結標題(a 標籤和其 title 屬性)
原始碼:<a href=”網址” title=”指向連結的描述性文字”>錨文字標題</a>
在 SEO 中,可以使用 <a> 標籤來定義超連結,它可以將特定的文字或圖片轉換為「可點擊的連結」,並且引導使用者透過「可點擊的連結」訪問站內或站外的其他網頁。這對於建立網頁之間的內部連結和外部連結很重要,同時也有助於提升網站的搜尋引擎排名和網站流量。
另外,除了使用 <a> 標籤建立「可點擊的連結」外,還可以使用「a 標籤的 title 屬性」優化連結標題,寫入準確的解釋連結意思的描述性文字,可以協助使用者在連結上懸停時獲取有關連結的附加資訊、鼓勵他們點擊並進一步探索。
相關文章:
什麼是內部連結?3 分鐘搞懂內部連結策略規劃,邁向 SEO 成長之路
SEO 外部連結建立指南:7 個技巧+wiki 操作案例解析
Meta Robots 標籤
原始碼:<meta name=”robots” content=”參數指令”>
Meta Robots 標籤(Meta Robots Tag)的主要用意是在網站的 HTML 頁面中為搜尋引擎的爬蟲(如 Googlebot)提供指示,網站擁有者可以透過它告訴搜尋引擎如何檢索和索引網站內容,擋掉一些不需要被收錄的網站等,以利確保搜尋引擎收錄的頁面有較高的品質。
以下是 Meta Robots 標籤的一些常用的參數設定:
參數設定 | 解釋 | 寫法 |
Index | 屬於默認條件,意即告訴搜尋引擎可以索引網頁的內容。 | <meta name=”robots” content=”index”> |
Noindex | 告訴搜尋引擎不要索引網頁的內容,通常用在測試中的網站、不需要公開的內容,以及站內的重複內容。 | <meta name=”robots” content=”noindex”> |
Follow | 屬於默認條件,告訴搜尋引擎可以追蹤網頁上的所有連結。 | <meta name=”robots” content=”follow”> |
Nofollow | 告訴搜尋引擎不要追蹤網頁上所有連結,防止因連結的設定,將頁面權重傳遞給指定的連結。 | <meta name=”robots” content=”nofollow”> |
相關文章:
使用”noindex”等 4 種方式禁止特定網頁被收錄,提升網站整體 seo 品質
link canonical
原始碼:<link rel=”canonical” href=”標準網址”>
重複內容會分散頁面的權重,並削弱單個頁面的相關性,通過設定 link canonical 標籤,網站擁有者可以指定單個網址作為標準網址,向搜尋引擎表明應該優先考慮哪個版本的網頁進行索引和排名。
相關文章:Canonical 標準網址操作指南,操作 SEO 不再苦惱
正確使用這些 HTML 標籤能夠有效提升網站的 SEO 表現,吸引更多潛在訪客。對於每個網站擁有者來說,理解並靈活運用這些標籤是應該重視和學習的關鍵。在這篇文章中,我們深入探討了 7 個與 SEO 密切相關的 HTML 標籤,從標題 Title 到 img alt 屬性,再到 Meta Robots 標籤,每個標籤都扮演著關鍵的角色,影響著網站的搜尋引擎排名和流量,希望這些內容能對您有所幫助,並為您的網站帶來更好的表現!
如有任何網站流量成長相關問題與需求、或想瞭解更多 awoo SEO/SEM 服務歡迎立即諮詢,將有 awoo 專業顧問與您聯繫。
▎延伸閱讀:2024 Google I/O 大會 —— AI Overviews & SGE 未來四大新功能|Google SGE 快訊 2024 Vol.2