前端頁面代碼seo

網站由后端和前端兩部分構成，其中前端是呈現給用戶的，筆者在本文將給大家講述前端頁面代碼seo，當然仍然是基于優化seo的。

就前端而言，如果做了偽靜態處理，那么基本就是普通的html代碼，正常情況下這些頁面內容都是通過頁面模板來輸出。那么前端的頁面代碼有哪些地方需要seo呢，我們從以下幾個方面來看看。

一、頭部冗余代碼

有些開源的網站程序在<meta>里加入了大量的代碼，如果不查看源代碼根本看不到，這對用戶來說并沒什么，但有些代碼完全是多余的，甚至有些代碼使用不當還會導致一些不必要的錯誤。

筆者建議，<meta>里的代碼盡量簡潔，用不到的直接丟棄，另外，不能確定如何使用的代碼也果斷放棄。精簡代碼對于頁面打開的速度有一定的好處。

二、代碼位置

代碼的位置處理其實是個小細節，但意義不小。百度關鍵詞優化指南明確指出，頁面應該盡量讓主體內容優先呈現，什么叫主體內容？舉個簡單的例子，文章頁，文章的具體內容就是主體內容，其他的像邊欄、相關內容等模塊就是附加內容。

部分使用了兩欄的網站頁面，左邊是邊欄，右邊是頁面主體，在前端代碼里則使用了從上到下、從左到右的順序。這樣的代碼處理對用戶閱讀沒有不妥，但對于爬取代碼的搜索引擎來說，就是先抓取了次要內容，后再抓取到主體內容，對優化seo而言，這不合理。

其實要解決代碼位置的問題很簡單，現在絕大部分網站都是使用div+css，我們只需要稍微調整下代碼即可！比如通過div的float屬性處理左右位置，在頁面模板里把右側內容區塊放置到上面。

三、結構化和H標簽

這里的結構化主要是針對H標簽及div區塊來說的，比如說H標簽能標注處頁面哪些內容是** 重要的，哪些是次重要的。關于H標簽推薦大家閱讀頁面H標簽怎么使用一文。

至于div其實也很好理解，比如說把某些相關性強的內容放到一個div中，這樣就可以很明確的跟其他內容區分開。舉個** 簡單的例子，還是說文章頁，我們可以把文章內容放到一個div中，相關推薦內容放到一個div中，邊欄放到一個div中，經過這樣處理，整個頁面代碼就有了明顯的架構化和層次感。

讓頁面代碼結構化及設置H標簽，目的就是輔助搜索引擎更好的識別和抓取頁面內容，這對于優化seo來說是有好處的。

四、css外調

css代碼應該放置在一個獨立的文件中，因為css文件中很多樣式同時被不同類型的頁面調用，設置獨立文件再進行調用就** 了頁面代碼的整潔，避免代碼冗余。

PS：** 近有種說法，就是除去公共部分的css代碼，把頁面單獨使用到的css代碼直接寫在頁面模板里，這樣精簡css文件代碼，在調用css文件的時候減少代碼渲染的時間，提供頁面打開速度。這在理論上是可行的，只是會讓工作量加大，大家具體權衡吧！

五、盡量少用js

有些朋友為了讓頁面看起來更炫酷，使用了大量的js代碼，這樣炫酷的效果是達到了，但卻忽略了這些特效的代碼會大大影響頁面打開速度！對優化seo是極為不利的。

六、圖片處理

關于圖片的處理注意說兩點，一是添加圖片的alt屬性，來幫助搜索引擎識別圖片內容；二是設置尺寸，尤其是在pc端，設置了尺寸，打開頁面后就減少了渲染的過程。

在前端頁面代碼seo中還有很多小細節，大家需要記住，能夠提高頁面打開速度以及有助于搜索引擎識別頁面內容的地方都值得去研究。