Ranking 小編
2023/02/21
瀏覽次數

首頁 / SEO知識庫 / 【SEO HTML概念篇】SEO操作必學!從0到1的HTML基礎知識教學

【SEO HTML概念篇】SEO操作必學!從0到1的HTML基礎知識教學

想全盤了解 SEO 及操作觀念,你就一定要學會 HTML!要學會 HTML 並不難,只要有心想學,不用一個月就能掌握初階 HTML 語法,且一旦掌握 HTML 知識,在操作 SEO 、網站經營與管理,甚至是和網頁工程師溝通,都將有相當大的幫助!

目錄

HTML 是什麼?

HTML (HyperText Markup Language)中文為「超文本標記語言」是一種建立網頁的基礎語法,並非程式語言。瀏覽器讀取並理解 HTML 後,將 HTML 語言轉化成網頁的各個元素,包含文字、圖像、選單等網站結構,再呈現出人類肉眼所見的網頁樣貌。因此,我們可以將 HTML 視為網站的骨架,也是最重要的語法基礎,更是要操作 SEO 的行銷人必須了解的技術之一。

為什麼進行 SEO 操作需要了解 HTML?

想要精進 SEO 操作,建議了解基礎 HTML。為什麽要認識 HTML 語法?進行 SEO 設定時,需要檢查網頁 HTML,了解是否設定正確。也會需要利用 HTML 標籤,來進行深入的 SEO 操作設定,像是為避免搜尋引擎檢索尚未完成的網站,我們需要使用 “ noindex ” 標籤阻擋爬蟲收錄網頁。

熟悉並利用常見的 HTML 標籤,檢查與優化網站內容以維護網站 SEO,有助於維護網站健康度,也能確保網站元素正確被搜尋引擎爬蟲爬取,並正確被判讀,以此提升網頁的關鍵字排名。

 

HTML 網頁架構介紹

網頁基礎的語法架構有兩個部分:頭、身體,而標題則是另一個重要元素。

一、網頁的「頭」:<head>

利用標籤 <head> 開始,到 </head> 結束,中間包含了網頁名稱、樣式等。

其中 head 還包含「Title Tag」,即是瀏覽器分頁中出現的網站名稱,同時也是搜尋結果頁中會出現的標題名稱。

二、網頁的「頭」:<body>

利用標籤 <body> 開始,到 </body> 結束,中間就是網頁的「內文」,包含標題(H1, H2等)、內容、圖片等元素。

 

自學 SEO 必看!認識常見的 HTML 標籤

以下介紹幾種常用於 SEO 優化重點的 HTML 標籤:

一、Title tag

  • 標籤:<title>頁面標題</title>
  • 頁面標題不僅是決定使用者第一眼的印象,也是爬蟲第一個檢索到的要素。因此,Title 的設定就相當重要,這關係到使用者的體驗及 SEO 的排名。
  • Title Tag 包含在網頁 HTML 的「head」區塊內。

 

二、Header Tag

  • 標籤:大標題即 <H1>、標題二即 <H2> ,以此類推。
  • Header 即代表網頁內容的標題,就像文章標題。H1 在 SEO 中佔有相當重要的地位,僅次於 Title,而一個網頁只能有一個 H1,其餘的子標題則是按照文章結構設為 H2、H3 即可。
  • Header 標籤及其他網站內容在網站 HTML 的「body」區塊內。

heading: h1, h2, h3

 

三、Meta Tags

html meta tags 示意

meta tags

  • 標籤:<meta name=”description” content=”網頁說明內容” />
  • Meta Title 即是「網頁標題」,而 Meta Description 則是「在搜尋結果頁中呈現的網頁說明」。Meta Description 字數限制約60-100個中文字不等,隨著使用者的裝置大小不同而有所變化。文字盡量精簡、直觀,太過冗長或和標題關聯性不大的描述,較不易吸引使用者點擊,可能造成點擊率低,不利流量效益。

 

四、nofollow

  • 標籤:
    1. <a href=”網址”rel=”nofollow”>
      用於向搜尋引擎表示目前所處網站與特定網站之間沒有關連,僅是提供資訊而已。
    2. < meta name=”robots” content=”noindex , nofollow”>
      將 “nofollow” 寫在網頁上的 meta tags 上,用來告訴搜尋引擎「不要抓取網頁上的所有外部和內部連結」。
  • 若外部連結來源是低質量或內容不相關的網站,且此種外部連結數量相當大。可能被 Google 演算法視為透過購買廣告連結等人為惡意操作。因此,若因商業合作或其他需求,需建立外部連結時,將連結標記為「nofollow」,可以避免被 Google 視為惡意操作外部連結。而「nofollow」的用意即告訴 Google 「此連結僅為提供資訊,不代表本網站立場」,因此這個連結將不會被追蹤。

 

五、圖片

  • 標籤:<img src=”檔名” alt=”圖片描述”>
  • Google 爬蟲在爬取網站時,會利用圖片標籤來辨認圖片內容。
    因此,設定符合網站內容或關鍵字的檔名與圖片描述,可確保使用者體驗與避免被 Google 檢索器認定「圖文不符」的情形。

深入了解其他網站 SEO 優化細節:網站SEO這樣做,打造高流量、高排名網站!

 

總結

HTML 掌管網站的呈現,以及搜尋引擎爬取的結果,要學會 HTML 並不難,了解 HTML 的基礎架構與常見重要標籤用法後,對於 SEO 優化之路有相當大的幫助!

延伸閱讀,深入了解站內、站外 SEO 作法:

【On-page SEO教學】解析如何完美操作On-page SEO網頁優化

【Off-Page-SEO】一篇文章看懂Off-Page-SEO,成為SEO專家沒煩惱

關於 Ranking 小編:

期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!

其他人也看了...

想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!

無料相談お申し込み
(たった30秒で申し込み完了できる!)

ご連絡先をお知らせください。3営業日以内にご連絡し、御社のサイト検索順位の向上をサポートいたします!

預約顧問諮詢

請您選擇感興趣的服務,並留下聯繫資訊,我們將於三個工作天內聯繫您,讓你品牌一躍上首頁!