話說要如何利用HTML標籤來增加網頁的結構性呢?Google Spider很聰明可以有效解讀網頁內容、語意，
但透過HTML標籤給予Google Spider更多的資訊，會讓Google在解析網頁時更加的簡單容易、正確的解析。
以下的HTML標籤均有助於強化網頁SEO的能力，其中又以title、description、h1最為重要，而最後一個 schema
org更是Google直接點名說是排名因素。
| 標籤 | 用法 |
|---|---|
| <title>標籤 | <title>6步驟就搞定~Wordpress【電商購物網站架設】｜購物網站架設教學</title> |
| meta description | <meta name="description" content="架設購物車網站做網拍賺錢，不用再當上班族多好"> |
| <H1>~<H6>標籤 | <h1>這是一個H1標籤</h1> <h2>這是一個H2標籤</h2> |
| 屬性title、alt | <a class="logo" href="https://web-design.vip/" title="貴設計"/> 和 <img src="img/logo-3.png" alt="貴設計" title="貴設計" /> |
| meta robots | <meta name="robots" content="noindex,nofollow"/> |
| link canonical | <link rel="canonical" href="https://web-design.vip/seo-tutorial.html"/> |
| meta viewport | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <strong> | <strong>這是一個strong標籤</strong> |
| semantic tags | 例如 <article> <aside> <details> <figcaption> <figure> <footer> <header> |
| schema org | 用法: |
目錄
<title>標籤 : 準確傳達頁面內容的主題
以下的黑色框就是所謂的文章標題，它是出現在Google的自然搜尋結果。
文章標題非常的重要，命名的時候請遵守以下規則
- 文章標題要能夠準確表達文章的內容。
- 動人心並吸引訪客"點擊"。
- 他智商5歲，卻年賺2,000萬
- 2021年前10大女模公認最帥的男子
- 林志玲一生最愛的10個男人
以下幾個都是貴設計自然搜尋排名非常好的命名範例
- 2021【網站架設】神攻略｜10大網站架設主題與網站公司推薦
- 【131間台北商務中心】推薦｜找共享、商務辦公室出租好簡單
- 【商標註冊申請】流程與步驟｜商標類別登記好EZ
- 一篇就搞定【公司登記、工商登記】｜申請流程、查詢、驗資、費用神功略
- 【網站架設費用1～100萬的差異】｜Wordpress費用報價CP值最高
用法如下，只要在你的文章加上如下
<title>文章名稱</title>
meta description
加上meta description之後，同樣會出現在Google自然搜尋結果，如下
meta
description為文章的概要，同樣也要寫的動人、吸引訪客點擊，盡量讓你的主要關鍵字出現在句子的最前面。同時也多放些同義字，例如
歐巴馬為關鍵字，也可以放美國總統、黑人總統在描述或文章的首段。但Google也不總是都那麼乖的會抓meta
desciption放在自然搜尋結果，有時會擷取文章內的某一段放在Google自然搜尋內，因為Google"認為"那段更適合。SEO小技巧：將主要關鍵字放在描述內，若描述跟搜尋關鍵字相同，則會以紅色字呈現。例如我將 商務中心 這組字放在meta description內，網頁被搜尋出來時，搜尋結果會以紅色呈現，就會較為顯眼，被點擊的機率則會提高。 (請參考商務中心是什麼)
所以高手過招就在那幾秒間，文章的標題、描述要能夠第一眼吸引訪客的目光並得到點擊， 就會將SEO的排名帶上來。所以接著上述文章標題中提到的
"【xxx】"、"｜"都是為了讓文章能夠更顯眼、突出進而得到點擊拉高排名。 用法如下，只要在文章的head標籤加上
<meta name="description" content="架設購物車網站做網拍賺錢，不用再當上班族多好">
<H1>~<H6>標籤
H1~H6的標籤，以貴設計的習慣，只會用H1、H2，至多H3而已。一般 H1會放跟title一樣的名稱，但礙於title只能放最多35個中文字，H1就可以再加油添醋一些。而H2呢?貴設計舉一個例子，我們以"借址登記"這組關鍵字為例。當我Google搜尋"借址登記"， 請將滑鼠移到最下方，您就會看見相關搜尋(即是潛在詞彙關鍵字／LSI)，例如"借址登記違法、借址登記風險、借址登記新北"。(如下)。
貴設計會把相關搜尋放至在H2標籤內(如下)， 如此的動作就是跟Google講，我的文章都以環繞"借址登記"為主軸。
用法如下，在文章的HTML檔加上
<h1>H1標籤</h1>
<h2>H2標籤</h2>
屬性title、alt
title、alt屬性最常使用在 <a>與<img>。alt是指圖片若沒有顯示出來會有預設的文字， title是指當滑鼠滑過你的<a>與<img>上面會自動浮現文字(效果如下)
用法
<a class="logo" href="https://web-design.vip/" title="貴設計"/>
<img src="img/logo-3.png" alt="貴設計" title="貴設計" />
meta robots
meta robots一般只有要求Google Spider不要收錄該網頁才會用到。 二來為了節省檢索預算，我們會將不必要的網頁建議Google不要收錄。例如會員登入頁面， 不會有人搜尋"會員登入"頁面，然後來到你的會員登入頁。所以我們便會將會員登入、註冊、密碼查詢頁設定"請勿索引"。 語法如下，在文章的HTML檔加上<meta name="robots" content="noindex"/>
link canonical
Google關鍵字搜尋引擎生平討厭很多的事情，例如黑帽SEO、網頁下載速度慢、網頁體驗差勁之類的，還有一點就是 重複性內容。重複性內容即是指不同的網頁網址，但卻有相同的或高達近8成的內容相似。 重複性內容造成的問題，例如浪費檢索預算、網站訪客體驗不好、網頁權重分散的問題。所以這時候我們就會在html檔內置入canonical的屬性，告訴Google這二頁的"標準網址"是xxx之類的。 語法如下，在文章的HTML檔加上
<link rel="canonical" href="https://web-design.vip/seo-tutorial.html"/>從好的習慣角度，所有的頁面都應該加上canonical，以避免日後網站龐大網址混亂的問題發生。
meta viewport
因應手機世代，所有網頁在呈現時均需滿足所謂的響應式網頁設計(RWD)，而RWD也是Google強烈你的網頁勢必要滿足該條件。 所以除了使用一些RWD的前端程式(例如bootstrap)，請同樣在html檔內加上 viewport。 語法如下，在文章的HTML檔加上<meta name="viewport" content="width=device-width, initial-scale=1.0">
<strong>標籤
透過<strong>所呈現的效果就跟粗體<b>是一樣的效果，但差異何在呢? 其實重要的關鍵字應該要用<strong>做強調，而一般粗體效果可使用<b>即可。例如: <strong>SEO/<strong> => 粗體的效果+SEO的效果
<b>SEO/<b> => 粗體的效果
semantic tags
semantic tags稱之為語意標籤，HTML元素內有包含如下
過往HTML檔就是只能用註解強調是選單部份的程式、頁尾的程式、頁首的程式，但現在透過語意標籤，只要
使用<footer>標籤，就可以清楚知道頁尾的部份。而Google Spider也藉由語意標籤更加的清楚網頁的結構。
Schema org
Schema org稱為結構化資料，結構化資料對於SEO的加分效果最強大，但何謂是結構化資料Schema org呢? 其實透過Schema org將網頁內容相關的明確線索提供給 Google Spider。如此的好處便是你的網頁在自然搜尋結果下，會以各種Google 提供的可能型式呈現，而不再是只有Title / Description。例如以下FAQ的Schema org
職缺的Schema org
麵包屑的Schema org
How to 的Schema org
所以透過Schema org，你的網頁搜尋結果會更多元、更豐富並佔用畫面上更多的位置
，如此同樣的可以更顯眼、突出你的網頁，並往後排擠你的下一名被點擊的機會。 更多的Schema org，請參考:Search Gallery