SEO 搜尋引擎最佳化 程式碼層面的

anch發表於2024-12-03

描述資訊

  • title 頁面標題
  • heading 包含h1，h2 等，配合文件結構構成文件大綱，需要合理安排
  • Meta Description 和 keywords 標籤，對頁面的描述。
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  • Strong和B標籤，前者在搜尋引擎中會被當做重要資訊，要合理使用。
  • ALT標籤，這不支援在圖片載入失敗的時候給使用者看的，更是給爬蟲來爬取圖片資訊的，很重要。
  • title標籤，給圖片新增title標籤，也有利於爬蟲確認資訊，而且給限定區域的文字標題新增title標籤，可以在使用者滑鼠滑過的時候，顯示出被隱藏掉的那部分文字。
  • Robot.txt 檔案，告訴爬蟲網站資訊。
  • 站點地圖，當站點較大，或者有大量圖片影片內容，或者結構相對複雜的時候，非常有必要提交站點地圖給搜尋引擎。

站點結構

這裡我們用路由結構或許更為貼切，路由不要超過3級，儘可能扁平化站點結構，不僅利於使用者快速找到自己需要的內容，也同樣適用於爬蟲快速爬取站點資訊。

文件結構

合理的利用語義化標籤進行頁面佈局，先整體後區域性，先挖坑，後用元件填坑，合理的規劃層級，組合和分割。不僅利於開發和維護，也利於搜尋引擎構建頁面文件。

跳轉連結

頁面跳轉儘可能使用a標籤來實現。不要被click時間蒙了心，搜尋引擎知道a是跳轉連結。a標籤記得新增title屬性，告訴爬蟲和使用者跳轉的資訊

導航儘可能使用文字，如果必須要使用圖片，alt和title是非常有必要的。

站點許可權

如果涉及到使用者註冊和登陸許可權，儘可能把需要鑑權和不需要鑑權的內容進行區分處理。搜尋引擎對需要鑑權的內容不友好。告訴他哪些內容不希望被爬取會更好一點。或者只有在登陸狀態下，才動態新增那些需要鑑權的入口到頁面上。

字型圖示

字型圖示有很多優點，單絕對不是針對於搜尋引擎來表述的。為了儘可能告訴搜尋引擎字型圖示的意義，儘量不要單獨使用字型圖示，要在字型圖示身邊放一個文字兄弟，同時給字型圖示新增和文字內容一樣的 title屬性，以儘可能降低給搜尋引擎帶來的困擾。

結構化標記

確保網站的結構化標記主要包含以下幾個部分：

1. Schema.org：Schema.org 是一種由多家科技公司共同建立的開放原始碼專案，旨在為搜尋引擎、開發者和網站管理員提供一種共同的結構化資料標記語言。透過使用 Schema.org，網站管理員可以更方便地新增結構化標記，提高網頁在搜尋引擎結果中的排名。
2. JSON-LD：JSON-LD 是一種用於表示結構化資料的標記語言，它以 JSON 格式呈現。JSON-LD 具有簡潔、易讀和易寫的特點，被廣泛應用於網頁的結構化標記。透過使用 JSON-LD，網站管理員可以將網頁的標題、描述、關鍵詞、釋出時間等資訊提供給搜尋引擎。
3. Microformats：Microformats 是一種簡單的標記語言，用於將結構化資料嵌入到 HTML 中。Microformats 的主要目的是提高網站的可讀性和可訪問性，同時為搜尋引擎提供有關網頁內容的資訊。儘管 Microformats 在過去很受歡迎，但現在已經逐漸被 Schema.org 和 JSON-LD 取代。

綜上所述，確保網站的結構化標記是提高搜尋引擎最佳化和使用者體驗的關鍵。透過使用 Schema.org、JSON-LD 和 Microformats 等結構化標記語言，網站管理員可以更好地向搜尋引擎提供網頁內容的資訊，從而提高網頁在搜尋結果中的排名，提升網站的流量和使用者體驗。

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-cn

這些標記可以直接了當的告訴搜尋引擎這裡是什麼內容，包括麵包屑導航，輪播圖等等，方便搜尋引擎快速準確的構建和收錄站點結構。

相應速度

應儘可能控制頁面體積和請求次數，以提高頁面載入速度。

其他補充

  1. 正文標題要用<h1>標籤：“蜘蛛” 認為它最重要，若不喜歡<h1>的預設樣式可以透過CSS設定。儘量做到正文標題用<h1>標籤，副標題用<h2>標籤, 而其它地方不應該隨便亂用 h 標題標籤。
  2. <br>標籤：只用於文字內容的換行，其他元素的換行，透過css的display屬性或者新增盒子進行控制。
  3. 表格應該使用<caption>表格標題標籤
  4. <strong>、<em>標籤 : 需要強調時使用。<strong>標籤在搜尋引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，<em>標籤強調效果僅次於<strong>標籤。
  5. 文字縮排不要使用特殊符號 &nbsp; 應當使用CSS進行設定。版權符號不要使用特殊符號 &copy; 可以直接使用輸入法，拼“banquan”，選擇序號5就能打出版權符號©。
  6. 重要內容不要用JS輸出，因為“蜘蛛”不認識
  7. js程式碼如果是操作DOM操作，應儘量放在body結束標籤之前，html程式碼之後。
  8. 謹慎使用 display：none ：對於不想顯示的文字內容，可以考慮將元素的高度設定為零，或者調整 z-index屬性等方法不讓其顯示在頁面當中。

相關文章