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

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

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

  • Usual Tags
    • Title:每一頁都要有單獨的標題,基本上標題對了,就成功了80%(笑)。
    • Description:每一頁都要有單獨的描述,但搜尋引擎已經不看這個項目了,純粹是在SERPs上提供頁面資訊給使用者。注意,搜尋引擎仍有可能會使用剖析頁面後的重點取代我們原先設定的Description,所以別將不相關的內容放在頁面上。
    • Img Title, Alt:每張圖片都要有描述此圖片的Title與Alt,這和圖片搜尋有關。至於影片等多媒體也可以使用字幕等方便搜尋引擎剖析。
    • Link:錨點文字、nofollow(連外連結需要nofollow屬性),EX:<a href="#" rel="nofollow">描述此連結的錨點文字</a>
    • H1 ~ H6:標題,我會做到H3。
      • H1:主標題,EX:<h1 class="logo"><a href="/hellokitty40">hellokitty40</a></h1>
      • H2:次要標題,EX:<h2 class="title">關於40週年</h2>
  • Authorship Tag:這和Goole搜尋時是否能帶出更多資訊有關,有時我們會在右側看到與搜尋字串相關的G+頁面(如下圖)。範例: <link href="https://plus.google.com/118430811385796992371" rel="publisher">

    Authorship Tag

  • HTML5 Tags
    • <header>:通常放置網站的Logo、大標題或是主要資訊。
    • <nav>:網站的選單連結。
    • <aside>:主要內容之外的其他內容,可以為網站的側邊欄。
    • <article>:為頁面中的一個區塊,是獨立的內容,在一個文件中可以有很多個。
    • <section>:用於章節等段落的區分,在一個文件中可以有很多個。
    • <footer>:位於HTML5文件頁面底部,大多用於顯示著作權、作者或相關資訊等。
    • <figure>:多媒體檔案。
  • 結構化資料(Structured Data):可用Microdata或JSON-LD。範例可參考 粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例。對於選擇Microdata或JSON-LD,我不想用JSON-LD的原因是重覆內容增加網頁size,但Microdata和HTML綁在一起,修改不易。
  • Social Tags:FB、G+等,可參考從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags

範例

我們來看個範例吧,關於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>

測試

其他

  • RSS/Sitemap的使用,就我的觀點和經驗來說,搜尋引擎偏好有較多人訂閱的RSS,而RSS也能即時通知搜尋引擎網站有更新快點來爬。
  • 使用Google商品的分類 - Google有自己的商品分類,不要自己分類,使用Google分類排行會往前。
  • Meta Keyword不要再用,Bing還會拿來扣分。
  • 好的UI設計會有好的流量,流程順、體驗好,使用者自然愛用。

SEO絕對是跨部門的事

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

  • 該網站的流量來源真的是我們想要的TA嗎?TA到底使用什麼關鍵字?關鍵字分析除了競業分析外,使用工具(例如webmaster tool觀看點閱率)也是一種方法。小黑提到阿物有自己做這樣的工具噢!食夢黑貘也弄一個追查標籤的工具來做觀看 - 今日 新聞媒體 標籤雲 - 新文易數,功能不同但意思很相近,同樣是看熱門關鍵字或標籤。(提到標籤的經營又是另外一門學問了XD)
  • 選三個關鍵字來撰寫標題和描述,這和是否會成為Keyword Stuffing有關。
  • 標題使用「-」來層次區分,愈重要的關鍵字或分類放愈前面。例如小黑的範例:「iPhone5S 332G - 手機推薦精選 - ASAP閃電購物網」。同理,Description的撰寫也是將重點關鍵字往前放。
  • 文案要寫重點!例如:廠商名稱、商品名稱、品牌Slogan或使用者感興趣的關鍵字,而不要使用代名詞、趕流行但沒有意義的文字。

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

SEO Ranking Factor 2014

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


Modern Web 2015 相關資訊

相關閱讀

整理一下之前寫過的文章。
由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-Modern Web 2015:電子商務與活動平台的 SEO 到底要做哪些事?

留言