發表文章

目前顯示的是 2016的文章

網站如何控制索引範圍?

網站如何控制索引範圍? 過去在操作規模較小的網站時,重點往往是增加網站的網頁索引數,但操作大型網站除了增加索引數外,更重要的是引導搜尋引擎爬取正確的路線/頁面,意即有效控制索引範圍。一方面是不浪費索引的額度(Google對每個網站都有一定的索引額度),另一方面也是不增加我們網站本身的流量負擔(CDN等也是很貴的)。 網站結構 避免重要頁面埋得太深而不易被索引,重要的頁面離首頁愈近愈好,愈多內部連結連到愈好。 網址結構 三層以後的網址易被robot忽略。例如: http://sample/abc/def/ghi ,其中「def」是第三層,「ghi」是第四層。網址太長可能會遭到robot捨棄。但根據我的觀察,這樣的狀況是很少的,但如果使用site指令是可以發現有這樣的狀況,超過某個長度後的網址便不完全比對。 因此,重要的頁面要放在三層以內,確保網址不會因為太長而被捨棄索引。 內部連結要妥善設計,必要時加上nofollow 避免robot迴圈般的爬取網址,或爬某個需要登入或偽連結,導致連不到重點和深層連結。 為什麼我會注意到這個問題呢?因為在Search Console上,我常看到報錯上顯示一個很有趣的狀況... 網站上有些功能是需要登入才能使用的,因此當點擊這個連結的時候,如果使用者沒有登入,就會回傳登入頁面。若是robot做這個動作,它就會看到soft 404,也就是想要找的頁面不見了,但又沒有回傳404。 這樣的功能問題在我們網站上好像挺多的,例如:商品檢舉(登入後,點擊商品檢舉連結,會跳到填寫檢舉表單頁)--我常常看到一種報錯--soft 404,來源是某個需要登入的連結,範例: http://goods.ruten.com.tw/item/violate.htm?123456789 ,這就是因為robot在爬這個商品頁時,遇到這個連結,跟著進去發現需要登入(被轉址導到登入頁)而產生的。這種浪費robot時間資源、對自己網站產生無謂流量的狀況應該要盡量避免。 解決辦法,最簡單的就是當使用者沒有登入的時候,就不要顯示這個連結;或是,在這個連結上加入 「nofollow」,明確告知robot不要去爬。 canonical 網站格式統一,避免同一頁但不同網址的頁面競爭排名。使用canonical可能會導致網站總索引數下降,但

ES6 - let, const, Block-Level Scope

ES6 - let, const, Block-Level Scope let, const, var, function declaration, block-level scope, hoisting 相關筆記。 let 變數宣告,功能類似 var ,但有以下特性: block-level scope (塊級作用域) 沒有 hoising (變量提升) temporal dead zone, TDZ:宣告後才能使用 不允許重複宣告 const 常數宣告,有以下特性: 對於 primitives 的變數,宣告後就不能改變值,因此宣告時一定要設值,並且變數名指向資料;對於非 primitives 的變數,變數名指向資料所在的 address,不可重新賦值但可改變該 address 的內容 block-level scope 沒有 hoising temporal dead zone, TDZ 不允許重複宣告 Block-Level Scope 塊級作用域 javascript 只有 global 和 function 兩種 scope,意即若使用 var 與 function 做變數宣告,只能將變數的活動範圍限制在全域或函數中,這可能會產生非預期的結果。 例如:使用 var 宣告 i 當成 for loop 的 counter,當 i 離開 for loop 後,仍可被存取,因此得到 a[6]() 為 10。 var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); //10 改用 ES6 即可解決這樣的問題,let (和 const)有 block-level scope 特性,離開大括號({...})的範圍後便失效。 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[2](); //2 Top-Level LexicalEnvironment Top-Level LexicalEnviro

利用Prerender Node為SPA做SEO

圖片
利用Prerender Node為SPA做SEO 圖片來源: Wake Up, SEOs – the NEW New Google is Here 。 繼 利用PhantomJS為SPA做SEO 又來一個為SPA解決SEO問題的解法。

利用PhantomJS為SPA做SEO

圖片
利用PhantomJS為SPA做SEO 隨著前端技術的不斷更新,使用前端框架(React、Vue等)來建構網站是普遍現象。但目前搜尋引擎無法有效讀取使用JavaScript render出來的頁面,且使用 AJAX Crawling 的解法只適用於Google又此法已被廢棄,因此另一解法就是使用PhantomJS。 這裡使用 Node.js + PhantomJS 為SPA/以Ajax讀取資料的頁面做SEO。

Node.js 中使用 Promise Q

在 Node.js 中使用 Promise Q 假設我們今天要執行一項工作task 3,但執行task 3之前要先依序完成工作task 2與task 1。 如果沒有使用promise,而用callback的方式完成,程式碼大概會是這樣... task1(function (value1) { task2(value1, function(value2) { task3(value2, function(value3) { //do something with value3... }); }); }); 要做(依賴)的事情愈多,深度就愈深,完全就是callback hell了。

加速行動版網頁(AMP, Accelerated Mobile Pages)

圖片
加速行動版網頁(AMP, Accelerated Mobile Pages) 加速行動版網頁(AMP, Accelerated Mobile Pages)是Google推出的一套框架,用來使行動裝置網頁能快速載入。 在Search Console上會看到提示建議Webmaster使用與提交這樣的頁面。

Gulp筆記:安裝、撰寫Task、監看、例外錯誤處理和套件使用

Gulp筆記:安裝、撰寫Task、監看、例外錯誤處理和套件使用 Gulp是一套任務管理工具,讓前端的工作能自動化處理,例如:js/css最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。

T3 - 構建大型網站的JavaScript框架

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

Hubot x Slack,製作自動回話與工作的機器人

圖片
Hubot x Slack,製作自動回話與工作的機器人 Hubot x Slack 串接紀錄。 安裝 Hubot 按照 官方文件 的指示一步步安裝。安裝完後,便可用command line與robot互動。使用 bin/hubot 啟動robot。可以使用 hubot help 看看預設有什麼功能可以使用。 安裝 Hubot 的 Slack Adapter 按照 hubot-slack 安裝 Hubot 的 Slack Adapter。安裝完後,要到Slack的Hubot App設定。這邊因為找了滿久的,所以截圖詳細記錄一下。 Slack的Hubot App設定 先從「Apps & integrations」到「App Directory」,然後搜尋「hubot」。 Apps & integrations App Directory,搜尋「hubot」 新增app 這邊因為我已經新增好了,所以只能截圖設定完畢的樣子。 取得token 啟動robot時必須附上token。

DNS Prefetching - 預先做DNS解析,幫助網頁載入速度更快

圖片
DNS Prefetching - 預先做DNS解析,幫助網頁載入速度更快 前陣子看見 Addy Osmani 大大在Facebook上發表了一張圖片( 原文 )。

結構化資料之「商品」範例 - 使用JSON-LD

圖片
結構化資料之「商品」範例 - 使用JSON-LD 假設想在搜尋結果頁(SERPs)上對 單一商品 呈現更為吸引人的Rich Snippet效果,例如出現星等、評論數(如下圖),就需要利用結構化資料(Structured Data)來達成。

jQuery的陣列操作:$.map()與$.grep()

圖片
jQuery的陣列操作:$.map()與$.grep() 這陣子在整理系統內的程式碼,發現自己曾經使用一些過時的方法(例如:native javascript操作陣列),而非使用jQuery提供的API來撰寫。以下整理並比較這兩種方法的差異。

三天內學會CSS3 Animation

圖片
三天內學會CSS3 Animation 一直以來我對CSS3 Animation這件事情並沒有特別專注研究(如果需要也是用javascript完成XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。 如果你和我一樣,平常很少使用特效,需要在短時間內熟悉而有即戰力,這篇文章也許可以給你一些方向。

JavaScript Object Oriented Programming

圖片
JavaScript Object Oriented Programming 關於JavaScript Object Oriented Programming,會寫這一系列的文章是因為希望自己的JavaScript程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...

JavaScript Object Oriented Programming - Early and Late Binding

圖片
JavaScript Object Oriented Programming - Early and Late Binding JavaScript在呼叫的時候設定this的值,而這個this的值有可能不是我們預期的結果。下面有幾個範例。 this的值並非預期的狀況 以下都會由Menu這個建構子作為範例。 function Menu(elem){ //... }; var menu = new Menu(document.createElement('div'));

JavaScript Object Oriented Programming - Exceptions

圖片
JavaScript Object Oriented Programming - Exceptions 「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。

JavaScript Object Oriented Programming - Factory Constructor Pattern

圖片
JavaScript Object Oriented Programming - Factory Constructor Pattern 「Factory Constructor Pattern」不使用new來宣告新物件,新物件用function call來建立,如下: var animal = Animal('fox'); var rabbit = Rabbit('rab');

JavaScript Object Oriented Programming - All-in-one Constructor Pattern

圖片
JavaScript Object Oriented Programming - All-in-one Constructor Pattern 所有的method和property都放在consctructor中,而不使用prototype。 Declaration function Animal(name){ this.name = name; this.run = function(){ console.log('running '+ this.name); } }; var animal = new Animal('Foxie'); animal.run();

JavaScript Object Oriented Programming - Pseudo-Classical Pattern

圖片
JavaScript Object Oriented Programming - Pseudo-Classical Pattern Pseudo-class declaration 在pseudo-classical pattern中,物件是由「建構子」(constructor)這個函式所建立,並把method放到建構子的prototype中。

JavaScript Object Oriented Programming - The "instanceof" operator

圖片
JavaScript Object Oriented Programming - The "instanceof" operator The instanceof operator instanceof 允許檢查物件是否為給定的constructor所產生的。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit instanceof Rabbit); //ture rabbit的constructor的確是Rabbit。

JavaScript Object Oriented Programming - The "constructor" property

圖片
constructor 物件有內建的屬性「constructor」,意即「參考建立此物件的function」。 範例 我們來建立一個簡單的constructor,然後看看新的物件是否有正確的constructor的值。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit.constructor == Rabbit); //true