利用PhantomJS為SPA做SEO

隨著前端技術的不斷更新,使用前端框架(React、Vue等)來建構網站是普遍現象。但目前搜尋引擎無法有效讀取使用JavaScript render出來的頁面,且使用AJAX Crawling的解法只適用於Google又此法已被廢棄,因此另一解法就是使用PhantomJS。

View More

Hsin-Hao Tang Sept 22, 2016
Node.js 中使用 Promise Q

假設我們今天要執行一項工作task 3,但執行task 3之前要先依序完成工作task 2與task 1。 如果沒有使用promise,而用callback的方式完成,程式碼大概會是這樣...

View More

Hsin-Hao Tang Aug 27, 2016
T3 - 構建大型網站的JavaScript框架

T3是一個JavaScript UI Framework,主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話,很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。而整理方式就是將程式碼分成幾個部份:Application、Module、Serveice、Behavior等來處理。頁面UI整理成Module,Module彼此共用的方法或事件整理成Behavior,而非UI邏輯且多個Module會共用的部份(例如:與Server端溝通取資料)則抽出來成為Service。

View More

Hsin-Hao Tang Aug 15, 2016
三天內學會CSS3 Animation

一直以來我對CSS3 Animation這件事情並沒有特別專注研究(如果需要也是用javascript完成XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。

View More

Hsin-Hao Tang March 5, 2016
Plugin的撰寫

又重新看了jQuery: Novice to Ninja,所以做了些關於Plugin的筆記。以下使用jQuery Newsticker Plugin作為說明範例。

View More

Hsin-Hao Tang Dec 27, 2015
Node - 從MongoDB取得資料到套版

經歷了前面關於Node基本安裝設定、模板引擎的熟悉,與一些基本的語法和操作,接著來到MongoDB的建置和使用,終於要把假資料換掉,使用真實世界的內容展現在畫面上啦。

View More

Hsin-Hao Tang Sept 9, 2015
結構化資料之「活動」範例 (Part 1)

「Promote Your Content with Structured Data Markup」,搜尋引擎愈來愈人性化,提供愈來愈多實用的資料給使用者做決策。因此,前端工程師的切版不再只是依照設計稿呈現美麗的畫面和特效而已,還要能利用結構化資料,讓網站內容在SERPs上顯示更多資訊。

View More

Hsin-Hao Tang June 18, 2015
JavaScript - Module Pattern

Module Pattern 利用函數的「閉包(closure)」特性來避免汙染全域的問題 - 使用閉包(closure)來提供封裝的功能,將方法和變數限制在一個範圍內存取與使用。這樣的好處除了避免汙染全域外,也將實作隱藏起來,只提供公開的介面(public API)供其他地方使用,簡單易懂。

View More

Hsin-Hao Tang June 18, 2015
JavaScript - Call and Apply

call與apply兩者皆是執行某個function,並將這個function的context(即物件)替換成第一個代入的參數。其差異在於call必須將參數一一代入,而apply除了第一個參數代入context外,其餘的參數只要包在一個陣列裡面即可。註:第二個參數不是必須的(optional)。

View More

Hsin-Hao Tang May 3, 2015
JavaScript - Closure與Hoisting

分散var來宣告變數並沒有太大的意義,因為就JavaScript程式語言的特性來說,函數(Function)中未宣告而先用到的變數會被提升至區塊的第一行做宣告。先來看基本觀念Closure,再來看Hoisting。

View More

Hsin-Hao Tang May 1, 2015
Responsive Patterns - Layout

Responsive Patterns 是一個蒐集響應式設計與實作的元件庫,舉凡Layout、Navigation、Forms、Carousel、Tabs、Accordion和Lightbox等皆有,很適合當成學習教材。先來玩玩Layout吧。我們分成幾大類:Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists、Grid Block。

View More

Hsin-Hao Tang April 22, 2015
YHA美荷樓青年旅舍 (YHA Mei Ho House Youth Hostel)

藉UXHK 2015之便,我們在香港多待了幾天。而來去香港好幾次,每次我爸都習慣訂YMCA,但無奈改建成高級酒店,像我們這樣的小資女孩是無法負擔的。同行夥伴小奎找到一間「YHA美荷樓青年旅舍 (YHA Mei Ho House Youth Hostel)」,看起來交通方便(近港鐵深水埗站)、環境漂亮又安全、價格便宜,就訂了下來。

View More

Hsin-Hao Tang March 15, 2015
電子商務網站SEO實例探討

大部份會做SEO的網站不外乎是電子商務、活動網站、內容/服務平台(例如:新聞、旅遊)。而極端如Campaign Site這樣類型的網站由於存活時間短,便不需要做SEO,只要放置簡單的Meta Tag或Social Meta Tag即可。

View More

Hsin-Hao Tang Jan 24, 2015
App Store Optimization (ASO) Guideline

App Store Optimization (ASO) is the process of improving a mobile app’s visibility within mobile app stores (such as the iOS App Store and Google Play Store) by optimizing the content of the app’s store page for popular, targeted keyword phrases.

View More

Hsin-Hao Tang Dec 22, 2014
D3.js - Bar Chart

D3是Data-Driven Documents,是將資料視覺化呈現的library,甚至可與使用者互動。舉凡Bar Chart、Pie Chart、Bubble Chart、Tag Cloud或更複雜有趣的圖表,都可以以之呈現。

View More

Hsin-Hao Tang Oct 30, 2014
2014 SEO Ranking Factors - 點閱率CTR成為最重要的因子、利用標籤競爭SERPs排名

2013年的SEO Rankgin Factors著重於頁面優化、如何呈現好的內容與社群平台的散播。與2013相較,2014年最大的不同在於CTR變成SERPs排行中最重要的因子,並強調了使用者的動向(User Signals),除了CTR還有使用者停留時間(Time on Site)、跳出率(Bounse Rate)、更全面性的評估,例如相關詞彙(Relevant Terms)、網站速度(Site Speed)。

View More

Hsin-Hao Tang Oct 9, 2014
Ember.js & SEO - 測試搜尋引擎對JavaScript的剖析能力

Google Webmaster Central Blog在今年五月宣布 ,Google 搜尋能夠執行網頁上的 Javascript (見Understanding web pages better)。而過去已知Crawler只會剖析網頁上的HTML Code,而不會(或少量)執行JavaScript。。又由於開發品質與速度的要求,使得Single Page Application (SPA) frameworks盛行(例如:Angular.js、Ember.js等),於是了解搜尋引擎是否能夠執行並解讀JavaScript與解讀的程度便成為網站開發的其中一項需求。

View More

Hsin-Hao Tang Sep 11, 2014
Facebook Graph API & Demo Example

Graph API是Facebook所推出的一種技術標準,它的核心概念是「物件與連結」。 為什麼稱為「Graph API」呢? 因為整個Facebook就是透過這些物件與連結建立而成的Social Graph。 Facebook所提供存取的介面,就稱為「Graph API」。

View More

Hsin-Hao Tang June 7, 2014
搜尋引擎優化指南(SEO Guideline) - 如何有系統的優化網站、評估與持續改進?

搜尋引擎優化指南(SEO Guideline)是一套有系統的優化網站的執行準則,每個崗位執行特定的工作項目即可讓網站(或專案)有一定品質以上的效果,並且這樣的優化效果是可以被評估、回饋與持續改進的。而系統化的實行也有助於在有限資源下做最大的利用,以得到最好的效果(例如:點閱率、排名)。

View More

Hsin-Hao Tang May 17, 2014
粉多任務 x 一品禪 - 使用Microdata標記的網頁實例

什麼是Microdata?標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容,進而達到搜尋時呈現我們所提供的資料的方法。 畢竟直接告訴搜尋引擎重點在哪裡--告訴它這是一篇文章的標題、內文、圖片和圖片說明,或告訴它這是商品區塊、這些文字是商品名稱或廠商名稱、告訴它這些數字是價錢(而非無意義的數字),是比較有效率和精準的。而文中也說明標記如何使用和測試。

View More

Hsin-Hao Tang April 21, 2014
Author Rank

Author Rank是評估作者影響力的指標,過去尚未被證實是否會影響搜尋結果的排名,但Matt Cutts的一則Tweet似乎證實在某些地方確實會用到,例如專門領域文章的分析。

View More

Hsin-Hao Tang March 22, 2014
RSS:概念與實作

RSS(Really Simple Syndication,簡易資訊聚合)是一種消息來源格式規範,用以聚合經常發布更新數據的網站,例如博客文章、新聞、多媒體等的摘要或最新更新訊息。其目的為把新聞標題、摘要(Feed)、內容按照使用者的要求,「送」到使用者的面前。RSS摘要可以藉由RSS閱讀器、Feed Reader等軟體來閱讀(EX:Feedly、Digg)。

View More

Hsin-Hao Tang March 9, 2014
SEO:重複內容(Duplicate Content)

網站中或網站間存在許多重複內容,而搜尋引擎為了提供使用者最佳的搜尋結果,便會對這些內容作區別,將最原始的資料或最佳的內容排在搜尋結果的最前面。 在某些情況下,重複內容是無法避免的,而這些重複內容損害了網站或網頁的排名。 因此,我們可以對這些重複內容做處理,修正搜尋引擎對它們的解讀。 這裡的搜尋引擎是以Google為主。

View More

Hsin-Hao Tang Jan 22, 2014