#成效特訓營中小企業行動網站必備基礎

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

中小企業行動網站必備設置

關注我們 :

微信: 谷歌广告(ID: AdWordsOfficial)

Line: Google AdWords(ID: @adwordstw)

FB: Google AdWords(/gcnadwords)

AdWords Greater Chinahttp://www.youtube.

com/c/AdWordsGreaterChina

微信: 谷歌广告学院小助手(/gcnadwords)

往期課程回顧搜尋再行銷基礎必備 (語言: 國語）+線上Q&A

https://goo.gl/sZ2TMQ

課程時間 4月26日 14:00-15:00

您可以訪問我們的官方社群，了解最新活動詳情。https://goo.gl/1UlfGj

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

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

為什麼您需要關注行動網站mobile site?

網速越快，網站業績越佳擁有行動網站會影響您的搜尋引擎自然排名以及搜尋廣告成效

5月5日 2:00 PM提升行動網站速度=提升網站業績適合行銷人員以及公司網站管理人員

5月18日 2:00 PMSEO & SEM: 1+1>2的成效秘訣適合行銷人員以及廣告帳戶使用者

如何提升使用者體驗？

行動網站/app使用體驗入門理解

優化您app的第一印象: Google Play 以及app索引方法

5月11日 2:00 PM提升行動網站速度=提升網站業績適合行銷人員以及公司網站管理人員

6月16日 2:00 PM適合app開發者以及行銷人員

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

234





1

234

三大工具幫助您確保良好手機使用體驗，避免不加的使用體驗

PageSpeed Insights網站測速洞察

Mobile-Friendly Test手機適合度測試

Mobile Usability Report手機可用性報告

https://goo.gl/eKlTT0


手機適合度測試Mobile-Friendly Test


http://goo.gl/dBXYEM

通過指數Pass indicator

測試結果Test

results

Googlebot查看結果How

Googlebot sees the page

相關幫助連結和工具

Help links & tools





https://www.google.com/webmasters/tools/mobile-usability

https://www.google.com/webmasters/tools/mobile-usability

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


手機可用性歷史資料

報告時間

問題網頁錯誤

手機可用性錯誤類型

問題頁面網址

最近網站掃描時間

再次測試

網頁錯誤具體資料

解決問題的相關幫助工具與連結

使用Googlebot抓取網頁

網站內被索引網頁檢測

手機適合度相關檢測





https://goo.gl/vJGv0I


網站測速洞察PageSpeed

Insights





使用本工具預覽網站使用體驗結果

提供手機和桌機網站測試結果

測試分數網站速度結果

具體改進貼士

提供具體技層面指導

不適用Googlebot抓取你的網頁

只檢查單獨網址

提供多重最佳作法測試

必備工具: 網站測速洞察, 手機適合度測試及手機可用性測試Learn the tools: PageSpeed Insights, Mobile-Friendly Test and Mobile-Usability




1

234

檢視區及縮放Viewports and zooms

✓

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

檢視區(Viewport)向瀏覽器傳達信息，

決定網頁在桌面／行動端的顯示格局。

如果沒有一個適合的檢視區，網頁在行動端上的體

驗不好

正確設定檢視區，是製作行動端網站的第一步

該如何設定？

點擊查看新版Google廣告官方社群

<meta name=viewport content="width=device-width, initial-scale=1">

在代碼頂部要包括設定“元檢視區”(meta viewport)的內容

https://developers.google.com/speed/docs/insights/ConfigureViewport

促使內容自適應於目標設備的尺寸促使內容自適應於橫／竪屏

https://www.zh.advertisercommunity.com/



https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport

設定合適的檢視區，可瞬間提升用戶體驗

無有



https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en

絕對相對

設計師通常會選擇絕對的CSS值來決定

寬、高等參數，但體驗並不好



CSS (Cascading StyleSheets) 值決定了網頁中各元素的外觀


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



網站設計師通常會選擇絕對的CSS值來決定寬、高等參數，但對於行動端體驗並不好


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



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



建議 2: 利用CSS媒體查詢，使得頁面自適應用戶的設備尺寸


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



正確的檢視區，使得內容與頁面寬度吻合

使用CSS媒體查詢來對以行動端內容的寬，高

等參數進行設置

複習一下！

使用CSS 媒體查詢，可以讓您的網站內容自適應桌面／行動端的設備

寬度，管理方便

複習一下！

插件/外掛Plugins

✓

這種情況在您發生過嗎？

在網站發布之前切記要測試那些容易不被支持的插件，例如：Flash

在影片下添加描述文字

應盡量避免不支持的插件





1

234

正確的點按目標Proper tap targets

✓

過小或者過緊湊的連結和按鈕在手機中的使用

體驗非常不佳

想在手機看八卦也不容易 ...

一般成年人的指寬

10mm

7mm

7mm

7mm (48 CSS pixels) 對於重點按鈕來說是最

理想的點按大小

7mm

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

5mm

合適的字體大小Legible fonts

✓

即使其他設置正確，過小的字體會大大影響

整體的體驗

眼睛好累....看不清

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



行間距也很重要

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

MobileoptimizationsResponsive design for Great Experience

封鎖內容Blocked content

Googlebot無法讀取你的網頁並且識別你的手

機版本

請將Googlebot與普通使用者相同對待

Googlebot 必須能夠順利檢索網站內容，才能擷取及遵循其 robots.txt 檔案

中的指令





1

234

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

Google 對於單一／雙重網站版本的設置沒有

嚴格要求，只要Googlebot能抓取即可。

但您的確要注意雙重站點的設置！

https://m.example.com

https://www..example.com .

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

https://developers.google.com/webmasters/mobile-sites/

https://developers.google.com/webmasters/mobile-sites/

加入Vary HTTP标头来使用動態服務的設定，可讓Server根據要求網頁的使用者代理(例如：Googlebot )，透過同一網址回傳不同的

HTML 内容。

HTTP/1.1 200 OKContent-Type: text/htmlVary: User-AgentContent-Length: 5710(... rest of HTTP response headers...)

https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving?hl=zh-tw

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

如果您有適用手機版本的網站，可以將用戶跳轉至手機的URL

www.nationalworldwide.com/news m.nationalworldwide.com/news

如果您有網頁只有網頁版沒有手機版本，請確保您向手機使用者展示網頁版本而不是錯誤頁面，之後再完善該頁面。

404 Not Found302 Moved temporarily

請避免跳轉到錯誤頁面！以免帶來不好的用戶體驗

www.example.com/

www.example.com/shopping

www.example.com/about

m.example.com/

m.example.com/shopping

m.example.com/about

請這樣做

www.example.com/

www.example.com/shopping

www.example.com/about

m.example.com/

m.example.com/shopping

m.example.com/about

“Take me to the desktop-optimized version”

您可以在您手機版網站添加以下說明來作為提示

請讓使用者在瀏覽階段，自行選擇他們偏好的版本

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

您可以使用Webmaster來查看您網站內存在的跳轉錯誤

https://www.google.com/webmasters/tools



這一設置將會節省～0.5到1秒的時間，讓使用體驗更順暢！

如果您的跳轉和標準網址設置正確，我們將會為您自動作跳轉設置。

PageSpeed Insights https://goo.gl/vJGv0I

Webmasters Mobile Guidehttps://goo.gl/VCn5N8

Mobile-Friendlyhttps://goo.gl/0mLt8g



https://goo.gl/VCn5N8

https://goo.gl/VCn5N8

https://goo.gl/0mLt8g

https://goo.gl/0mLt8g

Q&A問答時間

本次課程回顧：https://goo.gl/XOGJOk

下期課程預告再行銷實際操作

(語言: 國語）+線上Q&Ahttps://goo.gl/ALBLiV

課程時間 5月3日 14:00-15:00

您可以訪問我們的官方社群，了解最新活動詳情。https://goo.gl/1UlfGj

您隨時隨地的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 Chinahttp://www.youtube.

com/c/AdWordsGreaterChina

https://www.zh.adwords-community.com/

https://www.zh.adwords-community.com/

Thank you!

Mobile

#成效特訓營 中小企業行動網站必備基礎

#成效特訓營中小企業行動網站必備基礎