Skip to main content

SEO 優化方式

圖片格式​

網站的圖片格式​

目前的主流圖片格式大多都以JPG為主，其次是PNG、SVG等。

而現在，網站為了追求更加友善的開啟速度，尤其是圖片較多的電子商務店家，就希望圖片檔案能夠再更小，以利網站的瀏覽與開啟，因此 Google 於 2010 年公布了WebP的這項圖片格式。

WebP 檔案較小​

WebP 格式在與其他圖片都相同的尺寸下，檔案會比其他檔案格式還要小，檔案較小，對網頁的載入速度也會更加友善。

可動態與透明化​

WebP 支援動畫與透明度，並分成失真、無失真壓縮模式。

在過去，動態圖片(動畫)大多採用 GIF 格式檔案來顯示、透明化的圖片為 PNG 格式，而現在則多了檔案較小的 WebP 的選擇。

不是所有瀏覽器都支援 (94%)​

根據維基百科資料顯示，截至 2021 年 5 月，已有**94%**的瀏覽器支援 WebP 的格式，但這也代表並非所有瀏覽器都支援。

不過不用太擔心，WebP 是未來的圖片趨勢，現在無法支援的瀏覽器，相信在未來都會陸續的更新支援，如先前無法支援的瀏覽器 Safari 也在 iOS14 和 macOS 11 Big Sur 開始提供支援。資料來源：Apple 在 Safari 14 中添加了 WebP 圖像支持

參考文章

HTML element tag​

內容較長另外拉一頁來寫 HTML element tag

Canonical tag​

canonial 免於重複內容的風險

<a rel="canonical" href="https://www.bbc.com"></a>

它們是由各種工件（如 http/https 和各種跟踪標籤）產生的，有時它們是由產品目錄中可用的各種排序和自定義選項產生的。

其實這個不是什麼大問題，主要是爬蟲抓取你的畫面，而且它還會擾亂你的性能跟踪。主要用於：

  1. 指定 SERP 中要顯示的網址，前往不同 URL 訪問的頁面
  2. 整合重複內容、降低負面影響，內容非常相似的頁面，避免爬蟲耗時檢索重複網頁
  3. 創建自己的 URL 參數的動態頁面 target='_blank'

canonical tag 參考文章

參考文章

mobile 的 input 不要 zoom in​

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.

在 mobile 中常常會有 input zoom in zoom out 的問題，如果加上了 user-scalable=no 的話，建議還要加上 maximum-scale=1.0

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no"
/>

改為

maximum-scale=1.0
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

pagination 分頁模式​

選擇最適合您網站的使用者體驗模式​

您可以選擇下列其中一種使用者體驗模式，以此顯示大型清單的部分內容：

  • 分頁：使用者可以透過「下一頁」、「上一頁」和頁碼等連結在多個結果網頁間切換，一次只顯示一個網頁份量的搜尋結果。
  • 載入更多：提供使用者按鈕，只要點選即可擴大初始顯示的搜尋結果數量。
  • 無限捲動：當使用者可以捲動到網頁底部，就會觸發載入更多內容。進一步瞭解讓無限捲動網頁便於搜尋的幾項建議。

依序連結網頁

如要確保搜尋引擎瞭解內容分頁後各網頁之間的關係，請在各個網頁連向下個網頁的連結中使用 <a href> 標記。這麼做有助於 Googlebot (Google 網路檢索器) 找到接續的網頁。

參考文章

noindex 禁止 Google 搜尋建立索引​

如果您沒有自身伺服器的根存取權，就很適合使用 noindex，因為這樣就能輕鬆控制網站上每個網頁的存取權。

實作 noindex​

實作 noindex 的方法有兩種，分別是使用中繼標記和 HTTP 回應標頭。這兩種做法的效果相同，請依照內容類別和網站情形選擇適合的即可。

<meta> 標記​

如要防止「大部分搜尋引擎」將網站的特定網頁編入索引，請在網頁的 <head> 區段放入以下中繼標記：

<meta name="robots" content="noindex">

如要「專門防止 Google 網路檢索器」將特定網頁編入索引，請放入下列中繼標記：

<meta name="googlebot" content="noindex">

提醒您，有些搜尋引擎對 noindex 指令可能有不同的解譯方式，因此您的網頁仍可能出現在這些搜尋引擎的結果中。

參考文章

優先載入​

顏色比對​

pagespeed 測試出來會有這麼一段建議

Background and foreground colors do not have a sufficient contrast ratio: Low-contrast text is difficult or impossible for many users to read.

所以在顏色的設計上，也可以和 deisgner 溝通，此段的 title 的 url 是測試顏色是否有符合標準，可以透過測試來 check

使用 contenteditable 做行內編輯​

contenteditable 讓使用者直接在瀏覽器內編輯內容，適合簡單所見即所得（WYSIWYG）編輯器。

範例：

<div contenteditable="true">Edit this text!</div>
title: Pro Tip：搭配 oninput 即時儲存

結合 oninput 可在輸入時即時處理或儲存內容：

<div contenteditable="true" oninput="saveContent(this)">Edit me</div>
function saveContent(element) {
  console.log(element.innerHTML);
}