免安裝外掛！一鍵檢視網頁 SEO 與標題結構的免費書籤小工具｜WOOSTX

免安裝外掛！一鍵檢視網頁 SEO 與標題結構的免費書籤小工具

在進行網站 SEO 優化、內容審查或是競品分析時，你是不是也常常需要檢查網頁的 Meta 標籤、網頁標題（Title），以及階層分明的 H1 至 H6 結構呢？

市面上雖然有許多 Chrome 擴充功能可以達成這個目的，但對於不希望瀏覽器安裝過多外掛、或是常常需要在不同電腦、不同瀏覽器環境下快速作業的數位行銷人與網站管理者來說，每次都要重新安裝外掛往往不夠直覺與便利。

今天就要向大家分享一款由 WOOSTX 吾思拓客所設計的實用小工具——「SEO 書籤網頁檢視器」。這是一個利用 JavaScript 書籤（Bookmarklet）原理打造的輕量化檢視工具，完全不需要安裝任何外掛或額外軟體，只要透過簡單的拖曳，就能在任何網頁上一鍵呼叫出 SEO 與標題結構面板！

為什麼你需要這個 SEO 書籤小工具？

對於日常需要頻繁檢視網頁原始碼與架構的專業工作者來說，這款工具具備了以下幾項核心優勢：

• 完全免安裝，輕量且安全：不佔用瀏覽器記憶體，不需額外下載插件，只需利用瀏覽器內建的書籤列功能即可運作。

• 跨平台與多瀏覽器支援：無論是在主流的 Google Chrome、Microsoft Edge 或是其他現代瀏覽器上都能完美運行。

• 一鍵即開即關：在任何網頁點擊書籤，即可立即在畫面右側展開精美的檢視面板，不干擾正常瀏覽。

• 結構化資訊一目了然：自動抓取並呈現網頁核心 SEO 資訊。

核心功能特色介紹

這款小工具在點擊後，會在頁面右側展開一個不干擾視覺、具備質感深色風格的資訊面板，主要包含兩大區塊：

1. 核心 Meta 與標題資訊即時抓取

• 網頁標題 (Title)：直接讀取當前頁面的 <title> 內容，方便確認字數與吸睛度是否符合優化標準。

• 網頁描述 (Description)：即時檢視 meta name="description" 內容，確保搜尋引擎結果頁（SERP）的摘要是否完整。

• 關鍵字 (Keywords)：快速掌握網頁設定的關鍵字標籤。

2. 完整 H1 至 H6 標題結構樹（Heading Structure Tree）

• 自動掃描網頁中所有的 <h1> 到 <h6> 標籤。

• 以清晰的階層縮排與標籤樣式（如 H1, H2, H3...）呈現。

• 點擊結構樹中的項目即可快速對應或檢視網頁層級，是檢測文章架構、有無發生標題斷層（例如 H1 直接跳 H3）的最佳利器。

如何安裝與使用「SEO 書籤網頁檢視器」？

安裝過程非常簡單，只需要花費你 3 秒鐘的時間：

顯示書籤列：如果你的瀏覽器沒有顯示書籤列，請按下快捷鍵（Windows: Ctrl + Shift + B 或 Mac: Cmd + Shift + B）將書籤列叫出來。

1.將已下反白複製

2.在書籤建立連結

3.名稱可以自行輸入好辨識的 如:查看網頁SEO

4.將剛剛複製的貼在網址

使用步驟：

1. 隨便瀏覽任何一個你想分析的網頁或你自己的部落格文章。

2. 點擊瀏覽器書籤列上的 「SEO 檢視器」。

   

3. 畫面右側會立即浮現SEO資訊與架構面板；若想關閉，點擊右上角的「X」或專屬按鈕即可隨時收合。

   ---

SEO 優化是一場需要細心與效率的持久戰。透過這款輕量的書籤檢視工具，無論是部落客、網站設計師、數位行銷顧問或是 SEO 從業人員，都能在日常瀏覽網頁時隨手檢驗架構，省去開啟開發者工具（F12）尋找原始碼的繁瑣步驟。

如果你覺得這個工具對你的工作有幫助，歡迎分享給身邊從事行銷與網站經營的朋友，一起打造更高效的優化工作流程！

備註

以下複製在書籤網址

javascript:function seo_windows_close(){document.querySelector("seoContent").setAttribute("style","display:none;");var e=document.createElement("open_seo_button");e.setAttribute("style","display:block;position:fixed; top:5px; right:10px; z-index:100; width:130px; padding:5px 20px; border-radius:20px; background:#000; color:#fff; cursor:pointer; text-align:center; font-size:18px"),e.setAttribute("onClick","seo_windows_open()");var t=document.createTextNode("Open SEO Conent");e.appendChild(t),document.querySelector("body").appendChild(e)}function seo_windows_open(){document.querySelector("seoContent").setAttribute("style","display:block;z-index:9999;position:fixed;max-width:300px;top:0;right:0;max-height:100%;padding:10px 10px 50px 10px;overflow-y:scroll;box-sizing: border-box;background:#333;color:#fff;box-shadow:0px 0px 5px rgba(0,0,0,0.2);line-height:1.4em;font-size:12px;");document.createElement("open_seo_button");document.querySelector("open_seo_button").setAttribute("style","display:none;")}!function(){function e(t,o){var n=["padding:5px 0 0 5px;","padding:5px 0 0 10px;","padding:0 0 0 10px;","padding:0 0 0 10px;","padding:0 0 0 10px;","padding:0 0 0 10px;"],i=["font-size:14px;font-weight:bold;color:#fff;","font-size:12px;font-weight:bold;color:#fff;","font-size:10px;font-weight:bold;color:#ccc;","font-size:10px;color:#ccc;","font-size:10px;color:#999;","font-size:10px;color:#999;"],r="";r+='<ul style="padding:0;'+(0===o?"":"margin:0 0 0 5px;border-left:solid 1px #666;")+'">';for(var d=0;d<t.length;d++){if(r+='<li style="'+n[o]+'margin:0;text-align:left;list-style:none;">',Array.isArray(t[d]))r+=e(t[d],o+1);else{var l="A"+p++;r+='<a href="#'+l+'" style="'+i[o]+'margin:0;text-decoration:none;">',r+='<span style="display:inline-block;background:#666;color:#333;padding:1px;margin:0 2px 0 0;">'+t[d].tagName+"</span>",t[d].innerText?r+=t[d].innerText+"</a>":r+=t[d].textContent+"</a>",l=t[d].getAttribute("id")?t[d].getAttribute("id"):l,t[d].setAttribute("id",l)}r+="</li>"}return r+="</ul>"}function t(e){var t=document.querySelector("meta[name="+e+"]");return t?t.getAttribute("content"):""}if(!window.g4fdD5){window.g4fdD5=1;for(var o=document.querySelectorAll("h1,h2,h3,h4,h5,h6"),n=0,i=[],r=i,d=[null,null,null,null,null,null],l=0;l<o.length;l++)!function(e,t){if(n>t)d[t]&&(r=d[t]);else if(n<t){var o=[];r.push(o),r=o}r.push(e),d[t]=r,n=t}(o[l],o[l].tagName.charAt(1)-1);var p=0,s="";s+='<div style="background:#000;margin:-10px;margin-bottom:10px;padding:10px;font-size:12px;">',s+='<div style="color:#ffcc00;font-weight:bold;font-size:13px;margin-bottom:4px;">WOOSTX 設計- SEO 書籤網頁檢視器</div>',s+='<div style="color:#666;">網頁標題 (Title)</div>',s+='<span class="seo_float_win_close" style="width:20px;height:20px;font-size:15px;text-align:center;line-height:1.5;background-color:#fff;border-radius:20px;color:#000;position:fixed;top:0;right:12px;z-index:100;cursor:pointer;" onClick="seo_windows_close();">X</span>',s+='<div style="color:#fff;font-size:14px;font-weight:bold;">'+document.title+"</div>",s+='<div style="color:#666;">網頁描述 (Description)</div>',s+='<div style="color:#aaa;">'+t("description")+"</div>",s+='<div style="color:#666;">關鍵字 (Keywords)</div>',s+='<div style="color:#aaa;">'+t("keywords")+"</div>",s+="</div>",s+=e(i,0);var a=document.createElement("seoContent");a.innerHTML=s,a.setAttribute("style",function(){var e="z-index:9999;position:fixed;max-width:300px;top:0;right:0;max-height:100%;padding:10px 10px 50px 10px;";return e+="overflow-y:scroll;box-sizing: border-box;",e+="background:#333;color:#fff;box-shadow:0px 0px 5px rgba(0,0,0,0.2);line-height:1.4em;font-size:12px;"}()),document.querySelector("body").appendChild(a)}}();