Breadcrumb，中文直譯是「麵包屑」，但此麵包屑不是真的麵包屑，而是指網頁導覽標記，亦稱為麵包屑導航。除了在視覺上幫助用家瀏覽網頁之外，亦是協助搜尋引擎理解網頁結構的一個重要工具。
Table of Contents
什麼是麵包屑導航？
麵包屑導航在很多地方均能發現，用以方便使用者理解現在所在位置的分類。例如Windows的檔案總管或Mac的Finder，均以麵包屑導航去標示正在瀏覽的資料夾屬於那個上層資料夾的。
麵包屑導航多是以「>」符號分隔，一層一層的記錄每層的關係。如以上的Finder breadcrumb，就是 「Mac」之下的「用戶」，再下一層就是「Offline文件」，最後是「Temp」。
以上面的HKTV mall頁面為例子，就是「大腦場」 ，下一層是「耳機耳筒」，然後是「藍芽耳機」。如果想瀏覽其他耳機商品，則只需點擊「耳機耳筒」則能返回上一層分類中瀏覽，方便操作。
題外話：麵包屑的故事
一直都很好奇，為何網頁導覽標記會稱為「麵包屑」。Wikipedia有提供一個很有趣的答案，先不說正確與否，但不得不說是很有意思。
麵包屑導覽是由起點到現在位置的標記，以上的答案表示找到回家的路的解釋很有意思，亦很能表達麵包屑導覽達到的效果，就是一步步回到起點。
麵包屑導覽非常重要
麵包屑導覽除了方便使用者瀏覽之外，另一個功用則是協助搜尋引擎理解網頁，亦即是常說的SEO。麵包屑導覽幫助搜尋引擎理解當前頁面屬於什麼，例如：
搜尋引擎就能知道當前頁面是「Udemy免費課程: How Google Analytics improve your marketing」，然後知道這是一個「Free Udemy Course」，而這個項目就是首頁內的一個頁面。這樣搜尋引擎就知道怎樣理解頁面，亦懂得該跟什麼頁面列為相關頁面，同時搜尋引擎亦懂得該如何去其他頁面找資料。
如何建立麵包屑導覽？
如果是使用Wordpress一類的建站套件，大多數的theme都會提供麵包屑導覽，如果沒有的話，則可以利用plugin完成設定，非常方便。
如果是使用bootstrap一類的UI framework，則可以直接利用framework提供的component去建設。
如果沒有使用Wordpress 或 framework 的話，則需要自行加於頁面中，當中有2種方法去設定。
第一種： Microdata
以上截圖來自Google的教學文件，以<ol>或<ul>配合<li>去組成「麵包屑導覽」，這對想於頁面加上視覺化的導覽列很有幫助。當中「itemtype=”https://schema.org/BreadcrumbList”」這個attr很重要，是用以告訴搜尋引擎，這個「麵包屑導覽」是一個麵包屑導覽。
第二種：JSON-LD
以上截圖同樣來自Google的教學文件，JSON-LD的好處是可以隨意放於頁面的任一位置，這些文字並不會顯示於頁面上，只會方便搜尋引擎於原始碼中閱讀。
這樣的程式碼看似很難建設，但其實網上有很多方便的工具去協助生產，其中一個很好用的就是Schema Markup Generator by Technical SEO。這個工具視覺化又能即時輸出結果。
如何測試麵包屑導覽
Google提供了很多工具協助SEO的設定，其中一個與麵包屑導覽相關的就是Google結構化資料測試工具，舊版的工具將會被淘汰，而要改為使用複合式搜尋結果測試去進行測試。
Google結構化資料測試
舊版工具比較直觀，點擊新測試輸入網址之後，就會顯示原始碼及標記相關結果。
複合式搜尋結果測試
新工具沒有了原始碼顯示，但多了其他功能，例如網站連結搜尋框等等的資訊，亦可以選擇以「行動版優先」去測試手機的效果。
總結
無論以哪種方式去設定麵包屑導覽，只要符合規格及多以測試工具確定沒有設定錯誤，均能讓搜尋引擎清楚理解頁面，從而達到SEO的目標。
(Feature image edited by the photo from Pierre Bamin on Unsplash)
