網站相關 meta
description 網頁摘要
<meta name="description" content="摘要">- 顯示於搜尋結果網頁標題下方
- 應簡短扼要說明網站
keywords 關鍵字（建議不要用）
建議不要在用的原因是因爲以前被過度濫用，而 Google 在 2009 年就已經宣佈， keywords tag 已經不列入 SEO 計算中。
參考資訊：Google does not use the keywords meta tag in web ranking
Facebook 社群相關 <meta og:Tag>
OG:Tag 是 Open Graph Tag 的簡稱，一開始是 Facebook 提出的規範，後來許多社群網站跟進，描述希望被抓取的資訊
較常用的標籤有以下三個，下面會對這個三個標籤做詳細介紹，如果想知道其他的 og 標籤可參考 Facebook 官網：網站管理員。
og:title
- 網站的標題
- 如果沒有設此標籤，則爬蟲會抓取
<title>的內容 - 舉例： 104
og:image
- 網站預覽圖 url
- 檔案大小：< 8MB
- 檔案尺寸：建議尺寸 1200x630
- 對於圖片的內容 FB 有提供 圖像文字檢查工具 的網站，協助檢測。
- 網址的 url 一定要使用絕對路徑（重要！）
- 舉例：104
og:description
- 描述或摘要
- 通常為 2 到 4 句
- 如果沒有設此標籤，則爬蟲會抓取
<meta content="description">標籤中屬性content的內容 - 舉例：104
Facebook debugger
如果想要預覽分享後的樣子，可以利用此網頁進行偵錯，把網址貼上去，就呈現出來的分享結果。
當修改了 og 資訊會預覽圖但沒有更新，很有可能是被 chache 了，這時請手動按網址底下的按鈕 Fetch new scrape information
（若預覽圖還是沒有更新，請稍等一天，如果很急就必須更改 url。）
更多資料可參考：給網站管理員的分享功能指南
[補充說明] 關於 og 那些重要的小事
在通訊軟體當道的時代，不管是 line、skype、Telegram 等軟體，在分享網址時都會出現網站標題、縮圖及描述，我們透過去設定 og 可以更準確的說明網頁內容。
以下常見問題集
Ｑ：我修改了 og 資訊會預覽圖但沒有更新？
Ａ：很有可能是被 cache 了，這時請在 Facebook debugger 按網址底下的按鈕 Fetch new scrape information 手動更新。
Ｑ：我已經手動更新了但為什麼通訊軟體上還是舊的資訊？
Ａ：這是因為上面網址的更新只針對 Facebook ，通訊軟體上也會有 cache 的問題，通常要最少 3 小時至一天以上才會更新 cache ，如果是 Skype 印象中好像不會更新（大概 2.3 年前的事情，或許現在會更新了），如果需要及時修正的話，最快的方式是直接更改網址，但如果是夾帶在 EDM 中的連結根本不可能再重新發送，因此在露出網站前要非常注意是否有設定好 og 。
更多資料可參考：給網站管理員的分享功能指南
Twitch 社群相關 <meta twitter:Tag>
twitter:card
- 表示顯示方式
第一種 summary
第二種 summary_large_image
twitter:site
- 卡片應歸於Twitter @username。
- 非必要屬性
twitter:title
- 相關內容的簡潔標題。
- 必要屬性
twitter:description
- 簡要總結內容的描述。
- 非必要屬性
- iOS，Android：不顯示
twitter:image
- 代表頁面內容的唯一圖像的 URL
- 非必要屬性
- 最小尺寸為 300x157 或最大 4096x4096
- 檔案大小：< 5MB
twitter:image:alt
- 非必要屬性
- 圖像的文字描述，將圖像的本質傳達給視障用戶。最多 420 個字符。
JSON-LD
全名為 JavaScript Object Notation for Linked Data，即是 JSON 格式的結構化資料，跟 og 是類似的東西，以固定的格式去說明網頁內容，可以幫助機器去理解網頁內容，就能針對不同類型的網站作出對應的搜尋結果的呈現。
有興趣可以看 官方文件說明，想要測試可以使用 Google 提供的 結構化資料測試工具。
網路上也有教學文件可以參考：使用 JSON-LD 處理 SEO，並讓 Google 針對不同形式網站做獨特的搜尋結果呈現
robots.txt
- 告訴網路爬蟲程式（Google 搜尋），網站上的哪些頁面需要檢索，哪些特定頁面禁止爬取。
- 檔案通常放在網站的根目錄。
有興趣得可以看官方說明文件，測試可使用 Google 提供的 robots.txt 測試工具。
sitemap.xml
有興趣得可以看官方說明文件，測試可使用 Google 提供的 Search Console 檢測工具。
重點整理
- 身為前端基本增加 SEO 方式有：1⃣ 多使用語意化標籤，2⃣️設定 meta
- 經常會需要設定的 meta 標籤有以下
<meta name="description" content="摘要">：網頁摘要，會出現在搜尋結果下方<meta property="og:Tag" content="...">：一開始是使用在 Facebook 的爬蟲上，以固定格式去說明網頁內容，會在分享連結時出現的卡片，後來其他的軟體也開始會讀取這個 meta 的資訊
- 其他給爬蟲看得資料
- JSON-LD：主要用於 google 的爬蟲，內容為 JSON 格式的結構化資料，跟 og 是類似的東西，以固定的格式去說明網頁內容，可以幫助機器去理解網頁內容
- robots.txt：告訴機器哪些東西要爬哪些東西不要爬，通常會放置於網站的根目錄
- sitemap.xml：告訴機器網站上有哪些網頁連結
以上有任何錯誤的地方歡迎指正，感謝。
