web develop

SEO 結構化資料指南

結構化資料是一種標準化格式,它提供網頁相關資訊並將網頁內容分類,有助於優化搜索引擎SEO。 即使網頁已正確加上標記,Google 也不能保證結構化資料一定會出現在搜尋結果中使用結構化資料會「啟用」相關功能,但不「保證」該功能可正常顯示。Google 演算法會自行制定搜尋結果,提供使用者最佳的搜尋體驗,然而這類搜尋結果受多種因素影響,包含搜尋記錄、所在位置和裝置類型。在某些情況下,Google 可能會判別某項功能比另一項功能更加合適,甚至選定一般藍色連結為最佳結果。SEO 結構化資料支持的格式JSON-LD (建議)Microdata 微資料RDFa如何添加SEO 結構化資料雖然大部分的 Google 搜尋結構化資料都使用 schema.org 詞彙,但是針對

Web Accessibility 無障礙網頁

Web Accessibility 就是我們通常所說的無障礙網站,這裡的「障礙」包括了聽覺障礙、認知能力障礙、神經損傷、身體障礙、語言障礙和視覺障礙,這也是基本人權的一個方面。 Web Accessibility 的標準:WCAG 2.1 StandardWCAG 2.0 Standard各國關於 Web Accessibility 的法律與規範:ADA是美國的身心障礙者法案 Americans with Disabilities Act of 1990 (ADA) ,其中包括了對

Chrome 實驗性功能 CSS Overview

Chrome上了新的實驗性功能 CSS Overview,感覺對做網站前端十分有用,可以快速查閱網站上所使用的顏色、字體、未使用的css申明、定義的媒體查詢。 因為目前還是實驗性階段,所以需要手動啟用該功能。啟用CSS Overview 操作如下: 打開開發者工具,Mac上快捷鍵是Command+Option+I,Windows上快捷鍵是Control+Shift+I。打開開發者工具的設置,可以點擊開發者工具欄右上角的齒輪小圖標,或者,Mac上快捷鍵是Function+F1,Windows上快捷鍵是F1,找到 Experiments 點開。 啟用了CSS Overview功能之後就會在開發者工具欄上找到CSS Overview的標籤。 點擊

瀏覽器自動填充autocomplete

瀏覽器自動填充功能已經流行很久了,用戶因此可以快速填充註冊表單節省時間。 Autocomplete標籤包含了一些基本的值,包括tel,email,number,name等。 例如自動填充電話號碼: <label for="frmPhoneNumA">Phone</label> <input type="tel" name="phone" id="frmPhoneNumA"