外貿 網站移動端優化 淺析

? ? 自2015年推出所謂的Mobilegeddon以來，移動設備的重要性一直在不斷增長， 網站移動端優化 就成了不得不引起重視的問題，同學們從事谷歌SEO優化工作就必須考慮不斷變化的環境，從而在對應的項目上進行相關的操作。在移動優先索引世界中，只有在移動設備上提供良好用戶體驗的網站才能夠獲得谷歌搜索引擎的青睞。這意味著頁面必須確保移動友好性和更快的網頁打開速度。我們可以通過幾種不同的方式在網站上引入移動功能，比方說：subdomain，RWD,Dynamic Serving等等。

一、為什么要讓網站適配移動設備？

前幾天，Jack老師根據相關權威數據寫了一篇文章叫做《谷歌瀏覽器使用情況年度報告》，在文章中我們可以看到2019年google瀏覽器移動端的使用概率達到了70%，而PC端的使用概率才堪堪達到30%。其他的不用說，光憑這一條數據就已經足夠凸顯移動端設備在瀏覽器使用市場份額上的重要性！所以我們要千方百計的去優化我們的網站內容以更好的適配程度去貼合移動端設備的內容可見性。

那么這里我們就需要考慮兩個很重要的問題：

1.因為網站內容基本都在PC端進行設計和編輯，而pc端和移動端的設備顯示寬度完全不同，那么在pc端的內容如果才能完美的呈現在移動端設備上？所謂的自適應主題真的那么ok嗎！

2.PC端用的網絡信號很多是百兆千兆，網絡速度穩定網頁打開速度較快，而移動端很多在使用3G和4G的網絡，會受到外界環境影響，所以移動端速度該如何進行優化才能提升？

這兩個問題我們先不急著回答，先來看看現在市場上主流的三種移動端優化方式：響應式設計(RWD)，動態服務(Dynamic Service)和移動端子域(subdomian)

二、移動端優化三種方法的利弊

1.移動端子域(subdomain)

優點：

什么叫移動端子域？就是以主域名www.domain.com為主體，單獨的重新搭建一個子域名為m.domain.com，這個子域名所對應的網站急速移動端子域。這樣你就可以為你的移動網站提供一套單獨的代碼，而且這樣做有一個顯著的優勢：代碼可以從頭開始構建，同時還可以考慮到移動友好性。所以移動端子域的做法可以讓你可以獲得一個網站，既有良好的用戶體驗，還有高效率的移動設備響應表現。

缺點：
但是，使用單獨的移動子域也會帶來許多問題。由于網站的每個頁面都有文字副本，因此你需要找到對應的解決方案以防止出現重復內容的問題。此外，你還需要找出將頁面的適當版本交付給特定用戶的方法，否則很容易造成用戶的閱讀困惑和內容識別的矛盾！

解決方案：
在谷歌官方文檔中，明確的指出了如果遇到上面這種問題—-要標記移動頁面，需要在頁面代碼中同時使用rel=canonical和rel=alternate屬性。在PC端，你應該添加rel=alternate標記，它將指示給定頁面的移動等價物。附加媒體標記描述rel=alternate鏈接中指示的設備的屬性

在這里Jack老師給同學們補充一下知識點：

alternate標簽的作用

1、可用于將網站的PC版頁面指向移動版頁面，告訴搜索引擎你的PC版網頁有對應的移動版頁面，這有利于移動搜索引擎向手機移動設備的用戶提供相應移動版的網頁；

2、可以用于告訴搜索引擎網站的RSS聚合內容和sitemap網站地圖的位置，利于搜索引擎抓取網頁內容；

3、可以用于選擇不同CSS樣式表文件之間的相互切換控制效果

alternate用法

標簽的rel=”alternate”屬性添加的位置是在網頁的頭部區域，也就是

和之間。

用法1：用于移動搜索適配網站的移動版

第一步：在PC端代碼中的頁面

與中間插入以下這句代碼
代碼：

第二步：在移動版頁面添加 rel=”canonical”屬性，將移動版頁面規范到PC版頁面
代碼：

2.響應式網站頁面設計(RWD)

響應式頁面設計的技術引入徹底改變了內容提供方式，并真正改善了移動用戶的用戶體驗。RWD意味著你的網站內容將在不同顯示設備之間進行轉換，從而針對不同的設備顯示寬度調整其布局和分辨率。根據設備寬度的不同，相同的HTML代碼將提供給手機和臺式機，而CSS將確定呈現頁面的適當方式。

響應式設計的優點：
在每個頁面的頭部文件中添加了如下代碼之后??,同學們就不用在為每個頁面再去部署專門的移動端設備顯示效果版本，為你省下大量的重復性機械化勞動。

響應式設計的缺點：
某些內容在PC端因為設計的需要，可能會對不同板塊內容之間進行重疊，這也就意味著div的margin和padding會和初始值有很大的不同，這些設置因為是用代碼參數做的，在PC端顯示沒有問題，但是在移動端展示的時候，因為margin和padding的參數并沒有發生改變，所以在移動端顯示的時候很可能會發生錯位！

3.動態的網站服務(Dynamic Service)

不知道同學們有沒有聽說過Bootstrap框架，這是twitter推出的一款前端構建網頁的框架，能夠很好的適配前端內容在不同顯示設備上的展示，特別是針對移動端的內容加載速度有著非常好的表現。Bootstrap框架采用的是12格柵格內容構建技術，通過代碼來監聽不同顯示設備寬度來展現內容。

動態服務的優點：
快速的反應時間，不管是在移動端還是PC端都能夠非常快的展現網站頁面的內容，如果在優化比較好的情況下，基本上的網頁都能夠達到秒開的效果。而且展現的內容能夠更好的貼合移動端設備的寬度，不會有上面兩種方式的顯示缺陷

動態服務的缺點：
需要具備一定的前端設計代碼基礎知識，這其他特別強調對CSS代碼的運用。因為在Bootstrap框架中很多原本的css代碼已經被重新編輯，同學們需要根據自己網站的實際情況進行有針對性的設計。否則，展現出來的前端內容也是會發生錯位的情況。

最后，還有一種技術我需要在這里簡單的提一下，那就是谷歌官方提出的AMP。AMP頁面的非凡速度部分是由于Google緩存了Accelerated頁面，以便由其自己的服務器超快地交付這些頁面而形成的。

AMP技術確實能夠大幅度的提高頁面在移動端的加載速度，但是這種效果的背后是依靠犧牲一定的JAVASCRIPT效果來實現的。AMP頁面是使用特殊的?HTML，JS庫和CSS代碼構建的，嚴格限制了這些頁面以確保可靠的性能。但是，這些功能的限制對很多人來說是不能接受的，所以有一定代碼基礎的同學都會選擇用Bootstrap等框架來重新構建頁面的內容！

好了，以上就是本章關于外貿 網站移動端優化 淺析的全部內容，如果還有不理解的地方，沒有關系，解決方案如下：

百度或者谷歌瀏覽器搜索? ?“JACK外貿建站”，排名首頁首位的就是我的網站。網站上有更多免費的外貿建站、谷歌SEO優化、外貿客戶開發等實操干貨知識等著你哦！

(各位看官老爺，都看到這里了，就麻煩動動金手點擊轉發一下本文到自己的微信朋友圈吧，轉發過程如下)

QQ:3233269705

QQ群：645296397

微信公眾號：

總結

以上是生活随笔為你收集整理的谷歌浏览器外贸版_外贸 网站移动端优化 浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。