你一定不知道，在前端代碼規(guī)范上，還有 SEO 代碼規(guī)范，作為學(xué)習(xí)前端的你稍后了解呢？SEO 代碼規(guī)范一方面是為了獲取流量，如果你能運用得爐火純青，在移動端和 PC 端網(wǎng)站應(yīng)用上，那么你就可以找老板談?wù)劻耍辛伺琶?，有了流量，就可以拿提成了?/p>

　　SEO 優(yōu)化的好處

　　利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名，為自己的網(wǎng)站獲取免費流量；以用戶體驗為核心，為目標(biāo)用戶提供高質(zhì)量的內(nèi)容；對頁面的代碼和網(wǎng)頁閱讀體驗，網(wǎng)站性能等進(jìn)行優(yōu)化，符合搜索引擎的規(guī)則，提升搜索引擎網(wǎng)頁的自然排名。

　　一、網(wǎng)頁三要素的基礎(chǔ)優(yōu)化規(guī)范

　　深入淺出 SEO 優(yōu)化規(guī)范

　　1、頁面標(biāo)題 (Title)，30 字以內(nèi)

　　網(wǎng)站首頁：

　　品牌詞 - 產(chǎn)品中文全稱、特色服務(wù)、xxxx

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

　　list 頁面：

　　產(chǎn)品和主題概述 - 品牌詞

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

　　detail 頁面：

　　具體產(chǎn)品或內(nèi)容主題概述 - 品牌詞

　　<title>廣州番禺區(qū)百姓裝潢設(shè)計_收費標(biāo)準(zhǔn)-品牌詞</title>

　　注：強調(diào)重點即可，重要的關(guān)鍵詞出現(xiàn)不要超過 2 次，而且要靠前，不同頁面的 title 要有所不同

　　2、頁面描述（Description）

　　150 字以內(nèi)

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

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

　　3、頁面關(guān)鍵字（Keywords）

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

　　<meta  name="Keywords"  content="網(wǎng)上購物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,美妝,個護(hù),食品,生鮮"/>

　　4、總結(jié)

　　書寫順序

　　代碼順序按照 標(biāo)題 -> 描述 -> 關(guān)鍵字 依次

　　二、搜索引擎的索引方式

　　索引方式

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

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

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

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

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

　　三、語義化內(nèi)容標(biāo)簽的使用

　　語義化的好處

　　符合 W3C 規(guī)范代碼結(jié)構(gòu)清晰，方便閱讀，有利于團(tuán)隊合作開發(fā)語義化代碼讓搜索引擎容易理解網(wǎng)頁，有利于搜索引擎優(yōu)化（SEO）

　　語義化內(nèi)容標(biāo)簽如下：

　　1、超鏈接：a 標(biāo)簽

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

　　2、圖片：img 標(biāo)簽

　　TIP

　　img要加上alt屬性加以說明

　　3、表格：table 標(biāo)簽

　　標(biāo)題使用caption標(biāo)簽

　　4、標(biāo)題：h1 ~ h6 標(biāo)簽

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

　　具體標(biāo)準(zhǔn)參考百度百科文章頁面代碼

　　5、強調(diào)內(nèi)容的重要性

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

　　<em>強調(diào)文本</em> <strong>強調(diào)文本</strong>

　　6、視覺上突出顯示文本

　　<!--如：搜索結(jié)果中高亮的關(guān)鍵詞--><mark></mark>

　　7、時間

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

　　8、定義聯(lián)系信息

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

　　9、代表一段獨立的內(nèi)容，經(jīng)常與說明配合使用

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

　　10、換行、版權(quán)符號

　　br只用于文本內(nèi)容的換行輸入法輸入'banquan'，按序號選擇版權(quán)符號

　　四、語義化結(jié)構(gòu)標(biāo)簽的使用

　　TIP 語義化標(biāo)簽在 SEO 優(yōu)化中的應(yīng)用

　　1、section 標(biāo)簽使用場景

　　<header></header><section>  <h2>標(biāo)題</h2>  <p>段落內(nèi)容</p></section><section>  <h2>標(biāo)題</h2>  <img src="./img/pic.jpg" width="" height="" alt="圖片說明" /></section><section>  <h2>標(biāo)題</h2>  <p>段落內(nèi)容</p></section><footer></footer>

　　注：

　　對頁面中的內(nèi)容進(jìn)行分塊，一個section元素通常由標(biāo)題以及內(nèi)容組成

　　不推薦那些沒有標(biāo)題的內(nèi)容使用 section 標(biāo)簽

　　2、article 使用場景

　　<article>  <header>    <h2>標(biāo)題</h2>    <p>      發(fā)表日期：      <time datetime="2022-06-01 12:00">2022-06-01</time>    </p>  </header>  <p>文章內(nèi)容段</p>  <p>文章內(nèi)容段</p></article>

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

　　3、aside 使用場景

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

　　aside：獨立于內(nèi)容的一部分，且可以被單獨的拆分出來而不會使整體受影響，常用于定義頁面?zhèn)冗厵?/p>

　　4、main 使用場景

　　<main></main>

　　只能有一個：用來呈現(xiàn)文檔或應(yīng)用的主體部分，一個頁面只能有一個main標(biāo)簽

　　5、header 使用場景

　　頁面中的 header

　　<header>  <h1 role="logo">    <a href="/">文字Logo</a>  </h1>  <nav>    <a href="/">首頁</a>    <a href="/product">產(chǎn)品介紹</a>    <a href="/about">關(guān)于我們</a>  </nav></header>

　　分塊中的 header

　　<section>  <header>    <h2>標(biāo)題</h2>    <p>信息介紹</p>  </header>  <p>分塊內(nèi)容段</p></section>

　　文章中的 header

　　<article>  <header>    <h2>標(biāo)題</h2>    <p>      發(fā)表日期：      <time datetime="2022-06-01 12:00">2022-06-01</time>    </p>  </header>  <p>文章內(nèi)容段</p></article>

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

　　6、role 屬性的使用場景

　　增強語義性：用來增強語義性，當(dāng)現(xiàn)有的 HTML 標(biāo)簽不能充分表達(dá)語義的時候，可以借助role屬性來說明

　　五、搜索引擎優(yōu)化的基礎(chǔ)注意事項

　　注：

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

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

北京網(wǎng)站優(yōu)化公司 >> SEO資訊 >> SEO技術(shù)技巧 >> 你一定會SEO網(wǎng)頁代碼優(yōu)化，完全搞懂有意外收獲    本站部分內(nèi)容來源于互聯(lián)網(wǎng)，如有版權(quán)糾紛或者違規(guī)問題，請聯(lián)系我們刪除，謝謝！