關於SEO優化,一定要知道的網頁設計基礎就是它!?

關於SEO優化,一定要知道的網頁設計基礎就是它!?

關於SEO優化,一定要知道的網頁設計基礎就是它!?

 

SEO優化原來這麼簡單!搞懂HTML語意標記和Schema語意標記,一切都這麼輕鬆~

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優化的都知道的-長尾關鍵字的藏匿處,現在偷偷告訴你!

網路行銷課程-不可不知的SEO優化技巧3:不能忽視的元老咖

想到Google 工作?從Python課程入手

AI革命進入醫療領域,你準備好了嗎?Python課程讓輕鬆應對不用怕!!

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

達內教育開幕 培養台灣IT人才進入全球企業

本篇發表於 網路行銷 並標籤為 , , , , , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料