網站有無 SSL 憑證對 SEO 的影響差很多?

SSL 憑證對 SEO 的影響?

尤其現在詐欺案件越來越多、且手法多樣化,現代人也越來越重視自己的個資是否會被洩漏出去。因此全球最大的搜尋引擎企業 Google 為了保障使用者的資訊安全,對 https 協定技術也有著高度的重視性,Google 自 2014 年起推廣所有網站全站加密的觀念,並公開宣佈:凡使用 SSL 憑證的網站,會被提升 SEO 排名。

Chrome为HTTPS网站下载“安全”标签– Naked Security
chrome 網址列

Chrome 網址列標明網站安全性

而在瀏覽器 Chrome 網址列上,針對網站是否使用 SSL 安全協定,明顯的標示了:安全、不安全、危險,3種不同資訊安全狀態,讓使用者們能由此直覺的瞭解決定是否停留觀看網站內容,透過 https 這項技術指標分類後,讓網際網路上,數以萬計的網站瞬間被明確歸類。

搜尋引擎收錄程式將會針對有使用 https 協定的網站進行優先收錄排序的動作,與沒有 SSL 憑證的網站相比,加密網站更有可能獲得更高的自然搜尋排名。

如果在收錄程式偵測完後發現網站內有需要使用會員帳號密碼做登入,卻沒有使用 SSL 安全憑證技術的網站,甚至可能會被搜尋排名剔除之外,從以上這些方面能夠瞭解,網站加入 SSL 安全憑證,是未來 SEO 優化的重要趨勢。

架站時即申請 SSL 憑證

需要注意的是,網站從 http 變成 https 時,網址是屬於有所變動的,假設沒有妥善處理將會對造成一定的風險。潛在的風險包括網站掛點、混合性內容、同時存在兩個站點、現有排名下滑。

網站一開始就是 https 是最理想的情況,但 https 網站並不是絕對會在第一頁,因為這已經變得越來越必備,由此可知沒有安裝 SSL 安全憑證有可能 SEO 排名落後,並無法得到使用者的信任。

延伸閱讀:

什麼是SSL憑證?我的網站需要 SSL憑證嗎?

SSL憑證
533fcd09e1c386b55fcea5e586b14441
什麼是SSL憑證?我的網站需要 SSL憑證嗎? 7

什麼是SSL憑證?

SSL憑證是網頁伺服器和瀏覽器之間以加密方式溝通的安全技術標準,這個溝通過程確保了所有在伺服器與瀏覽器之間通過資料的私密性與完整性,提供伺服器身分鑑別資料傳輸加密,保護網路使用者所傳輸的個人資料(如信用卡號、帳號、密碼等)在傳輸過程中不被駭客截取或竄改,強化網路使用者對於網路交易信心

為了保護客戶的資料,加密您的傳輸資料很重要。加密是將資料編碼並打亂的過程,就沒有其他人可以解讀。因此,將網頁資料傳輸打亂並且編碼的過程,其中之一就是使用 SSL 憑證。

它是一個企業級標準,被數百萬個網站用來保護他們與客戶的線上交易資訊,而為了使用SSL安全連結,一個網頁伺服器需要一張憑證

而在台灣金管會的定義則為安全保密付款機制,是一種網站保護使用者個人資料、聯絡方式、付款資訊等不被第三方所攔截的技術方法。

https 跟 SSL憑證的關係

SSL憑證
什麼是SSL憑證?我的網站需要 SSL憑證嗎? 8

在使用瀏覽器上網時請注意看到網址列開頭的部分,有區分為 http 及 https,以 http 開頭的網址其網站所有資料均是以明碼傳輸,也就是説任何的網站資料傳輸對第三方而言是相當容易竊取運用的;而 https 則是透過申請安裝 SSL 憑證,讓網站所有的資料都會經過加密後才開始傳送。

SSL就像一個保護數據的專用鎖,它可以在訪客的瀏覽器與網站或應用程式之間確保安全連接,用於確保數據加密傳遞。此外,可以對網頁進行身份驗證,以便用戶在沒有第三方的情況下保留數據,因此任何未經授權的人都不能輕易監視並進行攻擊。

所以,SSL 憑證可在網站和訪客共享的資訊之間增加額外的安全級別,進而增強網站使用者的信任感。相對地,網站沒有安裝 SSL,將會在 Chrome 瀏覽器上自動標註此網站為「不安全」

SSL憑證是免費的嗎?

SSL是需要購買的,可以跟您的域名商購買,需注意期限及費用,不同域名商可能會有不同的價差,可以自行比較。而在RAB瑞布科技架站購買域名,附贈SSL憑證,是不用費用的唷!

我的網站需要 SSL憑證嗎?

franck DoWZMPZ M9s unsplash
什麼是SSL憑證?我的網站需要 SSL憑證嗎? 9

我們都會建議所有網站都必須啟用 HTTPS 加密,即使你的網站沒有個人資料,有可能只有提供公開的內容,但沒有加密的網站有可能會被值入廣告或是未經許可的追蹤。而 Google 或是其他搜尋引擎會優先顯示有加密網站,如果網站沒有加密,則可能會降低你的網站排名

如果你的網站有個人資料,像是購物車網站,加密就變得更重要了。有些安全等級高的 SSL 憑證甚至有漏洞保險,當憑證發生漏洞而導致受攻擊時,還可以獲得保險理賠。

資料來源:gandi.net

延伸閱讀:

Google 為什麼建議使用RWD網站設計?

RWD網站
RWD網站
RWD網站

Google 表示,行動科技正在改變世界。在現今這個時代,任何時間都有人利用智慧型手機溝通聯繫及搜尋資訊。在許多國家/地區,智慧型手機的數量已超過個人電腦,因此建置適合透過行動裝置瀏覽的網站可說是經營線上業務的關鍵環節。他們也致力於開發行動裝置相容性測試的網站,讓用戶可以藉此知道自己的網站是否適合透過行動裝置瀏覽。

如果網站未採用行動裝置友善設計,可能會造成行動裝置使用者在瀏覽和使用上的不便;例如閱讀網站內容時,必須自行撥動雙指或縮放螢幕才能清楚瀏覽,這樣可能會讓使用者興致大減,於是就放棄瀏覽而離開了。反觀適合行動裝置的版本,不僅容易閱讀,使用上也極為流暢方便。

Google 也分析,在美國,有 94% 的智慧型手機使用者會透過手機搜尋當地資訊。 有趣的是,77% 的行動裝置搜尋都發生在使用者的住家或公司,而這些都是可能會有電腦的地方。

為什麼要使用RWD網站設計

RWD網站1
RWD網站友善行動裝置

Google 建議使用 RWD 網頁設計的原因如下:

  • 使用者可以透過單一網址,以更輕鬆的方式分享及連結到你的網站內容。
  • 可協助 Google 的演算法為網頁正確指定索引編列屬性,不需要發送訊息指明既有的相對應桌面版/行動版網頁。
  • 無須維護多個內容相同的網頁,減少工程師的處理時間
  • 降低行動版網站發生常見錯誤的機率。
  • 使用者不需重新導向即可瀏覽最適合裝置大小的畫面,縮短載入時間。此外,根據使用者代理程式執行重新導向容易出錯,可能導致網站的使用體驗大打折扣 。
  • Googlebot 檢索您的網站時可節省資源。對於採用 RWD 網頁設計的網頁,任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (無須依據不同的使用者代理程式多次反覆檢索),即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引,並確保擷取的內容是最新版本

簡單來說,運用RWD設計,對你的好處:

  1. 減少你和你的技術團隊工作負擔,不用同時負擔電腦版、手機版網站(或是各種零碎行動裝置版本的網頁)
  2. 寫一個版本就能跨裝置使用。
  3. 降低使用者載入頁面的錯誤。
  4. 加快使用者載入頁面的速度。
  5. Google可以減省運行時的資源,互相受益,Google更樂意提升你的網站排升順序。 上架階段只需要新增一次動作即可適用各種裝置,減少重工機會,增加工作效益。

確認你的網站適合透過行動裝置瀏覽

行動裝置相容性測試
行動裝置相容性測試

行動裝置相容性測試

Google提供行動裝置相容性測試網站,可以輸入要測試的網址,就能測試訪客透過行動裝置瀏覽網頁的方便程度,只需輸入網址即可查看網頁得分。

備份你的網站

別忘記採取任何更新前,先備份你的網站內容。

將你的網站系統更新至最新版本。

若你採用 CMS(內容管理系統)架設網站,有時候,只要更新至最新版本就會自動套用必要的安全性更新,讓你的網站更適合行動瀏覽體驗。設定系統自動更新,或委託專業的網頁設計團隊幫你看管網站版本,也可以減少安全性漏洞。

如果運用裡面的設計主題,確認這些主題適合行動裝置

在 CMS 管理面板中查看你網站使用的主題,並在主題說明文件中尋找「行動」或「回應式」之類的字詞。如果想運有現成的主題範本,可以將該範本的網址複製並貼上行動裝置相容性測試網頁中的欄位測試,檢查是否符合Google對行動裝置的瀏覽需求。可以查看 PageSpeed Insights 的「速度」部分,確定其中沒有標示為「應修正」。

延伸閱讀:

8個網頁設計素材網站報你知

8個網頁設計素材網站報你知

網頁設計素材使用注意

不管在任何設計,特別提醒使用者注意版權問題,以下精選的網頁設計素材網站多為免費、無版權圖庫及 icon,但有一些網站還是有付費的圖片或 icon,通常都會標示清楚。

有些網站的免費圖片或圖示在使用時需要標註連結或作者,授權這部分也需要特別注意。

若在以下的設計素材網站發現真的很喜歡的豐富內容,也可以加入高級會員支持創作者唷!

Freepik

freepik
Freepik

Freepik 是一個擁有豐富內容的圖像庫網站,充滿大量圖像設計素材的搜尋引擎。線上平台製作和分享的內容包括照片、插圖和矢量圖像、PSD、AI、ICON等等。該平台在免費模式下分享其內容,用戶可以免費瀏覽大部分內容,但也可以購買高級會員:能夠瀏覽更多獨家資源,可以選擇不提供免費使用的內容及更多的每日下載量。

在搜尋時可以勾選「Free」免費的選項,尋找免費、適合你的網站的素材,是非常多人在使用的素材庫。

網站當中所有的免費圖片資源所採用的授權方式大多都採用 Freepik Free License,只需要在你的作品當中附上署名與來源,能夠免費作為商業用途使用,也能夠進行衍生與再製的設計。對於一般創作者來說,只要附上來源就能夠使用大量高品質的圖片資源來說,是相當友善的。

Google Fonts Icons

截圖 2021 11 11 下午10.47.35
Google Fonts Icons

Google Fonts 是一個包含 1455 個開源字體系列和 API 的資料庫,可透過 CSS 和 Android 方便地使用。

由 Google 推出的 Google Fonts 專用 icons 區,提供免費下載,圖示主題包含 Action、Alert、AV、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、Social、Toggle 等類型,幾乎所有使用者需要的圖示都能在這裡找到,可以另存成SVG或PNG檔。

Google Fonts 提供兩個圖示字體系列:Material Icons 和 Material Symbols。Material Symbols字體是 Material Icons 字體的可變版本,將 2,000 多個字形組合成一個具有多種設計變體的單一字體文件,並透過可變軸進行調整(填充、重量、等級和尺寸)。

Flaticon

截圖 2021 11 11 下午10.51.35
Flaticon

是 Freepik 旗下的附屬網站,非常多扁平化 icon 圖示可以使用 ,適合作為介面設計的圖示來源,這個搜尋引擎最大的特色就是可以找到「免費可商業使用」的圖示。

關於免費會員與高級會員的使用規範,Flaticon有備註一些指引:

  • 免費會員:您必須添加指向 Flaticon 的連結並註明作者,以換取使用圖示。要註明作者,如果圖示由 Flaticon 製作,則必須使用“Designed by Flaticon”,否則必須使用作者姓名。
  • 高級會員:您可以在不署名作者的情況下使用這些圖標,無論是 Flaticon 還是我們的貢獻者之一。此外,您將可以訪問僅供高級用戶使用的獨家資源。

Unsplash

截圖 2021 11 11 下午10.53.55
Unsplash

Unsplash是一個免費的相片共享網站,擁有數量龐大的免費高質量照片。攝影師可以將相片上傳到Unsplash,相片編輯者們會對使用者上傳的相片進行整理。Unsplash使用了較為自由的著作權許可條款,這讓Unsplash成為了網際網路上最大的攝影相片供應商之一,網站內的圖片都很清新空靈、優美,充滿意境,適合作為大橫幅圖片使用,也經常在文章配圖中出現。

在2017年6月之前上傳到Unsplash的相片,都遵循CC0許可協定,該許可協定允許人們自由使用、修改和重新混合相片。2017年6月Unsplash對許可協定進行了修改,使用者可以在新的「Unsplash許可協定」下使用相片,新的協定相比之前的CC0協定增加了一些限制。

在2022年 Unsplash 也推出 Unsplash+ 的付費方案,Unsplash+ 是一個基於訂閱的內容服務,讓您可以訪問更多精美的圖像,並且沒有下載上限。Plus 會員可以訪問獨特的圖像、免版稅使用和擴大的法律保護。

IconFinder

截圖 2021 11 11 下午10.55.25
Iconfinder 價格方案

Iconfinder 是一家網路公司,其主要產品是圖示搜索引擎,該公司由Martin LeBlanc Eigtved於2007年創立,自2009年重新啟動以來,Iconfinder逐漸流行起來,如今已成為最大的圖示搜索引擎,每月擁有200萬以上的獨立用戶。

身為老牌圖示搜尋引擎,收錄大量的付費與免費圖示,使用前請注意各個作者的授權規範。如果想找可以免費商業使用的 icons,可以在搜尋結果處選擇「Free icons only」、「No link back」,也有免費圖示的專區,可以提供使用者尋找 icons。

在2022年10月,Iconfinder 宣布已被 Freepik 公司收購——這是 Flaticon 和其他知名項目的母品牌。

目前,Iconfinder 將保留 Iconfinder,而 Flaticon 將保留 Flaticon。Iconfinder 創始人兼CEO Martin LeBlanc 將轉變為圖示負責人,將開始製定方向,合併 Iconfinder 和 Flaticon 團隊,並進行漸進式更改。Martin LeBlanc 的目標是互相學習最擅長的東西,並應用實踐和方法來構建世界上最好的圖示網站,幫助世界各地的人們更快地做出漂亮的設計。

Pexels

截圖 2021 11 11 下午10.56.51
Pexels

Pexels 上的所有相片和影片均可免費使用,並可以修改,使用者可以使用 tag 搜尋,方便尋找想要的圖片或影片。網站有中文介面,也可以使用中文搜尋圖片或影片。

Pexels 由雙胞胎兄弟 Ingo 和 Bruno Joseph 在黑森州富爾達布呂克創立。兄弟倆於 2014 年啟動了該平台,發布了大約 800 張照片,平面設計平台 Canva 於 2018 年收購了 Pexels

Pexels 提供用於線上下載的媒體,維護包含超過 320 萬張照片和影片的資料庫,每月增加大約 200,000 個文件。內容由用戶上傳,人工審核。使用和下載媒體是免費的,該網站通過付費內容數據庫的廣告產生收入。用戶還有一個捐贈選項,雖然不需要署名內容創建者,但可以捐贈行動表示對創作者的支持。透過與 Canva 的合併,Pexels 的數據庫可在 Canva 網站中使用。

UnDraw

截圖 2021 11 11 下午10.57.32
undraw

unDraw 是一個很棒的扁平化設計圖庫,以收錄插圖為主,提供使用者下載許多免費可商用扁平化美麗插圖 (網站採用 The MIT License 授權方式) ,目前收錄的圖案很多,也都非常細緻,除了用於你的簡報或開發專案,unDraw 提供的 PNG 格式也適用於網誌文章或社群媒體。。

由原作者 Katerina Limpitsouni 繪圖及分享內容,並持續不斷更新中,可以在網站上直接調整插圖中的主要顏色,免費下載 SVG 或 PNG 格式,無需標示出處,讓你的網站或簡報更具有整體性。

Freebbble

截圖 2021 11 11 下午10.58.52
freebbble

Freebbble 將 Dribbble 上許多設計師分享的免費素材檔案分門別類整理起來,包括 HTML/CSS、背景、圖示集、字型、PSD、使用者介面、網站模版等等,使用者可以面費下載、取得原始檔。因設計師不同,下載前可以先回原網站了解授權方式。

延伸閱讀:

6大類網頁設計配色

6大類網頁設計配色

網頁設計配色的重要性:網站的外觀和動線都應該配合品牌和產品,色彩心理學與品牌塑造的關係密切,網頁設計中特定顏色相關的色調和調性能夠告訴消費者你的企業類別。

產品或服務以及目標客群在很大程度上也能決定你在品牌和網站上使用的顏色。你的目標客群適用於十歲以下的孩童嗎?或是產品能夠吸引介於25到45歲之間的成人?如果你正在煩惱哪種顏色可以吸引目標受眾,也可以參考看看競爭對手如何使用顏色。

網頁設計配色
網頁設計配色及配圖

如何選擇你的網頁設計配色

網站使用的配色,最好將色相控制在四個或以下。簡單的步驟是先找到一個主色、一個次要色,以及一個強調色。主色和次要色可以擁有顏色變化,例如明度、飽和度、彩度。主色代表你的品牌與企業類型。次要色,或是第二常用的顏色,與主色呈現對比或互補關係。強調色要能夠脫穎而出,最適合用在連結、按鈕、圖示以及其他小元素上,具有畫龍點睛的效果。

網站配色對你的品牌形象非常重要。它形塑了觀眾看待網站的方式,發展秩序與階層感,並且能夠凸顯重要資訊。具有凝聚力的配色方案還可以在不同頁面之間創造流暢感與平衡。和諧的配色的確不只是提供美學效果。

健康與美容網站的配色

tea
6大類網頁設計配色 31

健康與美容產業通常會提倡健康、保養、安寧和幸福。為你的美容網站選擇色相時,不論是冷色調還是暖色調,請考慮選用柔和的顏色。柔和的淡色系,可以給人穩定、溫暖的感覺,SPA 美容店通常都以舒服的淡色系為主,不管是以草本或花等等為主題。

美食與飲品網站的配色

chocolate
6大類網頁設計配色 32

在網站上宣傳美食或飲品時,使用明亮而誘人的色相是關鍵。亮麗的顏色可以吸引消費者停下腳步,但也要配合你的餐廳或咖啡廳想要帶給客戶的感受去做顏色上的搭配,若是酒吧網站,就可以以黑色調配高雅金,帶給人們低調奢華的感覺;若是工業風的咖啡廳,則可以以木頭色、水泥色、咖啡色等等,基本元素色系去搭配。

部落格與作品集網站的配色

fashion lifestyle 02 homepage 600x800 1
6大類網頁設計配色 33

部落格或作品集網站,整體的風格就代表你或你的作品想要帶給別人什麼樣的感覺,選擇大膽、吸睛的配色並配合整體的作品及內容是非常重要的。可以使用俏皮有活力的配色,或是白色乾淨高雅的配色,若你的作品是走黑暗風格,也可以大膽嘗試暗色系搭配明亮色系的文字。

環境網站的配色

aquarium 04 home 600x800 1
6大類網頁設計配色 34

隨著氣候變化成為一大關注焦點,宣傳環境永續經營、與環境相關企業的網站也愈來愈多。因與大自然息息相關,配色通常選用較貼近自然的樹木棕、青山綠、海洋藍等等。需與主訴的環境主題互相配合,令人感到舒服愉悅的配色,吸引人繼續閱讀網站內環境相關議題的內容。

健身與訓練網站的配色

megagym
6大類網頁設計配色 35

醒目、充滿活力的色相是健身與訓練網站的亮點。在這個情況下,色彩選擇會產生巨大影響,柔和、平淡的顏色與運動需要的力量與精力並不是非常相符,這類的顏色可能比較適合較平靜的運動,例如瑜珈。色澤飽滿、鮮豔的紅色、藍色或黃色較能代表健身訓練的強度感與活力充沛感。

衣著與服飾網站的配色

jean
6大類網頁設計配色 36

此類網站應該具有品牌凝聚力、趣味性並讓人心動,單調乏味的網站無法吸引消費者瀏覽或購買產品。可以多使用柔和與飽和的色相或是中性沈穩的色相,重要的是配色需要符合服裝與品牌本身的色調與感覺。

可以多加利用 Pinterest 等網站搜尋適合的配色。

延伸閱讀: