簡單介紹RWD & SEO的基本觀念

1. RWD & SEO 的藝術
Hitomi 2019/06

2. RWD

3. RWD是什麼？
 RWD是「響應式網頁設計」，全名Responsive Web Design，簡稱RWD。
 RWD是一種網頁設計的技術做法，這種設計法可以讓網頁在不同裝置上瀏覽時，
對應不同的解析度（網頁寬度），都可以有適合的呈現行為（排版），
 RWD能減少使用者為了看到完整畫面，而將網頁進行「縮放」、「平移」、「捲
動」等的操作行為。

4. RWD主要用處
 一個網站解決多種裝置的顯示問題：
 以前的網站需要做兩個版本，或更多版本，寫javascript去判斷裝置，以顯示不同版本
的網頁，所以在維護上也需要一次維護多個版本。
 響應式網頁以裝置的「寬度」(解析度)為基準，在不同解析度下，改變網頁頁面的佈局，
所以手機看跟電腦看，可能會長得不一樣。
 網頁內的元素不變，只是排列的方式、呈現的方式、呈現的內容可能不一樣。
就像水，在不同環境下有固體(冰塊)，或氣體(水蒸氣)的差異，但是都是水。

5. RWD

6. 電腦版/手機版網頁

7. RWD版本 vs 電腦版/手機版
RWD版本 手機版/電腦版
一個網址走天下 手機版與電腦版的網址不同：
手機版較常以m開頭
解析度不同，內容呈現會不一樣：
例如：banner在電腦上呈現寬版，在
手機上呈現窄版(長方形)的圖
內容呈現可能完全不同：
電腦版可能是一整頁呈現，手機版可
能是點了去下一頁再呈現其他東西
操作大致一樣。 操作可能完全不同：
電腦版可能是下拉選單選取東西，手
機版可能是左右滑動來選擇東西。
維護方便，只要維護一個網頁即可。 維護上較困難，有幾個版本就要維護
幾個網頁。

8. Bootstrap (簡稱BS) 又是什麼?
 目前翰林內部大多數網頁都使用Bootstrap製作，唯獨每個網頁使用的BS版本可
能不太相同。例如：hle官網首頁還在使用舊版的bs3
 目前版本已知出到 BS4 up
 BS是以「柵格式系統」來實作RWD，並附帶許多基礎操作功能的介面插件。善加
利用的話可以大幅加快RWD網頁的製作效率。
 柵格系統將網頁寬度切分為12等份

9. Bootstrap RWD大概會製作幾種尺寸
電腦版裝置尺寸：>768px 手機板裝置尺寸：<576px

10. RWD各執掌注意事項
 企劃方面
 因應手機版做出不同的規劃
 某些內容區塊在手機尺寸的時候不顯示。（例如官網首頁的大Banner廣告）
 內容收納成選單？（例如：點擊選單之後快速滑動到某些區塊）
 動態效果是否取消？用什麼形式來置換？
 文案因應手機尺寸做規劃
 文字長度在是否放得下？
 文字放不下的話要如何變通？
 文字在不同尺寸要置中或是靠左靠右？

11. RWD各執掌注意事項
 美術方面
 在PC/手機尺寸時，圖片的縮放問題
 如果圖片需要可以跟隨瀏覽器大小縮放，則一開始的尺寸要以最大的為準。
 如果切換PC/手機尺寸時，需要換load不同的圖片，也需要事先準備好。
 切換手機尺寸時，內容的排版也要從橫式換成直式的。
 如果本來區塊是橫式排版，切換成手機尺寸時，會需要直式排版的假圖。
 Loading注意
 圖片的K數需注意大小，以頻寬較低的手機也可以快速loading完畢為佳。
 後續擴充/維護性
 圖片名稱以英文為主，以利後續維護
 同一系列的圖片，最好都使用一樣的副檔名（例如：Banner都使用PNG）

12. RWD各執掌注意事項
 網頁製作
 動態操作
 須評估太過絢麗的操作或動態效果，在手機操作上是否可行。
 開版內容
 切換成手機尺寸時，本來橫排的物件會像換行從右邊一樣往下掉，物件的上下距離需保留。
 POPUP或頁籤等操作，並不適合過多的使用在手機上，在手機上時需考慮攤開來顯示。
 注意每個尺寸級距中間的那1px是否有寫到（例如767px or 769px，需特別檢查）

13. SEO

14. SEO是什麼？
 SEO是「搜尋引擎優化」，全名是
Search Engine Optimization
 SEO是一種透過自然排序（無付費）
的方式增加網頁能見度的行銷規律
 其實經過學習你也可以成為SEO專家

15. SEO排名怎麼看
 假設搜尋「閱卷系統」，實際上會出現以下畫面
SEO排名第一的網站

16. 實際測試看看
 搜尋「閱卷大師」、「閱卷app」，實際上會出現以下畫面
我們家的產品名稱都很前面唷

17. 好的關鍵字怎麼設定
 如果你是User，你會打哪些字來搜尋？
 產品名稱是以商家為出發點
 真的的「好的關鍵字」是以使用者為出發點
 使用者會打哪些字來來尋找者個東西？
 如何保持關鍵字排名？
 如果某個網頁的某個關鍵字搜尋的名次很前面，在改版時，儘量不要更動太多關鍵字，
以利這個關鍵字的高名次的保持。

18. SEO關鍵字怎麼來的?
 網頁上線之後，Google的網路爬蟲會去爬你的網頁。
 爬完之後大概要一個禮拜左右的時間才會更新搜尋引擎。
 網頁上線之後，到「網站管理者工具」去登記，讓Google知道你的網頁更新了，
快指派爬蟲過來讀取，也可以加速被搜尋到！
 同場加映：什麼是網路爬蟲

19. 網頁爬蟲會怎麼抓關鍵字?
 網頁爬蟲抓取資訊，主要來自「網頁原始碼」
 在網頁空白的地方點右鍵，選擇「檢視原始碼」。可以看到爬蟲會看到的東西

20. 網頁爬蟲會怎麼抓關鍵字?
 在網頁標頭的<meta>裡面，會有一個”keywords”的區域，能設定這個網頁的關鍵字。
 [注意] 濫用關鍵字的話，會被Google的爬蟲認為是垃圾網站，反而排名更低唷。」

21. 網頁製作時需考慮SEO
 大小標題依據不同的原始碼tag，代表不同的東西，而網路爬蟲會去分辨他們。

22. 網頁製作時需考慮SEO
 網頁製作內容儘量以文字取代圖片，因為網路爬蟲看不到圖片上的文字
 迫不得已要使用圖片時，需從網頁原始碼中，在圖片上加上的文字註解。

23. SEO各執掌注意事項
企劃的文字掌管了「網頁能否被找到」
 企劃方面
 規劃初期：
 針對「想要達成什麼目的」，須提出確認。
 以「使用者會怎麼搜尋這個產品」為關鍵，制定相關的關鍵字。
 關鍵字確認後，在後續生出文案時，把關鍵字放在文案的標題中。
 內容文案：
 網頁標題
 提供Keywords
 提供網頁描述：一段敘述文，當你貼連結在line或FB的時候會顯示文字
 各區塊的大標/中標/小標/內文
 各區塊如需配圖，圖片的替代文字
（替代文字會在「滑鼠指上的時候」及「圖片沒有load出來的時候」顯示在圖片的區塊，也
是網路爬蟲會爬到的文字。）

24. SEO各執掌注意事項
除此之外，開版時網頁設計師運用html的功力也佔了相當大的部分
 美術方面
 規劃初期：
 不同關鍵字的圖片需拆分開來。
 裝飾性圖片，若需要加入搜尋引擎的話，須提供描述文字。
 網頁設計
 切版注意：
 網頁架構需明確。
（多使用HTML5的tag，像header / footer等tag的使用，而非都使用div）
 內文須依照SEO關聯度來使用相關的tag，以確保內容被網路爬蟲正確讀取。
（大標需要使用h1，內容使用p，依此類推。）
 相關圖片包含logo等，都要設定圖片的文字描述。

25. Q & A

26. Thanks 