如何加強網站的SEO - 進階篇

我們在上一篇提到了SEO的基本觀念，先大略的認識什麼是CSR, SSR與如何加強SEO的部分後，再來就是進一步的探討SEO更進階的應用，之後將會介紹如何透過SSR來達成SEO的效果，另外也會包含如何善用schema來達到更進階的網站辨識度。

如果你在尋求如何把SPA達到如SSR的效果，那麼可以參考之後的SEO文章。

SEO全系列文章

📌 如何加強網站的SEO - 基礎篇
📌 如何加強網站的SEO - 進階篇
📌 如何加強網站的SEO - SSR與CSR篇
📌 如何加強網站的SEO - 同構篇
📌 如何加強網站的SEO - 框架篇
📌 如何加強網站的SEO - 資安篇

SSR與SEO的關係

SSR翻譯為伺服器端渲染，也就是直接從Server產生HTML，而非JavaScript這類的程式碼傳到Client端。
你可能會問，為什麼SSR這麼重要，又會跟SEO常常扯上邊討論呢？
主要的原因就是要讓Search Engine讀懂你的網站。

Search Engine如何讀懂

至於是如何讀懂的，其實官方始終並沒有明確的表示，他們是如何使用搜尋演算法來過濾這麼龐大的網路。
主要原因是因為，如果他們明確地揭露出詳細的過程，會被很多有心人士操弄。
在早期，很多部落客就是藉由在文章中衝量過多的關鍵字，導致搜尋結果的前幾頁都是他們的文章，藉此賺點閱率。
特別是很多時事會被拿來利用炒作，當時Search Engine也注意到這個惡性循環，而不斷加緊改善演算法。

認識Search Engine

但是Search Engine會透過間接的方式讓使用者能盡量依循某些特定的規則來加強網站的辨識。
例如：一家e-commerce的網站，會賣很多商品，那麼Search Engine會希望網站能夠提早先讓他們知道，這個就是一家商店，而非部落格…
最有代表性的就是Google，大家都想循著Google的腳步取得曝光度，只要照著規則走，Google將會豪不客氣的將你的搜尋結果往前頂。

如何加強網站辨識度

上篇文章我們提到，HTML的tags需要下對之外，其實還有很多是我們額外可以添加上去的。
基本上可以統整成以下：

善用HTML的原生tags
建議的範例：
1
2
3
<div>
<a>...</a>
</div>

不建議的寫法：

1
2
3

<a>
    <div>...</div>
</a>

schema.org
上一篇也有提到schema是什麼，這裏將會更進階的讓你知道如何去使用它。
當你打開網站之後，你會發現有很多種類，這個時候請先查看你的網站是屬於什麼類型的。
例如你所設計的網站是Movie，那麼你的就可以去Movie的分類去查看可以搭配使用哪些屬性。
以下範例展現，Movie的分類，可以使用名稱與分類的屬性。
1
2
3
4
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">返校</h1>
<span itemprop="genre">台灣</span>
</div>

如果你的網站是屬於hybrid的架構，也可以放入多層或多個的結構。
在Movie底下同樣都有name，但是最內層的name被視為是Person，因此不會被辨識為Movie。

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">返校</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  演員: <span itemprop="name">方同學</span>
  </div>
  <span itemprop="genre">台灣</span>
</div>

JSON-LD（搭配schema的進階寫法）
你可能會覺得第二點的方式有點麻煩，為什麼我每次都要在網站的結構加入這麼多東西，不能集中在一起管理比較方便嗎？
那麼就很推薦你使用JSON-ld了，Search engine同時也鼓勵開發者多使用JSON-LD添加到自己的網站上。

關於JSON

怕有些沒學過網頁的不知道什麼是JSON，這邊補充解釋一下JSON。
全名為：JavaScript Object Notation，因此你可以視為他是一種資料的表述方式。
相較於其他資料儲存格式，較容易於閱讀與理解，且方便使用。

關於JSON-LD

全名為：JavaScript Object Notation for Linked Data，透過JSON格式，將相似的資料串連起來而形成的一種巢狀資料結構。

使用方式

不少人一開始學JSON-LD都無法馬上理解這東西怎麼使用
但是其實用法真的非常的簡單，只要把JSON-LD用一個script tag包起來（並且標記他的種類是JSON-LD），就可以使用了！

1	<script type="application/ld+json">...</script>

如何寫JSON-LD

我強烈推薦各位到 Google開發者的網站去詳細閱讀如何撰寫一個好的JSON-LD，如果撰寫的好，將可以得到搜尋結果的一些Bonus。
以下將導讀Google的網站讓大家知道如何撰寫。

網頁範例
假設我今天要寫一個蛋糕店的網站，那麼以下將是很普通的網站範例：

<html>
  <head>
    <title>Party Coffee Cake</title>
  </head>
  <body>
  <h2>Party coffee cake recipe</h2>
  <p>This coffee cake is awesome and perfect for parties.</p>
  </body>
</html>

加入JSON-LD
但是我希望能夠加入結構化資料，讓Google可以容易被搜尋到，因此我可以加入JSON-LD：

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">...</script>
  </head>
  <body>
  <h2>Party coffee cake recipe</h2>
  <p>
    This coffee cake is awesome and perfect for parties.
  </p>
  </body>
</html>

開始撰寫JSON-LD
Google的爬蟲是循著schema.org的爬蟲進行網站分析的，因此根據上面的結構，我們可以把網站的種類設置為Recipe，蛋糕店提供自家的食譜秘方分享給大家。結構也包含名字與敘述。

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "description": "This coffee cake is awesome and perfect for parties.",
    }
    </script>
  </head>
  <body>
  <h2>Party coffee cake recipe</h2>
  <p>
    This coffee cake is awesome and perfect for parties.
  </p>
  </body>
</html>

加入巢狀JSON-LD
運用剛剛提到的巢狀結構，進一步補充說明，這個食譜的作者是誰。

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
  <h2>Party coffee cake recipe</h2>
  <p>
    This coffee cake is awesome and perfect for parties.
  </p>
  </body>
</html>

將你的網站部署到網路後，就去瞧瞧你在關鍵字搜尋後的結果如何吧！
看到這裡有沒有覺得很簡單呢？

進階運用JSON-LD

如果你夠細心的去研究schema和Search engine的文件，你會發現有更多進階運用讓你去優化網站的搜尋結果。
我們拿Google網站上的文件，所呈現的範例為例：

<html>
  <head>
    <title>Apple Pie by Grandma</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Apple Pie by Grandma",
      "author": "Elaine Smith",
      "image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
      "description": "A classic apple pie.",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "reviewCount": "7462",
        "bestRating": "5",
        "worstRating": "1"
      },
      "prepTime": "PT30M",
      "totalTime": "PT1H30M",
      "recipeYield": "8",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "512 calories"
      },
      "recipeIngredient": [
        "1 box refrigerated pie crusts, softened as directed on box",
        "6 cups thinly sliced, peeled apples (6 medium)"
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

這個結構更加善用了Google文件中所提到的曝光度，因為人基本上還是對圖形特別敏感，儘管你的搜尋排名並非前三名這麼前面，但是如果你的搜尋結構可以很清楚的表示你網站的內容和特色，甚至觸及率是可以比前幾名的還要高很多的！這是有經過Google工程師介紹證實的。
上面這樣的結構，將會在搜尋結果中呈現如下：