大家好，感謝大家參加我們的#成效特訓營 線上課程，本次課程的重播以及簡報分享可以參考Google官方社群貼文https://goo.gl/XOGJOk ！也歡迎大家有任何問題，可以在社群與我們保持互動交流。

1. #成效特訓營
加入我們的活動，讓您的廣告成效衝衝衝！
2016.4.1 - 2016.6.31 #PerformanceBootCamp

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

3. 往期課程回顧
搜尋再行銷基礎必備
(語言: 國語）+線上Q&A
https://goo.gl/sZ2TMQ
課程時間 4月26日 14:00-15:00
您可以訪問我們的官方社群，了解最新活動詳
情。https://goo.gl/1UlfGj

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

5. 3個工具 4個5分鐘修復工具

6. 為什麼您需要關注行動網站mobile site?
網速越快，網站業績越佳 擁有行動網站會影響您的搜尋
引擎自然排名以及搜尋廣告成
效
5月5日 2:00 PM
提升行動網站速度=提升網站業績
適合行銷人員以及公司網站管理人員
5月18日 2:00 PM
SEO & SEM: 1+1>2的成效秘訣
適合行銷人員以及廣告帳 戶使用者

7. 如何提升使用者體驗？
行動網站/app使用體驗
入門理解
優化您app的第一印象: Google
Play 以及app索引方法
5月11日 2:00 PM
提升行動網站速度=提升網站業績
適合行銷人員以及公司網站管理人員
6月16日 2:00 PM
適合app開發者以及行銷人員

8. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
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

9. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
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

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

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

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

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

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

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

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

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

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

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

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

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

22. 具體改進
貼士

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

24. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性測試
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

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

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

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

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

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

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

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

32. 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>

33. 網站設計師通常會選擇絕對的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>

34. 建議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>

35. 建議 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>

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

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

38. 插件/外掛
Plugins
✓

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

40. 在網站發布之前切記要
測試那些容易不被支持
的插件，例如：Flash
在影片下添加描述
文字
應盡量避免不支持的
插件

41. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
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

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

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

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

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

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

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

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

49. <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 像素作為基底字型大小

50. 行間距也很重要

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

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

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

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

55. 必備工具: 網站測速洞察, 手機適合度測試及手機可用性報告
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

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

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

58. 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

59. 加入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

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

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

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

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

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

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

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

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

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

69. Q&A
問答時間
本次課程回顧：
https://goo.gl/XOGJOk

70. 下期課程預告
再行銷實際操作
(語言: 國語）+線上Q&A
https://goo.gl/ALBLiV
課程時間 5月3日 14:00-15:00
您可以訪問我們的官方社群，了解最新活動詳
情。https://goo.gl/1UlfGj

71. 您隨時隨地的AdWords小幫手
通過下列方式，您可以與 Google官方廣告專家分享交流，了解
AdWords最新活動以及產品信息分享。
最新版 Google AdWords官方社群，幫到您！
https://www.zh.adwords-community.com/
Google AdWords微信帳號:
谷歌广告 (ID: AdWordsOfficial) 或者掃描左侧 QR code 立即關注！
Google AdWords Line 官方帳號:
(ID: @adwordstw) 或者掃描左側 QR code 立即關注！
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

72. Thank you!