很多人糾結于前端HTML代碼與SEO有什么關聯,首先肯定是有關聯的,其次前端會嚴重影響關鍵詞排名,是做SEO所必須考慮的點。據百度的官方說法,相關性是排名的重要維度,前端布局或者說頁面模型是相關性的重要組成部分,也就是說前端,包括關鍵詞布局,內鏈調用機制,頁面模型這幾個點影響相關性,相關性影響排名,排名就是SEO的基本目標。
我在SEO授課的過程中,會經常給參加SEO培訓的學員灌輸頁面模型的概念。一個優質的頁面模型具備很多對搜索引擎友好的要素,如關鍵詞出現的位置,關鍵詞出現的頻次,當前頁面內鏈建設機制等。從一般層面來講,即通過不同的板塊來闡述當前頁面的核心點,維度不同,主題一致,具備很好的豐富性,這些點即是做SEO的核心。
title:只強調重點即可,重要關鍵詞出現不要超過2次,而且要靠前,每個頁面title要有所不同;
description:把網頁內容高度概括到這里,長度要合理,不可過分堆砌關鍵詞,每個頁面description要有所不同。
對于搜索引擎來說,最直接面對的就是網頁HTML代碼,如果代碼寫的語義化,搜索引擎就會很容易的讀懂該網頁要表達的意思。例如文本模塊要有大標題,合理利用h1-h6,列表形式的代碼使用ul或ol,重要的文字使用strong等等。總之就是要充分利用各種HTML標簽完成他們本職的工作,當然要兼容IE、火狐、Chrome等主流瀏覽器。
搜索引擎抓取HTML內容是從上到下,利用這一特點,可以讓主要代碼優先讀取,廣告等不重要代碼放在下邊。例如,在左欄和右欄的代碼不變的情況下,只需改一下樣式,利用float:left;和float:right;就可以隨意讓兩欄在展現上位置互換,這樣就可以保證重要代碼在最前,讓爬蟲最先抓取。同樣也適用于多欄的情況。
搜索引擎看網頁不像普通人,他是看源代碼,只要是源碼中的信息,都能被搜索引擎查看到。通常所說的權重標簽如H1標簽,strong標簽等,起著強調作用;圖片標簽alt起著解釋作用。這些前端中的標簽影響SEO結果,但不是絕對的。
蜘蛛不會讀取JS里的內容,所以重要內容必須放在HTML里;
盡少使用iframe框架。搜索引擎不會抓取到iframe里的內容,重要內容不要放在框架中。
如果需要兼顧用戶體驗和SEO效果,在必須用圖片的地方,例如個性字體的標題,我們可以利用樣式控制,讓文本文字不會出現在瀏覽器上,但在網頁代碼中是有該標題的。
例如這里的“電視劇分類”,為了完美還原設計圖,前端工程師可以把文字做成背景圖,之后用樣式讓html中的文字的縮進設置成足夠大的負數,偏離出瀏覽器之外,也可以利用設置行高的方法讓文字隱藏。注意:不可使用display:none;的方法讓文字隱藏,因為搜索引擎會過濾掉display:none;里邊的內容,就不會被蜘蛛檢索了。
如果文字長度過長,可以用樣式截取,設置高度,超出的部分隱藏即可。這樣做的好處是讓文字完整呈現給搜索引擎,同時在表現上也保證了美觀。
可以在上線前,使用一些工具,把HTML、CSS和JS都壓縮、格式化一下,可以減少頁面大小;不使用CSS表達式,會影響效率;使用CDN網絡,可加快用戶訪問速度;啟用GZIP壓縮,瀏覽速度變快,搜索引擎的蜘蛛抓取信息量也會增大。
如果是動態網頁,可以開啟偽靜態功能,讓蜘蛛“誤以為”這是靜態網頁,因為靜態網頁比較合蜘蛛的胃口,如果url中帶有關鍵詞效果更好。