SEO怎麼做？先從基礎建設開始！結構化資料建起來｜言己,日常生活 by work
生活裡總是有多個角色，除了看起來每天好像都在玩的Youtuber之外(我真的沒有每天都在玩！)，其實我還有一個身份，就是需要工作領薪水的上班族。最近來了個案子，讓我有個機會，可以久違的從0慢慢修SEO，腦袋很小、記憶不好，也順便把這段歷程記錄下來，給未來的自己看，也讓剛好需要的你一起看。 — 趴踢 pa-ty
最近參與了一個全新網站的建立，除了功能迭代及日常維護之外，還有一個重要的工作項目，就是優化新站的SEO。SEO-搜尋引擎優化，其實需要學習及注意的面向很多，而這次就先來跟大家聊聊，最近我到底為這個新網站做了什麼有助於SEO的事吧。
當然我不是個SEO的老手，以下內容只是把工作上做過的事項記錄下來，算是自己的學習筆記？也歡迎各界先進交流提攜，讓我的SEO技能也能跟著網站一起長大。
先從基礎的Meta標籤及結構化資料開始做起
要達成SEO搜尋引擎優化的目的，首先第一步，就是要讓搜尋引擎的爬蟲可以抓到網站的資料。除了打開robort及提交site map給搜尋引擎讓它們知道哪裡有網站可以抓之外，還得搭配Meta標籤及結構化資料，告訴爬蟲這是一個什麼內容的網頁，才有機會讓網頁內容出現在使用者的搜尋結果之中。
而在這個階段，目前做了這些：
提交roborts.txt + sitemap.xml (網站地圖)
基本上如果公司裡有配置工程師團隊(RD)，你只要跟他說：「我想要讓google找得到我們的網頁，請把roborts打開讓爬蟲可以爬，另外幫我設定提交Site Map，謝謝。」基本上，有經驗的RD一聽到這樣的需求，就會幫你處理好，你只要坐等google的爬蟲來抓網頁即可。
但如果你遇到的工程師，剛好也是第一次處理的話，也不用太緊張，Google在這方面的技術文件還蠻完整的，建議你可以附上以下兩個連結給RD，我相信他們一定可以完成你的願望的，起碼到現在我還沒有失敗過(應該拉）。
參考網址1：建立 robots.txt 檔案
參考網址2：建立並提交sitemap.xml
而當RD幫你將上面的資料都完成提交後，可以等待個一天，大概就可以前往google search consloe去驗證所提交的資料對於google來說是否有成功，以sitemap為例，可以在下圖這個位置去檢視提交的狀況，只要看到狀態成功，就表示資料有好好的送給google了。
而如果想進一步了解sitemap是什麼，我自己覺得awoo的這篇文章講得蠻詳細的，也分享給大家：https://www.awoo.com.tw/blog/sitemap-xml/?s=sitemap
Meta標籤
除了讓搜尋引擎可以抓到網頁，當然也會希望抓出來的資料是符合我們期待的內容，而Meta標籤就是其中一個幫助爬蟲了解網站內容的一個方法。
Meta標籤，最重要的就是title及description，因為在茫茫的搜尋結果中，這兩個欄位是能幫你吸引使用者點擊的最佳武器！而為什麼他們會是武器呢？那是因為你寫出來的title及description會顯示在搜尋結果中的這個地方。
如果你寫的內容更貼切使用者當下所需要的內容，就更能吸引使用者點擊你的網站來瀏覽，也能對網站的SEO帶來幫助。
但title及description的字數到底要打多少字呢？這段時間查了很多高手寫得文章，大多都是建議title最好是在20~30個中文字，而description建議最好是60~80個字，也提供給大家最內容編輯時的參考！
結構化資料
而一個網站當然不只有title及description的內容可以提供，例如一個活動網頁，還可以提供活動的主辦單位、舉辦時間、舉辦地點等資料給搜尋引擎，而這方面的欄位資料就要依靠結構化資料來提交給搜尋引擎。
那應該要提交哪些結構化資料呢？再進行結構化資料的整理前，可以先到https://schema.org/WebSite，找到自己適合的類別，依據網站上的說明，依據每個所需的欄位，按照相同格式編輯即可。
而這次除了Title及description外，我還加了這些東西
● Search Action
如果有在網站按造google的格式，在網頁的head中裡提供網站連結搜尋框的script內容，使用者透過google搜尋相關主題時，你的網站就會在搜尋結果中出現如下圖範例的輸入框，而使用者在輸入框裡輸入對應的訊息，可以導去網站內的搜尋結果頁
google的技術文件可參考：網站連結搜尋框
● Organization 知識圖譜
搜尋結果中總是可以看到某些品牌網頁，有類似下圖的畫面，如果也想為網站做類似的知識圖譜的品牌內容，那你絕對不能少放的Organization 對應的結構化資料欄位。
上圖的模組會出現在桌機頁面的左方，會是一個超搶眼的位置，如果想要透過這樣的方式加強品牌在搜尋的印象，亦或是提升SEO都是一個可以帶來正向影響的設定。但Organization的結構化資料欄位很多，可以參考這裡，依據你的網站的需要，編輯對應的欄位內容於網頁的head中，就可以幫助google爬蟲抓到對應的資料，並對應顯示在模組裡，讓你的淺在消費者看到你。而這次案子，網站比較小，只有先整理name、url、logo還有社群網站，對應的原始碼內容也提供給大家參考。(之後有考慮再慢慢補上其他欄位）
● Breadcrumb List 網站麵包屑
大家都有聽過糖果屋的故事吧？後母把兄妹倆丟在山上，但哥哥是利用麵包屑來記錄自己走過的路，希望透過麵包屑，讓自己可以順利地回家。而每個網頁也都有自己的麵包屑紀錄，記錄著如何從這一頁回到首頁的軌跡，通常都是在網頁的左上角，如下圖範例。
而麵包屑可以讓使用者，快速地前往相關頁面，對於網頁友善是有加分的效果，若你的網站有提供麵包屑的模組，也可以透過結構化資料的方式提交給搜尋引擎，這樣使用者再進行搜尋時，就可以在搜尋結果中看到麵包屑路徑！
參考資料：https://schema.org/BreadcrumbList
參考資料：https://developers.google.com/search/docs/data-types/breadcrumb#json-ld
● 文章及作者相關欄位
這次接觸的案子，是一個內容行的網站，因此裡面有許多作者，及作者所提供的文字內容，除了針對網頁的title及description外，也特別針對文章頁面及作者頁面，特別在提供對應的格式化欄位資料給搜尋引擎。
參考資料：https://schema.org/Article
參考資料：https://schema.org/Person
要如何驗證結構化資料有裝好呢？
以上提到的不管是robots、sitemap、meta、結構化資料等，都需要工程師協助，將相對應的內容加入到網頁的原始碼中，而當工程師裝好後，可以透過瀏覽器所提供的檢查網頁原始碼確認是否有正確地將內容擺放在head中。
但是不是每個人都能看得懂網頁原始碼的內容，而就算看得到，也不確定是否真的有符合爬蟲的規範，這時候就可以使用google提供的小工具：結構化資料測試工具，只要輸入網址，就能幫你檢查目前的結構化資料的建立狀態，另外也會針對你沒有提供的部分給予建議，覺得真的很貼心！
沒想到只是記錄最近處理Meta跟結構化資料的內容，就寫了這麼長的一篇，之後有機會，再來跟大家聊聊我還做了些什麼吧。
如果覺得像這樣子的文章對你有幫助也想繼續看接下來的相關作業紀錄的話，麻煩「拍手用力按下去」越多拍手就更能激勵我認真工作努力寫文(疑？本來就應該認真工作的！欠揍）
— — — — — —
你好，我是趴踢(Pa-ty)，很感謝你觀看我的文章。
「言己,日常生活」是我用來記錄日常的頻道，也紀錄著那些你會感興趣的痕跡。歡迎你來到下方各平台，按個讚，追蹤或訂閱吧！期待與你的相遇～
Youtube：http://bit.ly/37viQ8V
Facebook：http://bit.ly/38D3ZKU
Instagram：http://bit.ly/2uHTmbi
— — — — — —