Breadcrumb in schema: https://schema.org/breadcrumb
Breadcrumb in WebSchema: https://www.w3.org/wiki/WebSchemas/Breadcrumbs
Breadcrumb in WAI: https://www.w3.org/WAI/tutorials/menus/multiple-ways/
Breadcrumb in WHATWG: https://html.spec.whatwg.org/multipage/scripting.html#rel-up
Breadcrumb in HTML5: https://developer.mozilla.org/en/docs/Web/HTML/Element/nav
事實上這一系列講到這邊已經錯縱複雜了, 就像是 JSON-LD 是架構在 Linked Data 上, Linked Data 上是須要在 Microdata (Schema) 定義, WAI 也是用這些去建立起來, 而這些都是基於在 HTML (HTML5) 上, 而這些又須要 HTTP 的通訊協定才能運作, 說是已經寫成白紙黑字的標準, 有時能夠運作也是架構在許多的可能性與乎略很多複雜度才能實作的.
前一篇談到 Linked Data, 也講到 JSON-LD 是種實作, 而上面又有 LDP (Linked Data Platform) 與 JSON-LD API 的發展, 這些完全是必要知道的, 但說說跟 SEO 有很大的相關, 多少也是強說愁, 因為有那些內容與型式, 甚至是經營跟 SEO 是無關的呢?
但這邊想從 Schema, W3C, WAI, WHATWG 等等的實作中, 拉出一個很重要的概念, 就是 Breadcrumb (麵包屑), 以及所屬的 Navigation / Menu 等等的概念.
在現在的 SEO 角度來看, 能夠讓使用者繼續看下去的網站就是好的網站, 因為太多的網站都是看一頁就離開, 不是因為已經獲得解答, 而是無法獲得資訊的網站, 能夠讓使用者更進一步的得到他想要的資訊, 也就是一個網頁若能夠有好的 CTR (Click through Rate), 往往代表這個網站的價值較高, 因此對 SEO 是很好的訊號 (Signal) 或因素 (Metics).
而一個網站可以分成主要兩種頁面, 一個是內容頁, 一個是中間頁, 而中間頁包含:
1. 首頁
2. 分類頁
3. 搜尋頁
4. 標籤頁
5. 功能頁
而這些頁面的交互關係, 靠得就是連結, 而這個產生連結的方式有很多種, 就 HTML5 的角度定義了幾種:
1. Header
2. Navigation (nav)
3. Sidebar (aside)
4. foooter
5. section
以及真正的 article, 而其中的 Navigation 就是包含 menu, catalogue, breadcrumb 等等的方式, 而較具有跟這頁有直接關係可以看得出來的就是麵包屑, 麵包屑是可以清楚讓使用者知道這網頁所在的位置, 與上下層關係, 甚至是路逕.
當時的 Practice 是建議用這三種方式去實作:
而在 HTML5 之後, 麵包屑無論是用甚麼方式呈現, 都要用 <nav> 將之包起來, 像下面那樣..
在 WAI 中, 更希望加入 role, class 與 aria-label, 如下:
事實上在 Schema 與 JSON-LD 的實作下, 也該是如此:
看到這邊, 大家會不會覺得一個簡單的麵包屑, 居然如此的博大精深, 真的到處都存在, 因為事實上在 SERP 中, 已經早就導入這概念, 包含前面說的 News 的 Section.
這系列講的是 SEO 與標準的關係, 就講到這邊, 但事實上麵包屑是相當重要的事, 無論就 Semantic Web, 就 Data Mining, 就 Tag (標籤), 分類的角度, 都有不同的思維, 但說穿了這些都是為了建立知識, 讓資訊串起來, 只要是人在做資訊獲取 (Information Retrievaling), 這件事永遠跑不掉.
訂閱:
張貼留言 (Atom)
熱門文章
-
這個交大機車的故事不是在講交大很機車, 而是交大為甚麼能夠騎機車的故事... 甚麼? 很多人認為交大校園有一個條機車外環道是天經地義的事? 事實上不然, 這是經過許多抗爭得來的, 因為上一篇哈巴狗事件有很多回響, 所以我這篇來繼續講古. 機車在交大可以說是個文化, 尤其以前竹東算...
-
有時我總對自己做的東西沒甚麼信心, 從 Plurk.tw 一直到做了很多延伸的應用, 尤其自己知道美工排版不行, 所以常找人合作, 其中一個東西就是 "噗熱浪"... 事實上 Plurk.tw 比 Plurktop 還早做, 當然我們這邊只能從發文說開始運作開...
-
在系統調校的一開始, 我一定會問大家一個問題: "系統負荷 60% 是過高還是過低呢? 系統負荷 6% 是過高還是過低呢?" 當然這個 "過高過低" 指的是一種不正常的現像, 而在之前要有一個前提: "何謂不正常?", ...
-
總統府網站雖然相較很多網站並不是那麼重要, 但也因為其特殊性以及政治立場的角色, 是很容易一直被拿出來討論的, 至少這幾天就 Alexa 的觀點來看, 從 3000 名外進到 3000 名內 (見右圖), 流量也瞬間多了四倍, 也可以當作是一個小型的壓力測試了.. 至少這段時間也...
-
我是不做 "Me,too" 的, 但我知道粉絲團經營最重要的共同指標, 一個是觸及數, 另一個是互動數, 但這數字只有經營者知道, 即使從洞察報告可以看到你加觀察的幾個粉絲團, 最近文章的互動狀況, 但還是離真的狀況有點距離, 除外粉絲團可以比較的就是 ...
-
我們都知道網路詐騙是一個很嚴重的問題, 不下於假新聞, 雖然這些事都不是在網路上獨特的社會現像, 因為在現實社會這些欺騙的事層出不窮, 但透過網路的高效率散播, 有時比現實社會來得嚴重. 在臉書投廣告, 大部份都是須要透過粉絲團來操作, 若是我們能夠 "定位...
-
目前已知道 Formula/Equation 是: 1. Unemployment: ind*3+com-pop (分母是Pop) 2. Transportation: tra*5+100-pop (分母是Pop) 3. Criminality: sec*4+300-pop (分...
-
專頁儀表板除了作為社群編輯的工具外,更想做的是想要成為 "透過社群來了解社會" 的儀表板,因此對於 "屬性" 上做了各個面相的定義,除了常見的分類外,更重要的是依立場,議題來去 "標籤"。 因此會有 "...
-
這幾天,公布了台南與高雄這兩個地方的民進黨內部的電話民調,雖然這跟真的投票沒有絕對關係,但做民調是很花成本的,當然除非有內參保密民調與對外公開民調外,民調還是很有效的 "政治工具"。 談論人數一直是很好的指標,尤其是在選舉的時候,因為選舉最後決勝負是得票數...
-
一些無聊晃進來的朋友應該有發現, 左上角多了幾個之前沒看過的 gadget, 因為我又開始做無聊事了... 看到許多人裝 Google Friend Connect, 而我個人對較為開放的 Protocol 是採較為正面的態度, 所以就裝起來玩玩看, 覺得這是一個可以發展的東西,...
沒有留言:
張貼留言