Ranking首頁 / SEO教學 / 技術SEO / seo程式-Javascript

SEO 程式碼設置對了嗎?JavaScript、HTML 正確設定一篇搞定!

網頁JavaScript語法與SEO關係匪淺

網站有了優質內容,但成效卻總是不如預期?可能是網頁中與 SEO 程式碼的設定不正確,而影響 Google 無法好好檢索網站。本篇將向你介紹網頁程式碼 3 大要素-HTML、CSS、JavaScript,及站在 SEO 角度調整程式碼的方法,讓你掌握 SEO 操作的關鍵,順利將網站排名提升!

延伸閱讀:一篇搞懂 Google 演算法運作方式

 

網頁程式碼-HTML、CSS、JaveScript 是什麼?

網頁程式碼中有許多與 SEO 息息相關的基礎設置,若能學會這些設定方式,對 SEO 行銷的實務操作很有幫助,而學習程式碼的第一步,從瞭解網頁程式碼 3 大要素的基本概念開始。

HTML

HTML

HTML(HyperText Markup Language)為建構網頁的語言,是組成網頁的基本元素,向爬蟲程式說明網頁性質,並建立網頁的內容,如文字、表格、圖片、視頻等區塊。HTML 語言能直接影響網站 SEO,設置適當便能發揮加分效果。

<head>---說明網頁性質

<body>---網頁內容

<p>---文字區塊

</p>

<body>---表格區塊

</body>

<img>---圖片區塊

</ing>

<video>---影片區塊

</video>

</body>

</head>

CSS

CSS

CSS(Cascading Style Sheets)是設定網頁區塊的樣式語言,可為 HTML 所定義出的內容區塊進行進行外觀調整,如設定文字大小間距、表格邊框的粗細顏色、圖片及影片的長寬比例等顯示細節。CSS 能帶給使用者更佳的使用體驗,但對於提升 SEO 沒有直接的影響。

<head>

<body>

<p style=”text size:15 ”>---定義文字格式

</p>

</body>

</head>

 

JavaScript

JavaScript 是網頁製作的高階程式碼,能在網站上創建動態內容、控制圖片、影片、聲音的變化,甚至做出下拉式選單、動態式導覽等特效。因 JavaScript 的語言特性不易讓爬蟲程式檢索,在設置時更須謹慎使用

<script type=”text/javascript”>

製作網頁猶如製作提線木偶,首先需挑選木塊組成身體的部位,就像 HTML 語法建立區塊,再針對各部位進行雕琢、上色,如 CCS 對各區塊設定外觀樣式,最後以線繩串接木偶軀體,使木偶可被線繩操控做出動作,正是 JavaScript 對網頁的作用。

如何在 Google 檢索網頁 HTML 時提升 SEO 排名

設定 HTML 語言猶如書的導讀可以讓讀者更快理解書籍內容,透過技巧性地調整網頁中的 HTML 語言,爬蟲軟體在進行檢索時能更快速掌握網頁內容架構,增加 Google 對網站的分數與權重,進而提升網站 SEO 排名,主要的做法有以下 5 種:

  1. 設定網頁的 Title Tag
    Title Tag 網頁標題是顯示在搜尋結果裡的網頁名稱,對於爬蟲程式及使用者而言,認識網頁的第一步都是從標題開始,因此被視為 SEO 的重要因素,文字盡量在 25~30 個中文字之間。

  2. 適當安插關鍵字Meta Description
    顯示在搜尋結果的網頁摘要,向使用者描述該網頁的內容主旨,字數上限沒有確切數字,一般建議字數在 65~80 個中文字之間。

  3. 於文章中適時設置 Header Tag
    為網頁的文字內容標上<h1>~<h6>標籤,<h1>為最高級的標題,對網頁 SEO 有重要影響性,接著依順序設置至<h2>及<h3>,加強網頁關鍵字的強度。

  4. 設置圖片替代文字(alt)
    設置圖片替代文字的用意是向搜尋引擎解釋圖片內容,在 HTML 中以<img alt=”圖片替代文字”>設置。需盡量讓文字描述與圖片內容一致,否則容易被 Google 認定圖文不符,而被降低網站品質的評分。

  5. 設置粗體字<strong>
    為網站中的重點關鍵字設置粗體<strong>,使爬蟲程式更快找到網站重點。

爬蟲程式最注重的項目是 Title TagHeader TagMeta Description,設置得宜會讓網站 SEO 大大加分,不過也別忘了,提供高價值的原創內容,讓使用者獲得優良體驗才是提升 SEO 的根本之道。

(設置HTML語言,提升網站SEO的詳細方式,請參考:【SEO HTML概念篇】SEO操作必學!從0到1的HTML基礎知識教學

 

Javescript 對網站 SEO 的影響?

SEO JavaScript

過去,爬蟲程式檢索網站時,會忽略 JaveScript 的<script>標籤,因此 SEO 業界普遍不鼓勵在網站中設置太多的 JacaScript,尤其在以下 2 種使用情形:

  1. 避免在 JavaScript 中放置超連結


    超連結在 HTML 語言是使用<a herf=”超連結網址”>,在 JavaScript 中則是以<a onclick “alert”>設置超連結網址,透過 JavaScript 設定的錨點文字與一般文字呈現相同的外觀樣式,讓讀者難以辨別,且爬蟲程式也無法進行檢索,對讀者及 SEO 都有負面效果。

  2. 避免大量使用 JavaScript

    若網頁中設置太多 JavaScript 製作的特效,會為網站帶來龐大負荷,降低網頁載入時間,便於使用者來說就是不佳的網站體驗,反而讓網站評分下降,影響 SEO 排名。

 

Googlebot 日前已更新,對 JavaScript 程式碼已能進行檢索,經國外 SEO 專家 Adam Audette 實際測試包含 301 Redirects、下拉式選單、動態式導覽、rel=nofollow 等項目,測試結果為多數項目已可被爬蟲程式讀取,但仍有部分功能未能正常發揮,因此仍建議目前先以過去的設置習慣為主。

為網站打造完善 SEO 體質|Ranking,你的 SEO 救星

SEO 專家 Ranking 推出 SEO 網站健檢工具,能檢測目標網站的安全性、使用體驗、檢索與索引、內容分析、社群預覽等 5 大面向,你可以根據分析結果,為網站設置正確的網頁程式碼,打造完善的 SEO 網站體質!

SEO 排名服務

Ranking 專為中小企業提供 SEO 專案服務,幫助企業客戶完整規劃、執行 SEO 排名的優化策略,改善網站體質加上達標保證,讓客戶網站半年內前進搜尋結果首頁!

 

掌握 Google 搜尋引擎的 2 大核心功能-檢索與索引,請參考:認識 Crawl 與 Index-掌握 Google 演算法的秘密,增進網站 SEO 排名!