目前有 515 位成員在線上
AdWords 廣告精選學習資源
favorite_border

[#行動網站&行銷] 成為行動網站專家第一步﹣了解什麼是行動網站

動網站非常重要。如果您的網站不適合在行動裝置上打開,您很有可能會失去您的潛在客戶。至於有多重要,請參考這篇文章了解详情。

 

但到底什麼是行動網站 (Mobile website) 呢?如果您覺得凡是能在行動裝置打開的就是行動網站,像是下面這三個?那您就大錯特錯了。

Mountain View

高度概括行動網站可以指 在電話數據或者無線網路環境下 透過行動裝置(如智慧型手機和平板電腦)上的網頁瀏覽器程式瀏覽的網站。(1)

 

行動網站有多種類型,今天我們會從網站使用者體驗行動網站技術設定這兩個層面為大家介紹,並且分享如何辨別您的網站是否是行動網站。

 

  • 網站使用者體驗層面 

如果您的網站是行動網站,它應該滿足一下三個條件:

 

- 沒有過多的圖片和flash影片 (2)

- 沒有不支持的外掛(如flash 影片)

- 當使用者在不同行動裝置上打開網站,網頁內容展示得當,使用者可以透過手指在熒幕上的上下滑動查看完整資訊,無需透過放大、縮小或者左右調整網頁頁面查看行動網站上的完整內容

 

Mountain View
  • 行動網站技術設定層面

隨著互聯網科技的不斷發展以及行動裝置的更新換代,行動網站的開發技術到今天也有不同的發展,我們先為大家分析一下目前市面上比較常見的幾種行動網站種類。

 

﹣獨立網址 (Separate URLs)

 

在這項配置中,每個電腦版網址都具有一個對應的不同網址,用於提供針對行動裝置最佳化的內容。

常見設定為使用 www.example.com 網頁為電腦使用者提供內容,同時使用 m.example.com 網頁為行動使用者提供相應的內容。Google 沒有偏好特定網址格式,任何可供 Googlebot 存取的格式皆可使用。

 

Mountain View

獨立的行動網址會針對電腦和行動裝置 (可能甚至包括平板電腦),在不同的網址上提供不同的程式碼。

 

要點

  • 使用 rel="canonical" 和 rel="alternate" 元素做為標記,以發送兩個網址間的關係。
  • 偵測使用者代理程式字串並且正確重新導向。

HTML 中的相應註釋,如下所示 

在電腦版網頁 (http://www.example.com/page-1) 上,加入下列註釋:

 

Mountain View

 行動版網頁 (http://m.example.com/page-1) 所需的註釋應為:›

 

Mountain View

﹣動態服務 (Dynamic Serving)


動態服務的設定,可讓伺服器根據要求網頁的使用者代理程式,透過同一網址傳回不同的 HTML (和 CSS)。您可以針對不同裝置,創建不同的 HTML (和 CSS),然後在不同裝置上展示不同的 HTML (和 CSS) 內容。

Mountain View

 

對於行動使用者代理程式而言,網站對 HTML 所做的更動無法立即透過這項設定呈現出來 (使用電腦使用者代理程式檢索時,行動版內容會受到「隱藏」),因此我們建議伺服器同時發送提示,要求智慧型手機專用的 Googlebot 檢索網頁,從而找到行動版內容。這個提示是透過 Vary HTTP 標頭提供,您可以把 Vary HTTP 想象為 Googlebot 用來檢索此類網址 (提供針對行動裝置調整的內容) 的信號之一。

 

動態服務會為每台裝置提供不同的程式碼,但使用的網址相同。

 

要點

  • 使用 Vary HTTP 標頭,依據使用者代理程式指明變更。
  • 正確偵測使用者代理程式字串。

Vary HTTP 標頭是伺服器回應要求的部分內容,如下所示:

 

Mountain View

 

注釋:以上兩種類型都包括獨立的桌面網站和行動網站,您也可以只創建行動網站內容,即使在桌面瀏覽器展示時候也可以查看,但是往往用戶體驗不佳,所有內容會居中在網頁上,字體顯示也不是非常適當,常見範例為微信文章,如下圖

Mountain View

 

﹣回應式網頁 (Responsive Website)

 

回應式網頁設計 (RWD) 是一種設定,可讓伺服器一律向所有裝置發送相同的 HTML 程式碼,並透過 CSS 調整網頁在裝置上的呈現方式。回應式設計能為所有裝置提供相同的程式碼,可根據螢幕尺寸調整呈現方式。

您可以在不同的行動裝置用同一個URL 打開回應式網頁,查看擁有相同的 HTML 程式碼網站的完整內容。

 

Mountain View

 

要點

  • 使用 meta name="viewport" 標記,指示瀏覽器如何調整內容。
  • 前往我們的「Web 基礎知識」網站參閱更多相關文件。 

如要向瀏覽器傳送資訊,告知網頁會配合所有裝置適時調整,則請在文件的標題加入中繼標記: 

Mountain View

 

注意無論您使用以上三種類型網站配置的哪一種您都需要讓搜尋引擎知道您的網站配置。想要了解跟多詳情,定點擊這裡查看。我們還有最新的在線課程,講解行動網站,點擊這裡查看詳細課程回顧貼

 

如果您的網站不是行動網站,您的用戶只能這樣看了。數據表明,多數用戶在他們遇到體驗不佳的網站時,會立即退出,搜尋其他體驗更好的網站。想要提升您的行動網站,點擊這裡查看您可以利用那些工具採取什麼行動吧!

 

Mountain View

 

 

備註:

1)Wikipedia, Mobile Web, 2016 at https://en.wikipedia.org/wiki/Mobile_Web

2)CNN, New Google algorithm to favor mobile sites, 2015 at https://www.youtube.com/watch?v=CqdIUy5JF-E

0
評論
修訂者 社群站長 天琦 社群站長
‎2016-05-25 11:12

歡迎您在下面留言討論哦!