Embed Size (px)
Citation preview
Mobile SEO Tips
行動載具的搜尋引擎優化指南
Prepare by : WIS 社群編輯室 Neal Liou
Date: 2015 / 04 / 21
前言
Google 演算法將於 04/21 大幅更新，重頭戲便是加入行動網站友善程度 (Mobile Friendly) 的評比，也就是當行動網站內容的關聯度較高，且合乎使用者體驗的易用性，就能提升網站排名。 因此我們認為，面向行動行銷，重視行動網站友善程度將是行銷人員不可忽視的課題。以下分享幾種優化行動網站的實務方法，輕鬆讓網站排名 UP UP！
在優化行動網站前，先思考在不同配置下， URL 與 HTML 仍然與桌機版網站維持一致嗎？
URL
HTML
響應式網頁設計 動態服務 使用獨立網址
響應式網頁設計 (RWD, Responsive web design)，網站使用 CSS3 Media Queries 方式，以百分比的方式與彈性的畫面設計，在不同解析度下自動調整網頁佈局，使網站適應多螢且跨屏之最佳視覺體驗。
響應式網頁設計
在網頁語法中請多多利用 meta name ＝〝viewport〞讓瀏覽器瞭解
如何去調整最佳解析度。
Google 推薦使用響應式網頁設計！ WHY?
1
3
5
2
4
6
有利於網友可以使用單一網址分享內容。
適應多螢跨屏設定，幫助 Google 搜尋引擎更準確地判斷及索引不同網站版本與類型。
提高網站內容於不同載具間的閱讀效果，無需轉址設定，並且降低下載時間。
降低瀏覽錯誤發生的機率。
減少網站內容維護的時間。
有助於 Google 機器人更有效率抓取網站，間接提升 SEO 效果。
動態服務 (Dynamic Serving)
藉由動態服務設定，能讓伺服器依據網頁使用者用戶代理 (User Agent) 的要求將同一網址傳回不同的 HTML 與 CSS，並利用 Vary HTTP Header 依據用戶代理回傳的資訊，協助 Google 機器人辨別不同的瀏覽載具，以適應行動裝置的網站內容。
獨立網址 (Separate URL)
每個桌機版網站網址都具有一個對應的不同網址，用於提供針對行動裝置最佳化的內容。
破解行動裝置 SEO 的勝利方程式！
Action 1
確認 Google 機器人能抓取你的 JavaScript ， 並藉由 “Fetch as Google” 工具確認 CSS 與圖檔是否正常顯示。
Action 2
透過 Google 網站管理員工具測試與確認robots.txt。
Action 3
利用 Google Mobile-Friendly 工具測試行動網站的友善程度，並改善使用者體驗。
Action 4
如果使用獨立網址，請確認桌機版與行動網站的網址，並測試 Google 機器人能各別抓取不同的網站內容。
行動網站應避免無法顯示的內容！ 必做功課！
01 選擇支援 HTML 5 的動態圖片，讓使用者能夠感受最佳化體驗。
02 利用 Video-embedding 編碼嵌入網頁，降低影片播放失敗的風險。
03 透過影片文字原始碼能讓使用輔助瀏覽工具的網友們更容易瞭解影片內容。
執行以下三步驟避免重新指向的錯誤！
02 優化伺服器設定，當它指向到智慧型手機用戶時，將會引導用戶自動連結到行動網站。
01 利用 Google 網站管理工具，找出網站錯誤並持續 改善。
03 確認行動網站的網址能準確導入正確的頁面，且內容與桌機版一致且正確。
利用行動裝置瀏覽網站時出現錯誤提示？
我們可以嘗試以下兩種做法：
01
02
如果使用動態服務提供展示內容，應確保用戶代理偵察的設定是正確的。
如果網站沒有相對應的行動網站，建議讓網友只瀏覽桌機版網站；畢竟這總比向網友一直顯示錯誤訊息來的好。
應用程式 (App) 下載提示
使用簡易橫幅廣告嵌入網頁內容中來宣傳應用程式 (App)。兩種執行方式：
Recommended Action 1
使用瀏覽器和作業系統內建的支援機制。
Recommended Action 2
利用 HTML Banner 或圖片（類似於廣告提示），指引網友前往正確的 App 商店下載。
如果設置失敗，插頁廣告將阻止使用者瀏覽網站
正確的 HTML 橫幅廣告能協助宣傳應用程式之目的。
行動網站載入速度緩慢
應設法提升行動網站的載入速度，如果載入時間過長，網友可能不願意花時間等待，而選擇跳出網頁
建議做法： • 使用 Google PageSpeed Insights 解決行動網站載入速度問題。
善用以下四種語法優化行動網站！
04 03
02 01 Mobile SEO
Rel="alternate" media Vary: "User-Angent" HTTP Header
"Rel=Canonical" "Rel=next/prev"
優化行動網站的第一步：網頁設計！
錯誤做法 正確做法
使用 Flash 動畫 使用 POP 文字檔 選單與網頁點選按鈕設計不良
瀏覽動線未經過設計
優化 Title 與 Meta Description
重視在地化行銷（網站添加店家資訊），以提高在地化 SEO 優化效果
利用 Sitemap 提升搜尋引擎檢索網站速度
使用 Schema.org 標示網頁資料，協助搜尋引擎瞭解網站內容
vs
為什麼行動網站優化如此重要？
Google 搜尋引擎偏好友善的行動網站。
全球手機使用量高達 40 億，其中智慧型手機佔約 30%。
約 50% 的在地搜尋來自於行動裝置。 03
04 Facebook 約三分之一用戶瀏覽其行動網站；Twitter 約一半的用戶瀏覽其行動網站。
05 約 86% 的網路使用者，利用行動載具觀看網路電視。
02
01
06 行動網站載入時間每延遲一秒，則降低 7% 的轉換率。
Take Action for Mobile Friendly!
01 導入更多流量
02 提升
使用者經驗
03 提升轉換率
04 增加
停留時間
05 降低跳出率
06 提升
載入速度
07 具有競爭優勢
08 增加參與互動
09 促進 SEO 效果
參考資料
Infographic: Mobile SEO Tips To Help You Survive The Coming Google Mopocalypse
Finding more mobile-friendly search results
About Us
WIS 社群編輯室由匯智資訊股份有限公司不同服務部門的夥伴共筆經營，我們閱讀的主題廣泛，洞察網路行銷發展趨勢與現狀，希望與大家分享關於網站營運、社群行銷、數位廣告之多元觀點。
歡迎您透過下列社交平台與我們腦力激盪！
