第 12 堂｜分清上線、索引與圖片檢查
使用自己的公開網址設定網站地圖，換一張較小但像素相同的圖片，辨認noindex故障。
公開可讀、抓取與索引是不同檢查
表格分開公開、抓取與索引，實際欄未冒填。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- 自己的公開URL或待測、robots／sitemap樣板、匿名教材報告
有公開URL不代表已索引；robots也不能當作私人資料權限。參考網站地圖的樣板網址必須換成自己的。
一起拆解：能開啟，不代表已被搜尋找到
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
自己的HTTPS首頁回200；作品頁搜尋報告仍顯示尚未索引。
HTTP可讀：200
robots.txt：Allow: /
作品頁meta：沒有誤加noindex
sitemap：自己的完整HTTPS網址這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先開公開網址確認實際內容與HTTP狀態，不用localhost代替。
- 分別核對robots抓取規則、meta索引設定及sitemap網址；四欄不是同一件事。
- 把已知可讀、仍未知索引原因、需補的報告日期分開填。
正常應看到
只能說公開頁可讀及設定已核對；索引狀態仍依實際報告觀察。
常見錯誤對照
robots.txt不是登入防護；樣板student-site.example不會變成自己的公開網址。
先預測，再說明原因
首頁可讀但未索引時，能否直接填「SEO已成功」？需要補什麼證據？
跟著觀察
- 先讀「能開啟，不代表已被搜尋找到」的輸入，指出本關實際檔案或資料。
- 首頁可讀但未索引時，能否直接填「SEO已成功」？需要補什麼證據？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 表格分開公開、抓取與索引，實際欄未冒填。
- 能指出指定檔案與作用範圍。
先把檢查證據排清楚
表格分開公開、抓取與索引，實際欄未冒填。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- 自己的公開URL或待測、robots／sitemap樣板、匿名教材報告
參考版使用student-site.example樣板。先讀指南，再對自己的副本填真實公開網址；公開測試未做填待測。
跟著做
- 下載本堂設定工具與樣板，保留自己的正常副本。
- 請AI產技術檢查表，不替你捏造HTTP或索引成功。
- 親手填自己的URL並核對sitemap，未公開項目保持待測。
建立SEO技術檢查表
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- 自己的公開URL或待測、robots／sitemap樣板、匿名教材報告
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI產技術檢查表，不替你捏造HTTP或索引成功。
- 發布前填自己的完整URL；無URL時明列待測。
- 4．自己檢查結果
- 表格分開公開、抓取與索引，實際欄未冒填。
- 發布前填自己的完整URL；無URL時明列待測。
建立SEO技術檢查表 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第11堂正常作品集。參考版robots.txt／sitemap.xml使用student-site.example明確樣板，學生必須填自己的HTTPS公開網址才可發布；本教材未替學生部署或取得搜尋報告。提供Google官方文件、匿名虛構報告及photo-03圖片的無損WebP副本，所有未知公開結果保留待測。
本次任務：依附檔、自己的公開URL（未提供就列待補）、robots/sitemap樣板及匿名教材報告，產一份公開狀態、抓取、noindex、網站地圖、圖片與手機檢查表。每項列依據、預期、實際待填與證據。student-site.example是待替換樣板，不宣稱已部署；不改無證據設定，不把匿名教材報告當我的結果。解釋robots非權限、未索引非未上線，命令只用提供的configure-sitemap指南。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
圖片引用要改到實際資料位置
只改photo-03圖片路徑並帶齊本機檔。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
作品已由projects.js產生，改HTML裡不存在的img不會生效。無損轉碼保留像素，仍須核對檔案體積與實際顯示。
一起拆解：圖片由資料決定路徑
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
photo-03目前使用assets/work-layout.jpg，提供同圖無損WebP素材。
// projects.js只改這筆image
{ id:"photo-03", image:"assets/work-layout.webp" }這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先比較提供的原圖與WebP：相同畫面、像素，檔案體積不同。
- 只替換photo-03.image；把WebP放進同一份作品的assets，保留原JPG備份。
- 重整作品頁核對圖片請求與alt，搜尋、分類與其他六張仍正常。
正常應看到
第七件作品改讀WebP，圖片完整；提供素材的體積對照可另記實際檔案大小。
常見錯誤對照
只在HTML改一個不存在的img，JS重新渲染後不會用到那條修改。
先預測，再說明原因
如果忘了複製WebP，Network會先看到什麼？為何不能刪掉卡片掩蓋？
跟著觀察
- 先讀「圖片由資料決定路徑」的輸入，指出本關實際檔案或資料。
- 如果忘了複製WebP，Network會先看到什麼？為何不能刪掉卡片掩蓋？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 只改photo-03圖片路徑並帶齊本機檔。
- 能指出指定檔案與作用範圍。
少一點體積，保留同一張圖
只改photo-03圖片路徑並帶齊本機檔。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
親手比較原JPG與提供WebP的尺寸與位元組數。
跟著做
- 複製提供的WebP進自己的assets，原JPG保留。
- 只請AI改projects.js中photo-03的image。
- 重整找雨後街角，核對圖片、alt、尺寸與其他六筆保留。
只更新一筆作品圖片引用
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- projects.js、提供的work-layout.webp與原JPG、自己的體積紀錄
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 只請AI改projects.js中photo-03的image。
- 原圖、alt、摘要與其他引用完全保留。
- 4．自己檢查結果
- 只改photo-03圖片路徑並帶齊本機檔。
- 原圖、alt、摘要與其他引用完全保留。
只更新一筆作品圖片引用 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第11堂正常作品集。參考版robots.txt／sitemap.xml使用student-site.example明確樣板，學生必須填自己的HTTPS公開網址才可發布；本教材未替學生部署或取得搜尋報告。提供Google官方文件、匿名虛構報告及photo-03圖片的無損WebP副本，所有未知公開結果保留待測。
本次任務：只將projects.js中id=photo-03「雨後街角」的image由assets/work-layout.jpg改assets/work-layout.webp，使用附上的無損轉碼圖片；原JPG保留，alt、width/height、summary與其他資料不改。不在HTML補重複卡片，不重寫render或其他圖片。記錄提供素材50687→17808 bytes與像素960×640，學生自己的公開引用與手機結果待驗，不能宣稱已發布。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
只修已確認的索引設定錯誤
只移除明示故障的唯一meta，其他設定保留。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- fault-L12作品頁head、正常設定與公開用途說明
本故障明示公開作品頁誤加noindex。一般情況先確認用途，不能看見noindex就全部刪除，也不能承諾修完立即收錄。
一起拆解：移除誤加的noindex
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
公開作品頁的故障副本，多了<meta name="robots" content="noindex">。
<!-- 故障位於作品頁head；先確認本頁用途是公開作品 -->
<meta name="robots" content="noindex">這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先確認這不是私人管理頁；記錄實際meta與公開用途。
- 只移除這次誤加的標籤，保留其他head設定與公開規則。
- 重讀來源後才填設定已修；索引與排名維持待觀察。
正常應看到
來源中不再有誤加標籤，原頁面與功能不變。
常見錯誤對照
一律刪所有網站noindex會誤改不應公開的頁面，不能當通用修法。
先預測，再說明原因
刪標籤後立刻查不到作品，是否代表修復失敗？哪些結果需要等待？
跟著觀察
- 先讀「移除誤加的noindex」的輸入，指出本關實際檔案或資料。
- 刪標籤後立刻查不到作品，是否代表修復失敗？哪些結果需要等待？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
做完，自己確認
- 只移除明示故障的唯一meta，其他設定保留。
- 能指出指定檔案與作用範圍。
找到意外留下的noindex
只移除明示故障的唯一meta，其他設定保留。
先準備
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- fault-L12作品頁head、正常設定與公開用途說明
手動對照正常／故障head，記下多出的meta。
跟著做
- 獨立fault-L12開作品頁，核對多出的noindex與公開用途。
- 請AI只移除這一個意外標籤，列待補公開證據。
- 回歸原設定、圖片、搜尋與選單；真實索引持續待觀察。
移除已確認誤加的noindex
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的三頁HTML、完整styles.css、projects.js、navigation.js
- 修改前版本與本關來源資料；只處理自己的教學副本
- fault-L12作品頁head、正常設定與公開用途說明
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI只移除這一個意外標籤，列待補公開證據。
- 索引與公開結果沒有被假填成功。
- 4．自己檢查結果
- 只移除明示故障的唯一meta，其他設定保留。
- 索引與公開結果沒有被假填成功。
移除已確認誤加的noindex Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第11堂正常作品集。參考版robots.txt／sitemap.xml使用student-site.example明確樣板，學生必須填自己的HTTPS公開網址才可發布；本教材未替學生部署或取得搜尋報告。提供Google官方文件、匿名虛構報告及photo-03圖片的無損WebP副本，所有未知公開結果保留待測。
本次任務：獨立故障作品頁預定公開，head被誤加唯一<meta name="robots" content="noindex">。依附正常與異常head確認來源，只移除該意外標籤，不改title、description、robots.txt、sitemap或其他頁。不把所有noindex當錯，不保證何時索引；列公開URL、HTTP、抓取與實際報告日期仍需學生補證的項目及互動回歸。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
留下自己的檢查紀錄
記下實際做過的操作、差異與結果。還沒做的項目寫「待完成」。
勾選與筆記只保存在這個瀏覽器。
重設只清除勾選，網站檔案與檢查筆記都保留。