自2015年推出所謂的mobilegeddon以來(lái)，移動(dòng)設(shè)備的重要性與日俱增，網(wǎng)站移動(dòng)優(yōu)化已經(jīng)成為一個(gè)必須關(guān)注的問(wèn)題，從事 SEO優(yōu)化工作的學(xué)生必須考慮環(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)友好的和打開(kāi)速度更快。我們可以通過(guò)幾種不同的方式將移動(dòng)功能引入到網(wǎng)站中，如子域、RWD、動(dòng)態(tài)服務(wù)等。
1、 為什么網(wǎng)站要適應(yīng)移動(dòng)設(shè)備？
日前，杰克根據(jù)相關(guān)權(quán)威數(shù)據(jù)撰寫(xiě)了一篇題為《百度瀏覽器使用年度報(bào)告》的文章。文章中我們可以看到，2019年，百度瀏覽器移動(dòng)端的使用概率將達(dá)到70%，而PC端的使用概率僅為30%。不用說(shuō)，單憑這些數(shù)據(jù)就足以凸顯移動(dòng)設(shè)備在瀏覽器市場(chǎng)份額中的重要性！因此，我們應(yīng)該盡力優(yōu)化我們網(wǎng)站的內(nèi)容，以更好地適應(yīng)移動(dòng)設(shè)備的內(nèi)容可見(jiàn)性。
因此，我們需要考慮兩個(gè)非常重要的問(wèn)題：
1因?yàn)榫W(wǎng)站內(nèi)容基本上都是在PC端設(shè)計(jì)和編輯的，PC端設(shè)備的顯示寬度與移動(dòng)端完全不同，PC端的內(nèi)容怎么能在移動(dòng)端呈現(xiàn)呢？所謂的自適應(yīng)主題真的那么好嗎！
2PC端使用的網(wǎng)絡(luò)信號(hào)大多為100兆，網(wǎng)速穩(wěn)定，網(wǎng)頁(yè)打開(kāi)速度快，而很多移動(dòng)終端使用的是3G和4G網(wǎng)絡(luò)，會(huì)受到外部環(huán)境的影響，那么如何優(yōu)化移動(dòng)終端的速度來(lái)提高呢？
我們不要急于回答這兩個(gè)問(wèn)題。首先，我們來(lái)看看市場(chǎng)上主流的三種移動(dòng)終端優(yōu)化方法：響應(yīng)式設(shè)計(jì)（RWD）、動(dòng)態(tài)服務(wù)（dynamic service）和移動(dòng)終端域（subdomian）
2、 三種移動(dòng)終端優(yōu)化方法的優(yōu)缺點(diǎn)
優(yōu)勢(shì)：
缺點(diǎn)：
然而，使用單獨(dú)的移動(dòng)子域也帶來(lái)了許多問(wèn)題。因?yàn)榫W(wǎng)站的每個(gè)頁(yè)面都有一份文本，所以您需要找到一個(gè)防止重復(fù)內(nèi)容的解決方案。另外，還需要想辦法將合適的頁(yè)面版本傳遞給特定的用戶(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è)備的屬性
杰克先生，讓我們給學(xué)生們?cè)黾右恍┲R(shí)
1它可以將網(wǎng)站的PC頁(yè)面指向移動(dòng)頁(yè)面，告訴搜索引擎你的PC頁(yè)面有相應(yīng)的移動(dòng)頁(yè)面，有助于移動(dòng)搜索引擎向移動(dòng)設(shè)備用戶(hù)提供相應(yīng)的移動(dòng)頁(yè)面；
2它可以告訴搜索引擎網(wǎng)站的RSS聚合內(nèi)容和sitemap站點(diǎn)地圖的位置，有助于搜索引擎抓取web內(nèi)容；
三、它可以用來(lái)選擇不同CSS樣式表文件之間的切換控制效果
link標(biāo)簽的rel=“alternate”屬性被添加到網(wǎng)頁(yè)的head區(qū)域，即head和/head之間。
用法1：移動(dòng)搜索適應(yīng)網(wǎng)站的移動(dòng)版本
響應(yīng)式頁(yè)面設(shè)計(jì)技術(shù)的引入，徹底改變了內(nèi)容傳遞方式，真正提升了移動(dòng)用戶(hù)的用戶(hù)體驗(yàn)。RWD意味著你的網(wǎng)站內(nèi)容將在不同的顯示設(shè)備之間進(jìn)行轉(zhuǎn)換，以便根據(jù)不同設(shè)備的顯示寬度來(lái)調(diào)整布局和分辨率。根據(jù)設(shè)備的寬度，相同的HTML代碼將提供給手機(jī)和桌面，而CSS將決定呈現(xiàn)頁(yè)面的適當(dāng)方式。
響應(yīng)式設(shè)計(jì)的優(yōu)點(diǎn)：
在每個(gè)頁(yè)面的頭文件中添加以下代碼后，metaname=“viewport”content=“width=device width，initial scale=1”，學(xué)生不需要為每個(gè)頁(yè)面部署特殊的移動(dòng)設(shè)備顯示效果版本，這為您節(jié)省了大量的機(jī)械化勞動(dòng)。
響應(yīng)式設(shè)計(jì)的缺點(diǎn)：
由于設(shè)計(jì)的需要，PC端的一些內(nèi)容可能會(huì)與不同部分的內(nèi)容重疊，這意味著div的邊距和填充將與初始值有很大的不同。因?yàn)檫@些設(shè)置是用代碼參數(shù)進(jìn)行的，所以在PC端顯示它們是沒(méi)有問(wèn)題的。但是，當(dāng)它們顯示在移動(dòng)端時(shí)，由于邊距和填充的參數(shù)沒(méi)有改變，所以在顯示移動(dòng)端時(shí)它們沒(méi)有改變，很可能是放錯(cuò)了位置！
三、動(dòng)態(tài)服務(wù)
我不知道學(xué)生們是否聽(tīng)說(shuō)過(guò)bootstrap框架。這是twitter推出的前端網(wǎng)頁(yè)構(gòu)建框架，能夠很好地適應(yīng)前端內(nèi)容在不同顯示設(shè)備上的顯示，特別是移動(dòng)內(nèi)容的加載速度。Bootstrap框架采用12網(wǎng)格內(nèi)容構(gòu)建技術(shù)，通過(guò)代碼監(jiān)控不同顯示設(shè)備的寬度來(lái)顯示內(nèi)容。
動(dòng)態(tài)服務(wù)的優(yōu)勢(shì)：
響應(yīng)時(shí)間快，無(wú)論是在移動(dòng)終端還是PC終端都能很快的顯示出網(wǎng)站頁(yè)面的內(nèi)容，如果優(yōu)化效果更好，基本上頁(yè)面都能達(dá)到秒級(jí)的效果。此外，所呈現(xiàn)的內(nèi)容能夠更好地適應(yīng)移動(dòng)終端設(shè)備的寬度，并且在上述兩種方式中不會(huì)存在顯示缺陷
動(dòng)態(tài)服務(wù)的缺點(diǎn)：
需要有一些前端設(shè)計(jì)代碼的基礎(chǔ)知識(shí)，其中強(qiáng)調(diào)CSS代碼的使用。因?yàn)樵赽ootstrap框架下，很多原來(lái)的CSS代碼都被重新編輯過(guò)，學(xué)生需要根據(jù)自己網(wǎng)站的實(shí)際情況進(jìn)行設(shè)計(jì)。否則，顯示的前端內(nèi)容將放錯(cuò)位置。
最后，還有一項(xiàng)技術(shù)我需要在這里簡(jiǎn)單提及，它是由百度正式提出的。AMP頁(yè)面的超常速度部分是因?yàn)镚oogle緩存了加速頁(yè)面，這樣它們就可以通過(guò)自己的服務(wù)器非?？焖俚亟桓?。Amp技術(shù)可以大大提高移動(dòng)端頁(yè)面的加載速度，但這種效果是通過(guò)犧牲一定的JavaScript效果來(lái)實(shí)現(xiàn)的。Amp頁(yè)面是用特殊的HTML、JS庫(kù)和CSS代碼構(gòu)建的，它們受到嚴(yán)格限制，以確?？煽康男阅堋５?，這些函數(shù)的局限性是很多人無(wú)法接受的，因此有一定代碼基礎(chǔ)的學(xué)生會(huì)選擇使用bootstrap和其他框架來(lái)重建頁(yè)面的內(nèi)容！