感謝大家對 AdWords 的支持。在三月我們推出了行動行銷主題相關的活動，其中包括9門線上課程。今天為大家推薦第一課：中小企業行動網站基礎必備 。幫您為行動行銷做好準備。

1. 中小企業行動網站基必備設置
關注我們 :
微信: 谷歌广告
(ID: AdWordsOfficial)
Line: Google AdWords
(ID: @adwordstw)
FB: Google AdWords
(/gcnadwords)
AdWords Greater China
http://www.youtube.
com/c/AdWordsGreaterCh
ina
微信: 谷歌广告学院小助手
(/gcnadwords)

2. 中小企業行動網站必備設置
Basics of a mobile website for SMBs

3. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability
注意細節: 檢視口, 縮放以及插件/外掛
Bring it in: Viewports, zoom and plugins
關注體驗: 點按目標, 網頁邊界以及字體大小
Focus on the user: Tap targets, margins and font sizes
正確設置: 跳轉以及標準網址
Set it right: Redirects and canonicals
1
2
3
4

4. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability
注意細節: 檢視口, 縮放以及插件/外掛
Bring it in: Viewports, zoom and plugins
關注體驗: 點按目標, 網頁邊界以及字體大小
Focus on the user: Tap targets, margins and font sizes
正確設置: 跳轉以及標準網址
Set it right: Redirects and canonicals
1
2
3
4

5. 不佳的UX(用戶體
驗)會影響您的網站
自然排名
良好的UX(用戶體
驗)讓客戶長時間停
留在您的網站

6. 三大工具幫助您確保良好手機使用體驗，避免不加的使用體驗
PageSpeed Insights
網站測速洞察
Mobile-Friendly Test
手機適合度測試
Mobile Usability Report
手機可用性報告

7. 手機適合度測試
Mobile-Friendly Test
https://goo.gl/eKlTT0

8. 通過指數
Pass indicator
測試結果
Test
results
Googlebot查看結果
How
Googlebot sees the page
相關幫助連結
和工具
Help links & tools

9. 三大工具幫助您確保良好手機使用體驗，避免不加的使用體驗
PageSpeed Insights
網站測速洞察
Mobile-Friendly Test
手機適合度測試
Mobile Usability Report
手機可用性報告

10. Webmaster中提供
的手機可用性報告

11. 手機可用性
歷史資料
報告時間
問題網頁錯誤

12. 手機可用性錯
誤類型
問題頁面網址
最近網站
掃描時間

13. 再次測試
網頁錯誤
具體資料
解決問題的相關
幫助工具與連結

14. 使用
Googlebot抓取網頁
網站內被索引
網頁檢測
手機適合度
相關檢測

15. 三大工具幫助您確保良好手機使用體驗，避免不加的使用體驗
PageSpeed Insights
網站測速洞察
Mobile-Friendly Test
手機適合度測試
Mobile Usability Report
手機可用性報告

16. 網站測速洞察
PageSpeed
Insights
https://goo.gl/vJGv0I

17. 使用本工具
預覽網站使用體驗結果
提供手機和桌機
網站測試結果
測試分數
網站速度結果

18. 具體改進
貼士

19. 提供具體技
層面指導
不適用Googlebot抓
取你的網頁
只檢查單獨網址
提供多重最佳作法
測試

20. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性測試
Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability
注意細節: 檢視口, 縮放以及插件/外掛
Bring it in: Viewports, zoom and plugins
關注體驗: 點按目標, 網頁邊界以及字體大小
Focus on the user: Tap targets, margins and font sizes
正確設置: 跳轉以及標準網址
Set it right: Redirects and canonicals
1
2
3
4

21. 檢視區及縮放
Viewports and zooms
✓

22. 范例：一個適用於桌面
版檢視的網頁格局

23. 檢視區(Viewport)向瀏
覽器傳達信息，
決定網頁在桌面／行動
端的顯示格局。
如果沒有一個適合的檢視
區，網頁在行動端上的體
驗不好

24. 正確設定檢視區，是製
作行動端網站的第一步
該如何設
定？

25. 點擊查看新版Google廣告官方社群
<meta name=viewport content="width=device-width, initial-scale=1">
在代碼頂部要包括設定“元檢視區”(meta viewport)的內容
https://developers.google.com/speed/docs/insights/ConfigureViewport
促使內容自適應於目標設備的尺寸
促使內容自適應於橫／竪屏

26. https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
設定合適的檢視區，可
瞬間提升用戶體驗
無 有

27. CSS (Cascading StyleSheets) 值決定了網頁中各元素的外觀
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en
<style>
body {width: 1024px; ... font-size: 12px;}
h1 {height: 2em; ... line-height: 2em;}
nav {display: block; width: 100%; }
...
nav#main a {height: 32px; line-height: 32px; display: inline-block; ...}
nav#main a#home {max-width: 50px; min-width: 32px; width: auto; ...
height: 32px; width: 32px;}
nav#secondary { width: 100%; ... }
nav#secondary a {height: 36px; line-height: 36px; }
...
main {... font-size: 8px;}
main img {margin-left: 10%; margin-right: 10%; width: 800px;}
</style>

28. https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en
絕對 相對
設計師通常會選擇
絕對的CSS值來決定
寬、高等參數，
但體驗並不好

29. 網站設計師通常會選擇絕對的CSS值來決定寬、高等參數，
但對於行動端體驗並不好
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en
<style>
body {width: 1024px; ... font-size: 12px;}
h1 {height: 2em; ... line-height: 2em;}
nav {display: block; width: 100%; }
...
nav#main a {height: 32px; line-height: 32px; display: inline-block; ...}
nav#main a#home {max-width: 50px; min-width: 32px; width: auto; ...
height: 32px; width: 32px;}
nav#secondary { width: 100%; ... }
nav#secondary a {height: 36px; line-height: 36px; }
...
main {... font-size: 8px;}
main img {margin-left: 10%; margin-right: 10%; width: 800px;}
</style>

30. 建議1: 選用相對寬度值
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries
<style>
body {width: 100%; ... font-size: 12px;}
h1 {height: 2em; ... line-height: 2em;}
div.nav {display: block; width: 100%; }
...
div.main {... font-size: 8px;}
p.main img {margin-left: 10%; margin-right: 10%; width: 80%;}
</style>

31. 建議 2: 利用CSS媒體查詢，使得頁面自適應用戶的設備尺寸
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries
<style>
body {width: 1024px; ... font-size: 12px;}
h1 {height: 2em; ... line-height: 2em;}
div.nav {display: block; width: 100%; }
...
div.main {... font-size: 8px;}
p.main img {margin-left: 10%; margin-right: 10%; width: 80%;}
@media screen and (max-width: 640px) {
body { width: 100%;}
main {min-height: 445px;}
main img {width: 100%; margin: 0;}
nav#secondary { position: fixed; bottom: 0; left: 0;}
nav#main a#home { position: absolute; top: 1%; right: 1%;...
background-color: transparent;}
}
</style>

32. 正確的檢視區，使得
內容與頁面寬度吻合
使用CSS媒體查詢來對
以行動端內容的寬，高
等參數進行設置

33. 使用CSS 媒體查詢，可
以讓您的網站內容自適
應桌面／行動端的設備
寬度，管理方便

34. 插件/外掛
Plugins
✓

35. 這種情況在您發生過
嗎？

36. 在網站發布之前切記要
測試那些容易不被支持
的插件，例如：Flash
Add summaries
or transcripts
below videos
應盡量避免不支持的
插件

37. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability
注意細節: 檢視口, 縮放以及插件/外掛
Bring it in: Viewports, zoom and plugins
關注體驗: 點按目標, 網頁邊界以及字體大小
Focus on the user: Tap targets, margins and font sizes
正確設置: 跳轉以及標準網址
Set it right: Redirects and canonicals
1
2
3
4

38. 正確的點按目標
Proper tap targets
✓

39. 過小或者過緊湊的連結
和按鈕在手機中的使用
體驗非常不佳
想在手機看
八卦也不容易...

40. 一般成年人
的指寬
10mm

41. 7mm
7mm
7mm (48 CSS pixels)
對於重點按鈕來說是最
理想的點按大小

42. 對相對不重要的點按目
標來說，預留5mm間距
可以避免錯誤點按
5mm

43. 合適的字體大小
Legible fonts
✓

44. 即使其他設置正確，
過小的字體會大大影響
整體的體驗
眼睛好累....
看不清

45. <style>
body { font-size: 16px;}
.small { font-size: 12px; /* 75% of the baseline */ }
.large { font-size: 20px; /* 125% of the baseline */ }
</style>
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
使用與基底大小的相對關係來定義排版縮放比例
使用 16 CSS 像素作為基底字型大小

46. 行間距也很重要

47. 使用瀏覽器默認的
CSS行間距 1.2em

48. Mobile
optimizations
Responsive design for Great Experience
封鎖內容
Blocked content

49. Googlebot無法讀取你
的網頁並且識別你的手
機版本

50. 請將Googlebot與普通使
用者相同對待
Googlebot 必須能夠順利
檢索網站內容，才能擷取
及遵循其 robots.txt 檔案
中的指令

51. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability
注意細節: 檢視口, 縮放以及插件/外掛
Bring it in: Viewports, zoom and plugins
關注體驗: 點按目標, 網頁邊界以及字體大小
Focus on the user: Tap targets, margins and font sizes
正確設置: 跳轉以及標準網址
Set it right: Redirects and canonicals
1
2
3
4

52. 雙重站點設置的最佳做法
Best practices for
two-site setups ✓

53. Google 對於單一／雙
重網站版本的設置沒有
嚴格要求，只要
Googlebot能抓取即可。
但您的確要注意雙重站
點的設置！
https://m.example.com
https://www..example.com

54. On m.example.com/:
<link rel="canonical" href="www.example.com/" >
On www.example.com/:
<link rel="alternate" media="only screen and (max-width:
640px)" href="m.example.com/" >
添加雙指向註解
https://developers.google.com/webmasters/mobile-sites

55. 加入Vary HTTP标头来使用動態服務的設定，可讓Server根據要求
網頁的使用者代理(例如：Googlebot )，透過同一網址回傳不同的
HTML 内容。
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving?hl=zh-tw

56. 確保您的網頁跳轉正確
Ensure your
redirects are correct

57. 如果您有適用手機版本的網站，可以將用戶跳轉至手機的URL
www.nationalworldwide.com/news m.nationalworldwide.com/news
如果您有網頁只有網頁版沒有手機版本，請確保您向手機使用者
展示網頁版本而不是錯誤頁面，之後再完善該頁面。
404 Not Found
302 Moved temporarily

58. 請避免跳轉到錯誤頁面！
以免帶來不好的用戶體驗
www.example.com/
www.example.com/shopping
www.example.com/about
m.example.com/
m.example.com/shopping
m.example.com/about

59. 請這樣做
www.example.com/
www.example.com/shopping
www.example.com/about
m.example.com/
m.example.com/shopping
m.example.com/about

60. “Take me to the desktop-optimized version”
您可以在您手機版網站
添加以下說明來作為提示
請讓使用者在瀏覽階段，保持使用他
們偏好的版本

61. 您可以在Google搜尋結果查看，
是否他們把您帶到正確的網址。

62. 您可以使用Webmaster來查看您網站
內存在的跳轉錯誤
https://www.google.com/webmasters/tools

63. 這一設置將會節省～0.5到1秒的時
間，讓使用體驗更順暢！
如果您的跳轉和標準網址設置正確，我們
將會為您自動作跳轉設置。

64. PageSpeed Insights
https://goo.gl/vJGv0I
Webmasters Mobile Guide
https://goo.gl/VCn5N8
Mobile-Friendly
https://goo.gl/0mLt8g

65. 您隨時隨地的AdWords小幫手
通過下列方式，您可以與 Google官方廣告專家分享交流，了解
AdWords最新活動以及產品信息分享。
最新版 Google AdWords官方社群，超好用！
https://www.zh.adwords-community.com/
Google AdWords微信账号:
谷歌广告 (ID: AdWordsOfficial) 或者扫描左侧二维码立刻关注！
Google AdWords Line 官方帳號:
(ID: @adwordstw) 或者掃描左側二維碼立刻關注！
Google AdWords YouTube 官方頻道
頻道：AdWords Greater China
微信: 谷歌广告
(ID: AdWordsOfficial)
Line: Google AdWords
(ID: @adwordstw)
FB: Google AdWords
(/gcnadwords)
AdWords Greater China
http://www.youtube.
com/c/AdWordsGreaterCh
ina

66. 下期課程預告 行動網站最佳操作
裝修你的數位世界門面
課程時間 3月9日
您可以訪問我們的官方社群，了解3月活動詳
情。https://goo.gl/af7DUy

67. Thank you!