深入現代前端開發

# 前端與 SEO

要做 SEO 有很多眉角，今天來介紹一些常見的方式與可以注意的地方。

在 head 當中，我們可以定義許多標籤讓搜尋引擎方便拿到資料，例如：

  • <title></title> 可以定義網頁的標題，會顯示在搜尋結果的標題
  • <meta></meta>：在 meta 可以放置許多跟網站有關的資訊，例如 keyword, description 等，但似乎對 SEO 的權重越來越小了。
  • Open Graph (opens new window)：像是在實作 facebook, twitter 等分享連結網站時顯示的文字與圖片等。常見的有 og:title, og:type, og:image 等等。

# Semantic Tag

HTML 標籤雖然看起來只是個標籤，技術上來說也可以從頭用 <div> 做到尾，但對瀏覽器、閱讀器、以及 Voice Reader 來說，如果能用符合語意的標籤的話，除了提升可讀性之外，對搜尋引擎及閱讀器來說也更容易解析與理解。

例如在 HTML 就有 <section>、<header>、<nav>、<a>、<button>、<summary> 、<table> 、<article> 等等豐富的標籤可供使用，可以讓整個組織看起來更一目瞭然。當然，對於前端開發來說似乎太理想，總是會有「這個元件該用哪個 tag 表達才好？」、「要用 h2 還是 h4？」等等的問題。也不需要過往矯正，看到 div 或 span 就好像十惡不赦一樣。

# itemscope

這是在 HTML5 之後引入的新標準，目的是為了讓搜尋引擎更容易解析內容。在 html 當中，你可以用 itemscope 以及 itemprop 來定義一些屬性，目前 Google、Yahoo! 等搜尋引擎都有支援。

例如在搜尋書籍的時候，有時會看到搜尋結果有星星評價，雖然不一定是透過 itemscope 產生，但如果有定義的話可以幫助搜尋引擎更快解析資料也說不定。

在 schema.org (opens new window) 有定義各種 type 與可以設定的欄位，方便各大廠商跟著標準實作。

<p>
This example shows the addition of Accessibility metadata. Although these properties are not
a formal enumeration, there is evolving consensus amongst accessibility experts for
appropriate values for these properties. This example shows simple text values,
as suggested by www.a11ymetadata.org.
</p>
<div itemscope="" itemtype="http://schema.org/Book">
   <meta itemprop="bookFormat" content="EBook/DAISY3"/>
   <meta itemprop="accessibilityFeature" content="largePrint/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="highContrast/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="resizeText/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="displayTransformability"/>
   <meta itemprop="accessibilityFeature" content="longDescription"/>
   <meta itemprop="accessibilityFeature" content="alternativeText"/>
   <meta itemprop="accessibilityControl" content="fullKeyboardControl"/>
   <meta itemprop="accessibilityControl" content="fullMouseControl"/>
   <meta itemprop="accessibilityHazard" content="noFlashingHazard"/>
   <meta itemprop="accessibilityHazard" content="noMotionSimulationHazard"/>
   <meta itemprop="accessibilityHazard" content="noSoundHazard"/>
   <meta itemprop="accessibilityAPI" content="ARIA"/>
   <dl>
      <dt>Name:</dt>
      <dd itemprop="name">Holt Physical Science</dd>
      <dt>Brief Synopsis:</dt>
      <dd itemprop="description">NIMAC-sourced textbook</dd>
      <dt>Long Synopsis:</dt>
      <dd>N/A</dd>
      <dt>Book Quality:</dt>
      <dd>Publisher Quality</dd>
      <dt>Book Size:</dt>
      <dd><span itemprop="numberOfPages">598</span> Pages</dd>
      <dt>ISBN-13:</dt>
      <dd itemprop="isbn">9780030426599</dd>
      <dt>Publisher:</dt>
      <dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>
      <dt>Date of Addition:</dt>
      <dd>06/08/10</dd>
      <dt>Copyright Date:</dt>
      <dd itemprop="copyrightYear">2007</dd>
      <dt>Copyrighted By:</dt>
      <dd itemprop="copyrightHolder" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>
      <dt>Adult content:</dt>
      <dd><meta itemprop="isFamilyFriendly" content="true"/>No</dd>
      <dt>Language:</dt>
      <dd><meta itemprop="inLanguage" content="en-US"/>English US</dd>
      <dt>Essential Images:</dt>
      <dd>861</dd>
      <dt>Described Images:</dt>
      <dd>910</dd>
      <dt>Categories:</dt>
      <dd><span itemprop="genre">Educational Materials</span></dd>
      <dt>Grade Levels:</dt>
      <dd>Sixth grade, Seventh grade, Eighth grade</dd>
      <dt>Submitted By:</dt>
      <dd>Bookshare Staff</dd>
      <dt>NIMAC:</dt>
      <dd>This book is currently only available to public K-12 schools and organizations in the
      United States for use with students with an IEP, because it was created from files
      supplied by the NIMAC under these restrictions. Learn more in the NIMAC Support Center.</dd>
   </dl>
   <div class="bookReviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <h2>Reviews of Holt Physical Science (<span itemprop="reviewCount">0</span> reviews)</h2>
      <div class="bookReviewScore">
         <span><span itemprop="ratingValue">0</span> - No Rating Yet</span>
      </div>
   </div>
</div>

當然不只有 Book，也有像是 Moive、Article、Message 等各式各樣的 type 可供使用，其實蠻適合當成 Database schema 參考的。

# AMP (opens new window)

AMP 是由 Twitter 與 Google 共同開發的專案，目的是為了讓 mobile 能夠更快載入網頁。

透過文件中規範的語法與標籤，你可以定義自己的 AMP 頁面，這樣在 Google 搜尋時就可以幾乎秒載入網頁。雖然限制重重，但很適合文章、內容呈現的網站使用。

# SSR

由於 SPA 必須要等到 JavaScript 載入後，如果直接用像是 curl 或是爬蟲的方式抓取網頁，只會得到一坨空空的 index.html，雖然搜尋引擎也會先解析 JavaScript，不過 SSR 還是最有效果的方式，而且也能大幅減少初始載入的時間。

不過要做到 SSR 的成本相當高，不僅前端的程式碼要寫的夠謹慎之外，後端部分也要做不少處理，尤其是如果搭配 redux 的話要整合起來更加麻煩。目前在 React.js 與 Vue.js 都有對應的 Framework 可以幫助你做到這件事。（Next.js 與 Nuxt.js）

# Search Console (opens new window)

你可以用 search console 來查看跟提交搜尋請求，讓 Google 為你的網頁建立索引，也可以在上面看到使用者怎麼進入你的網頁還有關鍵字。

# 小結

前端能夠做到的 SEO 相當多，而這些小眉角累積起來就能有不小的助益。不過最重要的一點還是專注於網頁的內容，並且盡力創造優質的內容，而不是想辦法「騙」搜尋引擎來拿流量。

← 後端與前端 →