如何優(yōu)化移動(dòng)頁面中的head標(biāo)簽代碼更利于搜索引擎識(shí)別
時(shí)間：2022-05-28 10:39:01 | 來源：網(wǎng)絡(luò)營銷
時(shí)間：2022-05-28 10:39:01 來源：網(wǎng)絡(luò)營銷
開篇先摘錄一段新聞：“IDC報(bào)告顯示，2015年第一季度中國手機(jī)市場出貨量為1.1億部左右，同比下滑3.7%。其中智能手機(jī)市場出貨量為1億部左右，同比下降2.5%。這是過去6年以來，中國智能手機(jī)市場第一次出現(xiàn)季度同比下滑的情況。”
這意味這什么呢？簡單說，我國智能機(jī)不但普及，且已趨飽和，移動(dòng)紅利即將消耗貽盡，那對(duì)于網(wǎng)站優(yōu)化人員又意味著什么？結(jié)果上講，重大網(wǎng)站沒有完成移動(dòng)化，需亡羊補(bǔ)牢，中小網(wǎng)站去完成移動(dòng)化迫在眉睫。
制作出用戶體驗(yàn)良好的手機(jī)頁面只是萬事俱備，最為關(guān)鍵的臨門一腳是獲得搜索引擎的青睞，這樣才能得到精準(zhǔn)的用戶，很多網(wǎng)站擁有PC和移動(dòng)兩套頁面，從經(jīng)驗(yàn)上看，精準(zhǔn)、高效地被搜索引擎識(shí)別不但促進(jìn)移動(dòng)頁面的排名和流量獲取，對(duì)PC頁面也有額外的效果加成。
在經(jīng)歷了一輪輪移動(dòng)H5項(xiàng)目，看過很多移動(dòng)頁面識(shí)別和優(yōu)化的國外文章，更重要的是多次和百度相關(guān)人對(duì)話和解決問題后，我將一些常見的HTML識(shí)別細(xì)節(jié)總結(jié)了兩部分，用于促進(jìn)移動(dòng)頁面被搜索引擎識(shí)別、收錄，讓更多優(yōu)質(zhì)流量更早、更多地分發(fā)到自己頁面。
一、head標(biāo)簽中的部分 head標(biāo)簽是網(wǎng)頁的HEAD(頭)部分中包含有的內(nèi)置標(biāo)簽，一般用來申明使用的腳本語言，以及網(wǎng)頁傳輸時(shí)使用的方式等。
head中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等，文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在Web中的位置以及和其他文檔的關(guān)系等，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。
1、URL設(shè)計(jì) URL盡量含有通用已成趨勢的移動(dòng)命名，例如“m./wap./3g./mobi./mobile./mob/wml/”，可以在子域名等方面體現(xiàn)。
2、頁面頂部的doctype標(biāo)簽 作為協(xié)議的重要部分，doctype中是否移動(dòng)化也很重要，檢查是否存在與移動(dòng)相關(guān)的聲明，如這些關(guān)鍵詞，openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html
例：“<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN””http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>”
3、meta標(biāo)簽中的viewport屬性和x-ua-compatible屬性 viewport是移動(dòng)前端開發(fā)中最重要的標(biāo)簽，響應(yīng)式設(shè)計(jì)的根基，如果你的頁面是遵守響應(yīng)式設(shè)計(jì)的，那么說明這些頁面對(duì)移動(dòng)設(shè)備有友好的輸出。
典型的的viewport代碼是這樣的：<meta name=“viewport” content=“width=device-width, initial-scale=1.0″>，判斷移動(dòng)與否的關(guān)鍵屬性值為width，如果width=device-width這是典型的移動(dòng)友好的設(shè)計(jì)，增加判定為移動(dòng)頁面的砝碼，如果width有具體值，且值大于典型的移動(dòng)屏幕（應(yīng)該小于600），那么該頁面被判定為PC頁面的幾率大大增加。
但是META中還有一個(gè)很獨(dú)特的屬性（具體可查看億企邦《如何做好網(wǎng)頁中meta標(biāo)簽的SEO優(yōu)化設(shè)置》的相關(guān)介紹），作為SEO人員應(yīng)該很少接觸到，那就是x-ua-compatible屬性，該屬性是PC意味非常強(qiáng)烈的功能性代碼，示例代碼如此：<meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” />，從百度工程師處得知，該代碼會(huì)有較強(qiáng)暗示當(dāng)前頁面為PC頁面的功能，需選擇性使用。
4、title中的移動(dòng)暗示 制作移動(dòng)頁面時(shí)，在title標(biāo)簽中寫明：“移動(dòng)版”、“手機(jī)版”、“WAP版”、“觸屏版”不僅是照顧用戶體驗(yàn)的方案，也利于頁面的移動(dòng)識(shí)別，反之PC頁面要謹(jǐn)慎使用這些文案。
5、鏈接link標(biāo)簽的media和href屬性中需要注意的細(xì)節(jié)（多為樣式文件） media屬性值為screen時(shí)，表示屏幕中的顯示樣式，link的href所填寫的URL（基本為樣式文件的URL）就比較重要了，一定程度加大不同設(shè)備的偏重，此時(shí)URL中盡量出現(xiàn)/wap,/mobile/這樣的命名，同URL設(shè)計(jì)一樣，用于提高頁面識(shí)別為移動(dòng)的效率和概率，如URL中含有pc字樣則加大識(shí)別為PC頁面的幾率。
6、一些通用的PC類識(shí)別HTML代碼 embed：經(jīng)常用于嵌入多媒體；
object：用于嵌入對(duì)象；
marquee：老舊的滾動(dòng)特效實(shí)現(xiàn)代碼；
iframe：想必網(wǎng)站優(yōu)化人員很熟悉了，典型的PC常用標(biāo)簽；
這些典型的用于PC或者老舊的、HTML5已經(jīng)有更高效替代方案的舊標(biāo)簽，意味著使用它們將增加頁面的PC屬性，需要有目的地取舍。
7、一些javascript中典型的PC特征 加載swfobject、含有activexobject語句：移動(dòng)頁面根本不會(huì)使用如此重的多媒體引用方案（不信你問問你的前端工程師）。
含有netscape（網(wǎng)景）、msie（IE）、firefox(火狐)、browser.msie(IE)這些典型的非移動(dòng)端瀏覽器兼容代碼的。
設(shè)置了timer的，以及JS代碼含有settimeout的（此處不知道為什么設(shè)置timer還有識(shí)別的問題），均大幅增加識(shí)別為PC頁面的可能性。
以上這些代碼的優(yōu)化便是在<head></head>中出現(xiàn)的內(nèi)容。
二、正文body中需要注意的部分 鏈接和文本遵照的原則基本與head中一樣——多出現(xiàn)移動(dòng)相關(guān)的字眼；頁面設(shè)置的寬度不要超過常規(guī)移動(dòng)設(shè)備的大??；那些常識(shí)中（除非招錯(cuò)前端工程師）絕對(duì)只用于PC的一些兼容性代碼。
此外div塊的個(gè)數(shù)也值得注意，沒有哪家移動(dòng)頁面會(huì)過量使用div塊；還有典型的只用于適配PC機(jī)器的HTML代碼，例如：accesskey（如果移動(dòng)頁面用，要不前端招錯(cuò)人了，要不產(chǎn)品招錯(cuò)人了，應(yīng)該引起警覺）。
head和正文兩大部分，基本涵蓋了一張頁面最主要的部分。
網(wǎng)站優(yōu)化人員一定要把握這些使用細(xì)節(jié)，協(xié)助前端工程師從正反方向?qū)⒐镜腜C和手機(jī)頁面涇渭分明地呈現(xiàn)給搜索引擎，試想如果你每日被抓取頁面達(dá)到90%的識(shí)別率，而一般水平是70%，這種優(yōu)化增量是非常顯著的（具體可查看億企邦《移動(dòng)手機(jī)站的前端頁面SEO優(yōu)化技巧》的相關(guān)介紹）。
最后，分享一個(gè)機(jī)器學(xué)習(xí)的思想給網(wǎng)站優(yōu)化的新人，此文中心思想截取如下：“你從市場上的芒果里隨機(jī)的抽取一定的樣品（訓(xùn)練數(shù)據(jù)）， 制作一張表格，上面記著每個(gè)芒果的物理屬性，比如顏色、大小、形狀、產(chǎn)地、賣家等等（這些稱之為特征），還記錄下這個(gè)芒果甜不甜，是否多汁，是否成熟（輸出變量），你將這些數(shù)據(jù)提供給一個(gè)機(jī)器學(xué)習(xí)算法（分類算法/回歸算法），然后它就會(huì)學(xué)習(xí)出一個(gè)關(guān)于芒果的物理屬性和它的質(zhì)量之間關(guān)系的模型，下次你再去市集，只要測測那些芒果的特性（測試數(shù)據(jù)），然后將它輸入一個(gè)機(jī)器學(xué)習(xí)算法，算法將根據(jù)之前計(jì)算出的模型來預(yù)測芒果是甜的，熟的，并且還是多汁的。”
結(jié)合本文中的內(nèi)容、再結(jié)合你已經(jīng)爛熟于心的搜素引擎工作原理，設(shè)想一下，你的所有頁面都是芒果，百度是帶有識(shí)別模型（且該模型會(huì)自己訓(xùn)練、糾正自己）的芒果鑒別器，怎么讓你的芒果持續(xù)性地、每次被拿起來都進(jìn)入那個(gè)又大、又甜、又多汁的籃子？那些一眼就看出來的大甜芒果當(dāng)然好判斷，那些一眼看不出來的呢？我們能不能多生產(chǎn)些一眼就看出來好壞的芒果呢？這樣整個(gè)果園是不是好收割一點(diǎn)？
億企邦點(diǎn)評(píng)： 對(duì)于手機(jī)網(wǎng)站的首頁或者頻道首頁的網(wǎng)頁代碼中的keywords、description最好加上與PC端有所區(qū)別的meta標(biāo)簽和關(guān)鍵詞，在每個(gè)頁面的關(guān)鍵字及描述像做傳統(tǒng)PC端網(wǎng)站一樣，做好針對(duì)性的填寫工作，對(duì)搜索結(jié)果的展現(xiàn)(摘要)以及優(yōu)化工作大有幫助。
另外，確保在手機(jī)網(wǎng)站或者PC端網(wǎng)站各個(gè)頁面上有相應(yīng)的導(dǎo)航或者提示鏈接，讓用戶可以在手機(jī)版和PC版進(jìn)行切換，也便于搜索引擎更好的收錄。
關(guān)鍵詞：識(shí)別,索引,標(biāo)簽
在線咨詢