O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

SEO Basics

1.032 visualizações

Publicada em

SEO 基礎教學,2015年版。

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

SEO Basics

  1. 1. SEO Basics Summer Tang 2015 / 12 / 23
  2. 2. Agenda • 為什麼要做SEO? • SEO要怎麼做? – 2015 SEO Ranking Factors – 要做哪些事? • 如何評估成效? – 操作流程 – 成效檢驗 • 職務內容說明
  3. 3. 為什麼要做SEO?
  4. 4. SEO的成效 SEO可以達到什麼效果… • 讓每個頁面都有流量貢獻 • 各頻道流量相輔相成(Organic、Referal、 Social、Direct) – 能被搜尋到就有機會被參考、分享、再次瀏覽 • 吸引更多來自搜尋引擎的精準流量 來看一些實際範例…(以露天拍賣為例)
  5. 5. 搜尋關鍵字 – 小白襪 (1/2)
  6. 6. 搜尋關鍵字 – 小白襪 (2/2) • 小白襪是一群設計師,專門創作關於台灣的明 信片、紙膠帶等文具產品,在露天拍賣、 Pinkoi 等電商網站都有販售。 • 關於「小白襪」的網頁與圖片搜尋 – 小白襪在露天拍賣上架的商品頁超過100頁,如何 讓更多小白襪的商品頁出現在SERPs上? – 如何提高小白襪的露天商品頁的搜尋排名? – 如何出現更豐富的資訊(例如:評價、麵包屑),提 高使用者點擊的意願? – 如何提高圖片搜尋帶入的流量?
  7. 7. 搜尋 – 小白襪 愛台灣 特價 (1/2)
  8. 8. 搜尋 – 小白襪 愛台灣 特價 (2/2) 關於搜尋字串「小白襪 愛台灣 特價」的網頁 與圖片搜尋結果 • 如何呈現讓使用者有興趣、設計過的資訊? • 如何讓使用者在搜尋不精準或複雜的字串 時,讓SERPs呈現該廠牌或商品的頁面或圖 片?
  9. 9. 搜尋關鍵字 – 膳魔師 (1/2)
  10. 10. 搜尋關鍵字 – 膳魔師 (2/2) 關於「膳魔師」的搜尋結果 • 如何在眾多電商網站中脫穎而出,甚至得 到使用者的點擊? • 如何搭上行銷或廣告專案順風車,爭取 SERPs的曝光和點擊?
  11. 11. SEO要怎麼做?
  12. 12. 2015 SEO Ranking Factors 從指標中挑重點來做 • Technical:站內優化,例如:切版、網址結構 • User Experience:使用者相關,例如:點擊率、 停留時間、RWD • Content:文案撰寫,例如:關鍵字的佈局 • Backlinks:站外優化,例如:外部連結數量、 錨點文字 • Social Signals:社群分享,例如:Facebook
  13. 13. Technical • 良好的HTML語義與結構有 助於搜尋引擎閱讀與理解 • Domain在SERPs上有高的 能見度、好的URL結構能 提升該URL的排名 • 網站速度愈快,排名愈高; SERPs前10名的網站平均 載入時間是1.16秒 • 不要使用Flash
  14. 14. User Experience • 內部連結能為搜尋引擎引路,增 加爬到的深層頁面 • 好的頁面除了切版結構正確外, 也包含圖片、影音、文字的適當 配置 • User Signals相關的因素大量影 響排名,例如:點擊率、網站停 留時間、跳出率 − 圖片、互動元素能提高使用 者停留時間 • 為行動裝置設計的頁面排名提升
  15. 15. Content • 與搜尋字串相關度愈高的頁面, 排名愈高 • 關鍵字佈局的影響漸減,取而代 之的是Relevant Terms與Proof Terms • 「標籤」可達到Relevant Terms、Proof Terms與 Keyword in internal links,可 達到推薦等目的。但不要過度操 作導致稀釋Keyword Density。
  16. 16. Content Relevant Terms:與搜尋字串意 義相近的關鍵字。 例如:搜尋「牙醫」這個字串, 可能會得到一個介紹牙醫診所的 頁面。這個頁面除了擁有關鍵字 「牙醫」外,也會有「齒科」、 「補牙」等。 「齒科」、「補牙」 就是「牙醫」 的近似辭彙。
  17. 17. Content Proof Terms:搜尋這個字串, 搜尋結果中的頁面大量包含的關 鍵字。 例如:搜尋「Ranking Factors」 這個字串,搜尋結果的頁面大量 包含「SEO」、「Google」。 「SEO」、「Google」就是 「Ranking Factors」的Proof Terms。
  18. 18. Backlinks
  19. 19. Social Signals
  20. 20. 實行SEO的目的/原則 總結Ranking Factors的重點,實行SEO的目 的/原則: • Crawlable 好爬:權重分明、引路清楚 • Understandable 好懂:讓使用者、搜尋引 擎能快速了解頁面重點 • Findable 好找:易於使用者分享、搜尋 (Organic Search)或連結到(External Link)
  21. 21. Crawlable 好爬 Crawlable 好爬:讓搜尋引擎索引更多頁面 • RSS定期提交最新產出的頁面給Webmaster Tool ✓ 告知有新的頁面產出,快點來爬 ✓ 宣告為原創者 • 網頁權重區分明確,意即適當分配網站資源 ✓ 愈接近首頁的頁面,愈容易被爬到 ✓ 重要頁面離首頁愈近 ✓ 增加內部連結的關聯數:愈多連結連到的(深層)頁面,愈容 易被點擊,愈容易被爬到 ✓ 可用標籤達成 • Webmaster Tool的URL參數必須明確設定,讓搜尋引 擎正確理解哪些是相同/不同的頁面,讓SERPs出現正確 的頁面
  22. 22. RSS提交給 Webmaster 讓搜尋引擎索引更多頁面 (1/2)
  23. 23. RSS提交給 Webmaster 讓搜尋引擎索引更多頁面 (2/2)
  24. 24. 標籤 (1/2)
  25. 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. 26. 明確設定URL參數
  27. 27. Understandable 好懂 Understandable 好懂:讓使用者、搜尋引擎 更容易讀懂頁面內容 • 良好的HTML語義與結構 • 結構化資料:直接標記重點所在 • Social Meta Tags:社群平台分享優化 • 行動裝置最佳化 • 網站速度 • 良好的URL結構
  28. 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. 29. Title Tag • 定義文件的標題,例如: <title>文件標題</title> • 標題必須精準描述頁面內容,便於使用者和搜尋引 擎了解頁面主題 • 建議格式 - 主關鍵字 - 次關鍵字 - 品牌名或站名 - 主關鍵字 | 次關鍵字 | 品牌名或站名 - 範例:小白襪外太空看見台灣 | 明信片 | 露天拍賣 • 字數建議:英文70字,中文30字(以下) - SERPs字數限制 - 社群平台分享優化
  30. 30. Meta Description • 定義文件的摘要,例如: <meta name=“description” content=“...”> 摘要必須精準描述頁面內容,便於使用者和搜尋引擎了 解頁面主題,否則會被搜尋引擎替換掉 • 一般會在撰寫文案時,先選三組關鍵字來撰寫標題、描 述 – 關鍵字:小白襪、明信片、露天拍賣 – 標題:小白襪外太空看見台灣 | 明信片 | 露天拍賣 – 描述:愛台灣的小白襪出新的明信片了!就在露天拍賣獨賣! • 字數建議:英文150字,中文70字(以下) – SERPs字數限制 – 社群平台分享優化
  31. 31. • <header> • <nav>:導航列 • <aside>:側邊 欄 • <main>:主內容 • <section>:段落 • <article>:論壇、 部落格或新聞文 章 • <footer> HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  32. 32. HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  33. 33. HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  34. 34. HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  35. 35. HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  36. 36. HTML5 Semantic Elements <header> <nav> <main> <article> <section> <article> <footer> <aside>
  37. 37. Heading Tags, Sections and Outlines • 頁面段落結構、標題分明 有助於開發者、搜尋引擎 或輔助工具(例如:閱讀機) 快速精準讀懂重點 • Multiple <h1> :<h1> 不再只保留給頁面標題, 也可以是段落標題 Outline
  38. 38. Images & Videos • <img> alt:圖片搜尋引擎依照<img> alt 來理解圖片的主題 • Video and audio: 加入字幕檔,協助搜尋 引擎理解影音檔的內容
  39. 39. <a> anchor text and title • <a> anchor text:連結中可視且可被點擊 的文字 • <a> anchor text應與連結頁面相關 • 若無法使用anchor text,可用title屬性代 替。
  40. 40. nofollow • nofollow:告訴搜尋引擎不要爬這個連結 – 不希望搜尋引擎爬這個頁面 – 頁面不需要被搜尋到,避免出現在SERPs上競 爭使用者點擊 – 不確定外連連結品質,不希望搜尋引擎將本站 與外連網站做關聯
  41. 41. 重複內容 (1/2) • 重複內容(Duplicate Content):相同內容卻有不同的 URL • 重複內容的缺點 – 競爭SERPs的點擊 – 對於同一個Domain下, 大量的重複內容可能會遭Google從 SERPs永久移除此網站的所有連結 • Google不罰的重複內容 – 論壇:由於討論類似的主題或引言, 論壇同時會有重複內容的情形 – 購物網站:相同商品在不同網站販賣, 但商品資訊是相同的 – 為列印或行動裝置而設定的網頁版本 圖片來源:MOZ - Duplicate Content https://moz.com/learn/seo/duplicate-content
  42. 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. 43. 301 Redirect 圖片來源:MOZ - Redirection https://moz.com/learn/seo/redirection
  44. 44. Rel="canonical" 圖片來源:MOZ - Redirection https://moz.com/learn/seo/redirection
  45. 45. 結構化資料 (1/7) Promote Your Content with Structured Data Markup • 結構化資料(Structure Data):在HTML上使用 Schema所規定的資料格式,讓搜尋引擎讀懂 頁面內容,使得搜尋結果顯示更豐富的資訊。 • 特點 – 三大搜尋引擎(Google、Bing、Yahoo) 皆採用 – 在搜尋結果上呈現更豐富的資訊,吸引目標使用者 的點擊,亦即更多來自搜尋引擎的精準流量 • 格式 – Microdata – JSON-LD
  46. 46. 結構化資料 (2/7) • 可標記的網頁元素 (更多可參考 schema.org) – Header:Logo、首頁網址 – 導航列 – 側邊欄 – 麵包屑 – 文章區塊 – 標籤 – Footer • 可標記的內容類型 – 商品 – 食譜 – 電影、商店或餐廳評價 – 活動
  47. 47. 結構化資料 (3/7) 商品列表 麵包屑或標籤 評價
  48. 48. 結構化資料 (4/7) 活動
  49. 49. 結構化資料 (5/7) Microdata
  50. 50. 結構化資料 (6/7) JSON-LD
  51. 51. 結構化資料 (7/7) 驗證 Google Structured Data Testing Tool https://developers.google.com/structured-data/testing-tool
  52. 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. 53. Social Meta Tags & Validators (2/3)
  54. 54. Social Meta Tags & Validators (3/3) Facebook URL Debugger HTML Snippet
  55. 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. 56. 網站速度 • 網站速度愈快,排名愈高 • SERPs前10名的網站平均載入時間是1.16秒
  57. 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. 58. Findable 好找 Findable 好找:增加頁面之間的連結&關鍵字密 度 • 頁面內容被搜尋引擎正確讀懂 – 頁面與文案撰寫 • 容易被搜尋、連結或點擊 – Backlink(外站->本站) – Outbound link(本站->外站) – Social Platform的分享:Facebook(讚、分享、留 言)、Google+(+1、分享) – RSS提交,有效出現在SERPs上 – 搜尋排名前面,容易被點閱
  59. 59. 如何評估成效?
  60. 60. 操作流程 檢查 Organic Search 流量、比 例、來源 檢視 Google 索引狀況 檢查 Webma ster 關鍵字點 閱率 優化頁面 結構、調 整文案、 Webma ster設定
  61. 61. 成效檢驗 - 檢視Google索引狀況 (1/2) • 用site:domain檢查該網域下的索引量
  62. 62. 成效檢驗 - 檢視Google索引狀況 (2/2) • 使用Webmaster工具 穩定成長的網站,被index到的site量是不斷增加的
  63. 63. 成效檢驗 - 檢查Organic Search流量、比例、 來源 (1/2)
  64. 64. 成效檢驗 - 檢查Organic Search流量、比例、 來源 (2/2)
  65. 65. 成效檢驗 - 檢查Webmaster 關鍵字 點閱率
  66. 66. 成效檢驗 – 總結 成效檢驗的重點 • 網站是否穩定成長 • Organic Search流量是否穩定成長、總流 量結構正確? • 搜尋分析的關鍵字的點閱率經營成效是否 符合期待?是否落實佈局?
  67. 67. 職務內容說明
  68. 68. 職務內容說明 SEO是跨部門/跨職務的事 • 行銷企劃/PM • 視覺設計師 • 前端工程師
  69. 69. 行銷企劃/PM在SEO裡的工作是? • 頁面設計需圖(影音)文並茂 • 增加社群平台的分享元件、內容提供 • 配合Rich Snippet規劃 • 設計讓SEO有更好成效的功能,例如:標籤 • 主題與關鍵字的分析、訂定 • 主要文案撰寫、提供 • 提供Title、Description、Heading Tags、 Image、連結說明文案、哪些連結nofollow • 可支持關鍵字的資源、廣告的評估與分配
  70. 70. 視覺設計師在SEO裡的工作是? • 主圖尺寸可配合社群平台規格 • 互動元素的設計
  71. 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. 72. 總結
  73. 73. 總結 • 如何提高露天商品頁的搜尋排名? – 參考Ranking Factors優化網站 • 如何將深層頁面呈現在SERPs上? – RSS – 增加內部連結數:標籤、推薦功能 • 如何出現更豐富的資訊,提高使用者點擊 的意願? – 使用結構化資料標記頁面
  74. 74. 總結 • 如何讓使用者在搜尋不精準的字串時,讓 SERPs呈現該廠牌或商品的頁面或圖片?如 何搭上行銷或廣告專案順風車,爭取SERPs 的曝光和點擊? – 關鍵字經營 – 使用標籤,增加Relevant/ Proof Terms • 如何呈現讓使用者有興趣、設計過的資訊? – 良好的內容 + 網站優化
  75. 75. 總結 - SEO可以做什麼… • 提高網站/網頁的搜尋排名 • 提高Organic Search流量 • 帶入Organic Search的精準流量 • 與Social、Referral、Direct或其他平台(例 如:Mobile Web/App)流量相輔相成 • 實現零元行銷,在搜尋階段即推銷商品 • 配合未來行銷策略

×