iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 07:優化SEO- 語意化標籤!讓別人看懂你在寫什麼!

什麼是語意標籤??

為了讓標籤(Tag)更具意義,已加強文件的結構化,讓搜尋引擎更清楚瞭解,
可以更清楚表現網頁中每個區塊的設計目的。

為什麼要用語意標籤?

  1. 可以快速抓到網頁架構和每個區塊的位置
  2. 對於SEO優化有幫助

語意標籤的使用

* <header>:網頁的標頭,通常放置網站標題。
* <nav>:網頁的選單、導覽。
* <main>:網頁的主要內容。
* <aside>:網頁的側欄、附加內容。
* <article>:一篇文章內容。
* <section>:自訂的區塊,例如數篇摘要組成的空間。
* <footer>:網頁的頁尾,通常放置聯絡方式、著作權宣告等等。
* <mark>:如黃色螢光筆的方式畫出重點,強調一小塊內容
* <time>:顯示日期時間。

使用比較和範例

首先是使用 div 可能的網頁結構,除了基本元素之外,主內容展示一篇文章和側欄,頁尾則顯示網頁最後更新的時間:

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    Updated on <span class="time"></span>
</div>

接著改用語意化標籤

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer>
    <mark></mark>
    Updated on <time></time>
</footer>

呈現出來的效果會如下圖
https://ithelp.ithome.com.tw/upload/images/20200316/20124879X4OHqQ3k5h.png

總結

語意化標籤我也還在學習的階段,善用 HTML5 標籤,可以讓網頁更有語意化,進而優化SEO。

沒有SEO,人們只有5.59%的機會找到你

SEO為什麼重要?讓人們看見你


尚未有邦友留言

立即登入留言