官方文件
基本知識
網站會不會顯示在 Google 搜尋檢索中，檢視方法為：
site:<domain.com>
幾種方式為抓取工具漏抓之現象：
- 剛推出之新網站
- 非HTML建構
- 無登入頁面
- 被遺漏了
改善
針對 搜尋引擎優化網站：
- 貼近主題
- 內容完整
- 與時俱進
- 多使用文字
- 多方分享 衡量網站在 Google 上的效果：
- 展示次數
- 點擊次數
- 平均排名
註冊至Google 收尋引擎
- 註冊 Search Console
- 將網站所有權 TXT 檔案 複製到 DNS 管理紀錄
Google SEO 處理的幾項目標
| 標題 | 描述 |
|---|---|
| sitemap | 通常習慣用 XML，告知 Google爬蟲 新增或更新了哪些網站 |
| robots.txt | 告訴 爬蟲 哪些資料是可以獲取的哪些是不能 |
<meta> | Html Header中的 meta 用來讓Google爬蟲離解的 |
| Javascript SEO | Googlebot 如何處理 JavaScript |
| 網頁搬遷 / 變更 | 如何讓舊/新站處理過渡期 |
| 國際版 / 多語系 網站 | 多語系如何在各地的搜尋引擎找尋相對語系的網站呢？ |
SiteMap
需要 SiteMap 的情況：
- 網站規模極大 - 大量頁面可使用
- 網站有大量封存內容 - 網站
- 網站剛建立，幾乎沒有外部連結
如何撰寫SiteMap
- 官方詳文
- 使用完整網址 -
https://www.example.com/這樣 - 每個Sitemap最多只能包含50000個網址，且壓縮前的大小不得超過50MB (理解就夠用，需要再來改，下方實際狀況會解釋)
robots.txt
- robots.txt 測試工具
- 網頁： 避免 Google 爬蟲 爬到不重要的非媒體格式 HTML / PDF / … ，這工具只是不想顯示在 Google 搜尋結果中
- 媒體檔案： 並防止圖片、影片和音訊檔案出現在 Google 搜尋結果中
- 並非所有搜尋引擎都能支援 robots.txt
- 每個搜尋引擎都有不同的 robot.txt 指令
如何撰寫robots.txt
- 實用規則 (理解就夠用，需要再來改，下方實際狀況會解釋)
<meta>
這個大概是剛開始學前端 HTML 所有老師大概說明一下，但是未必會去講解的一段功能，這屬於優化的網站的部分。
每個搜尋引擎都有不同的 <meta>，來讓搜尋引擎閱讀的，
Chrome
最主流的收尋引擎，大概就是 Chrome 了
// 於搜尋結果中所顯示的網頁摘要。
<meta name="description" content="A description of the page" />
// 適用於所有搜尋引擎。
<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." /> // 為 Google 專用
// 於搜尋結果中會給讓使用者搜尋的搜尋框。 此範例為禁用
<meta name="google" content="nositelinkssearchbox" />
// 網站的頂層網頁中使用這個標記，向 Search Console 驗證您擁有這個網站
// 驗證網站：https://support.google.com/webmasters/answer/9008080
<meta name="google-site-verification" content="..." />
// 這個應該是最常會講解的舉例： 目的給瀏覽器是否支援RWD。 此範例為 寬度為 介面設備之寬度， CSS與介面設備 1:1 （RWD）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 若有標繼承人 搜尋結果會排除。 此範例為 成人
<meta name="rating" content="adult" />
Safari
由於 IPhone 預設瀏覽器，也是蠻多人使用的瀏覽器
// 於手機IOS Safari 狀態下 會把 Ｍobile 的 Search Bar 隱藏
<meta name="apple-mobile-web-app-capable" content="yes">
// 會顯示手機狀態
<meta name="apple-mobile-web-app-status-bar-style" content="black">
// 搜尋時不解析網頁內的數字變成手機號碼，造成不好的使用體驗
<meta name="format-detection" content="telephone=no">
Firefox
FireFox 大概是繼後唯二首選的瀏覽器了，學習的過程也很常在 Mozilla developer 網站中學習 基本上沒什麼特別定義的
<meta charset="utf-8">
<meta name="author" content="作者">
<meta name="description" content="描述">
Open Graph protocol
並不是 GraphQL 這是 Facebook 早期在推廣 MetaTag 所使用的技術，於 Facebook 網站內看到的網頁會有相對應的格式。
<meta property="og:image" content="...">
<meta property="og:description" content="...">
<meta property="og:title" content="...">
相關文章：
IE
於2022 年6 月15 日淘汰並停止支援。
讓我們緬懷歷史，地獄級過渡時期，介面設計師恐懼的噩夢
IE8
// 這是針對 IE8 新增的一個設定 ， 只支援IE8及以上版本或chrome/firefox
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta> 重點解釋
舉例了這麼多，可以用 Facebook 的案例來解釋一件事，除了為了讓 搜尋爬蟲查，不然其實一般商業用途不太會製作像 Google 搜尋引擎的這種網站提供給大家使用
若是當作分享文章給他人，倒是可以遵循 Open Graph protocol，Facebook也有除錯工具提供給大家使用 ，主要在於分享於Line or Facebook 連結時，給他人連結時可以秀出更準確的樣式。og:這個工具並不會影響 Google Search 排名 可以不用太擔心
實際狀況
Open Source 的時代下其實很多東西都是被模組化的，可以先找找有沒有生成這些東西的工具
當然可以自己撰寫
因為我專案是使用 Next.JS 所以我推薦使用開發套件生成: next-sitemap
next-sitemap
- step1: 安裝
npm i -D next-sitemap
- step2: 新增
next-sitemap.js於專案根目錄並寫入程式碼
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
generateRobotsTxt: true, // (optional)
// ...other options
}
- step3: 添加至
npm script
"postbuild": "next-sitemap"
- step4:
npm run postbuild會產出 robots.txt / sitemap.xml 在 public 內
<meta> 處理
在入口樣板的時候可以用公版 <meta> 相關屬性
<!DOCTYPE html>
<html lang="zh-tw"> // 語系
<head>
<meta charset="UTF-8"> // UTF 8
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // < IE8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // RWD
<title>標題</title>
</head>
如果是時常被分享的文章：商品，會建議多加上 Open Graph protocol，這不會幫忙SEO 增加，但是會分享文章時資料樣式，看起來很完整。
<!DOCTYPE html>
<html lang="zh-tw"> // 語系
<head>
<meta charset="UTF-8"> // UTF 8
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // < IE8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // RWD
// og: 系列 當你被分享出去在 Line/Facebook 上時會秀出的相關資料
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="article" /> // default: website ，更多： https://ogp.me/#types
<meta property="og:title" content="標題" />
<meta property="og:description" content="詳情" />
<meta property="og:image" content="http://www.example.com/xxxx.jpg" />
<title>標題</title>
</head>