小的總結：

• HTML —— 結構層（控制頁面結構）；

• CSS —— 樣式層（控制頁面樣式）；

• JS —— 行為層（控制頁面行為）。

具體示例：

01.HTML:

HTML示例

02.CSS:

CSS示例

03.JS:

JS示例：

        正文內容：通過上面的簡單介紹，想必大家也會覺得：其實前端真正對SEO比較有影響作用的還是HTML。

        那么我們從幾個詳細的角度來討論HTML對SEO的影響：

• 性能角度：一個網頁的性能主要涉及到其“加載速度”和“瀏覽流暢度”，主要解決方案有：減少頁面請求、CDN加速、精簡代碼、壓縮傳輸、引用新框架等；

• 結構角度：HTML5版本相較于之前版本最明顯的區別就是引入大量語義化標簽，所謂“語義化標簽”？顧名思義就是直接通過標簽所用的單詞意思就能知道這個標簽包裹的內容范圍屬于什么。HTML頭部<meta>標簽大概了解即可，主要用于聲明網頁的語言、編碼格式、相應模式、相關版權等。

        接下來，舉例介紹幾個比較“流行”使用的HTML語義化標簽：

        01.<header>定義了站點的頭部信息，也就是頁眉，一般放置網站的站點名稱以及LOGO和導航欄。搜索引擎更容易識別站點的類型。

        02.<nav>定義導航鏈接，也就是欄目或者頻道的鏈接。搜索引擎可以更好了解網站的信息架構，分類等。良好的信息架構，更有利于蜘蛛的爬行和權重的分布。

        03.<footer>定義了底部信息，也就是頁腳。放置頁腳導航，一些比如公司介紹，聯系我們之類的信息。一般來說對網站比較不重要，有可能搜索引擎會降低其位置的權重。

        04.<section>該元素用來表示網頁中不同的分區。優勢體現在每個部分都可以有其獨立的HTML標題。這可以讓搜索引擎更好的了解網頁的結構是如何劃分的。搜索引擎可能會根據網頁中的<section>標簽找出其信息架構。（同左撇子）

        05.<article> 定義文章區域，可以更有利于搜索引擎識別網頁的內容以及判斷相關性。，

        06.<aside>定義頁面內容之外的內容，在左側或右側邊欄。比如知乎右側的“相關問題”就屬于<aside>區域。aside標簽的文字信息與article標簽區域的文字信息最好是相關。可能會影響到該頁面和目標頁面的排名。

還有一些小標簽SEO也會·識別：<tag>標簽顧名思義就是文章標簽詞、<time>標簽顧名思義就是頁面發布時間、<audio>定義音頻 、<video>定義視頻 等等 ... ...

最后簡單提一下幾個要點：

• 一個頁面要將<H1>標簽數量控制到一個（最好是包裹頁面大主標題、等有一定權重后，可以包裹logo強調品牌），文章段落二級標題最好加上<H2>。

• 編輯產品、資訊詳情頁的時候，“文章摘要”、“標簽”要著重構思編輯，因為將直接影響到頁面的SEO，最好是在編輯的時候就填好，精準。不要拖到后面再修改。

• 頁面的文章內容板塊最好用<article>標簽包裹，不用擔心兼容性問題，瀏覽器不能識別的標簽會直接輸出內容，不會對頁面顯示造成影響，而且現在主流瀏覽器對HTML5新的語義化標簽兼容性都很不錯。

• 編輯文章的時候，可以適當添加相關關鍵詞的站內鏈接，提升網站的內鏈結構。

• 內容關鍵詞加黑標簽請用<b>標簽(strong標簽可以用來強調具體頁面內容)。B標簽往往用在關鍵詞上，一個頁面只要加2-5次就差不多了，具體還要根據頁面大小而定。

• 頁面配圖的時候記得加“Alt”屬性，有利于站內圖片被搜索引擎的檢索，對提升網站的曝光度有一定作用，同時也對頁面的seo排名有一定影響。

• 借鑒相關文章時，如果涉及到內容復制粘貼，切記勿將<iframe>標簽也復制過來了，內容本身的一些無關內外鏈接可以刪除。

• 網站添加“面包屑”導航也有利于搜索引擎的爬行，更利于頁面的抓取和索引效率。

        寫在最后：最后簡單提幾點對SEO優化有助的幾點：網頁頁面鏈接偽靜態（一個好的鏈接結構，可以清晰指導搜索引擎明確網頁主體內容），制作網站地圖（sitemap.html/xml）并提交給站長平臺（對頁面收錄有直接影響），根據網站后臺系統編輯對應的robots.txt（引導搜索引擎對網站進行有效抓取），網站結構扁平化（目錄和內容結構最好不要超過3層，如果有超過三層的，最好通過子域名來調整和簡化結構層數）。