HTML5標籤對seo的作用,以及主題HTML5標籤自定義功能介紹

2021-01-07 funion

HTML5標籤對於seo的作用

html5增加了非常多的新的標籤,這些標籤能夠非常容易的將我們的網頁各個功能區域區分開來。

html5和html4的區別

我們知道HTML4 是採用「div+css」,也就是說,網頁的各個功能區域都是使用div標籤進行排版的,而這些div的區分只是使用css類名稱進行的,而搜尋引擎是不會理解類名稱是有什麼作用的。下面的圖片可以幫助你理解HTML4的排版:

可以見到上圖。所有的功能區域,比如頭部(header)、導航(nav)、側邊欄(sidebar)、文章(artcle)和底部(footer),都是採用div標籤。這些類名稱放到div標籤中可以讓css發揮作用,但是搜尋引擎卻不會讀取他們,也不知道具體的含義。而下面這張圖片是HTML5新增的一些標籤的排版,這些新增的標籤可以讓搜尋引擎理解這些區塊的內容是什麼 ,從而更好地理解整個網站:

可見上圖所示,使用HTML5的排版使用了新的標籤,而這些標籤都是可以被搜尋引擎所理解的,這樣,搜尋引擎蜘蛛在我們的網頁上爬行的時候,就會知道什麼區域是頂部、什麼區域是導航等等。這樣就能夠讓搜尋引擎更容易得到我們整個網站清晰的信息了。結構上,我們可以以上圖為例進行分析這些標籤的作用:header:定義了站點的頭部信息,也就是頁眉,一般放置網站的站點名稱以及LOGO和導航欄。搜尋引擎更容易識別站點的類型。nav:定義導航連結,也就是欄目或者頻道的連結。搜尋引擎可以更好了解網站的信息架構,分類等。良好的信息架構,更有利於蜘蛛的爬行和權重的分布。footer:定義了底部信息,也就是頁腳。放置頁腳導航,一些比如公司介紹,聯繫我們之類的信息。一般來說對網站比較不重要,有可能搜尋引擎會降低其位置的權重。section:該元素用來表示網頁中不同的分區。優勢體現在每個部分都可以有其獨立的HTML標題。這可以讓搜尋引擎更好地了解網頁的結構是如何劃分的。搜尋引擎可能會根據網頁中的section 標籤找出其信息架構。(同左撇子)artcle:定義文章區域,可以更有利於搜尋引擎識別網頁的內容以及判斷相關性。aside:定義頁面內容之外的內容,在左側或右側邊欄。比如知乎右側的「相關問題」就屬於aside 區域。aside標籤的文字信息與article標籤區域的文字信息最好是相關。可能會影響到該頁面和目標頁面的排名。這些結構元素有些在HTML4時代,一般是用div來定義。figure :定義媒介內容的分組,以及它們的標題,figcaption 定義 figure 元素的標題。這兩個元素可以說非常好的使媒介和文字說明聯繫在了一起。有利於搜尋引擎理解內容。文字說明是可見的。time:定義日期/時間,time標籤可能會作為一個來判斷網頁文字源,也就是能夠通過time標籤來識別哪篇文章是原創的。

所開發的主題,逐步開發HTML5標籤的自定義使用以及優化

目前新出的主題,將會以HTML5新增的這些標籤進行布局,讓整個網站的布局更加容易讓搜尋引擎理解,在首頁模塊上,我們會增加外層標籤section和artcle的設置,你可以自由選擇這些包裹的標籤,其中 ,每一個首頁排版的模塊都可以使用section來包裹,而artcle的包裹是指那些調用文章或者商品的模塊可使用。可見下截圖的設置方式:

在配合權重標籤的選擇(h標籤、strong和div),這樣就能夠自定義整個網站的結構和所佔權重了。在分類目錄、文章和商品詳細頁面中,則不需要設置,這些優化的標籤我們已經按照w3cschool的介紹進行了優化,你可以在文章中插入一些H2~H4標籤進行文章段落的權重區分。側邊欄我們使用aside包裹,你可以將側邊欄模塊使用section包裹,而無需使用artcle包裹。這樣的功能可以讓我們的整個網站更加容易讓搜尋引擎理解。

相關焦點

  • html5中nav標籤(導航連結)的詳細介紹
    本篇將介紹html5中nav標籤(導航連結)的詳細用法,有興趣的朋友可以了解一下!在html5版本中,新增了很多語義標籤,比如:header標籤、footer標籤、aside標籤、nav標籤等等。這些語義標籤沒有實際的顯示效果,只是起到語義的作用。今天小編要介紹的就是其中一個,即nav標籤。
  • html5中meter標籤的詳細介紹
    本篇將介紹html中meter標籤的詳細用法,有興趣的朋友可以了解一下!在html5版本中新增了很多新標籤,今天小編要介紹的就是其中一個,即meter標籤。meter標籤由於是html5新增標籤,目前IE瀏覽器還不支持,所以用的還不是很多。
  • html5中progress標籤(進度條)的詳細介紹
    本篇將介紹html5中progress標籤(進度條)的詳細用法,有興趣的朋友可以了解一下!在html5中新增了很多實用的標籤,今天小編介紹的就是其中一個,即progress標籤。學會progress標籤,可以讓我們很輕鬆的創建一個進度條,接下來跟著小編一起來學習吧!
  • HTML5常用的標籤
    目錄:HTML5新結構標籤HTML5新其他標籤HTML5新input
  • html5學得好不好,看掌握多少標籤
    html5你了解了多少?
  • 怎麼理解Html5?Html5和html4相比有哪些優勢?怎麼學好html5?
    ,html5應用凝結很多人的心血,作為下一代超文本標記語言的核心,html5主要增加了新元素互操作性主要是針對行動裝置和多媒體。html5是現在前端培訓比較火熱的語言,今天為大家簡單介紹一下html5語言。Html5和html4相比有哪些優勢?
  • html中頁腳標籤的詳細介紹
    本篇將介紹的是html中<footer>頁腳標籤的用法,有興趣的朋友可以學習一下!在html5版本中,新增了很多語義化的標籤,這些語義化標籤對內容是沒有樣式效果的,它們只是起到語義化的作用。
  • html中section標籤的詳細介紹
    本篇將介紹html中section標籤的詳細用法,有興趣的朋友可以了解一下!一、前言在html5版本中,新增了很多語義標籤,常見的有:article標籤、header標籤、footer標籤、nav標籤、aside標籤和section標籤等。今天小編要介紹的就是其中一個,即section標籤。
  • html中
    頁腳標籤的詳細介紹
    本篇將介紹的是html中<footer>頁腳標籤的用法,有興趣的朋友可以學習一下!在html5版本中,新增了很多語義化的標籤,這些語義化標籤對內容是沒有樣式效果的,它們只是起到語義化的作用。
  • html中embed標籤的詳細介紹
    本篇將介紹的是html中embed標籤的用法,有興趣的朋友可以學習一下!在html5版本中,新增了很多實用的標籤,今天將介紹的就是其中一個,即embed標籤。embed標籤作為html5版本中新增的一個標籤,我們一起來看看它有什麼用途呢?
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!
  • HTML基礎標籤之title標籤
    上面的是一個html5模板<title>標籤定義文檔的標題(所有瀏覽器都支持<title>標籤):定義瀏覽器標籤欄中的標題<title>標籤。;title標題是給搜尋引擎看的,h1標籤的內容是給用戶看的;title標籤分的seo(Search Engine Optimization搜尋引擎優化)權重非常大,因此一般主關鍵字都是放到title標籤內優化的。
  • html中select標籤(下拉列表)的詳細介紹
    本篇將介紹html中select標籤(下拉列表)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表很常見,那你知道在html原始碼中是怎麼實現的嗎?今天小編要分享的就是html中實現下拉列表的標籤,即select標籤。
  • BAT大佬推薦使用的HTML5的十個功能
    原文地址:https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0HTML5不是新事物。自從最初發布(2008年1月)以來,我們一直在使用它的一些功能。後來,我再次仔細查看了HTML5功能列表。看到我發現了什麼?到目前為止,我還沒有真正使用過它!
  • html中small標籤(小型文本)的詳細介紹
    本篇將介紹html中small(小型文本)標籤的詳細用法,有興趣的朋友可以了解一下!「small」作為英文單詞有「小的、小號的」的意思,那它作為html中的標籤又充當什麼樣的角色呢?接下來我們一起來看看html中small標籤的定義及用法吧!
  • html中繪製圖形標籤的詳細介紹
    本篇將介紹的是html中<canvas>標籤的用法,感興趣的朋友可以一起研究一下!在html5中,新增了很多實用的標籤,今天為大家介紹的是html5新增標籤<canvas>,<canvas>標籤只是一個容器,對內容並沒有樣式的更改。那它在html中有什麼用,接下來我們就一起來看看吧!
  • html中img圖像標籤的詳細介紹
    本篇將介紹的是html中<img>圖像標籤,有興趣的朋友可以了解一下!在html網頁中,我們經常看見一些漂亮的圖片,這就產生了一個問題,這些圖片是怎樣引入到網頁中的呢?其實並沒有我們想像中的那麼複雜,只需要使用html中的<img>標籤就能實現,我們一起來學習一下吧!
  • html中標籤詳細介紹
    今天介紹的是html中<article>標籤的用法,如果有興趣的朋友可以看一下!html文檔內容是由各種標籤組成的,各個標籤都有不同的含義以及用法,如果你能熟練的掌握這些標籤,那麼你的html已經很厲害了。
  • html5換行符元素:
    元素
    基本概念html5中的<br>元素用於產生一個換行符,它的名稱br正是單詞break的前兩個字母;break本身的含義為「打破、拆分」,在此處就引申為換行的意思。為什麼html5要專門定義一個元素來代表換行符呢?我們平常在辦公軟體中編輯文本的時候,如果要換行不是只要按下回車鍵就可以了嗎?
  • 怎麼用html5新增元素製作用戶註冊頁面?這個例子告訴你!
    在檢查表單數據數據一般都是使用php或者JavaScript,今天為大家介紹怎麼使用html5新增元素製作用戶註冊頁面並進行檢查的數據檢查。html5代碼如下:頁面運行結果分析1、H5中的fieldset標籤fieldset