Modern Web 2015:電子商務與活動平台的 SEO 到底要做哪些事?

Modern Web 2015:電子商務與活動平台的 SEO 到底要做哪些事?

自從 SEO 成為顯學後,各大電子商務和活動網站都開始注意是否有做 SEO - 是否能讓搜尋引擎正確剖析內容、商品、活動或報導是否出現在 SERPs 上,進而注意是否能從搜尋中帶入正確的 TA 和流量。但 SEO 到底要做什麼?搜尋引擎對於一般人來說像是個黑盒子,網路上的文件所述影響搜尋引擎的因子又非常多,到底要從哪裡開始優化?很多人光想到這裡就非常頭痛。

小黑在這次短短 25 分鐘真的把 SEO 基本該做的事情都講得一清二楚(看投影片:電子商務的美麗與哀愁 - SEO 真的只要做這些事情就好),精采無冷場阿!以下除了小黑的演說內容外,也補充我的想法。

資訊架構(IA)決定網站權重分配

我們利用資訊架構分配網頁權重,將網站的內容(即重要頁面)有足夠的權重在SERPs上曝光。

在切版的時候決定搜尋引擎是否能夠讀懂

一個做到搜尋引擎優化的版到底該怎麼切?我們可以從排版(Layout)、標籤(Tag)來談起。

排版(Layout)

重要的部份要放在頁面前方,而板塊位置由 CSS 調整,如下圖(圖片來源:SEO Warrior)。

SEO-Friendly Site Layout

不過這部份我都很少做,因為如果這個頁面放了不該是重點的內容,那就該考慮刪掉或移往適合的地方了。其他原因是,切版要考慮到畫面設計,並不是想移哪個區塊就可以輕鬆移過去(當然這可以和設計師好好商量)。

標籤(Tag)

切版要使用適當 / 有意義的標籤。

Authorship Tag

範例

我們來看個範例吧,關於 Usual Tags、Authorship Tag、HTML5 Tags、結構化資料(Structured Data)和 Social Tags。

<!doctype html>
<html itemscope itemtype="http://schema.org/Article">
<head>
<meta charset="utf-8">
<title>標題</title>
<meta name="description" content="描述" />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="標題">
<meta itemprop="description" content="描述">
<meta itemprop="image" content="指定顯示圖片">

<!-- Open Graph data -->
<meta property="og:title" content="標題" />
<meta property="og:description" content="描述" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:site_name" content="網站名稱">
<meta property="og:type" content="article" />
<meta property="og:image" content="指定顯示圖片" />

<link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico">
<link href="https://plus.google.com/sampleid" rel="publisher">
</head>
<body>
<header itemscope itemtype="http://schema.org/WPHeader">
  <h1 class="logo" itemprop="name">
    <a href="#" itemprop="url">大標題</a>
  </h1>
</header>
<nav>
  <ul itemscope itemtype="http://schema.org/SiteNavigationElement">
    <li>
      <a href="#" itemprop="url" target="_blank">
        <span itemprop="name">導航列 項目1</span>
      </a>
    </li>
    <li>
      <a href="#" itemprop="url" target="_blank">
        <span itemprop="name">導航列 項目2</span>
      </a>
    </li>
    <li>
      <a href="#" itemprop="url" target="_blank">
        <span itemprop="name">導航列 項目3</span>
      </a>
    </li>
  </ul>
</nav>
<aside>
  <ul itemscope itemtype="http://schema.org/WPSideBar">
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">側邊欄 選項1</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">側邊欄 選項2</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">側邊欄 選項3</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">側邊欄 選項4</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">側邊欄 選項5</span></a></li>
  </ul>
</aside>
<section>
  <article itemscope itemtype="http://schema.org/article">
    <a href="http://www.friendo.com.tw/Mission/3124">
      <img itemprop="image" src="http://goo.gl/xUwnzG">
    </a>
    <div itemprop="name">
      <a itemprop="url" href="http://www.friendo.com.tw/Mission/3124">【粉多殺時間】最愛美劇大推薦</a>
    </div>
    <div itemprop="description" class="atcl-content">
      每當女友在旁邊看日劇、韓劇或古裝劇哭得一把眼淚一把鼻涕時,紅隊長都在心裡翻白眼(當然不能表現出來),還是私心偏愛美英劇,最近看完新福爾摩斯3生活變得好空虛啊~~~~
    </div>
  </article>
  <article itemscope itemtype="http://schema.org/article">
    <a href="http://www.friendo.com.tw/Mission/3150">
      <img itemprop="image" src="http://goo.gl/PClfRw">
    </a>
    <div itemprop="name">
      <a itemprop="url" href="http://www.friendo.com.tw/Mission/3124">【粉多兒童節】禮物送什麼?小孩最開心</a>
    </div>
    <div itemprop="description" class="atcl-content">
      隊長脫離兒童角色很久囉!已經收不到市長送的禮物了,試想!如果你是一位市長,送什麼禮物給小朋友是最大心的呢?
    </div>
  </article>
</section>
<footer>
  <ul itemscope itemtype="http://schema.org/WPFooter">
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">關於本站</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">合作提案</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">服務條款</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">聯絡客服</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">Q&amp;A</span></a></li>
    <li><a href="#" itemprop="url" target="_blank"><span itemprop="name">RSS</span></a></li>
  </ul>
</footer>
</body>
</html>

測試

其他

SEO 絕對是跨部門的事

切版(工程師)之外,另外一件重要的事情就是文案怎麼寫(行銷企劃)。

我們也可以回顧一下 2014 年的 Ranking Factor 重點 - User Signals、Social Signal和Semantic Web。

SEO Ranking Factor 2014

Modern Web 2015 相關資訊

歡迎大家討論,無論是有錯糾正或新知分享等。


這篇文章的原始位置在這裡-Modern Web 2015:電子商務與活動平台的 SEO 到底要做哪些事?

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus