網路行銷中的SEO優化之所以有趣是因為執行過程中會與不同產業的人合作,不可或缺的就是科技業的前端工程師!
HTML 5 的語意標記，對前端工程師/前端設計師來說，是不知不可的網路行銷課程網頁設計基礎，決定了網頁配置的邏輯；對於 SEO優化從業人員來說，雖然 HTML 5 的作用不是讓網頁可以被搜尋引擎自動擷取資料，但是卻可以讓搜尋引擎理解網頁每個部份 (Section，在此有人翻成區塊) 的排列邏輯、以及每個部份的作用等等，例如透過<header>告知搜尋引擎哪裡是頁頭、<nav> 告知搜尋引擎哪裡會列出導覽內容等等，還 可以用來搭配 Schema 語意標記，協助搜尋引擎正確完成索引。
常見的 HTML 語意標記如下表所示：
| 標籤名稱 | 說明 |
| <section> 區塊 |
<section>主要是告知搜尋引擎「這是一個段落」，包覆的對象不以文章為限。 裡面含標題<h1>-<h6>與內容<p>， 主要用途是告知搜尋引擎一個區塊的主要內容 (內容就是這個<section>的標題) |
| <article> 文章區塊 |
<article>跟<section>性質相近，都有含標題<h1>-<h6>與內容。 但是相較於<section>，更強調所包覆的對象是「文章」 |
| <header> 表頭 |
以前用<div>架構會像這樣寫<div class="header">、<div class="footer">， HTML5 則可以分別使用<header>與<footer>標籤來取代。在任何區塊下的架構， 如果需要詳細區分表頭表尾時，就可使用<header>以及<footer>來架構，用於<body>標籤下是最普遍的， 因為<body>的架構較大，需要清楚區分表頭與表尾。 |
| <footer> 表尾 |
|
| <aside> 側邊欄位 |
邏輯上跟<header>以及<footer>的使用方式一樣，只是位置是強調在「側邊」。 多用於WordPress、部落格、新聞網站常見的右邊側邊欄， 顯示最新文章、文章排行榜、其他連結、廣告、推薦文章等等的訊息區塊，就很適合用<aside>來做佈局。 <aside>的語意算是跟本文無關的區塊，也就是額外資訊，通常放的是跟主要文本無關的其他額外資訊 |
| <main> 主要區塊 |
在 HTML5 中用來放置這個頁面主要的資訊，有點像以前的<div class="content"> 。 且每個頁面中只能有一個<main>標籤，且不能被置於在<nav><article><aside><footer><header>之中。 但是<article><aside><section>則可以可安被置於<main>當中。 |
| <nav> 主要區塊 |
網站內的導航區塊，都適合使用<nav>來做架構，像是主選單、表尾選單等。 |
排版範例:
如同以下的範例，<header>的內容就會出現在網頁的頁頭；<nav>則是導覽項目；<main>則是網頁的主要區塊，包含了<article>和<aside>，<article>內又分成不同的區塊(<sector>)；<footer>則出現在頁尾。
| <header></header> <nav></nav> <main> <article></article> <sector></sector> <sector></sector> <aside></aside> </main> <footer> Updated on <time></time> </footer> |
既然語意標籤和過去的<div>有相同的排版特性，那為什麼要使用語意標籤呢？最大的目的，是讓搜尋引擎或是其他軟體工具，可以更清楚的了解網頁中每個區塊的設計目的，讓網頁更容易被搜尋引擎"了解"，因此有增強網頁SEO優化的效果。
推薦閱讀:
- 網路行銷課程無界限,視覺心理學教你如何精美包裝資訊,增加點擊率
- SEO優化技能讓你年終獎金加碼過好年!
- 網路行銷課程教你從SEO優化方式看品牌價值
- 想要網路行銷之前,UI課程是必修課之一!
- SEO優化小撇步:想吸引人們目光,加上微數據就對了!
- 在做SEO優化時,最重要的不是不是熱門關鍵字!!而是….
- 三秒內就能下單的世代,網路行銷課程你絕對不能不上!!!!
