SEO 網站優化 入門-行銷人必學HTML語法

在數位行銷的年代,行銷人都知道 網站優化 有多重要。如果團隊中的成員對於SEO不太熟悉,第一步應該從哪裡著手?HTML語法可說是搜尋引擎優化入門的基本功,想要做好SEO,有一些基本的HTML語法及SEO設定必須掌握。如果有興趣鑽研更深入的技術,學一些CSS語法會更好。

我們所看到的網頁,搜尋引擎爬蟲看的則是網頁原始碼;搜尋引擎爬蟲會"讀取"頁面的原始碼,試著了解這個頁面的內容,以及如何展示它。

以Pchome24小時購物的網站為例,原始碼看起來是這樣:

搜尋引擎優化-原始碼

如何看到原始碼?

  • 在任何網頁按下滑鼠按右鍵會看到"檢視網頁原始碼"
  • 在任何網頁按下Ctrl鍵+U

接下來介紹幾個特別重要的HTML碼:

HTML Title tag

Title Tag 是任何頁面最重要的元素,就好像是一本書的書名。如果你的每個頁面都是同樣的Title Tag,就好像你寫了很多書,但是每一本書的書名都是一樣的。這樣有誰能夠知道這些書的內容是什麼呢?

你放在Title tag的內容,通常也就是搜尋引擎列出的標題:

網站優化 title tag

要讓搜尋引擎認識你的網站,Title tag 可以說是最重要的HTML訊號。此外,這個標題就是網友搜尋後看到的標題,標題念起來是否通順?標題是否具有吸引力?也會直接關係到點擊率,即流量的導入狀況。因此,不要過於著重在置入關鍵字,而是要盡量讓標題顯得自然,甚至,應該當成是在寫廣告標題一樣去寫它。

假設你的標題下得很糟,或是關鍵字堆疊、而非描述性的標題,Google有可能會改變呈現出來的標題。

Google 的Matt Cutts曾經在說明影片中提出,會被Google採用的Title Tag 需要符合的準則:

  1. 相對簡短
  2. 有良好的頁面描述,且符合該頁面內容
  3. 跟搜尋詞有相關性

架設不符合這個準則,Google可能改寫你的標題,採用的內容為:1. 網頁中的內容 2. 指向這個頁面的錨點文字 3. 也可能會使用公開的目錄頁面內容(即黃頁網站的內容)

HTML Meta description tag

Meta Tag 看起來是這樣:

網站優化 meta tag

這也是在Head部分的碼。是這個頁面的描述,這就好像一本書的書背說明文。有些網站會忽略這個部分,或是放上和首頁一樣的描述文,Google的Search Console就會將這些相同的Meta Description列入重複描述(duplicate descriptions)。因為這個部分並不算是一個排名因素,也不會直接幫助到排名,他主要是一個"展示"元素。

技術上來說,沒錯!這個部分雖然不會對排名產生多大的影響,但你卻失去了免費的廣告機會。

因為包含關鍵字的Meta description,在關鍵字的部分會顯示粗體,這會吸引搜尋者的眼球。描述寫得好的話,點擊率就會更高。如果你的搜尋結果被點擊的機率變高了,排名仍會因此獲得提升。

雖然寫了Meta description,不代表你的版本就會被Google採用,因為Google仍然會自行判斷,頁面中的哪些內容更符合特定的搜尋詞彙,但由於Meta description 執行上並沒有難度,且它位於標題的正下方,是一個絕佳的廣告版面,有寫還是有被採用的機率,一般建議還是要寫。

HTML H1 Heading tag

H1 Heading是一個頁面的主要標題,它也是用來增加吸引力,引導訪客進一步瀏覽頁面的重要元素。

就像你進入一個新聞網站,新聞標題是非常重要的,但它的重要性主要是在影響訪客是否繼續往下瀏覽。

下一個層級的標題,則是使用H2 Heading。Header Tag是用來辨識一個頁面的關鍵區塊的方式,搜尋引擎將他們當成線索,來釐清一個頁面的內容。如果Header tag 包含關鍵字的話,對於排名也是略有幫助。

但有些網站將整個頁面放滿Header tag,或是在Header tag填充大量關鍵字,這種做法並沒有太大幫助。

HTML Image Alt Tag

Alt tag的範例如下:

<img src=”三星j7.gif” alt=”三星j7″>

理想的Alt tag也是描述性文字,只放關鍵字也可以。這個Tag是在告訴搜尋引擎,這張圖片的內容是什麼。這可以幫助你的圖片,在圖片搜尋的部分得到更高的排名。如果你的網站是電商網站的話,Alt是非常重要的。例如,假設今天的搜尋詞是商品規格表,這個圖片可能會將顧客導到你的網站。

網站優化 alt tag

較佳的Alt tag:

<img src=”三星手機j7.gif” alt=”三星手機j7完整規格表”>

因為這個Alt tag 的描述性更強,因此相對而言是更好的Alt tag。

 

不建議的用法:

<img src=”三星j7.gif” alt=””>

<img src=”三星j7.gif” alt=”手機,三星手機,三星j7,三星手機截圖”>

 

第一種是不含任何內容,第二種則是無意義的關鍵字填充。

 

Alt tag 不要用在裝飾性圖片,而是應該用在:

  • 商品圖案
  • 圖片
  • 資訊圖表
  • LOGO
  • 螢幕截圖
  • 團隊成員照片

 

HTML Nofollow Tag

Nofollow的範例如下:

<a href=”signin.php” rel=”nofollow”>sign in</a>

這個標籤是在告訴搜尋引擎,不要前往這個連結指向的頁面,也不要將這個連結列入權重。過去在使用Nofollow tag的主要原因,是不希望網站的Page Rank移轉給其他網站。而目前用到Nofollow tag的可能情況包括:你的網站可能有一些評論,是來自垃圾網站,此時你不希望網友前往這個連結;或例如這個頁面是註冊會員,就不需要邀請搜尋引擎前往這個連結了,關於nofollow的用法,可以參考Google官方的詳細說明

 

HTML 結構性資料(Structured data) SEO

什麼是結構性資料?Structured data 就好像是用搜尋引擎的語言,告訴搜尋引擎,網站的內容是什麼。作法就是透過一些標記(markup),讓搜尋引擎可了解頁面的內容和架構。根據Bing 2016年的研究顯示,只有17%的網站有使用結構性標記。https://advertise.bingads.microsoft.com/en-us/insights/prioritize-search-to-boost-roi

經過搜尋引擎的翻譯之後,結構性資料就成為了Google所說的"Rich snippet"。以電商網站為例,呈現的資訊就會更豐富,像是:評價、票數、商品價格、是否還在架上等等。

網站優化-結構化標記

以頁面排名來說,結構性資料並不算在排名因素,但它對於搜尋結果的點選率會有提升作用,會間接地影響到排名結果。

SEO入門9堂課:HOME

1—SEO新手必學第一課-搜尋引擎運作原理

2—SEO 搜尋引擎優化-網站排名的關鍵因素

3—SEO網站優化-如何規劃網站架構

4—SEO網站優化入門-行銷人必學HTML語法

5—內容行銷VS. SEO優化-缺一不可的網站排名密技

6—什麼是網站權重?網站權重與排名

7—什麼是反向連結?如何建立反向連結提升SEO排名

8—社交訊號(Social signal) 對SEO排名的影響

9—個人化搜尋(Personalization)對SEO排名的影響

Close Panel