Shopify SEO 推薦 APP：Yoast SEO 實戰教學

Shopify 電商網站的 SEO 優化終於有解了！就在 Yoast SEO 推出 Shopify App 版本後，解決了 Shopify 本身原本極度受限的 SEO 設定功能，這篇將完整介紹其後台功能簡介與學習資源（更新時間：2023.02.03）

我們使用 Shopify 建立電商網站時發現 SEO 能設定的功能相當有限，即使有 Shopify 本身有提供 Blog 網誌可以使用，但相當陽春。例如社群分享預覽圖（Social sharing image）在 Shopify 後台不能自訂圖片，造成了分享網站頁面時，尤其是辛苦做好的銷售頁、登陸頁（Landing page）一分享到社群媒體，結果預覽圖不符合內文或預期造成與標題不符合、美感壞掉等，還有其他問題未來再慢慢列舉，因此原本就完全不推薦將 Shopify 當作「經營 SEO 的主要架站平台」，而經營 SEO 基本上長期來講還是推薦以部落格之王 WordPress 為主。

還有一般常碰到的問題，就是即使我們了解規劃關鍵字策略、內容佈局等，結果在網站的設定執行時就卡住了，導致網站的技術 SEO（Technical SEO）無法落實，那再好的內容也無法發揮。但，就在令人灰心之際，希望降臨！在 WordPress 領域中的老牌外掛 Yoast SEO 竟然推出了 Shopify 版本（看來它也嗅到商機）。兩年多以來我將整個 Shopify App Store 翻來覆去就是沒找到心中理想的可用好用、多功能且值得付費的 SEO 相關的 App，直到 Yoast SEO for Shpoify SEO 在 2021 年年底左右上架，這時出現了曙光！

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論與分享：SEO 資源彙整 / 學習

開始免費試用 Shopify，可享精選方案優惠，每月只要 $1，為期 3 個月，手刀前往立即註冊
這是 Shopify 官方目前正在跑的優惠活動，不知何時會結束，註冊後先將後台摸一圈，有問題就訊息我囉！

功能與設定方式其實跟它的 WordPress 外掛版本差不多，接下來介紹這款令人興奮的 Shopify App 的特色：

Yoast SEO – SEO for everyone

Shopify App：https://apps.shopify.com/yoast-seo

有提供免費版（但 Yoast 官方宣佈今年 2022 年 12 月 20 日停止免費方案），搭配官方提供的免費學習資源，邊做邊學好上手；付費版 USD$19/月，14天免費試用，解鎖所有功能使用外，Yoast 官方網站上的所有付費 SEO 課程都能進去好好學習一番。

講一個其中我最在意的：社群預覽圖設定。這我視之為在建立網站時基本中的基本必備的功能，其提供了 Google 的搜尋結果的內容呈現和 Facebook 標題、描述等欄位讓使用者可以自訂。Shopify 本身是連這些都無法做到的。除此之外，Yoast SEO 還有不少好用的功能，例如可以在 SEO title 和 Meta description 插入變數（Insert variable），尤其在網站有大量頁面時使用以達到省時省力；Schema 則是會根據頁面類型自動套用，其中 Pages 和 Blog posts 則可以手動設定 Page type 結構化內容，還有很多可陸續挖掘！

我錄製了一個影片快速簡介 Yoast SEO for Shopify 的後台功能簡介，搭配本篇文章閱讀（沒有字幕，需要開聲音）

官方也有一篇文章介紹此 App 能做到什麼程度，講解相當詳細，值得好好閱讀 Guide for Yoast SEO for Shopify，裡面有影片導覽 How to use Yoast SEO for Shopify；也有提供免費線上 SEO 課程，註冊帳號登入之後可以觀看 Yoast SEO for Shopify course，從中可以了解 SEO 概念與 App 基本操作。更棒的是，只要是購買此 Shopify App 的付費方案，可以解鎖並觀看所有 SEO 課程，深入了解如何實作 SEO。

以上若還無法打定主意，官方還說可以寄信給他們，他們會帶你過一遍所有功能！Not convinced? Book a call by emailing support@yoast.com, and we would love to walk you through our app!

當然，另一個選擇是也可以問講中文的我啦 ^^ 有任何 Shopify SEO 或 Shopify 網站設計相關的問題需要諮詢，歡迎從以下挑一個你比較方便的管道聯繫我

• 寄信給我：irving@irvinglab.com（將需求描述詳細，先用信箱溝通也不錯）
• 填寫表單：前往填寫（若有表單資料可以讓我預先了解你的潛在需求）
• 線上交談：Crisp 或 Channel.io（我目前主要在使用的線上交談工具，擇一即可）
• Line@ 官方賬號：@irvinglab（若你比較方便用 Line 的話可以加入好友）
• FB messenger：@irvinglab（使用臉書傳訊也行，我也會不定期分享文章在粉絲頁面）

平日我會閱讀精選的國內外 SEO 相關學習資源與工具，隨時補充最新資訊與概念、深度的關鍵字策略規劃與好用的 SEO 線上工具，有淺顯也有深度的內容，適合各階段剛入門或資深人員服用，有興趣的話可前往瀏覽：SEO 學習資源。Google 官方本身推出的說明文件 – Google 搜尋中心其實講得超級無敵清楚，能的話至少要讀過一遍，但可能因為讀起來太硬，先當字典查詢使用也是一個起步

為何我會推薦 Yoast SEO？

除了因為十幾二十年來，Yoast SEO 身為 WordPress 的老牌外掛，其擁有資深的經驗加上長期的經營與更新，穩定度是滿值得信賴。更棒的是其提供資源豐沛不已的 SEO 學習資源：All-around SEO training，包含概念講解到實作。真心覺得他們寫的文章條理清楚、由淺入深、白話好讀，我看了幾篇真心被說服。還有一點就是安裝完 App 之後的後台也有線上客服可以詢問，這也是滿在意的點。

結論概之，Yoast SEO for Shopify 完全解決了 Shopify 平台在 SEO 功能的弱項，光光這點就真的不可思議，付費方案後還有完整的 SEO 線上學習課程，買一送二的概念？！

太棒了！往後打造 Shopify 品牌電商網站的最佳組合可以是：客製化頁面設計 PageFly Pager Builder + SEO 搜尋引擎優化 Yoast SEO，有關打造客製化網站設計可以參考如何客製化 Shopify 網頁設計排版

注意事項

此 App 會修改你的 Theme，在今年 2022 年上半年有不少使用者在評論區抱怨其讓網站出問題且變慢，而近期七、八月的評論開始是好的，因為該公司有修改了很多 bug，可以參考其官方文件：Yoast SEO for Shopify changelog – https://yoast.com/shopify/apps/yoast-seo/changelog/

我剛開始測試而已，是有成功，但沒測試過所有 Shopify Theme 是不是安裝後都沒問題，所以大家在測試此 App 時最好還是先將原本的版型備份或在測試站先測試比較保險。

安裝任何 Shopify App 我都會順便確認一下「如何正確適當地移除」，而移除此 App 的官方文件說明在這：How to uninstall Yoast SEO for Shopify – https://yoast.com/help/remove-yoast-code-from-theme-in-shopify/

可以先從常用的 Facebook preview 開始，設定完後用 Facebook debugger（分享偵錯工具）就可以立即看到成果，檢查工具網址：https://developers.facebook.com/tools/debug/

接下來直接登入 Shopify，進入 Shopify App Store，搜尋 Yoast SEO 進行安裝 Shopify App：Yoast SEO ‑ SEO for everyone，將後台瀏覽一遍，閱讀其中的說明文字與額外資訊以了解其能耐與限制。

Yoast SEO 後台介面導覽

說明：後台分兩大部分，一個是 Settings，一個是 Optimize。初始安裝，先到 Settings 將所有欄位設定一遍為初始預設值，而 Optimize 則是列出這個網站所有可以編輯 SEO 的頁面，依頁面類型排序。以下圖文搭配讓你在安裝前快速了解。

Settings 設定

About

• Importnat information
  • 說明：Yoast SEO 會覆蓋 Shopify 原本的頁面設定，若想以 Shopify 為主，則 Yoast SEO 內的欄位就空白即可
• Changelog
  • Check out what’s new!
  • 說明：查看 App 更新進度。可以發現該公司針對此 App 這一年來不斷修正了很多問題，相當好！

Site representation

說明：Google Search Console Help 說明文件提到，只要為網頁加入結構化資料，即可啟用 Google 搜尋結果的特殊功能，前往複合式搜尋結果測試。這些欄位設定希望能增加知識圖譜（Knowledge graph）的機率，可參考 What is Google’s Knowledge Graph

Schema output

說明：將 Schema.org 結構化資料類型自動設定在網站中，建議都開啟

Site defaults

• Site title、Separators – 說明：You can use Site title and Separator as variables when configuring the search appearance of your content.
• Site image – 說明：This image is used as a fallback for posts/pages that don’t have a featured image set.

Webmaster tools

說明：設定各個瀏覽器的網站管理員工具，欄位下方分別都附上該官方說明文件了解如何找到驗證碼

• Baidu verification code：Get your verification code in Baidu Webmaster tools
• Bing verification code：Get your verification code in Bing Webmaster tools
• Google verification code：Get your verification code in Google Search Console
• Pinterest meta tag：Claim your site at Pinterest
• Yandex verification code：Get your verification code in Yandex Webmaster tools

Content settings

說明：這裡可以根據以下網站頁面類型分別設定 SEO 標題、 Description 描述與 Schema 的「預設狀態」，可以設定的頁面類型包含 Homepage、Products、Product tags、Collections、Blog posts、Blog post tags、Blogs、Pages 等。

Advanced settings

說明：同上，設定 SEO 頁面的預設狀態，包含 Search pages、404 pages

Theme modifications

說明：Remove or reapply our modifications to your theme.

• Reapply theme modifications 再次執行一些更改到版型中
• Uninstall theme modifications 解除版型中更改的部分

Uninstall

說明：移除此 App 的步驟，請仔細閱讀以下內容

• How to uninstall Yoast SEO
  • Yoast SEO has made theme modifications to your site. To fully delete Yoast SEO you must go through these steps. Read more about how to uninstall Yoast SEO.
  • Step 1 – Deactivate Yoast SEO：This will remove our changes to your theme and prepare Yoast SEO for deleting.
  • Step 2 – Delete Yoast SEO：Please first complete step 1 by pressing the ‘Deactivate Yoast SEO’ button. Then it is safe to delete the Yoast SEO app in Shopify.

Optimize 設定

說明：列出整個網站依類型分類所有頁面，可以逐一進入頁面分別設定 SEO 內容細項。Yoast SEO 會自動將網站目前無論有沒有啟動的頁面都會撈進來，包含 Products、Collections、Pages、Blogs、Blog posts 等。

以上導覽完之後有了初步的概念，大致了解基本可執行的 Shopify SEO 設定，接下來最重要步驟，就是根據商業目標，規劃與撰寫符合品牌產品的 SEO 內容。

如何開啟頁面的 Yoast SEO 設定？

• 先去該頁面編輯區 > 右上角：More actions > Optimize in Yoast SEO
• 直接去 Shopify App 進入 Yoast SEO > 選取頁面類型 > 找到頁面標題

如何使用 Yoast SEO 優化 Shopify 網站內容？（持續更新中）

說明：針對 Shopify 的頁面中，在 Yoast SEO 可以設定的項目如下，每項都有其用意，內容相當繁多，這一個月內我會持續撰寫與講解，除了文字外也考慮中文錄製影片說明。若等不及的話可以先看官方推出的簡介影片，前往 YouTube 觀看：How to use Yoast SEO for Shopify

• Focus keyphrase
  • 了解更多：How to choose the right focus keyword
• Readability analysis 易讀性分析
  • 了解更多：How to use the readability analysis in Yoast SEO
• SEO analysis SEO 分析
  • Keyphrase synonyms
    • 了解更多：Synonyms
  • Additional relates keyphrase
• Google preview：在 Yoast SEO 中直接設定會覆蓋 Shopify 原先的內容
  • SEO title
  • Slug
  • Meta description
• Facebook preview
  • Facebook image
  • Facebook title
  • Facebook description
• Twitter preview
  • Twitter image
  • Twitter title
  • Twitter description
• Schema
  • Page type
    • 說明：Yoast 官方說預設項目是最佳選擇，除非你很清楚頁面內容符合 Google 規範，例如 FAQ Page 僅適用於網頁所含 FAQ 為一問一答形式的情況。如果網頁上有讓使用者針對單一問題新增其他答案的設計，請改用 QAPage，參考 Google 官方文件說明：使用結構化資料標記常見問題
    • 可選的頁面類型
      • Web Page
      • Item Page
      • About Page
      • FAQ Page
      • QA Page
      • Profile Page
      • Contact Page
      • Medical Web Page
      • Collection Page
      • Checkout Page
      • Real Estate Listing
      • Search Results Page
  • Schema 是什麼？
    • Yoast SEO automatically describes your pages to search engines, using Schema.org structure data, that increases the chances you’ll get rich results like these.
    • Feature the product in Google shopping or display the page as rich results. 參考課程說明：Structured data for beginners
  • Shopify 的 Pages 和 Blog posts 則可以手動設定 Page type 結構化內容
• Advanced
  • Allow search engines to show this Page in search results? Yes or No
  • Should search engines follow links on this Page? Yes or No
  • Meta robots advanced
    • No image index
      • Prevent search engines from crawling and indexing images that you have on the page.
    • No archive
      • Prevents the search engines from showing a cached copy of the page.
    • No snippet
      • Prevents the search engines from showing a snippet of this page in the search results and prevents theme from cashing the page.
  • Canonical URL
    • Help you prevent duplicates.
• Cornerstone content
  • Cornerstone pages are your most important pages.
  • Cornerstone products can be…
    • products that are iconic for your brand
    • products that don’t run out of stock

參考資料

• Guide for Yoast SEO for Shopify
• Shopify SEO: the ultimate guide
• List of available snippet variables in Yoast SEO

題外話：針對 Yoast SEO 的 WordPress 外掛，可以貢獻社群幫忙翻譯成繁體中文，前往了解

經營部落格 SEO 時，要使用 WordPress 還是 Shopify Blog 比較好？

我最佳的組合還是 WordPress for 部落格內容經營 SEO，而 Shopify for 電商

單以執行技術 SEO 的功能來講，WordPress 還是遠遠大於 Shopify，使其無法望其項背

用比喻來講，我們要從台北到達高雄，我會選擇坐高鐵而非騎腳踏車。WordPress Blog 就像坐高鐵輕鬆，Shopify Blog 就像騎腳踏車般費力。所謂輕鬆費力都是「相對而言」，執行起來還是得花相當的時間進行規劃、分析與調整。

儘管 WordPress 維護小麻煩，但若「只是單純」經營部落格文章的話就還好。Shopify 還是有很多需要進步的地方，也的確持續在進步，只是部落格方面還是相對陽春。隨意舉個例：Shopify 的網址架構真的令人無言，所有的 pages 都必須掛在 /pages/ 底下，所有的文章頁必須掛在 /blogs/網誌名稱/ 底下，讓網址路徑顯得複雜多餘。總之 Shopify 在執行 SEO 時可以挑出很多毛病，且自主設定的彈性又極低甚至無。

很多客戶會因人力、經費或時間有限來評估是否「額外使用甚至學習 WordPress 基本操作」，所以端看對方現階段的規劃、人力、需求而定。或許現在沒法執行，未來再規劃進來也可。

先求有，再求好

但若真的因一些因素限制，就至少還是先求有，再求好，亦即先用 Shpoify Blog，未來資源充沛時再改用 WordPress Blog，只是到時候轉用時，記得要設定 301 轉址、Canonical 標準網址等，將 Ranking 也轉移過去。只是當文章數量太多時，那設定起來就真的費力了。

我之前就是將 Medium blog 陸續轉移到自己的 WordPress 網站，還好 Medium 本身可以設定 Canonical

小結

所以結論可以是，只要能符合當下的需求，找出最佳的組合方式，然後網站是動態調整與更新的狀態，不是做完就沒事了，未來規劃就分階段執行、持續優化。

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！