給部落格來點 SEO

在使用 Google Search Console 時，發現 Google 無法找出文章的結構化資料，原來是所使用的 Pelican-bootstrap3 主題樣板沒有設定正確的標記，為了讓部落格文章可以被搜尋引擎正確地分析，看來需要修改樣板主題來處理這個問題。

目錄#

什麼是「結構化資料標記」?#

在一般情況，網頁內容對搜尋引擎來說，只是半結構化的文字片段，並無法進一步分辨網頁包含事件、人物、產品等不同的資料。 為了讓搜尋引擎這類軟體爬蟲可以更好地處理網頁內容，結構化資料(structured data)便是為了這個目的而生。結構化資料標記可以多種格式加入網頁中， 主要有：

• Microdata
• RDFa
• JSON-LD

在本文，山姆鍋將用到 Microdata 以及 JSON-LD 兩種格式。

文章頁面增加結構化標記#

部落格主要的內容就是文章，顯示文章內容的頁面自然是重頭戲。從相關資料可以得知，部落格文章最適合的資料型態(schema)爲 BlogPosting , 而這種資料型態幾個重要的資料元素有：

• 標題 (headline): 使用 ‘headline’ 屬性值標註。
• 發表日期 (published date): 使用 ‘datePublished’ 屬性值標註。
• 特色圖檔 (featured image): 使用 ‘image’ 屬性值標註。
• 內文本體 (article body): 使用 articleBody 屬性值標註。
• 作者 (author): 使用 Person 資料型態標註。

針對文章，山姆鍋採用 Microdata 格式來標記，該格式使用 itemscope, itemtype, 以及 itemprop 元素屬性來標記結構化資料。

底下是 HTML 片段來自樣板(templates/index.html)。

標記文章元素#

<article itemscope itemtype="http://schema.org/Article"># 1 . . .</article>

在標號 1 使用 itemscope 以及 itemtype 來標記 <article> HTML 元素(element)是一篇文章。

標記文章標題#

<header class="page-header">
  <h1>
    <a
      href="{{ SITEURL }}/{{ article.url }}"
      rel="bookmark"
      title="Permalink to {{ article.title|striptags }}"
    >
      <span itemprop="headline">{{ article.title }}</span> # 2
    </a>
  </h1>
</header>

標號 2 使用 itempro="headline" 定義文章的標題(headline)。

標記特色圖檔#

使用 itemprop="image" 來標記特色圖檔。

<div class="featured-image">
  <img
    itemprop="image"
    class="article-image img-responsive"
    alt="{{article.title}}"
    src="/media/{{article.image}}"
  />
</div>

標記文章本體#

使用 itemprop="articleBody" 來標記文章內文本體(article body)。

<div itemprop="articleBody">{{ article.content }}</div>

標記發布日期#

Pelican-bootstrap 3 樣板主題，文章的日期是由 ‘templates/includes/article_info.html’ 所呈現。下列是其中文章發表日期標記範例：

<span class="published">
  <i class="fa fa-calendar"></i
  ><time itemprop="datePublished" datetime="{{ article.date.isoformat() }}">
    {{ article.locale_date }}</time
  >
</span>

可以看到 itemprop="datePublished" 標記發表日期元素，並配合 ‘datetime’ 來提供搜尋引擎可理解的日期。\<time\>\ 元素包含的日期格式，可能只適合人類觀看並經過地區化(localization)，所以，才需要另外提供一個公搜尋引擎使用的日期格式。

標記作者資訊#

作者資訊本身是以另一個資料型態 Person 來標記個別資料，其中重要的資料屬性有：

• 名稱: 顯示用的名稱。
• 頭像 (image): 作者頭像。
• 主要網址 (url): 用來唯一標示這位作者的網址，如個人網站介紹頁面。
• 社群網址: Facebook, Twitter 等社群網站個人專屬的網址。

底下 HTML 片段是來自 ‘templates/includes/custom/authroinfo.html’ 這個樣板檔案：

<div
  class="vcard author author_info"
  itemprop="author"
  itemscope
  itemtype="http://schema.org/Person"
>
  <div class="author_photo pull-left">
    <img
      itemprop="image"
      alt="Sam Kuo (山姆鍋)"
      src="/images/logo.png"
      class="avatar avatar-80 photo img-rounded"
    />
  </div>
  <div class="author-description">
    <h4>
      <a
        class="fn url"
        target="_blank"
        itemprop="url"
        href="{{ SITEURL }}/about/"
        title="由 Sam Kuo (山姆鍋) 發表"
        rel="author"
        ><span itemprop="name">Sam Kuo (山姆鍋)</span></a
      ><br /><small>-- 關注自由軟體發展，探索資訊科技應用 --</small>
    </h4>

    <a
      itemprop="sameAs"
      href="https://github.com/sampot"
      target="_blank"
      class="btn btn-default btn-xs"
      role="button"
      ><span class="fa fa-github-square"></span> GitHub</a
    >
    <a
      itemprop="sameAs"
      href="https://twitter.com/sampotkuo"
      target="_blank"
      class="btn btn-default btn-xs"
      role="button"
      ><span class="fa fa-twitter-square"></span> Twitter</a
    >
    <a
      itemprop="sameAs"
      href="https://tw.linkedin.com/in/sampot"
      target="_blank"
      class="btn btn-default btn-xs"
      role="button"
      ><span class="fa fa-linkedin-square"></span> LinkedIn</a
    >
  </div>
</div>

其中， itemprop="author" 標記這個 <div> 元素包含文章作者的資訊; itemscope itemtype="http://schema.org/Person" 則同時標記它使用 Person 這個資料型態。 針對 Person 資料型態，個別的屬性標記分別為：

• itemprop="image" : 標記作者頭像。
• `itemprop=“name” : 標記作者名稱。
• `itemprop=“url” : 標記作者主要個人資料網址。
• itemprop="sameAs": 標記作者其他個人資料網址。

首頁增加網站結構化標記#

首頁是放置關於整個網站的結構化資料最適當的網頁，針對網站資料，山姆鍋選擇使用 JSON-LD 格式來標記。 按照 Google 的文件 ⎘ 設定了下面片段在首頁的樣板(index.html)中

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://samkuo.me/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "http://samkuo.me/search.html?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
</script>

第 5 行，需要提供網站的正式網址(canonical URL)，必須與首頁 HTML 標頭中的中繼資料 \<link rel="canonical' href="https://samkuo.me/" /> 設定相同。 第 8 跟第 9 行，目的在設定所謂 Sitelinks Search box ，讓用戶可以直接在搜尋結果進行站內搜尋。此部落格使用 Tipue search 作為 站內搜尋引擎，不知道是否可行，不管怎樣，都是同樣設定。 {search\_term\_string} 是個置換符，代表搜尋的字詞; 與第 9 行的 search_term_string 必須相符。

使用工具檢查#

為了確認設定正確，山姆鍋利用 Google 提供的 結構化資料測試工具 ⎘ , 從下面截圖可以看到結果正確。

結語#

山姆鍋不知道寫沒有人看的文章有何樂趣，所以讓潛在讀者更容易發現部落格文章，應該是值得做的投資。山姆鍋不是 搜尋引擎最佳化( SEO(Search Engine Optimization){.interpreted-text role=“abbr”})的專家，本文只是針對「我是山姆鍋」這個部落格所做的嘗試。

參考資料#

_`Microdata`: http://schema.org/docs/gs.html#microdata_how ⎘

_`RDFa`: http://www.w3.org/TR/rdfa-lite/ ⎘

_`JSON-LD`: http://www.w3.org/TR/json-ld/ ⎘

_`Sitelinks Search box`: https://developers.google.com/structured-data/slsb-overview ⎘

_`BlogPosting`: http://schema.org/BlogPosting ⎘