當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端开发中的SEO

發布時間：2023/12/9 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发中的SEO 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端開發中的SEO

什么是SEO

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

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和span標記是html中語義化最低的標簽），推薦的做法是使用ul和li標記，再通過合適的CSS樣式來實現同樣的效果：

<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>標記為表格指定標題。

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

Tips

將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最后，然后利用CSS樣式控制廣告div左右浮動。

重要內容不要使用js輸出。

盡量少使用iframe框架。

對于暫時不需要顯示的元素應該使用z-index屬性而不是display:none;這樣的代碼，因為Spider會過濾display屬性為none的內容。

盡量精簡代碼。

posted on 2016-11-23 20:11 玲兒靈閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/jymz/p/6095125.html

總結

以上是生活随笔為你收集整理的前端开发中的SEO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。