SEO 前的網站設定 HTML 優化, 結構化資料, 網站地圖

當網站實際運行一陣子後，透過 Google Search Console 成效分析來看使用者常搜尋的關鍵字，以及個體連結與關鍵字的曝光次數關係。

在 SEO 前需要做三個工作來幫助搜尋引擎

1. HTML 優化
2. 結構化資料
3. 網站地圖

HTML 優化

因為搜尋引擎是透過爬蟲來蒐集並分析處理網站內容，所以對於網頁的內容來說就要讓爬蟲更方便的去讀取，譬如標題我們就使用 h1~`h6` 而不要使用 div 搭配樣式設定，因為爬蟲只會讀取標籤並不會解析樣式，這樣的優化我們就叫做 HTML 語意化，在來就是搜尋的結果中有時候會有更酷的呈現方式，這時候就需要透過中繼資料 (meta data) 和結構化資料 (Microdata) 來協助 Google 提供更棒的搜尋結果呈現。

HTML 語意化

從前端攻城獅的角度，來看有什麼地方是可以加強的，其中重要的地方在 html 的語意化，語意化帶來的好處一方面是方便維護，二來當程式交接的時候，只要是理解標準的人很快就可以了解網頁結構，另一方面在 html 5 訂出標準後， <section>, <article>, <nav>, <header>, <footer> , <aside> 更直觀的標籤出現，這樣機器或是人也就可以更容易了解網頁的架構。

另外 Google 爬蟲現在很厲害，所以圖片名稱也很重要，盡量使用有意義的圖片名稱，譬如 “父親節特惠_桁架結構避震慢跑鞋.png” 就會比 101-2-99.png 好很多。

中繼資料 (meta data)

中繼資料 (meta data) 比較重要的是提供各平台的資訊，主要用於跟各平台溝通以及顯示資訊，舉例來說像是可以跟搜尋引擎說不要索引這個網站、或是跟 Facebook 說分享時顯示的圖片是這張，這樣在在各平台時，才能夠顯示正確且適當的資訊，Facebook 也提供了分享偵錯工具來防呆。

結構化資料 (Microdata)

再來是 Microdata 結構化資料，我目前還沒有真的實作過，但看起來如果想要讓 google 的搜尋結果出現厲害的卡片或表格，甚至是其他未來可能出現更酷炫的結果，在網頁商品設計的同時，這個看來是必須認真去規劃的，實作之後也別忘了使用 google 提供測試工具測試一下。

網站地圖 (Sitemap.xml)

最後是定義 Sitemap.xml ，各種語言應該都有相對應的工具能夠自動產生這個配置檔，如果想要手動提交的話，可以透過 google search console 去提交或是停止顯示某些頁面，用途是告訴搜尋引擎目前網頁有哪些路徑需要給機器去閱讀和索引，下面的例子就是定義更新的頻率以及重要程度。

1
2
3
4
5
6

<url>
    <loc>https://sample.com/samples</loc>
    <lastmod>2018-09-28</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
</url>

• ← 上一篇
• 下一篇 →