文章專區

最新網頁設計文章

 先前我們說明了"初識熱門關鍵字"的重要性,透過熱門關鍵字,我們能夠瞭解大眾使用者的搜尋習慣,如果網站的各項優化層面都有了一定提升,但關鍵字的設定應用卻是與使用者習慣背道而馳的話,那網站的排名情況還是有可能會不盡理想,因此,我們除了透過先前介紹過的"搜尋欄位熱門關鍵字推薦"之外,本次將分享在 Google 工具當中,也有項探索工具 Google Trends 能夠協助我們瞭解更多層面的熱門搜尋主題。     Google Trends 當中的熱門關鍵字是由 Google搜尋引擎全球大量使用者搜尋習慣所累積統計出來的熱門趨勢應用。      Google Trends 當中提供了 4大項目的主題資訊。     探索主題當中,我們可以使用"想要瞭解的關鍵字"來追蹤過去時間中,使用者對我們想瞭解的關鍵字搜尋熱門度。     搜尋趨勢主題,主要提供"即時性"的搜尋趨勢。     熱搜排行榜主題,根據地區及過去年份的搜尋情況排名出:快速竄升關鍵字、快速竄升議題、快速竄升人物等資訊。   透過以上功能,我們可以更全面性的瞭解使用者的習慣,進而優化網站關鍵字的項目。
 CSS的text-transform屬性可用來控制文字字母的大小寫,僅適用於英文字母, 不管你原本寫的文字是大寫還是小寫,皆可透過text-transform做設定, 可設定為全部大寫、全部小寫或只有第一個字母大寫。   設定值如下: text-transform:uppercase 所有字母皆為大寫 text-transform:lowercase 所有字母皆為小寫 text-transform:capitalize 第一個字母大寫,其他字母小寫   範例: See the Pen YJrVgb by Ya (@bok770) on CodePen.
 初識熱門網站搜尋關鍵字,在 SEO 尋引擎優化方面,我們探討了許多畫面、程式、伺服器、連線等技術的應用調整,集結了先前眾多技術層面的囊括,我們能夠有效的提升使用者體驗觀感及搜尋引擎評斷收錄認可,但在這些網站技術的整合後,最終我們目的便是需要開始檢視瞭解在關鍵字上的搜尋結果,因為回歸使用者們的搜尋動作應用,只是單純的透過輸入搜尋需求關鍵字來與搜尋引擎溝通,並得到最相近符合的搜尋結果,因此除了先前分享過的許多種優化技術外,關鍵字的設定、編著也是對搜尋引擎有著貫穿整體技術的布局重點。   在搜尋欄位當中,雖然關鍵字大多數都只是簡短扼要的關鍵詞彙,但卻是扮演著極為重要的引領角色,透過關鍵詞彙,搜尋引擎可以根據各種收錄資訊進行比對呈現,因此在優化的環節中我們就必須妥善的置入符合內容及搜尋的關鍵詞彙,來提供搜尋引擎的收錄確認,進而讓使用者們能夠透過搜尋引擎找到符合我們的網站資訊,理解了關鍵字的重要性之後,我們便開始需要瞭解且尋找適合、熱門的對應詞彙。   在關鍵字的編著當中,我們通常都會根據大眾使用習慣來定義,如在搜尋引擎欄位輸入關鍵字彙的同時,下方會跑出較多人常使用的習慣搜尋詞彙,就是搜尋引擎們透過大眾搜尋習慣所統計出來的常用關鍵字,從中我們便能瞭解參考相關的詞彙編著方法並加以應用,進而達到貼近使用者搜尋的習慣也能更有提升網站的吸引力。
CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距,由於英文字是以半形空白做為區隔,而此屬性便是控制此空白的間距, 全形空白則不受其影響,word-spacing可以為負值,如word-spacing: -5px   乍看之下跟letter-spacing屬性有些相似,但是word-spacing控制的是單字之間的距離,而letter-spacing則是控制單一字母間的距離。 範例:  See the Pen NORQrg by Ya (@bok770) on CodePen. 以上範例的句子:「e-work design」,如使用letter-spacing屬性,控制到的會是「e、-、w、o」……等等的單一文字之間的距離。 而若是使用word-spacing屬性的話,控制到的是「e-work」、「design」這兩個單字間的距離。   而word-spacing的另一項特性,句子若是中文字的話,如果中間有空格,也會將空格視為單字之間的分隔, 例如「一化網頁設計」會被視為一個單字,而「一化 網頁設計」則會被視為兩個。 範例: See the Pen Zqpgrm by Ya (@bok770) on CodePen.
 網站在執行 SEO-搜尋引擎最佳化的時候,除了常見的網頁設計結構、內容、排版、等站內資訊優化外,維護架設網站的伺服器與搜尋引擎的收錄互動也是優化的重要一環,或許一般人比較直覺認知是網站有伺服器擺放能穩定工作就好,但這當中其實包含了伺服器運行網站時與搜尋引擎的互動,由伺服器在執行運作網站的同時,將會以 HTTP 狀態碼來回應網站的運行狀態(HTTP 狀態碼是什麼?),而這些狀態碼就如同使用者透過瀏覽器跟正在瀏覽的網站伺服器進行對話,它們經由資料傳遞比對確認能瞭解資訊的正確性,並能明白狀態代碼的應用變化及快速診斷回覆錯誤類型協助管理人員們進行維護與修正,以下將針對幾項 SEO常見應用的狀態代碼進行介紹:   HTTP狀態碼200 - OK 成功訊息 代表網站頁面正常成功運行收錄,也是最常看見的狀態代碼   HTTP狀態碼301 - 永久轉移定向 當固定網址的網頁內容確定需要永久替換或轉移到其他頁面資訊的時候,使用301重新轉址資訊可以在保持原有的網址及搜尋引擎持續穩定收錄狀態下將使用者導向新連結頁面資訊,以確保搜尋引擎和使用者不會持續看到舊資訊或撲空看到內容錯誤消失。是應用在網站改版或網址轉移資訊的一種永久頁面轉址的最好方法。瞭解網站轉址與301轉址   HTTP狀態碼302 - 暫時轉移定向 302暫時轉址與301永久轉址,同樣都是將使用者和搜尋引擎收錄導向至新的網頁,但302轉址就如同名稱一般,是用來暫時替代性的定向功能,適合應用在暫時性調整的網頁,可能因為更新或調整內容時需要暫時把連結導向至其他頁面,待調整更新完成後,還能移除暫時替代的連結頁面資訊,並持續保留使用原本調整前的收錄積分權重,是一種替代性的辦法,但須注意不能長期用來替代永久性的轉址,因為它可能不會傳遞301的連結權重。瞭解網站轉址與302轉址   HTTP狀態碼404 - 找不到網頁 404 - Not Found頁面,在瀏覽網站網頁時,多少都會遇到頁面錯誤,或者是找不到網站的經驗,其中包含的可能原因是:連結頁面的網址更換地址了,原本頁面已經被移除,使用者輸入相似卻錯誤的連結網址,原本就不存在的頁面網址。由以上原因可以瞭解,404錯誤網頁產的原因並不絕對,因此也並不是全都必須重新定向,可以透過預設的方式明確告之404資訊,並透過提供諮詢或其他導向方式進行緩解。404頁面是什麼?   HTTP狀態碼500- 伺服器內部錯誤 500 – Internal server error,從錯誤訊息中,很明顯的能發現,500代碼是代表了網站伺服器端內部的錯誤回報資訊,這部份與頁面程式、搜尋收錄較沒有直接的關係,是屬於伺服器的軟硬體運作與安全設定相關範疇,當站台管理人員發現這樣的訊息時,便意味著需要檢查站台伺服器的運行狀態與設定,盡快排除相關的錯誤,才不會導致使用者與收尋引擎長時間的無法查看站台內容。   HTTP狀態碼503- 伺服器暫停服務 相較於500代碼是伺服器運行時內部錯誤造成的回應,但503狀態代碼則是由管理端主動所設定的提醒代碼,代表著伺服器目前無法使用,可能是由於伺服器暫時超過負載或伺服器正在進行維護的一個公告,而搜尋引擎在得到這樣的公告訊息時,也會瞭解網頁或網站只會短暫停機,並不會將其排出收錄或降低權重。  
 CSS的first-letter 屬性,可以用來控制文字段落的第一個字母,透過此屬性,我們可以對首字母的樣式做一些美化,而要注意的是,由於first-letter是偽元素,所以在寫CSS時必須用:first-letter。   範例:     利用此屬性,可以一次設定多個區塊文字的開頭 範例:
 HTTP 狀態碼(HTTP Status Code),是一種在網站開發初期鮮少會接觸的狀態編碼,主要是應用在網站營運維護中,用來識別、導向、偵錯,伺服器、用戶與站台狀態的對應編碼,在正常運作情況下的網站是不太會特別看見 HTTP 狀態碼出現的,就算是導向型編碼也不會刻意出現在頁面中,因此這意味著大多數看見網站頁面出現明顯的狀態編碼時,網站連線上可能出現了錯誤,並需要經由網站管理人員進行判別瞭解與除錯。   猶如前面提到 HTTP 狀態碼 可以用來「識別、導向、偵錯」,其實狀態碼有明確的區分狀態對應方向類別,同時也使用了3位數字代碼進行區別,由狀態碼數字的大小位數進行代碼的分門別類,依序位數區分,一般總共分成了五大項目:   1.代碼-1XX-狀態訊息(Informational)   2.代碼-2XX-成功訊息 (OK)   3.代碼-3XX-重新導向 (Redirection)   4.代碼-4XX-客戶端錯誤 (Client Error)   5.代碼-5XX-伺服器錯誤 (Server Error)   從以上大分類中,能夠快速的讓站台管理人員們明白站台當下所呈現的狀態,再配合代碼中細項的數字標示,便能夠更精確的找到可能需要修正或排解的問題,算是協助網站管理人員們的一項指標代碼。
之前我們介紹了CSS的word-wrap,此屬性可以讓過長文字直接換至下一行,使得文字不會超出div區塊的範圍。 而CSS還有另一個相似的屬性為word-break,功能也是讓文字換行,那麼此兩項屬性有什麼差別呢?就讓我們來看以下範例吧。 延續上次的範例介紹的word-wrap,可以讓過長文字換行如下: 原本過長會直接超出範圍    使用word-wrap:break-word,可以使過長的design單字直接換行 但是可以發現的是,由於整行design文字換行的關係,使得「e-work」這段文字右邊留下很大一片空白,除了顯得有些浪費空間以外,看起來也較不整齊,視覺上就沒那麼美觀了。 因此,為了解決此一問題,我們可以使用CSS的word-break屬性。 設定值有: normal:瀏覽器的預設規則 break-all:可以在單字的字母之間換行,不一定要完整單字才能換行。 keep-all:不可以在單字的字母之間換行,必須保留完整單字,比如說遇到半形的空格才可換行。 範例: 可以發現,e-work右邊的空間被填滿了!但缺點是,若是一個完整的單字被強制斷行,可能會失去該單字的易讀性,使得閱覽者不清楚此單字或是誤以為是兩個分開的單字,所以在使用上須斟酌一下。
 CSS的word-wrap功能為讓過長的單字能夠切換到下一行,大多的瀏覽器預設上,為了保持較長文字的完整性,並不會拆掉文字,而是直接跳至下一行,或是直接讓單字超出div的範圍,如果要避免以上這兩種情況,可以使用word-wrap屬性。   若不加word-wrap的時候,在瀏覽器默認下,若有一個單字很長,導致一行剩下的空間都容納不下它時,則會把這個單字挪到下一行。 所以如下圖所示,e-work後面會留下一片空白,而容納不下剩餘空間的design會直接移到下一行。   以上範例的文字整體長度還是在div區塊的範圍之內,但是如果這個單字本身長度比div還要長的時候呢?由下圖我們可以發現,如此便會直接超出div區塊的範圍。   而為了讓以上情況的單字可以不超出範圍,我們可以用word-wrap: break-word讓過長文字直接拆至下一行。   以上便是css word-wrap的功能介紹,此屬性在所有瀏覽器皆有支援。  
  Google Marketing Platform ,是 Google 創新整合的線上工具管理平台,在廣告投放與站台數據分析方面,相信大家都對DoubleClick 與 Google Analytics 都有一定的認識,Google 在眾多用戶應用體驗後,瞭解了大多數行銷人員們都認為這兩項工具如果能夠結合在一起,會有更精確、實務的應用,因此進行了廣告與數據整合的動作,當然隨著Google在廣告和分析技術上的突破與延伸,整合平台中還包含了許多其他能夠加以延伸應的功能進行服務,如:   Display & Video 360   Search Ads 360   Analytics (分析) 360   Data Studio   Tag manager 360   Surveys   Optimize 360   等功能陸續測試開放應用中,透過原先開發網站管理、廣告、行銷、分析等相關的工具,希望的就是能夠同時兼具行銷管理與數據分析 的搭配應用,根據官方期許推出的Google Marketing Platform 好處主要包含了:   1.提升行銷工作的速度和效率。   2.進一步掌控投資,輕鬆瞭解有哪些行銷策略奏效。   3.更加瞭解目標對象,整合及存取資料,找出最有價值的目標對象。   4.跨團隊共用深入分析資料,將資料與報表集中管理後,充分提高行銷成效。   透過以上的程序加強不同行銷團隊彼此之間的合作,達到最大的網站推廣效益。