外貿(mào) 網(wǎng)站移動(dòng)端優(yōu)化 淺析

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

一、為什么要讓網(wǎng)站適配移動(dòng)設(shè)備？

前幾天，Jack老師根據(jù)相關(guān)權(quán)威數(shù)據(jù)寫(xiě)了一篇文章叫做《谷歌瀏覽器使用情況年度報(bào)告》，在文章中我們可以看到2019年google瀏覽器移動(dòng)端的使用概率達(dá)到了70%，而PC端的使用概率才堪堪達(dá)到30%。其他的不用說(shuō)，光憑這一條數(shù)據(jù)就已經(jīng)足夠凸顯移動(dòng)端設(shè)備在瀏覽器使用市場(chǎng)份額上的重要性！所以我們要千方百計(jì)的去優(yōu)化我們的網(wǎng)站內(nèi)容以更好的適配程度去貼合移動(dòng)端設(shè)備的內(nèi)容可見(jiàn)性。

那么這里我們就需要考慮兩個(gè)很重要的問(wèn)題：

1.因?yàn)榫W(wǎng)站內(nèi)容基本都在PC端進(jìn)行設(shè)計(jì)和編輯，而pc端和移動(dòng)端的設(shè)備顯示寬度完全不同，那么在pc端的內(nèi)容如果才能完美的呈現(xiàn)在移動(dòng)端設(shè)備上？所謂的自適應(yīng)主題真的那么ok嗎！

2.PC端用的網(wǎng)絡(luò)信號(hào)很多是百兆千兆，網(wǎng)絡(luò)速度穩(wěn)定網(wǎng)頁(yè)打開(kāi)速度較快，而移動(dòng)端很多在使用3G和4G的網(wǎng)絡(luò)，會(huì)受到外界環(huán)境影響，所以移動(dòng)端速度該如何進(jìn)行優(yōu)化才能提升？

這兩個(gè)問(wèn)題我們先不急著回答，先來(lái)看看現(xiàn)在市場(chǎng)上主流的三種移動(dòng)端優(yōu)化方式：響應(yīng)式設(shè)計(jì)(RWD)，動(dòng)態(tài)服務(wù)(Dynamic Service)和移動(dòng)端子域(subdomian)

二、移動(dòng)端優(yōu)化三種方法的利弊

1.移動(dòng)端子域(subdomain)

優(yōu)點(diǎn)：

什么叫移動(dòng)端子域？就是以主域名www.domain.com為主體，單獨(dú)的重新搭建一個(gè)子域名為m.domain.com，這個(gè)子域名所對(duì)應(yīng)的網(wǎng)站急速移動(dòng)端子域。這樣你就可以為你的移動(dòng)網(wǎng)站提供一套單獨(dú)的代碼，而且這樣做有一個(gè)顯著的優(yōu)勢(shì)：代碼可以從頭開(kāi)始構(gòu)建，同時(shí)還可以考慮到移動(dòng)友好性。所以移動(dòng)端子域的做法可以讓你可以獲得一個(gè)網(wǎng)站，既有良好的用戶(hù)體驗(yàn)，還有高效率的移動(dòng)設(shè)備響應(yīng)表現(xiàn)。

缺點(diǎn)：
但是，使用單獨(dú)的移動(dòng)子域也會(huì)帶來(lái)許多問(wèn)題。由于網(wǎng)站的每個(gè)頁(yè)面都有文字副本，因此你需要找到對(duì)應(yīng)的解決方案以防止出現(xiàn)重復(fù)內(nèi)容的問(wèn)題。此外，你還需要找出將頁(yè)面的適當(dāng)版本交付給特定用戶(hù)的方法，否則很容易造成用戶(hù)的閱讀困惑和內(nèi)容識(shí)別的矛盾！

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

在這里Jack老師給同學(xué)們補(bǔ)充一下知識(shí)點(diǎn)：

alternate標(biāo)簽的作用

1、可用于將網(wǎng)站的PC版頁(yè)面指向移動(dòng)版頁(yè)面，告訴搜索引擎你的PC版網(wǎng)頁(yè)有對(duì)應(yīng)的移動(dòng)版頁(yè)面，這有利于移動(dòng)搜索引擎向手機(jī)移動(dòng)設(shè)備的用戶(hù)提供相應(yīng)移動(dòng)版的網(wǎng)頁(yè)；

2、可以用于告訴搜索引擎網(wǎng)站的RSS聚合內(nèi)容和sitemap網(wǎng)站地圖的位置，利于搜索引擎抓取網(wǎng)頁(yè)內(nèi)容；

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

alternate用法

標(biāo)簽的rel=”alternate”屬性添加的位置是在網(wǎng)頁(yè)的頭部區(qū)域，也就是

和之間。

用法1：用于移動(dòng)搜索適配網(wǎng)站的移動(dòng)版

第一步：在PC端代碼中的頁(yè)面

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

第二步：在移動(dòng)版頁(yè)面添加 rel=”canonical”屬性，將移動(dòng)版頁(yè)面規(guī)范到PC版頁(yè)面
代碼：

2.響應(yīng)式網(wǎng)站頁(yè)面設(shè)計(jì)(RWD)

響應(yīng)式頁(yè)面設(shè)計(jì)的技術(shù)引入徹底改變了內(nèi)容提供方式，并真正改善了移動(dòng)用戶(hù)的用戶(hù)體驗(yàn)。RWD意味著你的網(wǎng)站內(nèi)容將在不同顯示設(shè)備之間進(jìn)行轉(zhuǎn)換，從而針對(duì)不同的設(shè)備顯示寬度調(diào)整其布局和分辨率。根據(jù)設(shè)備寬度的不同，相同的HTML代碼將提供給手機(jī)和臺(tái)式機(jī)，而CSS將確定呈現(xiàn)頁(yè)面的適當(dāng)方式。

響應(yīng)式設(shè)計(jì)的優(yōu)點(diǎn)：
在每個(gè)頁(yè)面的頭部文件中添加了如下代碼之后??,同學(xué)們就不用在為每個(gè)頁(yè)面再去部署專(zhuān)門(mén)的移動(dòng)端設(shè)備顯示效果版本，為你省下大量的重復(fù)性機(jī)械化勞動(dòng)。

響應(yīng)式設(shè)計(jì)的缺點(diǎn)：
某些內(nèi)容在PC端因?yàn)樵O(shè)計(jì)的需要，可能會(huì)對(duì)不同板塊內(nèi)容之間進(jìn)行重疊，這也就意味著div的margin和padding會(huì)和初始值有很大的不同，這些設(shè)置因?yàn)槭怯么a參數(shù)做的，在PC端顯示沒(méi)有問(wèn)題，但是在移動(dòng)端展示的時(shí)候，因?yàn)閙argin和padding的參數(shù)并沒(méi)有發(fā)生改變，所以在移動(dòng)端顯示的時(shí)候很可能會(huì)發(fā)生錯(cuò)位！

3.動(dòng)態(tài)的網(wǎng)站服務(wù)(Dynamic Service)

不知道同學(xué)們有沒(méi)有聽(tīng)說(shuō)過(guò)Bootstrap框架，這是twitter推出的一款前端構(gòu)建網(wǎng)頁(yè)的框架，能夠很好的適配前端內(nèi)容在不同顯示設(shè)備上的展示，特別是針對(duì)移動(dòng)端的內(nèi)容加載速度有著非常好的表現(xiàn)。Bootstrap框架采用的是12格柵格內(nèi)容構(gòu)建技術(shù)，通過(guò)代碼來(lái)監(jiān)聽(tīng)不同顯示設(shè)備寬度來(lái)展現(xiàn)內(nèi)容。

動(dòng)態(tài)服務(wù)的優(yōu)點(diǎn)：
快速的反應(yīng)時(shí)間，不管是在移動(dòng)端還是PC端都能夠非?？斓恼宫F(xiàn)網(wǎng)站頁(yè)面的內(nèi)容，如果在優(yōu)化比較好的情況下，基本上的網(wǎng)頁(yè)都能夠達(dá)到秒開(kāi)的效果。而且展現(xiàn)的內(nèi)容能夠更好的貼合移動(dòng)端設(shè)備的寬度，不會(huì)有上面兩種方式的顯示缺陷

動(dòng)態(tài)服務(wù)的缺點(diǎn)：
需要具備一定的前端設(shè)計(jì)代碼基礎(chǔ)知識(shí)，這其他特別強(qiáng)調(diào)對(duì)CSS代碼的運(yùn)用。因?yàn)樵贐ootstrap框架中很多原本的css代碼已經(jīng)被重新編輯，同學(xué)們需要根據(jù)自己網(wǎng)站的實(shí)際情況進(jìn)行有針對(duì)性的設(shè)計(jì)。否則，展現(xiàn)出來(lái)的前端內(nèi)容也是會(huì)發(fā)生錯(cuò)位的情況。

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

AMP技術(shù)確實(shí)能夠大幅度的提高頁(yè)面在移動(dòng)端的加載速度，但是這種效果的背后是依靠犧牲一定的JAVASCRIPT效果來(lái)實(shí)現(xiàn)的。AMP頁(yè)面是使用特殊的?HTML，JS庫(kù)和CSS代碼構(gòu)建的，嚴(yán)格限制了這些頁(yè)面以確?？煽康男阅堋５?#xff0c;這些功能的限制對(duì)很多人來(lái)說(shuō)是不能接受的，所以有一定代碼基礎(chǔ)的同學(xué)都會(huì)選擇用Bootstrap等框架來(lái)重新構(gòu)建頁(yè)面的內(nèi)容！

好了，以上就是本章關(guān)于外貿(mào) 網(wǎng)站移動(dòng)端優(yōu)化 淺析的全部?jī)?nèi)容，如果還有不理解的地方，沒(méi)有關(guān)系，解決方案如下：

百度或者谷歌瀏覽器搜索? ?“JACK外貿(mào)建站”，排名首頁(yè)首位的就是我的網(wǎng)站。網(wǎng)站上有更多免費(fèi)的外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶(hù)開(kāi)發(fā)等實(shí)操干貨知識(shí)等著你哦！

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

QQ:3233269705

QQ群：645296397

微信公眾號(hào)：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。