響應式RWD網站的10個優點缺點

RWD網站的優缺點

RWD網站設計技術是為了因應科技發展快速,有越來越多不同大小的螢幕出現而導致網站顯示問題的解決方案。

此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出,響應式網頁設計逐漸變得更加重要,是因為行動裝置流量現在占網際網路流量的一半以上。因此,Google 宣布行動裝置時代Mobilegeddon的到來(2015年4月21日),如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。

響應式RWD設計讓網站可以從電腦版縮放成行動裝置的大小,讓網站自己可以在各種智慧型手機、平板電腦上調整外觀、尺寸、位置、樣式,不論用戶從哪種行動裝置來開啟網頁,都可以得到最佳的瀏覽效果

現在越來愈多網站使用響應式RWD網站製作,然而有好處也有壞處,可以經過仔細評估後再決定要不要製作RWD網站,以下讓我們告訴你關於RWD網站的10個優缺點:

2560px Content is like water
「內容就像水,水裝在不一樣的容器中就會變成不一樣的形狀。」,這是一個說明RWD原則的說法。

RWD網站的優點

可以同時適用於不同裝置

RWD網站-2
breakpoints(圖片來源:Packt

RWD就是運用 HTML5 、 CSS3 等程式語言的運用,讓網站能夠自適應不同設備的螢幕大小,呈現出正常的網站內容。RWD網站採用 CSS3 的 Media Queries ( 媒體查詢 ) 技術,針對不同裝置設定breakpoints,面對不同螢幕尺寸能夠自動調整網頁版面寬度、操作介面、內容排版、圖片大小…等,電腦、平版、手機等裝置都能順利瀏覽,且不用為某個裝置另外製作網站,僅用一個網站、一個網址就能解決螢幕尺寸問題,就算未來有更大或更小螢幕尺寸的的裝置,也不用擔心無法順利瀏覽網頁的問題。

降低網站開發成本

以往傳統網站開發為了給使用者最佳的瀏覽環境,會分別開發電腦版及手機版網站,但這在製作上等於一個網站要做二次,另外加上判讀程式,判別用戶是否使用手機、平板上網,將用戶導向手機版網站,自然會增加開發費用與維護成本;而使用RWD製作網站只需製作一個網站即可,有效的降低網站的開發成本。而我們使用WordPress + Elementor製作的RWD網站,可以自由決定使用電腦版、平板及手機查看網頁時,什麼內容元素要隱藏或顯示。

利於網站SEO搜尋引擎優化

一個網站使用同一個網址,減少重複的內容,不會因為傳統的電腦版、手機版多個網址來分散 SEO 成效,且也有利於降低網頁跳離率。Google 也在「 Recommendations for building smartphone-optimized websites 」文章中建議使用 RWD 技術來開發網站,有此可見「RWD網站、響應式網頁設計」利於 SEO 搜尋引擎優化,讓網站能取得更好的搜尋引擎排名

利於使用者分享網頁

當使用者分享網站文章或頁面時,常常因為另一個使用者開啟網址的裝置不同,而得不到好的網頁瀏覽效果,有時還會因為網站的裝置判斷錯誤而導進首頁,而無法順利觀看到文章或頁面,在電腦版開啟手機版網站時會有內容排版無法正確顯示的問題。另外,同樣的網站內容拆成電腦版與手機版,按讚數、流量分析等也會跟著拆成兩筆數據;RWD網站只有一個頁面,分享出去的網址也只這一個,就不會有這些問題產生。

網站的營運維護

在沒有後台管理系統的前題下,靜態網頁頁面的更新維護需要電腦版、手機版各做一次,不僅麻煩且容易出錯,對於後續的網站維護也拉高了時間成本。RWD網站則只需更新一次即可,不會有不同步的問題。除非你有使用WordPress + Elementor分別在電腦版及手機版有不同的呈現方式,才需要分別作修改設定。但通常也只有少部分內容會需要分別作不同的呈現,其他部分都只需要更新一次。

Google 建議使用RWD架設網站

Google特別提出幾點為什麼要使用 RWD 網站:

可協助 Google 的演算法為網頁正確指定索引編列屬性,不需要發送訊息指明既有的相對應桌面版/行動版網頁。使用者無需重新導向即可瀏覽最適合正在使用的裝置大小畫面,縮短網頁載入時間。此外,根據使用者代理程式執行重新導向容易出錯,可能導致網站的使用體驗大打折扣。

而且 Googlebot 在檢索您的網站時可節省資源。對於採用響應式網頁設計的網頁,任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索),即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引,並確保擷取的網頁內容是最新版本

RWD網站的缺點

載入速度問題

RWD網站-3
Loading…

RWD網站不論在手機上或電腦上,都是使用同一份 HTML及CSS,下載的是同一個網站,會需要的下載速度也是一樣,只是網頁偵測到是不同裝置時會隱藏或顯示部份元素,事實上載入速度並不會變快。在手機頻寬普遍較低的時候,網站的反應速度可能會稍微慢一些些。這種時候網站內的圖片有沒有壓縮後再上傳就很重要了,一般 RWD 網站都可以再進一步速度優化。

手機尺寸不適合複雜的功能或介面

這是所有小尺寸螢幕共同的缺點,礙於螢幕空間有限、行動裝置只有觸碰功能,因此較不易將 RWD 拿來開發某些適用於「桌機或筆電」的網頁功能。例如,有些希望透過很特殊的創意視覺來表現的網站或一些華麗的動態效果,可能會受到比較多的限制。行動裝置的網站盡量以簡潔、美觀設計為主,較不追求太酷炫的動態效果,若有較多視覺或功能需求也可以考慮開發行動裝置APP應用程式。

瀏覽器相容問題

RWD 網站採 HTML5 架構,因此有些較舊的瀏覽器可能不能相容,例如IE6、IE7,會出現與設計不同或破版問題,但較舊的瀏覽器也隨著科技演進慢慢地在淘汰更新了,對於大部分人的使用應該不會造成困難。

舊網站要透過改版支援RWD會很難

傳統網站都是以電腦版為主來製作網站,與 RWD 網站相對的設計邏輯還是有很大的差異,因此都會建議不要透過改版來符合 RWD 網站趨勢,而是整組打掉重練、重新設計 RWD 網站會比改版舊網站來得要省錢!現在的技術可以讓你的新網站使用舊網站的網域名稱,因此也不需擔心累積的流量或數據要歸零重新計算。

結論

越來越多人要用手機、平板瀏覽網頁。行動上網的比例越來越高,這個現象不只出現在台灣,而是全球皆如此。我們還是會建議架設RWD響應式網站,除非你的網站真的有非常特殊的視覺或是功能, 一般的個人或公司形象網站、部落格網站或是購物車網站都很適合用RWD架站,除了提高使用者在不同裝置下的使用度及使用方便性,網站管理者或編輯者在更新網站內容時也會較為簡易方便。RWD網站也有利於SEO的排名優化,相較於傳統的電腦版、手機版網站之下的架站,架設網站及維護網站的經營成本、時間成本也比較低。

更重要的是RWD網站的方便瀏覽性,不論你的網站是透過桌上型電腦來觀看,或者是用智慧型手機、平板來瀏覽,RWD響應式網站已經把所有的網站內容自動重新編排過,所以使用者不會再看到密密麻麻的字擠在手機螢幕中,更不需要用手指縮放手機網站畫面,就能輕鬆簡單的瀏覽你的網站內容。且上述也有提到透過 RWD的智慧型編排技術,還可選擇隱藏不需要在手機上呈現的內容,只把最重要的資訊呈現給使用者。

延伸閱讀:

網站速度慢的5個原因

網站速度慢的5個原因
網站速度
頁面載入很慢時,會不會感到不耐煩?

會影響網站執行速度的原因有很多,除了使用者本身所處的環境可能導致訊號不佳、wifi 訊號較弱等因素影響,網站主機的硬體規格(CPU、RAM、硬碟執行的效能)、網站主機的網路頻寬及網頁設計的品質不良等等,都有可能會造成網站速度變慢。

因為網頁設計不良造成網頁開啟或執行速度慢的話,可以從以下原因檢查:

網頁的圖片太大張

一般於網頁中使用的圖片,一定要先經過壓縮後才放上去,否則一定會影響網頁開啟速度,甚至會影響網站於搜尋引擎中的排名。一般圖片大小盡量不要超過300k,在相同畫質下,檔案大小越小越佳。此外,如果同一個頁面中,放置太多張的圖片也將造成開啟速度變慢,一般建議一個網頁中的圖片總計檔案大小勿超過1mb,如果非得要放置很多張的圖片,可以拆成數個網頁來放置圖片。

JavaScript、CSS、HTML檔案過多

網頁上的每一隻 Javascript、CSS、圖片都會讓使用者需要跟伺服器多發出一次請求,假設你有20隻 CSS,瀏覽器就必須跟伺服器互動20次才能拿到全部的檔案,這會大大的影響網站速度。有些網頁工程團隊因為分工的關係,很容易會產生太多隻 CSS/Javascript ,所以必須盡可能地將 CSS/Javascript 合併,控制在合理的數量以內。並且通過優化程式碼(包括刪除空格,逗號和其他不必要的字符),可以顯著提高頁面速度,同時刪除程式碼解釋和未使用的程式碼。

使用其它影音元素

如果網站(尤其首頁)有放置「影片」的話,請注意不要讓影片自動播放,最好等該網頁全部開啟完成後,再讓瀏覽者自行點選播放,如此便可將網頁執行的頻寬分階段執行,就不會讓使用者感覺到網頁速度慢了。另外網頁在播放影音檔時,會很耗頻寬資源,因此,最好將影片或音樂放置於YouTube等串流平台上,然後利用影音嵌入的方式,如此一來,於播放影片或音樂時,就不會用到您網站的頻寬。

網站程式設計

程式設計不良的網頁,除了可能造成網頁出錯之外,還有可能出現畫面雖然沒有問題,但卻會造成資源負擔而影響執行速度的情況(例如多餘的迴圈、session 資源滿載、從資料庫載入過多用不到的資料…等)。

改善伺服器反應時間

有許多因素可能造成影響,網站的流量、每個頁面所使用的資源、伺服器所使用的軟體或是所使用的伺服器等。為了改善伺服器反應時間,必需知道問題在哪裡,如資料庫查詢速度較慢、網頁流量速度慢或缺少足夠的記憶體並將對其進行改善,好的伺服器反應時間應該低於200ms

也可以利用線上網站速度檢查網頁速度,例如 Google 的 PageSpeed Insights,可以幫你更了解自己的網站。

延伸閱讀:3個實用線上圖片壓縮工具

為什麼在行動裝置與電腦上Google搜尋結果會不同?

resizer

(文章翻譯自:Why Mobile and Desktop Rankings Are Different

Google 的 John Mueller 回答了一個有趣的問題,即為什麼行動裝置和電腦搜索排名會有所不同。Mueller 提供了幾個與個性化相關的因素來解釋為什麼這兩種搜索有時不同。

為什麼桌機和行動裝置Google搜尋結果排名不同?

提出問題的人有興趣了解如何診斷網站在行動裝置搜索中表現不如在桌機搜尋中表現的原因。

這是他打的問題內容:“為什麼……我們已經切換使用行動裝置優先索引(mobile first indexing),桌機版和行動裝置版的搜尋排名卻不同呢?”

Google 的 John Mueller 指出索引和排名是兩個不同的東西。 雖然我們使用的環境是行動裝置優先索引(mobile-first indexing),但這不代表行動版本和桌機版本的排名會相同,因為這只是行動裝置的索引。

“因此,行動裝置優先索引(mobile-first indexing)是專門針對內容索引的技術,我們利用行動裝置Googlebot將內容編入索引,但是這只將內容索引,排名仍是(另一種)完全分開的技術。”

John Mueller

行動裝置和桌機排名是根據上下文個性化的

Mueller 接下來解釋,在某些情況下,搜索者與他使用的裝置可能會影響排名。

他說明,用戶搜索的某些需求,會因為設備不同而異,而這就可能影響排名。

“而且桌機和行動裝置設備的排名不同是很正常的。

排名可能與速度有關、可能與使用行動裝置友好性有關,甚至也可能與搜索結果頁面顯示的不同元素有關。舉例來說,如果你在旅途中使用手機搜尋資料,或許你會想知道更多當地訊息。然而,如果你在桌機上搜索資料,也許你會希望有更多圖像或是影片的搜索結果。所以我們就會傾向顯示……不同類型組合成不同的搜索結果。

因此,我們會發現行動裝置和桌機設備可能有不同的排名,或顯示不同元素排列的搜尋結果。

本質上這些都是正常的。這只是我們在決定排名操作的一部分,我並不會說這些排名和內容索引技術有關聯。”

John Mueller

頁面速度和行動裝置因素造成的排名差異

接著,提出問題的人持續問了診斷這些排名差異的問題。

他詢問行動裝置排名較低者,是否與行動裝置頁面速度因素有關。

“……行動裝置友好性絕對是一個因素。

可能還有其他因素在起作用,特別是在行動裝置設備和桌機設備方面,這些是在行動裝置和桌機搜索結果方面始終存在的差異。有時也僅僅是因為它是不同設備或不同網站連接,所以我們會使用不同的設置基本上是為了個性化。”

John Mueller

個性化造成的排名差異

Google 的 John Mueller 證實,行動裝置索引只是索引,與算法的排名部分分開。他還透露,個性化在行動裝置和桌機搜索之間偶爾出現的搜索排名差異中發揮了作用。

Mueller 解釋說,使用行動裝置設備的人的需求可能與使用桌機設備的人的需求不同。

因此,如果有人試圖診斷為什麼設備之間的排名存在差異,那麼了解為什麼在行動裝置設備和個性化環境中排名靠前的網站行動裝置版本可能比排名靠後的頁面更可取可能會很有用。

那裡可能有幫助診斷問題的線索。

有興趣的人可以看看 Google 的影片唷!(John Mueller 在 49:10 分鐘回答這個問題)

延伸閱讀:

22個優缺點評比:電商架站平台 or WooCommerce 架購物車網站?

架站平台

網路商店是24小時不休息的推銷員,持續地幫你銷售商品,客人任何時間都可到你的網站上選擇商品,並即時下訂單和線上付款。好的網路商店除了商品本身吸引消費者,網站的排版設計、順暢的購物流程都會增加消費者的購買意願。那要選擇什麼架設你的購物網站呢?該選 WordPress 網站還是整合型的電商架站平台?我們來為你分析一下!

Shopify 架站平台的優缺點

架站平台-1
Shopify

Shopify 是世界上最大的付費網路開店平台,目前全球 175 個國家/地區 的數百萬商家在使用 Shopify 的網路商店平台,在 Shopify 建立的網路商店上面買過東西的人數更超過了2億人。

這一個網路開店服務平台由於用戶群龐大,開發出來的應用軟體工具也非常的多。主要市場是分佈在歐美地區,到現在還沒有提供中文的管理介面,台灣的使用者也相對的比較少。

近期,Shopify 花了許多心力在台灣的用戶市場開發上面,並且推出了中文版的官網來加強行銷。

快速架站

Shopify 一條龍的全方位電商服務,網路開店所需要的主機代管、網頁製作、訂單處理、金流及物流串接、銷售數據分析和會員管理等服務都能夠一次搞定,讓使用者不需要操心技術問題,能夠快速架站。

以月或年計費的租用網站

一開始提供免費試用三天,你必須付費才能使用 Shopify,並以美元計費。Shopify 提供幾種付費計畫,分為 Basic、Standard、Advanced,每種計畫的月或年費用有所區別,開通 Shopify 帳戶可獲得 14天免費試用 。

外掛多另外收費

應用外掛、設計模板多半需要付費才能使用,常會導致開店成本大幅增加。

基本SEO

Shopify 提供最基礎的網站站內 SEO優化功能,包括你可對 page title 和 meta description 進行編寫。進階SEO功能需收費。

開發環境封閉

平台的應用程式仰賴自行研發的Liquid語言,開發環境封閉,調整網站的彈性、空間不大。

交易手續費

每筆訂單依方案不同酌收0.5%~2%的交易手續費。

Shopline 架站平台的優缺點

架站平台-2
Shopline

Shopline於2013年創立於香港,曾經獲得了美國矽谷500大新創公司加速計畫阿里巴巴的創業資金投入,目前,Shopline 在全球已有超過 35 萬個品牌使用開店,Shopline 算是中文市場裡面最大的網路開店平台,有人稱它為亞洲版的 Shopify

Shopline 的優勢跟 Shopify 非常類似,同樣主打快速架站、一條龍的電商服務,它們的核心價值就是讓沒有技術或建站能力的用戶都可以輕鬆創建自己的網路商店,而且無需借助任何程式編寫或系統安裝。

以月或年計費的租用網站

與 Shopify 相同,是需要付費才能使用 Shopline,以台幣計費。Shopline 也提供幾種付費計畫,分為網路新手、電商達人、全通路大師,每種計畫的月或年費用有所區別,開通 Shopline 帳戶也可獲得 14天免費試用全部功能。

商品數量上傳限制

依照方案的不同,限制上傳的商品數量,最基本的方案只能上傳50個商品。

網站設計版型少

Shopline 提供了一系列的網站設計模板,但數量少,大約20個。後台提供使用 HTML、CSS、JS 等客製化修改,算比較容易調整修改,因為變化度比較有限,是缺點同時也是優點。

交易手續費

SHOPLINE Payments 支援 Visa/ MasterCard/ AMEX,目前提供本地、海外劃一 2.99% + HKD2.35/ 筆的手續費優惠,優惠可享用到另行通知。手續費優惠完結後,將會回復 3.2% + HKD 2.35/ 筆。

基本SEO

Shopline 沒有外掛功能,但也有 SEO 相關功能,儘管如此,依然不是最完善的,不過也不是很差。

meepShop 架站平台的優缺點

架站平台-3
meepShop

meepShop,成立於2013年的台灣線上商店架設平台,至今已在台灣服務超過 2 萬個品牌開設專屬的品牌官網,網頁設計方面主打Drag&Drop樂高設計和一頁式網頁設計。因為創辦人自己是做電商出身,所以方案的彈性很高,在開店過程中遇到問題也都有懂行內話的客服幫忙解決。

視覺化網站設計

主打Drag&Drop樂高式網頁設計拖拉技術,可以直觀地拖拉、編輯區塊,網頁設計自由度高,能夠輕鬆創造個人化的網頁。

天眼熱點追蹤功能

平台開發獨家「天眼功能」,再搭配上Google Analytics、Google Ads、Facebook等廣告追蹤工具,方便業者追蹤廣告成效,以進行有效的優化,可以以此設計新的網站頁面,達到更好的銷售。

交易手續費

若選擇基本方案,每筆交易皆會抽成1.5%手續費,手續費用偏高

方案月費偏高

最便宜的方案也需要2,500元/月,且最便宜的方案需要抽成交易手續費、限制商品上傳數量。但好處是無論月費等級,功能皆會全部開放。

自行架設網站難易度較高

雖然網頁有視覺化的拖拉設計系統,但對網站新手來說,還是需要一定的學習才較好上手使用。

WordPress + WooCommerce 架站的優缺點

架站平台 4
WooCommerce

使用 WordPress 加上 Woocommerce plugin (外掛) 完全可取代 Shopify、Shopline 等電商網店平台。

WordPress + Woocommerce 的組合也是朝向搭建獨立網站的方案,而且給你更多自定的空間。Wordpress + Woocommerce 更適合有 PHP+MySQL 網站開發/編碼背景和經驗的程序人員去搭建網店。

目前全世界約有 35% 的網路商店是使用WooCommerce 購物車系統來搭建的,軟體的下載安裝次數累計超過了400萬次,堪稱是全球最流行的網路開店系統。由於 WooCommerce 功能強大,操作容易,而且是一個開放程式碼(open source)的免費系統,因此廣受許多商家的喜好。

架站成本較低

一開始可能需支付請專業人員架設WordPress網站的費用,但之後只需每年付費虛擬主機、網域租借及少許付費外掛的費用,若有維護需求也是以年約計費。但以一個完善的購物車網站來說,最後總體加起來的費用會比電商平台年費方案的費用低許多

設計模板數量龐大

WordPress 擁有的設計模板數量相對多,雖然很難準確確定 WordPress 的佈景主題模板數量,但至少有成千上萬可以選擇。WordPress 模板更加多元化,不過這種情況會使選擇模板更加困難、更加耗時,操作上也需要更多時間學習。

較好的SEO

整體而言,WordPress 肯定是 SEO 比較戰役中的贏家,WordPress 在這方面具有更好的優勢並不奇怪,因為可以透過外掛功能自由增加任何所需功能。有很多好用的SEO關鍵字優化工具,可以增加網站在Google上的能見度。

免收交易手續費

WooCommerce 無手續費和交易抽成

客製化程度高

WordPress 屬於開源軟體,開發出來的附加功能非常的多,客製化程度也很高。也可以隨著需求,新增網站功能等等,彈性非常大。

新手較難自行架站

若不熟悉WordPress及WooCommerce外掛,一開始較難自行架站,需要花時間做功課,建議可以找專業人員架設網站。(RAB瑞布科技就是個好選擇唷!)

延伸閱讀:

WordPress WooCommerce商品評價設定

WooCommerce商品評價設定

在WordPress後台就可以簡易設定WooCommerce商品評價了唷!

我們可以從後台的 WooCommerce–>設定–>商品區 設定商品評價。

line oa chat 210611 191144
WooCommerce商品評價設定

啟用WooCommerce商品評價

啟用商品評價:若沒有要使用此功能,可以不勾選。

在顧客的評價中顯示“已驗證”標籤:留言後顯示的顧客姓名後面會新增標籤,例如“已購買”。

只有“通過驗證的會員”才能參與評論:只有購買過商品的顧客可以留言。

商品評分

在評論裡啟用星評:若沒有要使用此功能,可以不勾選。

星評是必填的:若沒有要使用此功能,可以不勾選。

資料來源:Ratings and Reviews

延伸閱讀:

Elementor 響應模式行動版編輯教學

響應模式

有時候是不是明明已經修改了電腦版,但是行動版卻沒有改到、不是正確的內容?有可能你編輯的區塊,電腦版與行動版是要分開修改的唷!

在調整RWD版面時會因應不同情況使用區塊隱藏功能,在切換行動版時會比較準確的呈現完整的版面,若你在Elementor後台編輯時看到灰色物件代表該物件現在是隱藏的

接下來要教大家如何切換版面修改行動版的區塊(以Elementor 3.2.2版本示範):

切換 Elementor 響應模式

開啟該頁面的Elementor後台編輯,可以從前台進入,也可以從後台進入。(忘記怎麼進入後台可以看:如何進入編輯頁面?

mobile edit 1 1
elementor 後台編輯

左下角有一個電腦、手機的圖示,可以點選它切換響應模式。

mobile edit 2
響應模式

Elementor 響應模式介面

上排中間有電腦、平板、手機三個圖示可以點選,最右邊顯示目前網頁的寬度及高度。

可以看到目前頁面中有灰色的區塊,代表該區塊現在在電腦版是隱藏的,在前台並不會看到它。

mobile edit 2 1
行動裝置符號

我們將介面切換到平板模式,可以看到剛剛隱藏的區塊現在變成有顏色的區塊,代表它在平板時會呈現,而剛剛電腦版的彩色區塊現在變成灰色區塊,代表它現在是隱藏的。

你可以在平板模式修改編輯彩色區塊,讓它跟電腦版呈現的內容是一樣的。

mobile edit 3 1
平板模式

我們再切換到手機版看看,目前的手機螢幕寬高有百百種,最新更新的Elementor版本的響應模式可以直接拉左、右、下方調整你想看的螢幕寬高呈現。

在平板模式時也可以唷!若想看平板橫式時的呈現可以主動調整。

mobile edit 4 1
手機版模式

左邊的 Elementor 工具列收起,就可以看到前台在這個行動裝置寬度會呈現的樣子。灰色區塊也會隱藏起來

mobile edit 5 1
預覽畫面

修改好之後要記得按儲存唷!

資料來源:Mobile Responsive Editing

延伸閱讀:

如何設定WooCommerce電子郵件?

WooCommerce電子郵件

WooCommerce 在各種情況會寄送WooCommerce電子郵件,例如有新訂單時會寄送電子郵件給您(或您指定的電子信箱),當訂單狀態改變也會寄電子郵件給您或顧客。以下將告訴您如何設定相關的內容:

我們可以從WordPress後台–>WooCommerce–>設定–>電子郵件,進入電子郵件設定的頁面

woocommerce email 1
電子郵件設定

寄給訂單管理員的電子郵件通知

WooCommerce有預設各種狀況的電子郵件通知,可以點選項目最後的管理按鈕修改內容,例如收件者、信件內容等等。

前三個是關於訂單狀態的通知(新訂單、已取消訂單、失敗的訂單),會寄給您指定的信箱,例如訂單管理員等等。

  • 新訂單:新訂單郵件將會在收到新訂單時寄送給清單中的收件人。
  • 已取消訂單:當訂單被標記為取消時訂單取消郵件將會寄送至選定清單中的收件人(如果先前為處理中或擱置時)。
  • 失敗的訂單:當系統將訂單標記為失敗 (先前狀態為待確認或保留時),訂單失敗通知會以電子郵件傳送給設定的收件人。
woocommerce email 2
以新訂單為例

在修改設定的版面,可以勾選啟用或停用此電子通知,設定通知收件者,可以設定多個收件者,電子信箱中間須以半形逗號隔開。

也可以修改主旨、電子郵件標題、其他內容等等。

寄給顧客的電子郵件通知

除了前三個通知是寄給您的,剩餘的電子郵件通知是寄給顧客,可以點選項目最後的管理按鈕修改內容。

  • 訂單保留:這是寄送給客戶的訂單通知,包括保留之後的訂單詳細資料。
  • 處理中的訂單:這是完成結帳後寄給顧客含有訂單明細的通知信。
  • 完成訂購:當訂單被標示為完成時將會寄送訂單完成電子郵件給顧客,通常用來知會訂單已出貨。
  • 已退款的訂單:訂單退款郵件將會在訂單標記為退款時寄送給顧客。
  • 客戶發票/訂單明細:顧客發票郵件可以寄送訂購詳細清單及付款連結給顧客。(手動寄送)
  • 顧客備註:當你新增一個備註事項到訂單時,將以電子郵件寄送備註事項給顧客。
  • 重設密碼:當顧客重設他們的密碼時將會寄送給顧客 “重設密碼” 電子郵件。
  • 新帳號:當有顧客利用結帳或帳戶頁面註冊時,將會傳送 “註冊新帳號” 電子郵件給顧客。
woocommerce email 4
以新帳號為例

電子郵件發送相關設定

這邊可以設定這些電子郵件通知的寄件者名稱、電子信箱等等。

也可以自訂電子郵件樣板,更改顏色等等,可以先預覽您的電子郵件樣板。

woocommerce email 3
電子郵件發送選項

修改完以上設定,記得儲存唷!

延伸閱讀:

AMP頁面不再在Google搜索中獲得優勢

AMP頁面不再在Google搜索中獲得優勢

Google AMP 是什麼?

AMP on Google | Google Developers
Google AMP徽章

AMP全名為Accelerated Mobile Pages,中文名稱為加速行動版網頁,是一個由 Google 開發設計的架構,創造一個符合手機瀏覽的網頁,可讓網站讀取速度更快,使用者開啟網頁的速度更快。許多國外的媒體在安裝AMP頁面後,文章頁面開啟的速度增加數倍到數10倍,使用者更快的可以讀取到他們的內容。

Google 不再顯示 AMP 徽章圖示

自 2021 年 6 月中旬,我們將開始使用網頁體驗功能,做為排名系統的一部分。 然而直到 8 月底前,網頁體驗不會在這些系統中扮演完整的角色。

我們也為 Google 新聞應用程式推出了類似更新內容,Google 新聞應用程式是一個重要的平台,可讓世界各地的使用者查看當天的重要新聞。在網頁體驗更新中,我們將擴展非 AMP 內容的使用範圍,以便提升 news.google.com 和 Google 新聞應用程式的核心體驗。

此外,我們將不再顯示用來指出 AMP 內容的 AMP 徽章圖示。我們將於 6 月中旬推出網頁體驗更新,屆時您會在我們的產品中看到這項異動。 我們會繼續測試其他有助找出良好網頁體驗內容的方法,並且在有更多資訊可分享時通知您。

Google 表示

通過此更新,您可以通過創建速度更快、用戶體驗更好的網站來超越 AMP 頁面並獲得更多搜索流量。

如果您想要更高的排名和來自搜索引擎的更多流量,您需要優化您的網站以獲得更好、更高性能和更快的用戶體驗,現在可以選擇要使用的技術來實現目標。

AMP 不再是 Google 創建快速加載網站的要求,即使不使用受限制和 Google 控制的構建網站的方式,您也可以開發具有出色頁面體驗和頂級 Core Web Vitals 分數的輕量級網站。

AMP 網站所有者的工具有助於過渡到頁面體驗

Google 甚至創建一個詳細的指南,向 AMP 用戶展示他們如何為即將到來的頁面體驗更新優化他們的頁面。一個相應的工具進行分析的AMP頁,並提供可操作的反饋。通過這種方式,網站運營商可以很容易地看到他們可能需要改進的地方,以滿足頁面體驗更新的標準。

Google 已經提前確定所有 AMP 頁面中有 60% 已經符合Core Web Vitals,而非 AMP 組中只有 12% 是這種情況。

資料來源:網頁體驗更新的更多時程、工具與詳細資料Google AMP is dead! AMP pages no longer get preferential treatment in Google searchKeine Vorteile mehr durch AMP: Google vollzieht Kehrtwende

延伸閱讀: