拆解世界第一品牌網站 SEO 秘辛

以上是阿甫平常在 awoo 阿物國際的工作環境喔!!

大家都知道，當想要搜尋某些東西時，都會使用搜尋引擎，這讓阿甫不禁想要改編「牧羊少年奇幻之旅」裡面的一句話：「當你需要的時候，整個宇宙搜尋引擎都會來幫你」。

註：「牧羊少年奇幻之旅」闡述的是一個牧羊少年追求夢想的故事。

很重要的議題是：「我們的產品和服務，在搜尋引擎取得好的排名優先提供有需求的使用者呢?」

因為我本身大多時間都花在原始馬上，理論的東西這邊就不多提了，畢竟在SEO內容分享的部份，前面講者已經講很多了，待會直接開原始碼來和大家分享案例囉。

SEO的根本：必須要提供「人」所需要的內容，並符合搜尋引擎規範。

 「這是一本寶典，前面已經有非常多講者提到這份指南，這是學習SEO必看的。」

SEO也是會有例外狀況的～
以下舉個例來說明：打開Google搜尋引擎，鍵入：蘋果

進入www.apple.com後，其實「蘋果」並不是Apple公司的品牌名，我們看一下它的網頁原始碼，發現網站內也完全沒有出現「蘋果」這個關鍵字，但在搜尋引擎打上蘋果，這網站卻名列第一，由此可證：如果你的品牌夠大，其實是可以不用管SEO的，這就是我們說的例外狀況。
但有多少企業能做到這種規模呢?(最後會舉一個網站搜尋他們的產品和服務卻沒有排名的案例)


另一個趨勢：行動裝置的成長率不斷的攀升

既然有越來越多的人使用行動裝置上網
那麼：如果你的公司還沒有行動版網站，是否要趕緊做一個呢？

答案是：不要！！！
如果還沒有做行動網站的人，就不要再重新做一個行動版網站了，為什麼呢？

Google推薦了一個做法：叫做「響應式網頁設計」。

響應式網頁呢，意思就是透過不同裝置，使用相同的URL，透過這樣的方法，來讓兩個裝置呈現相同內容，如此一來就不會有不同URL卻提供重複頁面內容的問題產生囉。SEO力量最為集中

小小的提示！響應式網頁設計並不侷限在提供不同的排版方式給不同裝置的使用者閱讀
例如可以做到為電腦版使用者提供較為清晰的圖片，而針對行動使用者提供檔案大小較小的圖檔以節省網路傳輸時間。

接下來要提到的是近來當紅的網頁設計方式，叫做：「視差滾動Parallax Scrolling」，這類型網站通常都是「一頁到底」，製作這樣的網站，針對SEO部分究竟要注意什麼呢?

一樣來看範例吧，Apple的新產品：http://www.apple.com/tw/mac-pro/
這個就是「視差滾動」效果的單頁網站，使用者不斷的滾動，在同一個頁面可以看見所有相關的主題。
另外還有一間日本非常大間的VISA卡公司，叫做
「 EVA 聯名信用卡」http://www.evastylecard.com/
它同樣是使用視差滾動Parallax Scrolling效果來呈現網站。

一個網站的組成會分成三部份：
1. HTML 結構
2. CSS樣式
3. Javascript 動作

HTML主要負責網站架構的部份，而樣式和排版是由CSS負責，而Javascript則是在負責控制網頁上動態效果的動作指令，一個好的網站必須將這三者劃分清楚，並使其乾淨簡潔。

OnePageLove ( http://onepagelove.com )，提供一個一個單頁網站目錄網，裡面有很多可不錯的單頁式網站可以讓大家參考。

接著這有HTML 5與SEO的小提醒
http://html5doctor.com/html5-seo-search-engine-optimisation/
前面提到的單頁式網頁很容易在同一頁面設置多個H1的問題
根據規範雖然說HTML 5可以在同一頁面上使用多個H1
但根據實作經驗而言，目前鮮少能看到排名好的網站有包含多個H1標籤喔！

最後分享一個SEO重要的小技巧，在頁面當中加入：「結構化資料標記」

它可以主動告知搜尋引擎，在這個頁面當中重要的元素是什麼，如此搜尋引擎就可以更精確的劃分網頁當中的主題是什麼。

Google網站管理員工具：「關於複合式摘要和結構化資料」https://support.google.com/webmasters/answer/99170?hl=zh-Hant

不免俗的，提供QR Code碼給大家掃描並且參考～

在最後舉個例子：這是在一個肚子餓的中午發現到的議題
在Google搜尋引擎打上「漢堡」，發現搜尋結果並沒有出現想吃的麥當勞網站
好吧~這樣只能打上麥當勞搜尋或是手動打上網址直接進入麥當勞網站了
進到網站內一探究竟，發現：原因在於麥當勞網站使用Flash效果，整個網頁原始碼也並未提到「漢堡」兩個字，這就是為什麼SEO很重要啦！