我並非SEO專家，但我在處理前端網站時，確實常要注意SEO的一些細節。
這篇應該不算是SEO教學，而是我用在進公司後一路上的SEO優化過程。
同時可參考我之前撰寫的優化文章，彼此是有相互關聯的哦~
SEO是什麼？
是一種透過自然排序（無付費）的方式增加網頁能見度的行銷規律。
SEO包含技術與創意，用以提高網頁排名、流量，以及增加網頁在搜尋引擎的曝光度。
詳細請參考:
SEO的初學者教學，搞懂SEO搜尋引擎優化，讓你網站訂單接不完
關於SEO的基本介紹我不多做解釋。此篇只先注重我優化SEO的技術歷程
第一步
檢測網站SEO
以下次檢測SEO的工具
只要將網址貼上去，就會自動檢查網站內SEO分數有多少
並且將建議修正的資訊告訴你
例如.有沒有H1、title是否過長、網站速度等等
我的建議是認為分數是個參考值
沒有代表分數高 排名就會高的意思
但通常我還是會照著測試工具給的意見去修正錯誤
註:好像一天只能檢測一次，但大家還是可以找找看有沒有可以檢測SEO多次的網站工具這邊再額外推一個超好用檢測工具
都是中文內容，而且還會詳細的告訴你該如何修正
這網站還有關鍵字分析功能
我真心覺得這是看過所有網站最好用的
但是只有14天免費的期限
而且如果有付費的話，可以享有更多更詳細的功能
第二步
SEO優化 HTML Tag？
身為一個前端工程師，想必對HTML再熟悉不過了吧！
再學習優化前，一定要懂得善用檢視原始碼(Ctrl+U)
因為有時為了讓自家網站SEO變好，又沒有SEO技術團隊可以協助
所以只能去大量參考別家SEO如何製作
這時候就需要時常用檢視原始碼(Ctrl+U)去參考別人是否有加特殊的標籤來增進自家SEO。
回歸正題，還記得剛剛第一步就提到H1、Title等HTML標籤吧
SEO非常注重HTML的標籤！要是沒有以下這些tag估計會很慘...
(以iT邦幫忙為例)
- Title
網站起始的標題
<title>iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天</title>- meta
是對網頁的描述，原則上150以內，並且盡量將關鍵字重點往前擺，讓使用者可以快速看到重點。
<meta name的="description" content="iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT 人"/>- img標籤中的alt
alt是針對圖片的描述，Google 爬蟲在爬取網站時，會利用圖片標籤來辨認圖片內容。
<img src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="iT邦幫忙" class="img-responsive">另外需注意的是meta標籤可以很多個，可以嘗試增加類似以下meta標籤。
<meta property="og:url" content="https://ithelp.ithome.com.tw"/>og是針對社群的tag。常見的社群就是Facebook、Line。
- H1、H2、3、4、5、6
H1通常是一個頁面中的主標題，只能有一個
H2是最常用的標題，通常3-5個剛好
其餘H3-6可用也可不用
第三步
Google 結構化？ schema？
在網頁中加入結構化資料，你可以為 Google 提供有關網頁內容的明確線索。
結構化資料是一種標準化格式，作用是提供網頁相關資訊以及將網頁內容歸類。
其實在增加結構話之前，你必須要相當熟悉HTML，否則可能會面臨無從下手的窘境。
請務必詳細參考google提供的文件檔
簡單來說這類的結構化就是幫助google可以更快更明確的爬你的頁面
目前有三種實作方式
- Jsonld
是在script中加入json格式，依照相對應的主題(LOGO、文章、電影、商家等等..)，加入相對應的元素名稱
<html>
<head>
<title>About Us</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "http://www.example.com",
"logo": "http://www.example.com/images/logo.png"
}
</script>
</head>
<body>
</body>
</html>- 微資料
就是在HTML上直接加入結構化屬性在標籤中
如:itemscope、itemtype、itemprop
<html>
<head>
<title>Legal Seafood</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/AggregateRating">
<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Restaurant">
<img itemprop="image" src="https://example.com/photos/1x1/seafood-restaurant.jpg" alt="Legal Seafood"/>
<span itemprop="name">Legal Seafood</span>
<span itemprop="servesCuisine">Seafood</span>
<span itemprop="telephone">1234567</span>
<span itemprop="address">123 William St, New York</span>
</div>
<span itemprop="ratingValue">4.2</span> out of <span itemprop="bestRating">5</span> stars -
<span itemprop="ratingCount">123</span> votes
</div>
</body>
</html>- RDFa
目前這沒有撰寫過...但應該也類似於微資料的型態
這邊我推薦幾個方便檢測結構化是否正確的網站
https://search.google.com/test/rich-results?utm_campaign=devsite&utm_medium=jsonld&utm_source=logo
https://search.google.com/structured-data/testing-tool?hl=zh-TW
第四步
Google Console Search(GCS)
基本上這並非技術層面(不寫code)
而是偏向商業數據分析GCS是用來監測你的網站在Google搜尋引擎中表現結果的工具。
它可以告訴你，在近期的90天內，你的網站內容點擊次數、曝光次數、點閱率最高的是哪些網頁
人們使用哪些關鍵字找到你，以及你的網站排名在Google的搜尋結果是第幾名。
如何建立GCS的教學我附上
Google Search Console教學，SEO必學網站管理工具
通常要只要有技術上的異動，都要特別留意GCS的流量，這樣才能知道是否有成效。
結語
SEO我覺得是一門很深的學問。
除了技術之外，還要有豐富的經歷，才能成為SEO專家
當然上述說的SEO不只如此，就我所知還有
- Robot.txt
- 反向連結
- Sitemap
等等諸如此類比較深入的SEO技術。
還有我開頭所貼的文章
[Nuxt JS筆記]網站優化教學、提升速度！讓你的網站飛起來吧！
這也是SEO優化的一部份
因為網站速度也會影響Google爬蟲，若速度太慢Google就不會想爬！
這樣排名就容易掉
另外還有需要時常注意Google官方是有更新演算法的標準
有時候Google大更新，但開發者沒注意到，就容易導致Google排名被大洗牌
可能原本在第一頁，卻因為沒注意到官方更新資訊，直接掉到3.4頁或直接消失在Google上都有可能的。
上述內容，是我身為前端工程師，大致上就是這樣處理SEO的
身邊也沒有SEO專家可以詢問
只能靠大量查詢、自學。
處理SEO最我痛苦的大概就是有時候更新了技術，卻不能馬上看見成效，有時需要等上3-5天或者數周(可能更久)才能看見成效，甚至有時候更新是否錯誤自己也不太確定...
等於全部都是靠流量成果來顯示是否正確
如果看到這篇文章有人是SEO大神的話，拜託可以多給我一些指教QQ
最後提供一個常看的SEO網站教學，是中文，而且也教得很詳細
