[{"data":1,"prerenderedAt":274},["ShallowReactive",2],{"post-\u002Fblog\u002Fseo":3,"post-surroundings":240},{"id":4,"title":5,"body":6,"date":226,"description":227,"desktopCover":26,"extension":228,"isPopular":229,"meta":230,"mobileCover":231,"navigation":232,"path":233,"seo":234,"slug":233,"stem":235,"tags":236,"__hash__":239},"blog\u002Fblog\u002Fseo.md","SEO 與前端最佳實踐：讓搜尋引擎看見你的網站",{"type":7,"value":8,"toc":219},"minimark",[9,20,199,202],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"SEO（搜尋引擎最佳化）不只是給搜尋機器看的技術活，也是提升使用者體驗的關鍵環節。前端工程師如果能在開發過程中同步考量 SEO，不僅能增加流量，也能讓使用者更快找到他們想要的內容。接下來從 HTML、CSS、JavaScript 三大面向，帶你掌握最實用的前端 SEO 技巧。",[10,21,22,27,31,104,147,188],{},[23,24],"prose-img",{"alt":25,"src":26},"前言圖片","\u002Fdesktop\u002Fblog\u002Fseo.webp",[13,28,30],{"id":29},"打好基礎htmlcssjavascript","打好基礎：HTML、CSS、JavaScript",[32,33,34,39,49,54],"content-block",{},[35,36,38],"h3",{"id":37},"html-與語意化","HTML 與語意化",[17,40,41,45,48],{},[42,43,44],"strong",{},"為何重要",[46,47],"br",{},"\n良好的 HTML 結構能幫助搜尋引擎理解頁面層次與內容重點，並同時提升可及性與結構化資料的運用。",[17,50,51],{},[42,52,53],{},"建議做法",[55,56,57,73,94,101],"ul",{},[58,59,60,61,65,66,69,70,72],"li",{},"嚴格遵循層級使用 ",[62,63,64],"code",{},"\u003Ch1>","～",[62,67,68],{},"\u003Ch6>","，且頁面唯一 ",[62,71,64],{}," 放文章主標題。",[58,74,75,76,79,80,79,83,79,86,89,90,93],{},"使用 ",[62,77,78],{},"\u003Carticle>","、",[62,81,82],{},"\u003Csection>",[62,84,85],{},"\u003Cnav>",[62,87,88],{},"\u003Caside>"," 等語意化標籤，不濫用 ",[62,91,92],{},"\u003Cdiv>","。",[58,95,96,97,100],{},"圖片必須加上 ",[62,98,99],{},"alt"," 屬性，確保搜尋機器與讀屏軟體都能讀到。",[58,102,103],{},"為重要區塊加入長尾關鍵字，並在第一個段落中自然出現一次主關鍵。",[32,105,106,110,117,121],{},[35,107,109],{"id":108},"css-與效能最佳化","CSS 與效能最佳化",[17,111,112,114,116],{},[42,113,44],{},[46,115],{},"\n首屏渲染速度（FCP）是 SEO 排名指標之一，減少 CSS 體積與阻塞可以讓搜尋機器更快抓到可見內容。",[17,118,119],{},[42,120,53],{},[55,122,123,134,137],{},[58,124,125,126,129,130,133],{},"將關鍵 CSS inline 至 ",[62,127,128],{},"\u003Chead>","，其餘樣式放在 ",[62,131,132],{},"\u003Clink rel=\"preload\">"," 或 async 載入。",[58,135,136],{},"使用 PurgeCSS、Tailwind 的 JIT 或其他 tree-shaking 工具，移除未使用的樣式。",[58,138,139,140,79,143,146],{},"利用媒體屬性（",[62,141,142],{},"media=\"print\"",[62,144,145],{},"media=\"(max-width:…)","）分流 CSS，避免不必要的阻塞。",[32,148,149,153,160,164],{},[35,150,152],{"id":151},"javascript-與結構化資料","JavaScript 與結構化資料",[17,154,155,157,159],{},[42,156,44],{},[46,158],{},"\n過度依賴客戶端渲染（CSR）會讓搜尋爬蟲無法即時取得內容。結構化資料（JSON-LD）能幫助搜尋引擎顯示豐富摘要（Rich Snippets），提高點擊率。",[17,161,162],{},[42,163,53],{},[55,165,166,169,185],{},[58,167,168],{},"採用 SSR\u002FSSG（例如 Nuxt、Next.js），確保原始 HTML 即含主要內容。",[58,170,171,172,174,175,79,178,79,181,184],{},"在 ",[62,173,128],{}," 中注入 JSON-LD 架構化資料，宣告 ",[62,176,177],{},"Article",[62,179,180],{},"BreadcrumbList",[62,182,183],{},"WebPage"," 等。",[58,186,187],{},"優化初始 JS 載入，減少首次互動時間（TTI），讓爬蟲能快速抓取 DOM。",[189,190,191],"blockquote",{},[17,192,193,196,198],{},[42,194,195],{},"小結：",[46,197],{},"\n透過語意化 HTML、CSS 最佳化，以及 SSR + 架構化資料三大手法，你可以在搜尋引擎與使用者眼中都成為贏家。從前端起手，打造高能見度的網站！",[13,200,201],{"id":201},"延伸閱讀",[55,203,204,209,214],{},[58,205,206],{},[42,207,208],{},"Nuxt Content SEO 教學：動態產生 Meta 與 Sitemap",[58,210,211],{},[42,212,213],{},"Lighthouse 優化指南：提升 Core Web Vitals 表現",[58,215,216],{},[42,217,218],{},"結構化資料實作範例：JSON-LD 與 Schema.org",{"title":220,"searchDepth":221,"depth":221,"links":222},"",2,[223,224,225],{"id":15,"depth":221,"text":15},{"id":29,"depth":221,"text":30},{"id":201,"depth":221,"text":201},"2024-05-01","即使你的網站擁有優美的介面與強大的功能，如果在搜尋引擎上找不到它，那就形同隱形。身為前端工程師，瞭解基本的 SEO 概念與技術是讓網站脫穎而出的關鍵。這篇文章將分享我在前端實作時，常用的 SEO 小技巧與實務做法，幫助你顯著提升網站曝光度。","md",false,{},"\u002Fmobile\u002Fblog\u002Fseo.webp",true,"\u002Fblog\u002Fseo",{"title":5,"description":227},"blog\u002Fseo",[237,238],"SEO","網頁曝光","9x9Sf5ZFgZ7wdxSBJkYTQ0qFG5LwSTqyDXQTLP5Ey7A",[241,244,247,250,253,256,259,262,265,266,269,271],{"slug":242,"path":242,"date":243},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":245,"path":245,"date":246},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":248,"path":248,"date":249},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":251,"path":251,"date":252},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":254,"path":254,"date":255},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":257,"path":257,"date":258},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":260,"path":260,"date":261},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":263,"path":263,"date":264},"\u002Fblog\u002Fgit","2024-05-04",{"slug":233,"path":233,"date":226},{"slug":267,"path":267,"date":268},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":270,"path":270,"date":268},"\u002Fblog\u002Ftypescript",{"slug":272,"path":272,"date":273},"\u002Fblog\u002Funit-test","2024-02-07",1793785242393]