網頁設計的專業首選

近年來，隨著大眾對於網路的使用度跟熟悉度增加，一化科技發現，對於客製化網站和套版網站，以上兩者的區分，每每在與客戶溝通時，許多客戶們已不再像早年那般，對於不同網站製作的差異處那樣陌生。   一化科技用最容易區別的六個要項，來做兩者的比較。而這兩種網站製作方式的比較六個重點，一化科技將其命名為兩種不同類別網站製作的[PERMIT理論](即準許理論或是允諾理論)。 即：花費價格(Price)、全專屬化(Exclusive)、瀏覽動線(Route)、結合行銷(Marketing)、畫面呈現(Image)以及製作時間(Time)等等。   客製化的網站，在上述的各項指數上，可說是都要比套版網站來得高。現就字義上作簡略說明，如下： 花費價格(Price)，客製化網站因為溝通製作，都極為仔細費時，是一種最有效的網站整合製作，所以製作成本，自然而然的要高出一般簡易的套版網站製作成本許多。   全專屬化(Exclusive)，套版網站可視為由開發者或是代理商，提供幾個網站的版型，由客戶挑選後，局部更換些圖片，再於固定的頁面位置放上文字，如此便完成了一個網站，所以不乏有撞衫的尷尬，識別差異性低。   瀏覽動線(Route)，客製化網站在規畫起始，便會細心了解客戶網站，要如何提供友善的瀏覽界面，與愉快的瀏覽體驗。所以，整體網站上的動線，一化科技皆不斷更新最新的網站製作語法技術，並結合深厚經驗的來規畫，以其收到最大的效果。   結合行銷(Marketing)，網站的選項主題，該如何適切的規劃出諸如促銷訊息的發佈機制？以及當網站製作完成後，該如何讓該網站的搜尋排名，可以排在前面，這是行銷該網站的一個重要工作，甚至是非常必要的工作，客製化網站，在此方面，可謂遠遠勝出套版網站。   畫面呈現(Image)，因為是完全客製化的網站，所以每個頁面，每個畫面，以及每個圖面，都需貼合不同客戶所需。一化科技了解畫面會傳遞訊息的重要，力求將每個頁面細節，都儘量做到賞心悅目，而這是套版網站無法做到的。   製作時間(Time)，如果製作時間非常急迫，對於功能與畫面，以及網站的潛力價值等因素，均可忽略的話，此時或可選擇套版網站，但客製化網站，如上述所陳述，可說是精雕細琢。   所以，在製作時間上，必定是要多出一些；不過，一化科技知道每位客戶，都希望網站可以趕緊上線，以便帶來無盡的商機，所以一化科技會用最有效率的方式，來濃縮內部製作時間，期盼更快的完成委製客戶，一個嶄新且有效傳遞訊息的網站。

客製化網頁設計所架構出的網站，因為是完全貼合不同客戶的實際需求與特色，通盤溝通了解後，再進行網站的製作。如用類似近年某些產業中，常提到的[匠人手作]概念，來比喻在客製化網頁設計，有許多相同的共通點。因為客製化網站製作的起始通盤設計規畫上，從要表達的意像與整體連結界面，便以客製化的細心規畫，來做好最妥善的設想，再由一化科技公司內部專業人員，進行網站前端視覺的設計。如有自行管理網站功能的需求時，則搭配同樣為專屬客製，可供客戶自行管理更新的後端平台，讓網站的裡、外與前、後，都可讓不同客戶，擁有其專屬最合用的設計。不同的客戶們，也不用擔心會發生與不同客戶版型撞衫的尷尬。   客製化網站的設計風格，將充分表現出不同客戶的特色，客戶完全無須受限於所謂套版網站的先天上限制，讓客戶的想法與創意，可恣意釋放出來。另外，是在設計之始，便以最貼近搜尋引擎原理的方式製作網站，並預留需要做網站行銷的準備與彈性，可立即搭配網站優化的設定，使搜尋結果排名，盡量有效的往前提昇。在此，提出套版網站的缺點做說明，即整體版型受限，畫面、圖面及文字，均難以達到真正的高標要求，網站製作後，常常沉於茫茫網海中，被搜尋的排名，難以跳脫出來，所以難以被潛在的受眾看到，加上畫面勢必較粗糙，所以，並沒有辦法發揮出一個真正有效網站，所該有的功能。而製作一個真正有效、可帶來無限商機的網站，即為客製化網頁設計的最大宗旨與特色。  

網站莫名開始出現無法順利解析 IP 位址，或是使用者來造訪網站時連線反應變慢、無法連線情形，可能要注意是否為 EDNS 所影響!   EDNS 是什麼呢?     2019 年 2 月 1 日，Google、IBM、Cloudflare 等多家公共 DNS（Public Domain Name System）服務商，將開始正式導入使用 EDNS 符合性驗證，EDNS ( Extension Mechanisms for DNS)主要是應用在提升 DNS 安全性使用，而運用要點在於由 DNS 用戶端發起，用來擴充以往傳統的 DNS 傳輸資訊封包，並配合數位簽章在資訊當中加入加密與驗證的編碼，來確保網站方與瀏覽方在互動資訊的同時，能夠保障資訊傳遞的安全性、正確性，達到有效的資料防護。   在 DNS 伺服器當中，一般通常直接影響網站和郵件信箱的連線運作，所以 DNS 伺服器管理軟體或相關設備如果不支援 EDNS 協定技術，將造成 DNS 無法順利解析或解析反應變慢等問題，這部分如果是自行架設 DNS 伺服器的企業行號更需要特別留意軟體與硬體是否能及時更新與支援上此項技術。   以上提到了相關的技術與影響層面，但如果無法評判造成網站時連線反應變慢、無法連線等情形的話，也不能完全確定是否為 EDNS 所影響，因此，我們可以透過以下檢測工具進行瞭解：   簡易對"網址"或"伺服器地址"進行測試，可以使用：   EDNS Compliance Tester     自行架設 DNS 伺服器測試，可以參考測試方法：   DNS flag day      經過了分析與瞭解，相信大家都能更清楚 EDNS 協定技術的應用，如果在這方面或是網頁設計等設定上遇到困難，也歡迎洽詢本公司，協助設計、規劃與管理! 

當有兩個div重疊時，可以發現當滑鼠滑到重疊的區域時，會無法對下層的div進行點擊或hover的動作。 如下圖範例，藍色區塊(box01)設定了hover，只要滑入該div就會變色，但是當滑到重疊區塊時，壓在底下的box01設置的hover屬性會無法實現。 See the Pen KEeXqK by Ya (@bok770) on CodePen.   此時可以應用CSS的屬性「pointer-events」，它是針對滑鼠事件的屬性，預設值為auto，若設定值為none時，則可以穿越該元素。也就是說，原本滑鼠無法點擊的下層div，設定為pointer-event: none的話，可以讓鼠標直接穿越上層div，對下層div進行動作。 範例： See the Pen ywEzxO by Ya (@bok770) on CodePen.   我們可以發現，原本壓在底下的box01，就算鼠標滑到重疊區域內，也可以觸發hover了。

先前在meta robots 與 Robots.txt 的差別與使用時機介紹中提到過， Robots.txt 的使用會使尋引擎在讀取網站內容資訊時，直接不檢查跳過忽略相關的設定頁面，甚至認定並不屬於網站架構內容，這樣雖然能夠幫助搜尋引擎排除不需要的收錄，但在 Robots.txt 的應用來說比較偏向於未設計製作完成還不便上線的頁面，然而其實大多數的重複諮詢頁面、管理員的登入介面等資訊，只是內容篇幅上偏向於功能取向、較無閱讀性、不符合訪客查看應用，嚴格來說，還是整體網站架構的一部份，反觀搜尋引擎在對整體查核時，也會對內容架構進行瞭解，內容架構的豐富度與完整性也有利於排名收錄，因此我們其實並不能一杆打翻全歸類於不屬於網頁內容。   在顧及完整性收錄與重複功能頁面排除的情況之下，我們便可以透過 meta robots 的應用，來明確的告訴搜尋引擎，那些內容算是網站的一部分可以進行檢索，但無須索引提供給訪客進行搜尋便可，至於 meta robots 的應用格式與使用辦法，我們將在以下進行說明舉例：   meta robots 主要是應用在頁面編碼當中的 head 區塊裡，可以自由的針對每個個別頁面提出只需要"檢索"或"索引"的設定，也因為可以個別針對每個頁面進行權限設定，就意味著"每個"需要不同權限的頁面都需要置入相關設定。   在 meta robots 當中，我們使用 index、noindex   代表 索引 或 不索引 follow、nofollow 代表 檢索 或 不檢索   所以我們只需要請搜尋引擎"檢索"理解，不需要"索引"提供搜尋的範例便能設定為： ＜meta name=”robots" content=”noindex" /＞   不過 meta robots 有兩項設定值，個別兩種的狀態，所以也可以組合成以下的設定權限： 1. ＜meta name=”robots" content=”noindex"＞ 不要檢索、不要索引，等同 Robots.txt 應用  2. ＜meta name=”robots" content=”index"＞  不需要檢索、但需要提供索引 3. ＜meta name=”robots" content=”index"＞  需要檢索、需要索引，等同於搜尋引擎正常預設值(形同虛設)

在網站排除檢索的部分，先前本站淺談過 Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單，也介紹過 Robots.txt 的實際應用與設定，因此瞭解排除"檢索"的部分後，我們將要更進階的介紹排除"索引"部分，反觀由開始淺談部分時，我們曾提到搜尋引擎其實是透過的"檢索"與"索引"兩種功能來將網站網頁資訊進行收錄並提供使用者查詢，所以淺談 Robots.txt主要是針對檢索這項功能進行排除。   而檢索與索引這兩項功能雖然有極大的關聯性，但實質上在網頁上進行的動作並不相同，這邊我們用更白話的敘述就是    檢索 = 檢查     索引 = 收藏   所以搜尋引擎在實際上的運作順序是先透過檢查頁面內容與連結後，才決定是否要收藏，因此 Robots.txt 的作用就是在搜尋引擎來訪時，藉由直接提出不需要檢查的資訊，想當然爾就更不可能會被收藏，達到不檢查、不收錄的效果。   在更明確的知道搜尋引擎的收錄原理後，我們將要介紹的部分是 透過 meta robots 進行"索引"的排除，這時相信大家將會些疑惑，Robots.txt不就能達到不檢查、不收錄的效果了，為什麼還需要 meta robots 進行"索引"的排除呢?這部分主要原因就是 Robots.txt 會使尋引擎直接在不檢查這個步驟中就會忽略相關的內容，甚至不認為這是網站的內容；但是 meta robots 的應用，可以使搜尋引擎先進行"檢查"也仍然會將內容視為網站的一部份，但不要收藏提供使用者搜尋，所以這部分差異也會引響網站的總體完整性，因此在非必要的情況下，並不建議使用 Robots.txt的使用，而是推薦 meta robots 的使用。 

由淺談 Robots.txt 是什麼?能瞭解，Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單，先前我們說明過，大部分不需要的檢索的頁面可能是：管理員的登入介面、重複的諮詢頁面、尚未完成或修改調整中的頁面等。這些頁面都包含在網站頁面資訊當中，擁有很重要的使用操作功能，但站在使用者搜詢需求上，卻相較無查閱內容，因此減少相關的頁面檢索能夠提升搜尋引擎對網站內容的精確性。   瞭解了Robots.txt的應用時機後，我們便能著手開始設定提交內容。   在網站中建立一個名稱為：Robots 的 .txt 檔案，在檔案內容中設定需要排除檢索檢索的頁面檔案與路徑。     以下為常見的設定規則：   1.User-agent：宣告設定規則對那些搜尋引擎爬蟲有效，可能是：Google、Yahoo、Bing、Baidu等...另外*號代表全部搜尋引擎適用。(必要宣告規則)   2.Disallow：用來指定不需要被檢索的目錄或檔案，需注意檔案路徑的完整明確性。(與 Allow 為選擇性宣告規則)   3.Allow：用來指定可以被檢索的目錄或檔案，需注意檔案路徑的完整明確性。(與 Disallow 為選擇性宣告規則，且 Allow 可以與 Disallow 同時應用，但 Allow 的優先權大於 Disallow)   4.Sitemap：指定網站內的 sitemap 檔案存放位置，需使用絕對路徑。(非必要宣告規則)     使用範例一：整個網站不要被所有收尋引擎爬蟲檢索   User-agent: *  (適用所有搜尋引擎爬蟲) Disallow: /    (Disallow用來指定不需要被檢索的資訊，/代表全站根目錄)     使用範例二：只允許特定搜尋引擎爬蟲檢索特定內容 (Allow 可以與 Disallow 同時應用，但 Allow 的優先權大於 Disallow)   User-agent: Googlebot          (適用 Goole 搜尋引擎爬蟲) Allow:/classA/pageA.html    (Allow用來指定需要被檢索的資訊)     User-agent: *        (因為先宣告了 Google 可以檢索，因此除了 Google 以外的皆不檢索) Disallo:/classA/pageA.html    ( Disallow 用來指定不需要被檢索的資訊，)     使用範例三：針對特定搜尋引擎爬蟲不需要檢索特定檔案類型   User-agent: Bingbot  (適用 Bingbot 搜尋引擎爬蟲) Disallow: /*.htm$    (不論檔案名稱與參數值，只要是.htm皆不檢索)    

 在SEO搜尋引擎優化當中，大家都會非常在意自己經營的網站是不是有被各家搜尋引擎完整的收錄頁面資訊，原因當然是網站頁面有被收錄索引，才能夠被使用者找到並增加網站的搜尋能見度，但其實管理人員也必須思考注意的部分是，假設：尚未完成或修改調整中的頁面、管理員的登入介面、重複的諮詢頁面等...，這些網站內容並不全然適合被搜尋引擎收錄、並提供搜尋呈現給外在搜尋者查看。   因此瞭解搜尋引擎的運作原理，主要是透過程式進行多方網狀連結"檢索"與"索引"來對進行網頁資訊收錄，而網頁站台在長期經營的同時，難以避免會有些頁面"不需要被搜尋引擎檢索與索引"，因此管理人員們便能透過提交 Robots.txt 這個檔案，將無須收錄的頁面資訊載明提出給搜尋引擎檢索參照，便能明確的有效排除無須收錄的網站頁面。  

 從網站廣告行銷中，我們瞭解可以透過 UTM 參數設定與 Analytics 查看UTM應用成效，能夠明確達到追蹤和解析網站廣告的應用成效，隨著大眾行動裝置應用程度遠超越了桌上裝置的習慣，在 Android、ios 系統下，APP的廣告連結也成為了網站推廣行銷的重要管道，因此UTM的應用也針對行動裝置系統有了專屬的"Google Play URL Builder"、"iOS Campaign Tracking URL Builder"延伸。       以 Android Google Play URL Builder 為例，我們也是需要根據先介紹過UTM參數進行相似的設定，較為不同的地方是在Ad Network需要選擇不同廣告平台的選項進行對應追蹤。   在填寫 UTM 參數 時，同樣需要注意   ※字與字的間距，盡量使用 _ 或 + 號 ，勿使用空白與特殊符號，因為網址在編譯產生的過程，空白與特殊符號將會以網址用法代碼額外編入，造成網址過為冗長。   ※如果需要使用同個活動多個項目連結時，要注意所有餐數大小寫都要一致，因為大小寫的誤差，數據將會導向到不同的連結，將會造成錯誤的追蹤。   按照注意事項與參數欄位在產生與安裝好連結後，便同樣能透過"Analytics查看UTM應用成效"。

由"最簡單的UTM參數說明、設定教學"中，我們能瞭解，在產生完成UTM連結後，我們便能將連結複製加以應用在需要推廣的平台上，當使用者們透過此連結進入後，Google Analytics將會自動為我們統計各項應用資訊，達到有效的追蹤、統計總和。 透過UTM產生連結進入的使用數據存主要被歸類存放在 Analytics 當中的"廣告活動"中，我們經由介面分類中的：「客戶開發→廣告活動→所有廣告活動」便能查看統計的相關資訊。   根據先前我們產生UTM範例連結時填寫的層級資訊，我們能在廣告活動欄位中看見活動名稱：Brand_Promotion       進一步我們能夠經由"來源與媒介"更清楚的知道造訪者的相關資訊，達到分析與瞭解的目的