The 21st century: SEO

W3C HTML5 – header、footer、main、address：
http://blog.shaochuancs.com/w3c-html5-header-footer-main-address/
https://www.w3.org/TR/html5/sections.html#the-header-element

HTML5 中的 data-* attribute 屬性
https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html

HTML 5 規範的語意化標籤

<header>
顧名思義就是頭部，主要是用來放置網站的刊頭，固定會重覆出現的導覽、LOGO、站名等內容。

<footer>
尾部，包括頁尾，像是法律資訊或是作者訊息等等，不過<header>及<footer>都不是唯一的，在網頁中的同一個區域可以重覆使用。

<nav>
導覽列，像是選單之類用來導引使用到網站各個地方的，可以用<nav> 包起來，在裝置上的操作是可以直接跳過、跳是跳到這個段落然後跳選下一個連結。

<main>
HTML <main>元素呈現了文檔<body>或應用的主體部分。主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。這部分內容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重複的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main

<aside>
側欄，網頁中非主要區域的地方，常見放廣告及導覽、全站檢索的地方。

<article>
文章，意指一篇完整而可獨立抽出來閱讀的文章。

<section>
章節，表示相關但是不同的段落，段落tag裡也可以包<article>, <article>裡也可以包<section>主要的差別是語意上的。

<header>：網頁的標頭，通常放置網站標題。
<nav>：網頁的選單、導覽。
<main>：網頁的主要內容。
<aside>：網頁的側欄、附加內容。
<article>：一篇文章內容。
<section>：自訂的區塊，例如數篇摘要組成的空間。
<footer>：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
<mark>：Highlight parts of a text.
<time>：顯示日期時間。

Google 的 Matt Cutts 說過的話、發表的內容可以相信，因為他是搜尋引擎的頭頭，基本上 SEO 的規則他說了算。不過要得到彙整過、消化過的資訊並不容易，因為他發布的消息比較零散。

這篇「How To Use H1-H6 HTML Elements Properly」根據 Matt Cutts 做了一些整理，也是本文內容的依據：

H1、H2 等標籤不必依照順序，搜尋引擎仍可處理(依據影片內容)

一個頁面最好只使用一個 H1 → 雖然根據影片，Matt Cutts 說不要到處都是 H1 就好，但一個頁面使用一個 H1 "才是這個標籤的本質"。相信當一個頁面只要不是刻意使用超過一個 H1，Google 有辦法判斷出該使用方式是否為惡意、還是正常使用。

H2 最好使用二～三個就好 → 避免分散權重

H3 最好使用二～三個就好 → 避免分散權重

H4～H6 不太重要

For example, this is semantically correct:

<h1>Website Design Basics<h1>

<p>Here is some text</p>

<h2>HTML</h2>

<p>Here is some text</p>

<h2>CSS</h2>

<p>Here is some text</p>

規劃網站、設計網頁、撰寫文案內容，需要注意到一些 SEO 小技巧：
https://www.astralweb.com.tw/seo-tips/

使用Keyword Tool(關鍵字工具)：
https://www.astralweb.com.tw/how-to-use-keyword-tool/

SEO優化技巧，其中最常提及的重點就是減少跳出率，因為使用者待在網站的時間長度，也是搜尋引擎判斷的依據；若是使用者太快離開網站，有可能是內容不佳，也可能是使用者得到需求資訊後就離開網站。雖然SEO需要時間長期經營，但只要看到成效就能為網站帶來效益。

使用關鍵字規劃工具，找出大眾最常使用的關鍵字
在編寫網頁內容時，是不是絞盡腦汁、毫無頭緒呢？為了讓搜尋引擎喜歡你，關鍵字是重要的辨識方法，但一個詞彙會有不同的解釋方式，像Responsive Design就有響應式設計和互動式設計這兩種說法。推薦你使用Keyword Tool這個網站，只要輸入關鍵字，就會替你找出大眾最常搜尋的相關字串，幫助你在撰寫網頁文章時，加入適當的關鍵字大眾更容易找到你！當然，最重要的還是網站內容要言之有物，切忌輸入一堆無相關的關鍵字，反倒失去搜尋引擎對網站的信任喔！

加入相關連結，讓使用者快速找到需求資訊
只要使用者在你的網站待越久，越能減少網站跳出率，就有機會讓搜尋引擎信任你、親近你！最常使用的優化方法就是加入相關連結，讓使用者可以進一步連到相關網頁，除了方便使用者找到相關資訊外，還能留住使用者繼續瀏覽網站，減少跳出率。

使用追蹤碼追蹤相關連結
設定連結後要如何得知是否有人點閱，查看這些連結設定是否吸引使用者呢？只要在連結網址中設定追蹤程式碼，就可透過Google Analytics查看點擊數喔！

追蹤程式碼：
onclick=”ga(‘send’, ‘event’, ‘Link’, ‘Click’, ‘LINKTEXT’);”
註：LINKTEXT可改寫為相關網址的名稱，在使用Google Analytics查看時更能清楚得知此點擊的由來。

製作導覽列表，讓所有相關文章一目瞭然
當你累積了大量的相關文章，有個簡單快速的優化方法，就是新增一篇導覽文章，列出所有文章的標題與連結，讓對該分類有興趣的使用者，快速找到相關文章，吸引使用者繼續瀏覽，減少網站跳出率。其大量的關鍵字也能讓搜尋引擎親近你，但還是要注意內容品質才是首要條件。

想要優化網站，讓 Google 看得懂，那麼別忘了根據 Google 在網站管理員說明中提到的資訊，將以下標記適當的加入網站，打造一個友善於Google搜尋的網站：https://support.google.com/webmasters/answer/79812
http://gogojimmy.net/2013/09/26/basic-seo-for-rails-developer/

三個最基礎 (最重要) 的觀念：

1. <title>正確的標題是最重要的關鍵：標題要與內容相符，誠實方為長遠之道</title>

2. <meta name=description content="150個字元以內的精確描述，若超過150 個字元，網頁可能會被搜尋引擎標示為需要審核或使用欺騙手段。">

3. 絕對不要使用 Meta Keywords 關鍵字：
在進行網頁 SEO 優化時，大部分的人會在網頁的 meta 部份加上一堆的keywords，為的就是幫助搜尋引擎了解這個頁面的重點，但是你知道嗎？Google早已經完全不採用這樣的 keywords 了。原因在於使用過於氾濫，當大家知道這是影響搜尋結果的一個因素後，一堆網站拚了命在 meta 部份加上關鍵字，企圖想要讓自己的網站在自然搜索結果中更好，但這樣卻違背原本的用意了。
當然，現在還是有許多網站會使用這樣的方式去堆積網站的關鍵字，但是說真的，不建議也不要這樣子使用，因為這樣的使用很可能會被搜尋引擎將這個網站打到谷底，甚至將網站判斷成垃圾網站。因此，如果網站還在使用 meta keywords 的人，別忘了去將這些關鍵字永久撤下，不要抱著它可能會替網站加分的念頭囉！

https://sofree.cc/google-meta/
https://sofree.cc/meta-keywords/

● 搞定Meta Tags 及 Meta Data
Title Tag, Meta Description Tag, Canonical Url, Facebook Open Graph, Twitter Cards.

詳細可參考 https://www.oxxostudio.tw/articles/201406/social-meta.html

Open Graph:
https://dotblogs.com.tw/walter/2014/05/21/how-to-set-facebook-share-info
http://ogp.me/
https://developers.facebook.com/docs/reference/opengraph

● 搞定連結
連結大概分三種，純文字的連結、圖片連結以及不想讓搜尋引擎作為SEO計算的nofollow連結(比如說留言裡的垃圾回應或是付費連結)。

● 搞定網址
良好的網址、301轉址、網址內要有關鍵字、使用Canonical Url的方式來避免重複內容、將內容放在網域下第一層路徑的效果比弄成子網域好。

* rel=”canonical” 語法應用教學，SEO上的最佳使用時機
https://www.awoo.com.tw/blog/2018/04/relcanonical-for-seo/
https://support.google.com/webmasters/answer/139066?hl=zh-Hant

● 搞定爬蟲
robots.txt

● 搞定Sitemap
每次有新內容產生的時候就向搜尋引擎提交一個新的Sitemap、Sitemap的寫法、針對不同的Content Type來做不同的Sitemap (比如說影片、圖片、手機版)。

向 Google 提交 Sitemap：
https://support.google.com/webmasters/answer/183669?hl=zh-Hant
https://support.google.com/webmasters/topic/4598733

● 搞定語系與國家
在 html tag 中加入語系、在 head tag 中加入所有語系以及國家。

使用 hreflang 提供正確語言和地區的網址: https://support.google.com/webmasters/answer/189077?hl=zh-Hant

● 其他建議
Responsive Design或是建立另外一個行動裝置版本的網站。

行動版網址中不可缺少指向電腦版網頁的 rel=”canonical” 標記: https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls?hl=zh-tw

Google Search Console (GSC) 網站管理員工具是什麼？有什麼用途？ (舊稱：Google WebMaster)

https://www.kingman.idv.tw/internet-genaration/197-what-gsc-google-search-console-webmaster.html

http://sweeteason.pixnet.net/blog/post/43600332

網站結構調整

1. 網址盡可能呈現內容所在的結構

2. 設定 robots.txt

3. 標準連結元素 canonical 的設置

4. 建立網站 sitemap

網頁內的調整

1. 建立一個好的網頁標題及描述

好的標題要符合

a. 必須要獨特、精確、簡短

b. 最重要的關鍵字要放在最前面，其他像公司名稱放在後面