前端開發中的SEO

時間 2019-11-24

標籤前端開發 seo 欄目網站開發简体版

原文原文鏈接

什麼是SEO

SEO由英文Search Engine Optimization縮寫而來，
中文意譯爲「搜索引擎優化」。SEO是指從天然搜索結果得到網站流量的技術和過程，是在瞭解搜索引擎天然排名機制的基礎上，
對網站進行內部及外部的調整優化，改進網站在搜索引擎中的關鍵詞天然排名，得到更多流量，從而達成網站銷售及品牌建設的目標。html

SEO的分類

白帽SEO：改良和規範網站設計，使之對搜索引擎和用戶更加友好，是一種搜索引擎推薦的作法。
黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正當競爭獲取更多的訪問量。（例如最近花千骨電視劇熱播，立刻有一些網站使用這個標題標題，可是內容倒是推銷廣告的，給廣大網名形成很大困擾）。

SEO的主要方面

網站標題、關鍵字、描述
網站內容優化
合理設置Robot.txt文件
生成對搜索引擎友好的網站地圖
增長外鏈引用
其中最重要的是如下2個方面：
網站結構佈局優化
網頁代碼優化

網站結構佈局優化

推薦使用扁平化結構。網站的目錄層級要儘量少，中小型網站不要超過3級。作到扁平化結構須要注意如下的3個方面：框架

控制首頁的連接數量（網站首頁的權重最高）。首頁應該有有效的連接，爬蟲經過首頁的鏈接到達內頁，若是沒有有效的連接就會直接影響網站的收錄數量。固然首頁也不能有過多的連接，內頁的連接不要放在首頁，連接過多會影響用戶體驗。中小企業網站首頁的連接數量應該在100個之內。連接的性質能夠是頁面導航、錨鏈。
扁平化的目錄層次。儘可能讓Spider跳轉3次就能夠到達網站的任意一個內頁。例如網站的設計可使用如下的3級：主頁、欄目、內容頁扁平鋪開的結構，而不能是縱深的結構。例如咱們要作一個關於植物的網站能夠採用如下的層級結構：
導航SEO優化。導航能夠分爲主導航和父導航。導航應該使用文字，若是爲了用戶體驗採用圖片導航，則應該爲圖片設置必要的alt和title屬性。其次在導航的設計上應該使用麪包屑導航。它可以讓用戶瞭解到當前的位置，瞭解網站內容的組織方式。
頁面的大小控制在100k如下。

代碼SEO優化

<head>標籤放網頁的標題，各個頁面不一樣。
<meta keywords>列舉出幾個重要的關鍵詞。
<meta description>網頁內容的高度歸納。
<br />標記應該放在文本中間，即便用<p><br /></p>替代突兀的<br />標記。
html語義化。例如咱們要作一個導航，可使用div+span標記：

<div class="nav"> <span>課程</span> <span>|</span> <span>問答</span> <span>|</span> <span>社區</span> </div>

可是以上的代碼絲毫沒有語義化（div和span標記是html中語義化最低的標籤），推薦的作法是使用ul和li標記，再經過合適的CSS樣式來實現一樣的效果：ide

<ul class="nav"> <li>課程</li> <li>問答</li> <li>社區</li> </ul>

.nav li{
    float: left;
    list-style: none;
    display: block;
    margin: 0 5px;
    border-right: 1px solid #000;
}

<a>標記要加上說明（title屬性），對於指向外部網站的連接要使用rel="nofollow"屬性告訴爬蟲不要去爬其餘的頁面。
<h1>正文標題要使用<h1>標記，副標題要使用<h2>。可使用CSS樣式進行顯式風格的設置。切記：不重要的地方不要隨便使用<h1>標記。
<table>標記的優化。使用<caption>標記爲表格指定標題。

<table> <caption>表格標題</caption> <tr> <th>季度</th> <th>銷售額</th> </tr> <tr> <td>1</td> <td>33665.25</td> </tr> <tr> <td>2</td> <td>21215.99</td> </tr> </table>

強調網頁中的重要內容應該使用<strong>標記，避免使用<b>標記（對搜索引擎不友好）。<em>的權重僅次於<strong>。若是僅僅使顯示的效果發生變化就使用<b>標記和<i>標記。

Tips

將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最後，而後利用CSS樣式控制廣告div左右浮動。
重要內容不要使用js輸出。
儘可能少使用iframe框架。
對於暫時不須要顯示的元素應該使用z-index屬性而不是display:none;這樣的代碼，由於Spider會過濾display屬性爲none的內容。
儘可能精簡代碼。