SEO 基礎教學，2015年版。

1. SEO Basics
Summer Tang
2015 / 12 / 23

2. Agenda
• 為什麼要做SEO？
• SEO要怎麼做？
– 2015 SEO Ranking Factors
– 要做哪些事？
• 如何評估成效？
– 操作流程
– 成效檢驗
• 職務內容說明

3. 為什麼要做SEO？

4. SEO的成效
SEO可以達到什麼效果…
• 讓每個頁面都有流量貢獻
• 各頻道流量相輔相成(Organic、Referal、
Social、Direct)
– 能被搜尋到就有機會被參考、分享、再次瀏覽
• 吸引更多來自搜尋引擎的精準流量
來看一些實際範例…(以露天拍賣為例)

5. 搜尋關鍵字 – 小白襪 (1/2)

6. 搜尋關鍵字 – 小白襪 (2/2)
• 小白襪是一群設計師，專門創作關於台灣的明
信片、紙膠帶等文具產品，在露天拍賣、
Pinkoi 等電商網站都有販售。
• 關於「小白襪」的網頁與圖片搜尋
– 小白襪在露天拍賣上架的商品頁超過100頁，如何
讓更多小白襪的商品頁出現在SERPs上？
– 如何提高小白襪的露天商品頁的搜尋排名？
– 如何出現更豐富的資訊(例如：評價、麵包屑)，提
高使用者點擊的意願？
– 如何提高圖片搜尋帶入的流量？

7. 搜尋 – 小白襪 愛台灣 特價 (1/2)

8. 搜尋 – 小白襪 愛台灣 特價 (2/2)
關於搜尋字串「小白襪 愛台灣 特價」的網頁
與圖片搜尋結果
• 如何呈現讓使用者有興趣、設計過的資訊？
• 如何讓使用者在搜尋不精準或複雜的字串
時，讓SERPs呈現該廠牌或商品的頁面或圖
片？

9. 搜尋關鍵字 – 膳魔師 (1/2)

10. 搜尋關鍵字 – 膳魔師 (2/2)
關於「膳魔師」的搜尋結果
• 如何在眾多電商網站中脫穎而出，甚至得
到使用者的點擊？
• 如何搭上行銷或廣告專案順風車，爭取
SERPs的曝光和點擊？

11. SEO要怎麼做？

12. 2015 SEO Ranking Factors
從指標中挑重點來做
• Technical：站內優化，例如：切版、網址結構
• User Experience：使用者相關，例如：點擊率、
停留時間、RWD
• Content：文案撰寫，例如：關鍵字的佈局
• Backlinks：站外優化，例如：外部連結數量、
錨點文字
• Social Signals：社群分享，例如：Facebook

13. Technical
• 良好的HTML語義與結構有
助於搜尋引擎閱讀與理解
• Domain在SERPs上有高的
能見度、好的URL結構能
提升該URL的排名
• 網站速度愈快，排名愈高；
SERPs前10名的網站平均
載入時間是1.16秒
• 不要使用Flash

14. User Experience
• 內部連結能為搜尋引擎引路，增
加爬到的深層頁面
• 好的頁面除了切版結構正確外，
也包含圖片、影音、文字的適當
配置
• User Signals相關的因素大量影
響排名，例如：點擊率、網站停
留時間、跳出率
− 圖片、互動元素能提高使用
者停留時間
• 為行動裝置設計的頁面排名提升

15. Content
• 與搜尋字串相關度愈高的頁面，
排名愈高
• 關鍵字佈局的影響漸減，取而代
之的是Relevant Terms與Proof
Terms
• 「標籤」可達到Relevant
Terms、Proof Terms與
Keyword in internal links，可
達到推薦等目的。但不要過度操
作導致稀釋Keyword Density。

16. Content
Relevant Terms：與搜尋字串意
義相近的關鍵字。
例如：搜尋「牙醫」這個字串，
可能會得到一個介紹牙醫診所的
頁面。這個頁面除了擁有關鍵字
「牙醫」外，也會有「齒科」、
「補牙」等。
「齒科」、「補牙」 就是「牙醫」
的近似辭彙。

17. Content
Proof Terms：搜尋這個字串，
搜尋結果中的頁面大量包含的關
鍵字。
例如：搜尋「Ranking Factors」
這個字串，搜尋結果的頁面大量
包含「SEO」、「Google」。
「SEO」、「Google」就是
「Ranking Factors」的Proof
Terms。

18. Backlinks

19. Social Signals

20. 實行SEO的目的/原則
總結Ranking Factors的重點，實行SEO的目
的/原則：
• Crawlable 好爬：權重分明、引路清楚
• Understandable 好懂：讓使用者、搜尋引
擎能快速了解頁面重點
• Findable 好找：易於使用者分享、搜尋
(Organic Search)或連結到(External Link)

21. Crawlable 好爬
Crawlable 好爬：讓搜尋引擎索引更多頁面
• RSS定期提交最新產出的頁面給Webmaster Tool
✓ 告知有新的頁面產出，快點來爬
✓ 宣告為原創者
• 網頁權重區分明確，意即適當分配網站資源
✓ 愈接近首頁的頁面，愈容易被爬到
✓ 重要頁面離首頁愈近
✓ 增加內部連結的關聯數：愈多連結連到的(深層)頁面，愈容
易被點擊，愈容易被爬到
✓ 可用標籤達成
• Webmaster Tool的URL參數必須明確設定，讓搜尋引
擎正確理解哪些是相同/不同的頁面，讓SERPs出現正確
的頁面

22. RSS提交給 Webmaster
讓搜尋引擎索引更多頁面 (1/2)

23. RSS提交給 Webmaster
讓搜尋引擎索引更多頁面 (2/2)

24. 標籤 (1/2)

25. 標籤 (2/2)
標籤可達到的
Ranking Factors
• Click-through
rate
• Number of
internal links
• Time on site
• Presence of
unordered list
• Bounce rate
• Relevant Terms
• Keyword in
internal links
• Proof Terms

26. 明確設定URL參數

27. Understandable 好懂
Understandable 好懂：讓使用者、搜尋引擎
更容易讀懂頁面內容
• 良好的HTML語義與結構
• 結構化資料：直接標記重點所在
• Social Meta Tags：社群平台分享優化
• 行動裝置最佳化
• 網站速度
• 良好的URL結構

28. 良好的HTML語義與結構
語義化(Semantics)：寫HTML就好像在寫一篇文章，好的
語義化網頁能讓搜尋引擎快速、精準讀懂頁面內容，並反
應到SERPs上
• Title Tag
• Meta Description
• HTML5 Semantic Elements
• Heading Tags, Sections and Outlines
• Images & Videos
• <a> anchor text and title
• nofollow
• 重複內容

29. Title Tag
• 定義文件的標題，例如：
<title>文件標題</title>
• 標題必須精準描述頁面內容，便於使用者和搜尋引
擎了解頁面主題
• 建議格式
- 主關鍵字 - 次關鍵字 - 品牌名或站名
- 主關鍵字 | 次關鍵字 | 品牌名或站名
- 範例：小白襪外太空看見台灣 | 明信片 | 露天拍賣
• 字數建議：英文70字，中文30字(以下)
- SERPs字數限制
- 社群平台分享優化

30. Meta Description
• 定義文件的摘要，例如：
<meta name=“description” content=“...”>
摘要必須精準描述頁面內容，便於使用者和搜尋引擎了
解頁面主題，否則會被搜尋引擎替換掉
• 一般會在撰寫文案時，先選三組關鍵字來撰寫標題、描
述
– 關鍵字：小白襪、明信片、露天拍賣
– 標題：小白襪外太空看見台灣 | 明信片 | 露天拍賣
– 描述：愛台灣的小白襪出新的明信片了！就在露天拍賣獨賣！
• 字數建議：英文150字，中文70字(以下)
– SERPs字數限制
– 社群平台分享優化

31. • <header>
• <nav>：導航列
• <aside>：側邊
欄
• <main>：主內容
• <section>：段落
• <article>：論壇、
部落格或新聞文
章
• <footer>
HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

32. HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

33. HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

34. HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

35. HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

36. HTML5 Semantic Elements
<header>
<nav>
<main>
<article>
<section>
<article>
<footer>
<aside>

37. Heading Tags, Sections and
Outlines
• 頁面段落結構、標題分明
有助於開發者、搜尋引擎
或輔助工具(例如：閱讀機)
快速精準讀懂重點
• Multiple <h1> ：<h1>
不再只保留給頁面標題，
也可以是段落標題
Outline

38. Images & Videos
• <img> alt：圖片搜尋引擎依照<img> alt
來理解圖片的主題
• Video and audio: 加入字幕檔，協助搜尋
引擎理解影音檔的內容

39. <a> anchor text and title
• <a> anchor text：連結中可視且可被點擊
的文字
• <a> anchor text應與連結頁面相關
• 若無法使用anchor text，可用title屬性代
替。

40. nofollow
• nofollow：告訴搜尋引擎不要爬這個連結
– 不希望搜尋引擎爬這個頁面
– 頁面不需要被搜尋到，避免出現在SERPs上競
爭使用者點擊
– 不確定外連連結品質，不希望搜尋引擎將本站
與外連網站做關聯

41. 重複內容 (1/2)
• 重複內容(Duplicate Content)：相同內容卻有不同的
URL
• 重複內容的缺點
– 競爭SERPs的點擊
– 對於同一個Domain下，
大量的重複內容可能會遭Google從
SERPs永久移除此網站的所有連結
• Google不罰的重複內容
– 論壇：由於討論類似的主題或引言，
論壇同時會有重複內容的情形
– 購物網站：相同商品在不同網站販賣，
但商品資訊是相同的
– 為列印或行動裝置而設定的網頁版本
圖片來源：MOZ - Duplicate Content
https://moz.com/learn/seo/duplicate-content

42. 重複內容 (2/2)
重複內容的處理方式
• 301 Redirect：更新文章或換網址時，使用永久轉址來做轉址的動作
• 一致的URL格式：有些重複內容的出現是因為網址格式的不同所導致
其實它們都是指向同一個頁面，例如：
– http://site.com/page
– http://site.com/page/
– http://site.com/page/default.htm
• 確定要使用的domain，例如要使用"http://www.site.com" 或
"http://site.com"
• “rel=”canonical”：告知搜尋引擎與某特定頁面內容相同，不需要爬此頁
<link rel="canonical" href="http://site.com/index.html">
適用於：
– 列印版本頁面
– 由於告知搜尋引擎不爬此頁，因此也可避免該頁出現在SERPs上競爭使用
者點擊
• 根本解法：避免重複內容

43. 301 Redirect
圖片來源：MOZ - Redirection
https://moz.com/learn/seo/redirection

44. Rel="canonical"
圖片來源：MOZ - Redirection
https://moz.com/learn/seo/redirection

45. 結構化資料 (1/7)
Promote Your Content with Structured Data Markup
• 結構化資料(Structure Data)：在HTML上使用
Schema所規定的資料格式，讓搜尋引擎讀懂
頁面內容，使得搜尋結果顯示更豐富的資訊。
• 特點
– 三大搜尋引擎(Google、Bing、Yahoo) 皆採用
– 在搜尋結果上呈現更豐富的資訊，吸引目標使用者
的點擊，亦即更多來自搜尋引擎的精準流量
• 格式
– Microdata
– JSON-LD

46. 結構化資料 (2/7)
• 可標記的網頁元素 (更多可參考 schema.org)
– Header：Logo、首頁網址
– 導航列
– 側邊欄
– 麵包屑
– 文章區塊
– 標籤
– Footer
• 可標記的內容類型
– 商品
– 食譜
– 電影、商店或餐廳評價
– 活動

47. 結構化資料 (3/7)
商品列表
麵包屑或標籤
評價

48. 結構化資料 (4/7)
活動

49. 結構化資料 (5/7)
Microdata

50. 結構化資料 (6/7)
JSON-LD

51. 結構化資料 (7/7)
驗證
Google Structured Data Testing Tool
https://developers.google.com/structured-data/testing-tool

52. Social Meta Tags & Validators (1/3)
• 常用Social Meta Tags
– Facebook：Open Graph Tags
– Twitter ： Twitter Cards
– Google+： Shema
✓Google Search Engine使用的標籤與Google+相同
✓優化Google+即優化Google Search Engine
• 使用Social Meta Tags的目的
– 提高使用者點擊的意願，將流量從社群平台帶回網
站
– 指定分享文字(標題、描述)、圖片、網址，在社群
平台呈現較佳的效果，以改善使用者體驗、商業曝
光

53. Social Meta Tags & Validators (2/3)

54. Social Meta Tags & Validators (3/3)
Facebook URL Debugger
HTML Snippet

55. 行動裝置最佳化
• 2015年開始，Google對於沒有針對行動裝置
優化的網站，降低排名
• 在行動裝置上搜尋，有針對行動裝置做優化的
網站，提高排名
• 行動版網站搜尋引擎最佳化指南
https://developers.google.com/webmaster
s/mobile-sites/mobile-seo/?hl=zh-tw
• 行動裝置相容性測試
https://www.google.com/webmasters/tool
s/mobile-friendly/

56. 網站速度
• 網站速度愈快，排名愈高
• SERPs前10名的網站平均載入時間是1.16秒

57. 良好的URL結構
• 優點
– 語義：幫助使用者與搜尋引擎了解網頁主題
– 關聯： URL上的關鍵字與title與內容互相有關聯，可提高排名
– 連結：當連結上的錨點文字與URL有關聯時，可提高排名
• 避免
– 網址一律用小寫
– 使用「 - 」 分隔字串。但過多「 - 」 會被當成keyword stuffing
– 超過2048字元，會導致IE無法讀取頁面
– 少用get參數，且不超過2個
• 範例
http://www.example.com/category-
keyword/subcategory-keyword/primary-keyword.html
• 太多黑帽SEO對網址下手，所以URL的Ranking Factor的比重
愈來愈低

58. Findable 好找
Findable 好找：增加頁面之間的連結&關鍵字密
度
• 頁面內容被搜尋引擎正確讀懂
– 頁面與文案撰寫
• 容易被搜尋、連結或點擊
– Backlink(外站->本站)
– Outbound link(本站->外站)
– Social Platform的分享：Facebook(讚、分享、留
言)、Google+(+1、分享)
– RSS提交，有效出現在SERPs上
– 搜尋排名前面，容易被點閱

59. 如何評估成效？

60. 操作流程
檢查
Organic
Search
流量、比
例、來源
檢視
Google
索引狀況
檢查
Webma
ster
關鍵字點
閱率
優化頁面
結構、調
整文案、
Webma
ster設定

61. 成效檢驗 - 檢視Google索引狀況 (1/2)
• 用site:domain檢查該網域下的索引量

62. 成效檢驗 - 檢視Google索引狀況 (2/2)
• 使用Webmaster工具
穩定成長的網站，被index到的site量是不斷增加的

63. 成效檢驗 - 檢查Organic Search流量、比例、
來源 (1/2)

64. 成效檢驗 - 檢查Organic Search流量、比例、
來源 (2/2)

65. 成效檢驗 - 檢查Webmaster 關鍵字
點閱率

66. 成效檢驗 – 總結
成效檢驗的重點
• 網站是否穩定成長
• Organic Search流量是否穩定成長、總流
量結構正確？
• 搜尋分析的關鍵字的點閱率經營成效是否
符合期待？是否落實佈局？

67. 職務內容說明

68. 職務內容說明
SEO是跨部門/跨職務的事
• 行銷企劃/PM
• 視覺設計師
• 前端工程師

69. 行銷企劃/PM在SEO裡的工作是？
• 頁面設計需圖(影音)文並茂
• 增加社群平台的分享元件、內容提供
• 配合Rich Snippet規劃
• 設計讓SEO有更好成效的功能，例如：標籤
• 主題與關鍵字的分析、訂定
• 主要文案撰寫、提供
• 提供Title、Description、Heading Tags、
Image、連結說明文案、哪些連結nofollow
• 可支持關鍵字的資源、廣告的評估與分配

70. 視覺設計師在SEO裡的工作是？
• 主圖尺寸可配合社群平台規格
• 互動元素的設計

71. 前端工程師在SEO裡的工作是？
讓搜尋引擎有效讀懂網頁內容，提升時效性和準
確度
• Title Tag、Meta Description的配置
• 良好的HTML語意與結構
– HTML5 Semantic Elements
– Heading Tags, Sections and Outlines
– Images alt
– <a> anchor text and title
• 結構化資料撰寫與測試
• Social Meta Tags撰寫與測試

72. 總結

73. 總結
• 如何提高露天商品頁的搜尋排名？
– 參考Ranking Factors優化網站
• 如何將深層頁面呈現在SERPs上？
– RSS
– 增加內部連結數：標籤、推薦功能
• 如何出現更豐富的資訊，提高使用者點擊
的意願？
– 使用結構化資料標記頁面

74. 總結
• 如何讓使用者在搜尋不精準的字串時，讓
SERPs呈現該廠牌或商品的頁面或圖片？如
何搭上行銷或廣告專案順風車，爭取SERPs
的曝光和點擊？
– 關鍵字經營
– 使用標籤，增加Relevant/ Proof Terms
• 如何呈現讓使用者有興趣、設計過的資訊？
– 良好的內容 + 網站優化

75. 總結 - SEO可以做什麼…
• 提高網站/網頁的搜尋排名
• 提高Organic Search流量
• 帶入Organic Search的精準流量
• 與Social、Referral、Direct或其他平台(例
如：Mobile Web/App)流量相輔相成
• 實現零元行銷，在搜尋階段即推銷商品
• 配合未來行銷策略