小的總結(jié)：
HTML —— 結(jié)構(gòu)層（控制頁(yè)面結(jié)構(gòu)）；
CSS —— 樣式層（控制頁(yè)面樣式）；
JS —— 行為層（控制頁(yè)面行為）。
具體示例：
01.HTML:
HTML示例
02.CSS:
CSS示例
03.JS:
JS示例：
正文內(nèi)容：通過(guò)上面的簡(jiǎn)單介紹，想必大家也會(huì)覺得：其實(shí)前端真正對(duì)SEO比較有影響作用的還是HTML。
那么我們從幾個(gè)詳細(xì)的角度來(lái)討論HTML對(duì)SEO的影響：
性能角度：一個(gè)網(wǎng)頁(yè)的性能主要涉及到其“加載速度”和“瀏覽流暢度”，主要解決方案有：減少頁(yè)面請(qǐng)求、CDN加速、精簡(jiǎn)代碼、壓縮傳輸、引用新框架等；
結(jié)構(gòu)角度：HTML5版本相較于之前版本最明顯的區(qū)別就是引入大量語(yǔ)義化標(biāo)簽，所謂“語(yǔ)義化標(biāo)簽”？顧名思義就是直接通過(guò)標(biāo)簽所用的單詞意思就能知道這個(gè)標(biāo)簽包裹的內(nèi)容范圍屬于什么。HTML頭部<meta>標(biāo)簽大概了解即可，主要用于聲明網(wǎng)頁(yè)的語(yǔ)言、編碼格式、相應(yīng)模式、相關(guān)版權(quán)等。
接下來(lái)，舉例介紹幾個(gè)比較“流行”使用的HTML語(yǔ)義化標(biāo)簽：
01.<header>定義了站點(diǎn)的頭部信息，也就是頁(yè)眉，一般放置網(wǎng)站的站點(diǎn)名稱以及LOGO和導(dǎo)航欄。搜索引擎更容易識(shí)別站點(diǎn)的類型。
02.<nav>定義導(dǎo)航鏈接，也就是欄目或者頻道的鏈接。搜索引擎可以更好了解網(wǎng)站的信息架構(gòu)，分類等。良好的信息架構(gòu)，更有利于蜘蛛的爬行和權(quán)重的分布。
03.<footer>定義了底部信息，也就是頁(yè)腳。放置頁(yè)腳導(dǎo)航，一些比如公司介紹，聯(lián)系我們之類的信息。一般來(lái)說(shuō)對(duì)網(wǎng)站比較不重要，有可能搜索引擎會(huì)降低其位置的權(quán)重。
04.<section>該元素用來(lái)表示網(wǎng)頁(yè)中不同的分區(qū)。優(yōu)勢(shì)體現(xiàn)在每個(gè)部分都可以有其獨(dú)立的HTML標(biāo)題。這可以讓搜索引擎更好的了解網(wǎng)頁(yè)的結(jié)構(gòu)是如何劃分的。搜索引擎可能會(huì)根據(jù)網(wǎng)頁(yè)中的<section>標(biāo)簽找出其信息架構(gòu)。（同左撇子）
05.<article> 定義文章區(qū)域，可以更有利于搜索引擎識(shí)別網(wǎng)頁(yè)的內(nèi)容以及判斷相關(guān)性。，
06.<aside>定義頁(yè)面內(nèi)容之外的內(nèi)容，在左側(cè)或右側(cè)邊欄。比如知乎右側(cè)的“相關(guān)問(wèn)題”就屬于<aside>區(qū)域。aside標(biāo)簽的文字信息與article標(biāo)簽區(qū)域的文字信息最好是相關(guān)。可能會(huì)影響到該頁(yè)面和目標(biāo)頁(yè)面的排名。
還有一些小標(biāo)簽SEO也會(huì)·識(shí)別：<tag>標(biāo)簽顧名思義就是文章標(biāo)簽詞、<time>標(biāo)簽顧名思義就是頁(yè)面發(fā)布時(shí)間、<audio>定義音頻 、<video>定義視頻 等等 ... ...
最后簡(jiǎn)單提一下幾個(gè)要點(diǎn)：
一個(gè)頁(yè)面要將<H1>標(biāo)簽數(shù)量控制到一個(gè)（最好是包裹頁(yè)面大主標(biāo)題、等有一定權(quán)重后，可以包裹logo強(qiáng)調(diào)品牌），文章段落二級(jí)標(biāo)題最好加上<H2>。
編輯產(chǎn)品、資訊詳情頁(yè)的時(shí)候，“文章摘要”、“標(biāo)簽”要著重構(gòu)思編輯，因?yàn)閷⒅苯佑绊懙巾?yè)面的SEO，最好是在編輯的時(shí)候就填好，精準(zhǔn)。不要拖到后面再修改。
頁(yè)面的文章內(nèi)容板塊最好用<article>標(biāo)簽包裹，不用擔(dān)心兼容性問(wèn)題，瀏覽器不能識(shí)別的標(biāo)簽會(huì)直接輸出內(nèi)容，不會(huì)對(duì)頁(yè)面顯示造成影響，而且現(xiàn)在主流瀏覽器對(duì)HTML5新的語(yǔ)義化標(biāo)簽兼容性都很不錯(cuò)。
編輯文章的時(shí)候，可以適當(dāng)添加相關(guān)關(guān)鍵詞的站內(nèi)鏈接，提升網(wǎng)站的內(nèi)鏈結(jié)構(gòu)。
內(nèi)容關(guān)鍵詞加黑標(biāo)簽請(qǐng)用<b>標(biāo)簽(strong標(biāo)簽可以用來(lái)強(qiáng)調(diào)具體頁(yè)面內(nèi)容)。B標(biāo)簽往往用在關(guān)鍵詞上，一個(gè)頁(yè)面只要加2-5次就差不多了，具體還要根據(jù)頁(yè)面大小而定。
頁(yè)面配圖的時(shí)候記得加“Alt”屬性，有利于站內(nèi)圖片被搜索引擎的檢索，對(duì)提升網(wǎng)站的曝光度有一定作用，同時(shí)也對(duì)頁(yè)面的seo排名有一定影響。
借鑒相關(guān)文章時(shí)，如果涉及到內(nèi)容復(fù)制粘貼，切記勿將<iframe>標(biāo)簽也復(fù)制過(guò)來(lái)了，內(nèi)容本身的一些無(wú)關(guān)內(nèi)外鏈接可以刪除。
網(wǎng)站添加“面包屑”導(dǎo)航也有利于搜索引擎的爬行，更利于頁(yè)面的抓取和索引效率。
寫在最后：最后簡(jiǎn)單提幾點(diǎn)對(duì)SEO優(yōu)化有助的幾點(diǎn)：網(wǎng)頁(yè)頁(yè)面鏈接偽靜態(tài)（一個(gè)好的鏈接結(jié)構(gòu)，可以清晰指導(dǎo)搜索引擎明確網(wǎng)頁(yè)主體內(nèi)容），制作網(wǎng)站地圖（sitemap.html/xml）并提交給站長(zhǎng)平臺(tái)（對(duì)頁(yè)面收錄有直接影響），根據(jù)網(wǎng)站后臺(tái)系統(tǒng)編輯對(duì)應(yīng)的robots.txt（引導(dǎo)搜索引擎對(duì)網(wǎng)站進(jìn)行有效抓取），網(wǎng)站結(jié)構(gòu)扁平化（目錄和內(nèi)容結(jié)構(gòu)最好不要超過(guò)3層，如果有超過(guò)三層的，最好通過(guò)子域名來(lái)調(diào)整和簡(jiǎn)化結(jié)構(gòu)層數(shù)）。