HTML語義化和SEO優化

時間 2019-11-08

標籤 html 語義 seo 優化欄目 HTML 简体版

原文原文鏈接

什麼是HTML語義化？

<基本上都是圍繞着幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等>css

　　根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。html

爲何要語義化？

爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。html5

寫HTML代碼時應注意什麼？

儘量少的使用無語義的標籤div和span；
在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設置。
須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。面試

面試題

簡述一下你對HTML語義化的理解？瀏覽器

用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。框架

html與SEO優化

<head>標籤放網頁的標題，各個頁面不一樣。ide
<meta keywords>列舉出幾個重要的關鍵詞。優化
<meta description>網頁內容的高度歸納。網站
每一個頁面只能出現一次H1標籤，H2標籤能夠屢次：H1權重很高，廣泛認爲僅次於title，通常資訊詳情頁的標題、商品詳情頁的標題，都放在H1裏。搜索引擎
圖片必定要添加alt屬性，title屬性可選：搜索引擎不認識圖片上的內容，只能經過alt屬性來判斷，若是是商品列表頁，全部商品都加了alt和title的話，容易形成堆砌關鍵詞，因此我通常是隻加alt屬性。
每一個頁面的title不一樣
換行標籤只用來在文本間進行換行，標籤間的換行經過margin等等。或者
```
<p><br></p>
```

搜索引擎抓取seo內容是從上到下，重要內容html代碼放在最前面

搜索引擎看不懂js， 重要內容不要用js輸出

儘可能少使用iframe框架

謹慎使用display：none，搜索引擎會過濾掉這裏面的內容

不斷精簡代碼

html5新增的語義化標籤

HTML5節元素標籤包括body article nav aside section header footer hgroup ，還有h1-h6 address。

address表明區塊容器，必須是做爲聯繫信息出現，郵編地址、郵件地址等等,通常出如今footer。
h1-h6由於hgroup，section和article的出現，h1-h6定義也發生了變化，容許一張頁面出現多個h1。

參考資料

理解HTML語義化
 HTML 5的革新——語義化標籤(一)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。