SEO

網頁渲染(Rendering)是將 HTML、JavaScript、資料等代碼，轉換為使用者肉眼可見網頁畫面的過程。 從網頁開發的角度中，渲染通常涉及將資料和網頁模板結合，生成最終顯示在瀏覽器中的 DOM(Document Object Model)結構。 渲染的方式有很多，雖然對使用者而言都大同小異，都是點擊網頁後，等待頁面載入後看到畫面。但不同渲染方式背後的處理邏輯、影響卻大不相同。 渲染處理得好不好，會直接影響到UX、SEO 與伺服器效能。 目前在網頁開發上，主要有 4 種頁面渲染技術， 每種方式在資料傳遞與適用情境上都略有差異。 渲染方式 全名 中文名稱 CSR Client-Side Rendering 客戶端渲染 SSR Server-Side Rendering 伺服器端渲染 SSG Static Site Generation 靜態網站生成 ISR Incremental Static Regeneration 增量靜態重新生成 本文會介紹以上提及的 4 種渲染方式，並且以 React 框架開發網頁為範例說明。 客戶端渲染 CSR CSR(Client-Side Rendering)是將所有的渲染工作交由瀏覽器(客戶端)進行，伺服器僅提供一個基礎的 HTML 文件，瀏覽器通過 JavaScript 動態渲染呈現畫面，能透過 API 取得資料，並且更新頁面內容。 CSR 的特色是能對於伺服器的負擔較小，可以將部分的網頁載入需求分配給瀏覽器完成，因此對瀏覽器負擔較大，畫面的載入時間也會相對較慢。 由於多數的網路爬蟲、搜尋引擎爬蟲都是直接透伺服器跟網站 request 網頁資料，直接透過對方 response … Read more

本文會介紹如何優化 Google 的網站體驗核心指標 (CWV)。 Google 搜尋於 2020 年 5 月宣布公佈了新的體驗指標：網站體驗核心指標 (Core Web Vitals) 來評估網頁的使用者體驗。 隨著 Google 演算法技術發展純熟，Google 也從傳統「理解內容」的演算法，進階到「理解體驗」的層次。究竟 Core Web Vitals 是如何評估使用者體驗呢？ 網站體驗核心指標(Core Web Vitals)是什麼？ 網站體驗核心指標(Core Web Vitals)是 Google 於 2020 年推出的指標，用來測量訪客在頁面的瀏覽體驗狀況。 Google 研究員歸納出了載入效能、互動性、視覺穩定性三大方向，評估網頁的體驗好與不好，而這三大方向也衍伸為網站體驗的三大核心指標：LCP、CLS、INP。 每個核心指標的檢查結果都有良好、需要改善、不良三個區間，網站中若是有過多的頁面體驗不良，就可能要擔心體驗分數輸給其他競爭對手的頁面而影響到排名！以下會個別介紹每個指標所代表的含義與改善方法。 Google 官方也有提供通俗白話版的 Core Web Vitals 介紹影片，竟然是全程用台語解說 (是的，你沒聽錯)，對於台灣人而言真的親切感十足！ LCP 最大內容繪製 最近想要買家電，於是到了某購物網站挑選，不知道是不是購物網站的資料太龐大了，每次切換新網頁，都要約 5 秒我才能看到產品的介紹畫面⋯⋯這網站真的跑很慢！我看還是去其他網站下單好了！ 當你使用瀏覽器打開網頁時，網頁從開始等待畫面載入，直到主要畫面 (最大內容) 載入完成，這段過程所需要的時間，被稱為最大內容繪製 (LCP, Largest Content Paint)。 「最大內容」是指網頁中最大的內容元素，瀏覽器畫面中的最大內容最能吸引訪客注意，因此其載入時間絕對攸關使用者體驗的好壞。 … Read more

最近有讀者向我問了個有趣的問題：「有沒有辦法讓搜尋結果中，顯示的都是自己網站的內容？」 在操作 SEO 時，我們會根據不同的關鍵字設計相對應的頁面與內容，期望網站能在各個關鍵字的搜尋結果中能曝光。 那問題來了，有沒有辦法讓網站在首頁出現兩筆、甚至更多的網頁，讓首頁都被我的品牌給攻佔？ 要釐清這個問題，我們得先從理解 Google 搜尋演算法開始。 一個網站在首頁中最多能顯示幾筆結果？ 早期 Google 搜尋並未對「同網站的出現筆數」進行限制，只要網頁的相關性夠強，Google 便會將頁面納入排名，因此一個網站可能同時有多個頁面顯示在首頁。 而為了增加搜尋的多樣性，避免結果受到單一網站壟斷，Google 已於 2019 年 6 月在 Twiter 宣布調整搜尋結果的顯示，對於相同網域的內容，首頁最多只會顯示兩筆結果。 Google 是使用網域區分不同網站，但官方同時也語帶保留，如果網域中仍然有更多相關性的內容，還是有可能顯示兩篇以上。 子網域也會被視為網域的一部分 Google 也表示在搜尋結果調整後，子網域會被視為網域的一部分，同時受到搜尋多樣性的影響。當然同時官方也補充說明，只要相關性夠高，仍然有可能會被視為是不同的網站。 共用子網域的痞客邦會受到影響嗎？ 痞客邦是台灣部落客常用平台，由於痞客邦的部落格會共用 pixnet.net 的網域，因此對 Google 來說，所有部落格們都會被視為整個痞客邦的一部分，那首頁的結果會因為共用 pixnet.net 而只顯示兩筆內嗎？是的，也使用類似技術共用網域的網站皆會受到影響。 但子網域的內容若差異夠大，也未必會受到網域的限制。 例如在「地區＋旅遊心得」的搜尋結果中，仍然有五筆痞客邦結果在首頁的情形，這些子網域的內容差異過大，因此被 Google 當作成不同的網站： 大多數狀況是：一個網站只顯示一筆結果 雖然官方表示首頁最多顯示兩筆結果，但實際觀察大部分狀況，網站在同個關鍵字只有一個頁面會被索引到，能有兩個頁面已經是相關困難的操作，除非你是該領域最具代表性的網站。 例如開頭「循環扇」的案例：Google 判斷購物網站中「10-16吋單頭循環扇」與「4-9吋單頭循環扇」這兩個頁面除了內容不同外，同時具備了內容相關性高、解決使用者的不同搜尋意圖等條件。 滿足以上要件，因此 Google 才會顯示兩筆購物網站的結果。 如何增加網站在首頁的曝光機會？ 既然 Google 限制了同網域在搜尋結果中顯示的頁面筆數，那要如何盡可能的在「同個關鍵字」中爭取更多的曝光機會，被更多人所看見呢？ 使用不同網域操作同關鍵字 既然同個網域不管用，那換個網域不就沒事了。許多網站會透過不同的網域經營子品牌或將產品或服務獨立經營，這些網站都可以用來作為攻佔排名的組成。 經營多個網域也意味者要花費更多的成本，在行銷預算有限的情況下，務必要衡量操作的效益。 善用媒體與部落客資源 有非常多的媒體與部落格是 Google … Read more

網址名稱如同網路上的地址，由於會在瀏覽器中出現、常被用於分享或轉貼連結，在視覺與使用者體驗上有一定的重要性。因此本文會介紹網址有關的大小事。 網址的組成 圖片來源：What is a URL? Example & Structure of URL 一個網址 (URL, Uniform Resource Locator) 通常由以下幾個部分組成： 網址的使用規範 注意大小寫與全半形 在網址中，大小寫字母會被視為不同的字符，因此使用大小寫混合可能導致不同網址指向不同網頁。 為了避免混淆和潛在的技術問題，建議在所有網址中統一使用小寫字母。此外，為了保持一致性，也建議網址中避免使用全形字符或特殊字符，這有助於減少技術問題。 大部分標點符號無法使用 在設計網址時，應避免使用大部分標點符號，特別是空格、下劃線（_）、以及其他特殊符號。 如果需要分隔單字，建議使用連字號（dash, -）來分隔單字，可以使網址更能清楚閱讀，Google 官方也建議在網址中使用連字號分隔單字。 網址結尾有無 / 網址結尾是否有斜線（/）應當保持一致。不論選擇結尾使用斜線還是去掉斜線，統一的規範有助於避免重複內容問題。為了避免使用者或 Google 爬蟲進入錯誤的頁面，建議設定 301 轉址，確保所有進入無斜線（/）或有斜線的網址都能正確轉址到標準版本。 網址層級與網站結構 在設計網站時，網址的層級應該清楚對應網站的結構，代表網址的每一層應對應網站的相同層級。 例如：一個購物網站有 產品分類 / 產品子分類 / 產品頁面 三個層級，網址就應該呈現為：/category/sub-category/product-name，才能讓網址有良好的導覽體驗。 網址該如何命名？ 網址命名時應注意以下幾個要點，以確保對使用者和搜尋引擎友善： 該使用中文網址命名嗎？ 這題沒有正確答案，先說結論：本人支持使用英文命名網址。以下分享使用中文網址命名的優缺點： 使用中文網址的優點 為什麼要使用中文網址呢？不外乎是為了更適合中文使用者閱讀：中文網址能更直接、清晰地表達頁面的內容，例如：https://www.example.com/最新消息 比 https://www.example.com/latest-news 更能讓中文使用者快速知道這是「最新消息」的頁面。使用者在看到中文網址時可能會有熟悉與親切感，會有更好的本地化瀏覽體驗。 使用中文網址的缺點 網址名稱是排名因素嗎？ 是排名因素，但隨著搜尋引擎的進化，影響程度變得非常非常小。Google 的 … Read more

撰寫完頁面內容後，若想讓網頁在搜尋引擎中能有更高的排名，就必須針對網頁與特定關鍵字執行 On-Page SEO 的優化工作。 本文會介紹 On-Page SEO 在 SEO 工作中扮演的角色，以及完整的 On-Page SEO 優化項目，讓你用最快的方式為網頁與文章加值！ On-Page SEO 是什麼？ On-Page SEO，也可稱為頁面 SEO，顧名思義就是優化所有網頁中的搜尋引擎排名因素，進而讓搜尋引擎更容易理解你的網頁主題。 SEO 的優化項目種類繁多，其中 On-Page SEO 是最容易學習、適合行銷人員與內容編輯入門的領域。 「內容為王」這句話想必大家都有聽過，搜尋引擎爬蟲在查看網頁時，同樣也將內容視為最重要的排名因素。 搜尋引擎如何理解頁面內容？ 不同於我們用肉眼看到的畫面，爬蟲首先看到的是 HTML、CSS 與 JavaScript 等網頁語言（前端語言），再將這些代碼解析成我們在瀏覽器上所看到的畫面。故在做 On-Page SEO 時，建議能具備基礎的網頁語言知識。 其中 HTML 在頁面 SEO 中最常被使用到，不熟悉的讀者可透過 W3School HTML Tutorial 學習基礎的 HTML。 On-Page SEO 優化項目 目標關鍵字 想在特定關鍵字的查詢結果中有排名，首要任務便是根據頁面上預計操作的關鍵字設計對應的文案： 【案例】根據關鍵字設計文案議題 網站撰寫了一篇「如何制定行銷策略」的文章，預計在「行銷策略」的搜尋結果有好的排名。 經由一系列的關鍵字研究後，認為文章需要提及到「內容行銷、行銷4P、STP、行銷策略種類」等議題，便在頁面中新增了相關內容。 如果在規劃文案時有考量到關鍵字的概念，此步驟就可以快速檢查帶過。 關鍵字堆疊(Keyword stuffing)對排名沒有幫助 … Read more

對 SEO 還不太熟悉、不知道如何學習 SEO 嗎？本文適合初出茅廬的行銷人員與剛接觸 SEO 的新手閱讀，一起打開 SEO 的知識大門吧！ SEO 是什麼？ SEO(Search Engine Optimization)全名為「搜尋引擎優化」。 是指透過研究搜尋引擎的排名因素，使用各種方法提升網站在搜尋結果中的排名，讓網站更容易被搜尋引擎的使用者所看見、進站瀏覽並達成行銷目標。 現代人有使用搜尋引擎找資訊的習慣，使用搜尋引擎的人也隨著網路普及逐年成長，為了透過搜尋引擎達成行銷目標，SEO 這門行銷學科便就此誕生了。 SEO 通常在討論 Google 搜尋引擎 上圖為 2021 年的全球搜尋引擎市佔率，透過資料得知目前以 Google 搜尋引擎為大宗(92%)，其次為 Bing 搜尋引擎(2.58%)、Yahoo!(1.49%)、百度(1.46%)。可見在搜尋引擎的市場上，Google 這隻巨獸已經吞噬了大部分的搜尋資源。 由於 Google 佔了市場的絕大多數，以下或未來討論所有的 SEO 知識與技術，通常都以 Google 搜尋引擎為準。當然能做 SEO 的場域不是只有 Google：網站在中國曝光你得做百度 SEO；隨著網紅影音的發展， Youtube SEO 也慢慢成為顯學；做跨境電商的人們也在討論 Amazon SEO⋯⋯ 簡單來說，只要是能夠給使用者搜尋的場域，它就有機會變成 SEO 的戰場。 搜尋引擎的運作模式 SEO 談的是搜尋引擎，因此在認識 SEO之前，建議先了解搜尋引擎的運作邏輯。以下為 Google 官方的影片為前 Google … Read more

網頁標題元素 (Title) 用來簡短說明網頁的內容。標題除了是 SEO 重要的排名因素外，當使用搜尋引擎時，網頁標題也是在首個呈現在搜尋者面前的資訊。 為了提供使用者更優質的搜尋體驗，Google 在 2021 年 8 月中旬調整了網頁標題的判斷系統，在這次的更新中調整了哪些機制？網站主又該如何因應新的標題系統？ 這些都是本次更新 SEO 操作者們在意的問題。本文會帶讀者們認識本次標題系統的調整內容，以及如何應對此次更新。 更新前的 Google 如何調整網頁標題？ 網頁標題的內容並非設定什麼，搜尋結果中就會完整呈現。早在 2012 年 Google 便使用替代標題的演算法，修改搜尋結果中表現不佳的標題。 頁面被 Google 索引、收錄進搜尋引擎後，當使用者搜尋相關字詞時，舊版的系統會根據使用者搜尋的關鍵字，在搜尋結果中調整標題的文字。 因此同個頁面使用不同的關鍵字搜尋，從搜尋結果中顯示的網頁標題可能會長的不一樣。 舊版系統主要針對未設定網頁標題、明確無描述性的標題（例如：標題只寫「首頁」兩個字）使用替代標題。 當時的 Google 對於標題判斷的技術尚未純熟，大多數的網頁標題如果沒有過度填充關鍵字，並不會被搜尋引擎修改。 新版的網頁標題產生機制介紹 根據 Google 官方的說明，新版系統會參考「網頁中的資訊」調整標題，包含頁面中的主要文字、H1 文字、最顯眼的內容，都有可能會影響網頁標題的內容。 官方也表示新版的標題通常不會因為搜尋字詞而改變，無論使用者搜尋什麼關鍵字，結果顯示的網頁標題都會是相同的。 新版的標題系統上線後，許多網友都表示網站各頁面標題有受到影響，當然案例中的 Ranking 網站也成為了此次更新的受災戶，以 Ranking 的 SEO 網站檢測頁面為例： 乍看之下可能為網頁標題過長，並使用了多次「SEO」與「網站」，因此被搜尋引擎使用了主要文字當作標題。 當然還是有頁面沒有受到影響。以 Ranking 的 SEO 服務頁面為例： 在系統調整後，網頁標題雖然也提到了三次的「SEO」，但未受到標題系統影響。 新舊版本標題系統差異 透過這次修改與比較新舊差異，我們可以得到以下結論： 新的標題系統會影響排名嗎？ 網頁的標題被系統修改了，會不會影響排名表現？ 好消息是：不會。 … Read more