Frontend in SEO 前端可以怎麼優化 SEO

SEO 核心理念，先認識 SEO 重視什麼，再看前端可以怎麼改善

SERP

SERP (搜尋引擎結果頁，Search Engine Results Page) ，指的是當我們在搜尋引擎輸入內容，按下 Enter 後，搜尋引擎呈現的「結果頁」。
而這個頁面的排名就是我們一直想破頭在處理的 SEO 分數來決定。基本上，現在前三個都是買廣告，有錢就是老大的概念。

Sitemap

Sitemap 是一個檔案，敘述整個網站架構、所有頁面(想被爬蟲、搜尋引擎涵蓋的)。通常會放在 root 位置並取名為 sitemap.xml，讓搜尋引擎能夠解析。若想要手動上傳，可透過 Google Search Console。

HTML: Meta Data、Semantic Tag、Accessibility

Meta Data

-- 網頁的隱藏資訊，用來告知搜尋引擎以及瀏覽器關於網頁的額外資訊，有助於理解該網頁的核心內容與架構。
-- 放在 <head> 裡

幾個重要、常見的 attributes

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="描述網站內容的文本，會顯示在搜索時的摘要文字">

    <!-- 告知搜索引擎不要收錄此頁面，例如 404、 Error 頁面 -->
    <meta name="robots" content="noindex, nofollow">

    <!-- 自定義在社交媒體的預覽顯示內容，標題、圖片、文字 -->

    <!-- OG 為 Open Graph，由 Facebook 提出的協議 -->
    <meta property="og:title" content="標題">
    <meta property="og:description" content="描述">
    <meta property="og:image" content="https://www.yourwebsite.com/path/to/image.jpg">
    <meta property="og:url" content="https://www.yourwebsite.com/your-page">
    <meta property="og:type" content="website">

    <!-- 雖然 Twitter 更名為 X， 但底層仍維持 twitter-->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="標題">
    <meta name="twitter:description" content="描述">
    <meta name="twitter:image" content="https://www.yourwebsite.com/path/to/image.jpg">
    <meta name="twitter:site" content="@你的Twitter用户名">

    <!-- 可省略 -->
     <meta name="keywords" content="定義關鍵詞，但多數搜尋引擎已忽略">
</head>

關於 OG 跟 Twitter Cards

其實 OG 就可以提供給 LinkedIn、Twitter 等，而 Twitter 自己的 card 主要用於自己的分享功能優化。若網站兩者都提供，Twitter 會以 name="twitter:card" 為主。

OG 是通用協議; Twitter Cards 只為 Twitter 設計。

X （原推特）Meta 文件參考 Tweets with X cards

其他

若網站有重視的平台也可以看有沒有特殊指定的 attributes，但大部分網站遵從使用 OG 的內容，再搭配下面要介紹的結構化數據，就很夠用。

Semantic Tag 語意化標籤

HTML5 提出了多個「語意化標籤」，比起過往 <div> 包攬全部的骨架，語意化標籤可以更容易看出內容架構，SEO 爬蟲也更好解析。以下為幾個例子：
<main> 表示該頁主要內容區塊
<footer> 表示 Footer
<nav> 表示導航
<section> 表示內容區塊，一頁可以有多個 section

Accessibility

除了上述的 Meta Tag 及 Semantic Tag，其餘就是平常開發經驗當中，常見的一些：
<img> 的 alt

Structured Data 結構化數據

-- 作用跟 Meta data 類似，提升在搜尋結果中的展示效果，但可以有更細節的屬性設定。
-- 基本上，我會依照 Schema.org 的規則做內容定義，因為 Schema.org 是由多家大型搜尋引擎公司共同提出並維護的一個結構化數據標準框架。
--官網有很多說明，並可以直接驗證網頁的 Structured Data 是否符合規定。

React 裡使用

之前在電商網站的產品頁加上動態獲得產品內容後的 Structured Data，用到的屬性跟值必須依照產品類型、是否實體（影響到物流庫存）等等，有蠻多動態因素來決定。
我是把 Meta Data 跟 Structured Data 設計成一個 Component SeoHead。

structuredData.ts
const structuredBasic = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    '@id': product.id,
    name: product.title,
    url: locationUrl,
    isbn: '',
    image: imageUrls,
    description: product.description,
    sku: '',
    brand: {
      '@type': 'Brand',
      name: product.store.name,
    },
    offers: {
      '@type': 'Offer',
      availability: 'https://schema.org/InStock',
      price: product.price || product.original_price,
      priceCurrency: currency,
      url: locationUrl,
    },
  };

  const structuredReview = {
    review: {
      '@type': 'Review',
      author: {
        '@type': 'Person',
        name: seoReviewItem.user.nickname,
      },
      reviewBody: seoReviewItem.comment,
      reviewRating: {
        '@type': 'Rating',
        ratingValue: seoReviewItem.rating,
        bestRating: '5',
      },
    },
  }

  const structuredData = {
    ...structuredBasic,
    ...structuredReview,
  };

SeoHead.tsx
const SeoHead = ({ title, description, image, path, structuredData }: Props) => (
  <Head>
    <title>{`${title} - Website`}</title>
    <meta name="description" content={description} />
    <meta property="og:url" content={path} />
    <meta property="og:title" content={`${title} - Website`} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    // Structured Data 必須以 script tag 放進 <head>，且為 ld+json 格式的內容 
    <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
  </Head>
);

驗證

直接到 https://validator.schema.org/ 就可以測試，若有格式錯誤、屬性不合規定，都會顯示在右邊。
結構化數據錯誤有時候輸入的動態內容若為 User 自定義，要注意是否有會影響到 data 的解析的內容，尤其中文字可能被轉譯。

URL 設計

Google 說明 -- 應使用 HTTPS 協定，確保網站安全性
-- URL 應越簡單、簡短、可讀性高、能表明清楚

https://en.wikipedia.org/wiki/Aviation

// UTF-8 也可以
https://example.com/%E6%9D%82%E8%B4%A7/%E8%96%84%E8%8D%B7

// 合理的 key-value
https://example.com/category?category=dresses&sort=low-to-high&sid=789


// 不要這樣！！！不使用 non-ASCII 字元、意義不明的 id、奇怪的格式
https://example.com/杂货/薄荷
https://example.com/🦙✨
https://example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1
https://example.com/category?category,dresses,,sort,lowtohigh,,sid,789

其他

-- 避免在 URL 顯露 session ID
-- 動態生成的 URL，例如搜尋結果、日曆等，應加入 robots 避免爬取
-- 全網站網址的大小寫盡量一致

避免

除了上面提到可以改善的部分外，在前端三十也提到了負面影響讓大家避免：
-- 為爬蟲制定客製化頁面
-- 用免費平台建立多個部落格後，互相連結
-- 文章內容亂塞連結或關鍵字 (應該是指塞入與內容不相干的高分連結或者關鍵字)
-- 盜取他人內容 (現在很多內容農場就是這類作法)
-- 網頁彈出、蓋板廣告

總結

本文提到的主要都是針對前端可以優化的部分，但實際上 SEO 涵蓋的範圍相當廣泛，從內容議題操作到相關類別(例如 PAA, People Also Ask)都是可以改善的方向。不過若是作為一名工程師，建議先把網站設定都符合搜尋引擎理想的規則，是最好的。

參考資料

前端三十 - Chapter 19, 作者朱信穎

SERP​

Sitemap​

HTML: Meta Data、Semantic Tag、Accessibility​

Meta Data​

關於 OG 跟 Twitter Cards​

其他​

Semantic Tag 語意化標籤​

Accessibility​

Structured Data 結構化數據​

React 裡使用​

驗證​

URL 設計​

其他​

避免​

總結​

參考資料​