你一定不知道，在前端代碼規范上，還有 SEO 代碼規范，作為學習前端的你稍后了解呢？SEO 代碼規范一方面是為了獲取流量，如果你能運用得爐火純青，在移動端和 PC 端網站應用上，那么你就可以找老板談談了，有了排名，有了流量，就可以拿提成了！

　　SEO 優化的好處

　　利用搜索引擎的規則提高網站在有關搜索引擎內的自然排名，為自己的網站獲取免費流量；以用戶體驗為核心，為目標用戶提供高質量的內容；對頁面的代碼和網頁閱讀體驗，網站性能等進行優化，符合搜索引擎的規則，提升搜索引擎網頁的自然排名。

　　一、網頁三要素的基礎優化規范

　　深入淺出 SEO 優化規范

　　1、頁面標題 (Title)，30 字以內

　　網站首頁：

　　品牌詞 - 產品中文全稱、特色服務、xxxx

　　<title>品牌名-正品低價、品質保障、配送及時、輕松購物 ！</title>

　　list 頁面：

　　產品和主題概述 - 品牌詞

　　<title>廣州裝修公司排行，聯系地址-品牌詞</title>

　　detail 頁面：

　　具體產品或內容主題概述 - 品牌詞

　　<title>廣州番禺區百姓裝潢設計_收費標準-品牌詞</title>

　　注：強調重點即可，重要的關鍵詞出現不要超過 2 次，而且要靠前，不同頁面的 title 要有所不同

　　2、頁面描述（Description）

　　150 字以內

　　不超過 150 個字符，描述內容要和頁面內容相關。對頁面內容的高度概括，不可過分堆砌關鍵詞，不同頁面的 description 要有所不同

　　<meta  name="description"  content="品牌名-專業的綜合網上購物商城，為您提供正品低價的購物選擇、優質便捷的服務體驗。商品來自全球數十萬品牌商家，囊括家電、手機、電腦、服裝、居家、母嬰、美妝、個護、食品、生鮮等豐富品類，滿足各種購物需求。"/>

　　3、頁面關鍵字（Keywords）

　　Keywords 為產品名、專題名、專題相關名詞，之間用英文半角逗號,隔開 ，告訴搜索引擎本頁的重點、關鍵詞。

　　<meta  name="Keywords"  content="網上購物,網上商城,家電,手機,電腦,服裝,居家,母嬰,美妝,個護,食品,生鮮"/>

　　4、總結

　　書寫順序

　　代碼順序按照 標題 -> 描述 -> 關鍵字 依次

　　二、搜索引擎的索引方式

　　索引方式

　　robot terms 是一組使用逗號,分割的值通常有如下幾種取值：none，noindex，nofollow，all，index 和 follow。確保正確使用 nofollow 和 noindex 屬性值。

　　<meta name="robots" content="index,follow" /><!--    all：文件將被檢索，且頁面上的鏈接可以被查詢；    none：文件將不被檢索，且頁面上的鏈接不可以被查詢；    index：文件將被檢索；    follow：頁面上的鏈接可以被查詢，告訴蜘蛛可以被追蹤，傳遞權重；    noindex：文件將不被檢索；    nofollow：頁面上的鏈接不可以被查詢，告訴蜘蛛無需追蹤，不傳遞權重。一般用于站外鏈接。 -->

　　頁面重定向和刷新) 頁面重定向和刷新

　　content 內地數字代表時間（秒），既多少時間后刷新。如果加 url，則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。

　　<meta http-equiv="refresh" content="0; url=" />

　　三、語義化內容標簽的使用

　　語義化的好處

　　符合 W3C 規范代碼結構清晰，方便閱讀，有利于團隊合作開發語義化代碼讓搜索引擎容易理解網頁，有利于搜索引擎優化（SEO）

　　語義化內容標簽如下：

　　1、超鏈接：a 標簽

　　內部鏈接，要加title屬性加以說明外部鏈接，要加rel="nofollow"屬性，告訴蜘蛛無需追蹤，傳遞權重

　　2、圖片：img 標簽

　　TIP

　　img要加上alt屬性加以說明

　　3、表格：table 標簽

　　標題使用caption標簽

　　4、標題：h1 ~ h6 標簽

　　h1一個頁面只可有一個，首頁多用于包含 logo，其他頁面用于主標題h2模塊標題h3段落的小節標題h4, h5, h6基本上不使用

　　具體標準參考百度百科文章頁面代碼

　　5、強調內容的重要性

　　strong和em都表示強調strong 顯示為粗體 em 顯示為斜體，且 strong 的強調程度要比 em 更高

　　<em>強調文本</em> <strong>強調文本</strong>

　　6、視覺上突出顯示文本

　　<!--如：搜索結果中高亮的關鍵詞--><mark></mark>

　　7、時間

　　<p>  文章發表于  <time datetime="2022-06-01 12:00">2022-06-01</time></p>

　　8、定義聯系信息

　　<address></address><!--也可定義 article 元素的作者信息，但不適用于嵌套的 article 元素-->

　　9、代表一段獨立的內容，經常與說明配合使用

　　<figure>  <!-- 圖片、圖表、表格等 -->  <figcaption>標題/說明</figcaption></figure><!--figcaption 元素必須是 figure 元素的第一個或者最后一個子元素-->

　　10、換行、版權符號

　　br只用于文本內容的換行輸入法輸入'banquan'，按序號選擇版權符號

　　四、語義化結構標簽的使用

　　TIP 語義化標簽在 SEO 優化中的應用

　　1、section 標簽使用場景

　　<header></header><section>  <h2>標題</h2>  <p>段落內容</p></section><section>  <h2>標題</h2>  <img src="./img/pic.jpg" width="" height="" alt="圖片說明" /></section><section>  <h2>標題</h2>  <p>段落內容</p></section><footer></footer>

　　注：

　　對頁面中的內容進行分塊，一個section元素通常由標題以及內容組成

　　不推薦那些沒有標題的內容使用 section 標簽

　　2、article 使用場景

　　<article>  <header>    <h2>標題</h2>    <p>      發表日期：      <time datetime="2022-06-01 12:00">2022-06-01</time>    </p>  </header>  <p>文章內容段</p>  <p>文章內容段</p></article>

　　對比：它比section具有更明確的語義，代表一個獨立的、完整的相關內容塊，可以包含一個或多個section

　　3、aside 使用場景

　　<aside>  <h2></h2>  <ul>    <li></li>    <li></li>  </ul></aside>

　　aside：獨立于內容的一部分，且可以被單獨的拆分出來而不會使整體受影響，常用于定義頁面側邊欄

　　4、main 使用場景

　　<main></main>

　　只能有一個：用來呈現文檔或應用的主體部分，一個頁面只能有一個main標簽

　　5、header 使用場景

　　頁面中的 header

　　<header>  <h1 role="logo">    <a href="/">文字Logo</a>  </h1>  <nav>    <a href="/">首頁</a>    <a href="/product">產品介紹</a>    <a href="/about">關于我們</a>  </nav></header>

　　分塊中的 header

　　<section>  <header>    <h2>標題</h2>    <p>信息介紹</p>  </header>  <p>分塊內容段</p></section>

　　文章中的 header

　　<article>  <header>    <h2>標題</h2>    <p>      發表日期：      <time datetime="2022-06-01 12:00">2022-06-01</time>    </p>  </header>  <p>文章內容段</p></article>

　　注：article、section、aside、nav 標簽都可以擁有自己的 header 和 footer 標簽

　　6、role 屬性的使用場景

　　增強語義性：用來增強語義性，當現有的 HTML 標簽不能充分表達語義的時候，可以借助role屬性來說明

　　五、搜索引擎優化的基礎注意事項

　　注：

　　重要內容盡量靠前放搜索引擎抓取HTML的順序是從上到下的，而有的搜索引擎對抓取的內容長度有一定的限制重要內容不要用 JS 輸出搜索引擎不會抓取JS的生成內容其他頁面結構盡量扁平化，目錄結構不宜過深，最好不超過三級，每級都有面包屑導航，成樹狀結構分布。否則不利于搜索引擎抓取做404頁面，不僅提高蜘蛛體驗，也提高用戶體驗

北京愛品特SEO網站優化提供專業的網站SEO診斷服務、SEO顧問服務、SEO外包服務，咨詢電話或微信：13811777897 袁先生 可免費獲取SEO網站診斷報告。

北京網站優化公司 >> SEO資訊 >> SEO技術技巧 >> 你一定會SEO網頁代碼優化，完全搞懂有意外收獲    本站部分內容來源于互聯網，如有版權糾紛或者違規問題，請聯系我們刪除，謝謝！