精選作品
作品
網站建置 B2B 詢價系統:博克科技 | 生命科學的專業夥伴

網址:https://www.jnhtech.com.tw/
一.網站建置 專案需求:
1. 代理全球尖端生命科學設備,提供 B2B 詢價網站 解決方案
為了讓客戶能迅速找到所需設備,我們為博克科技打造以用途與品牌交叉搜尋為核心的 網站介面 與 B2B 詢價系統,提供快速、精準的產品搜尋體驗。
2. 網站建置 與 網頁設計 亮點
- 清晰產品分類與搜尋系統:
依據品牌與用途輕鬆篩選,讓客戶找到最適合的產品。 - 專業形象與品牌配色:
藍白色調搭配簡約設計,營造信賴感與科技感。 - 網站設計 全面資訊呈現:
產品展示、服務介紹、最新新聞、聯絡方式一應俱全,資訊透明,讓客戶更快聯絡到專業人員。 - SEO 搜尋引擎優化:
提升用戶體驗與搜尋引擎排名,優化網站架構與互動設計,吸引潛在客戶並增加業務機會。
我們以專業的網站建置能力,為博克科技打造一個功能強大、兼具行銷力與科技感的網站!
二、博克科技 官網 網站google檢測
1. Accessibility 無障礙:
讓網站對所有人來說都容易使用的分數,讓網站幫助視覺障礙的人、聽障的人,甚至其他特殊需求的人也都能輕鬆使用。
2. Best Practices 最佳實踐:
網站的效能、安全性、使用者體驗等指標分數,確保網站在不同瀏覽器和設備上都能運行順利。
不過如果網站使用 Line、Facebook 或其他sns,會影響網站的效能或使用者體驗,可能會導致網站載入速度變慢,或者在某些情況下可能會阻止內容的正確載入。
這些因素可能會導致我們的網站不符合「Google 的最佳實踐」,從而影響了我們的網站評分或排名。
3. SEO(基本搜尋引擎優化建議):
這些檢查可以幫助我們的網頁更容易被搜尋引擎找到,讓更多人看到我們的內容。持續更新網頁讓網頁不僅內容豐富,並按照這些建議來進行調整,這樣才能更好地被搜尋引擎找到喔!
三、博克科技 網站建置 規格
1. 前端程式及視覺設計
(1) 客製化版面設計 桌機 網頁設計 - 首頁
(2) 網站內頁設計:
網站各單元之設計風格、樣板採一致性(含按鈕標題),並使色彩配置及圖文排版達到最佳化(單一網頁橫向捲軸不會出現、網頁內容太長時提供分頁或內容串 連…等),使民眾、便捷、愉悅的瀏覽網站。
(3) 資訊圖像化:
以視覺化圖形來表達複雜統計資訊所呈現重點訊息,以利使用者能快速、簡單易懂地掌握重要業務資訊。
首頁:
公司簡介:
產品展示系統:
產品細節頁:
詢價清單:
聯絡我們:
2. 網站切版
依CSS+DIV+HTML網頁格式版面切版
依W3C 標準規格製作安裝
依google搜尋引擎SEO指南優化網站編寫
3. 自定義選單架構
可自定義連結選單
由後台自行新增修改
多層次選單:提供簡潔明確的網站結構,幫助用戶快速找到所需的內容。
4. 圖片輪播
輪播banner功能強大,可以自訂輪播數量。
可由後台自行上傳輪播圖片,可以設定超連結、輪播秒數、各種特效參數。
輪播不限張數,建議4-5張左右
首頁輪播圖滾動,點擊輪播圖可跳轉對應的文章連接
可拖拉排序輪播照片
管理者由後台可新增/刪除/修改圖片
可開啟新頁面連結新網站
5. 最新消息
最新消息、最新活動
6. 快速連結
細胞治療、藥物開發、基礎研究
可由後台模組進行新增、編輯、關閉或開啟
7.部落格管理系統
後臺可增加、刪除、修改文章,文章分類,文章列表
後臺支援文章自動發佈、發布結束
所見即所得編輯器:與Word相容編輯文章區
支援圖片及Html語法
檔案內嵌
支援分類瀏覽
支援被搜尋及生成RSS
每篇文章可建立顯示關鍵字/隱性關鍵字/建立文章交叉關連性
支援影片嵌入(如youtube..等)
可自行編寫說明文案,文案與影片對應
8. 智慧搜尋
自動完成功能: 當使用者開始輸入搜尋關鍵字時,智慧搜尋會顯示相關的建議和關鍵字。有助於用戶快速找到所需的內容,並提供更好的使用者體驗。
搜尋結果分類: 智慧搜尋可以將搜尋結果按照不同的分類進行整理,讓用戶可以更容易找到他們需要的內容。例如,如果有文章、產品和頁面,搜尋結果可以根據這些分類進行組織。
相似搜尋: 如果搜尋關鍵字的精確匹配結果有限,智慧搜尋還可以提供相似的搜尋結果,這樣用戶就不會錯過可能有用的內容。
搜尋排名: 智慧搜尋可以根據搜尋的相關性和其他因素對搜尋結果進行排名。這有助於確保最有價值的內容顯示在前面,幫助用戶更快地找到訊息。
9. 社群媒體
網頁浮動社群連結:FACEBOOK分享、FACEBOOK粉絲團嵌入、youtube、instagram
Open Graph Protocol開放社交關係圖:
(1) 優化社交分享:可自定義文章頁面的標題、描述、圖片等屬性,這些屬性將在社交媒體上分享時顯示。有助於網頁在分享時能夠呈現出最佳的外觀。
(2) 一致的分享外觀: 在不同的社交媒體平台上,網頁在分享時具有一致的外觀和格式。有助於建立您的品牌形象,使分享更具有識別性。
(3) 自定義分享圖片:指定一個特定的圖片,該圖片將用於社交分享時的預覽圖片。有助於確保分享時選擇的圖片是最適合的,而不是隨機選取的一張。
(4) 豐富的分享描述: 為每個文章指定分享時的描述,讓分享更具有吸引力,吸引用戶點擊連結。
(5) 影片和音訊內容的分享優化: 如果網頁包含影片內容,可以指定相關的屬性,如影片時長、音訊播放等,以提供更好的分享體驗。
相關影片:
網站優化 網站教學:SEO 文章評分 與 FB、LINE分享教學
教學中提到的連結:
SEO:植入 SEO 概念的網站與優化步驟
https://des13.com/news/seo/1567-seo3.html#SEO3-1
關鍵字 SEO 優化步驟:提升網站可見度
https://des13.com/news/seo/1572-seo7.html
前往 Line 網址預覽縮圖工具
10. 底部導覽列
導入資訊式頁尾(Informative Fat Footer)、巨型導覽選單(Mega Menu),以提升系統操作便利性及增加視覺美感。
內容包含:網頁選單、版權宣告、聯絡資訊、內嵌FB粉絲團、完整通訊地址(含郵遞區號)、聯絡電話(含區碼)
11. 系統流量分析
Google Analytics 4
設定GA4流量分析工具
依日週月、來源、關鍵字、國家別、瀏覽內容…等詳細報表分析。
12. SEO優化
Title、Keywords、Description
自訂網頁名稱
提供SEO文章寫作建議
GOOGLE SEO檢查
GOOGLE搜尋預覽
結構化數據有效
13. 標籤(Tags) 功能設定
- 標籤(Tags)相關頁面的功能與設定
- 標籤設定:建立標籤,並為每個標籤指定名稱和描述。
- 將標籤添加到頁面: 建立標籤頁面。
- 設定模組:透過模組件設定特定標籤下的內容顯示。
- 版面樣式設定: 根據設計需求,調整模組樣式排版。
- 優化SEO:標題、描述和關鍵字,良好的頁面結構和URL結構。
14.代理品牌 詢價清單
(1) 程式說明:
「Inquiry Cart詢價清單」通常用於B2B網站上的一個功能。
此功能讓客戶在網站上瀏覽產品時,將有興趣的產品加到「詢價清單中」,然後在完成瀏覽後,送出詢問或詢價的需求。
(2)「詢價清單」包含以下功能:
- 添加產品:
客戶點擊產品的詢價按鈕,將產品加到他們的「詢價清單」中。 - 管理產品:
客戶可以查看他們已加到「詢價清單」中的項目,可以修改數量、刪除不需要的產品或更新其他相關訊息。 - 送出詢價:
客戶在完成瀏覽後,可以透過填寫表單將他們的詢價需求送出給公司的業務團隊。 - 「詢價清單」可以幫助客戶管理他們有需求的產品,並提供一個簡單的方式送出詢價。
它提供了一個機會與潛在客戶進一步互動並提供相關訊息,從而促進業務機會的產生。
(3) 頁面說明:
- 主分類頁面->產品->產品介紹頁:
- 產品標題與照片
- 產品說明
- 產品規格
- 產品功能介紹
- 產品配件或瀏覽其他產品
- 產品搜尋
四、相關教學影片
網站搬家教學:換新網站,舊網址該怎麼辦?重新導向!
相關文章:
https://des13.com/youtube/1600-youtube14.html
網頁設計 網頁標題 page title 修改
網頁編輯:聯絡我們表單主旨修改
響應式網頁設計:在桌機與手機顯示不同圖片(客戶問題回覆)
網頁設計 網站教學:怎麼做 響應式網頁?
相關文章
網站教學:無須程式碼,輕鬆做網頁
https://des13.com/youtube/1585-youtube3.html
網站後台系統:全功能、簡單易用的理想選擇
https://des13.com/faq/cms/joomla/1566-backend.html
網頁設計 頁面編輯器 Page Builder :無需寫程式碼:輕鬆上手教學
https://des13.com/news/1563-page-builder.html
網站優化 網站教學:產品目錄拖拉排序
相關文章參考:
B2B 網站管理 - 多國語系、產品展示、詢價清單 全方位教學
https://des13.com/faq/cms/joomla/1565-web.html
B2B 企業網站 建置教學 :全方位 產品目錄 、 詢價清單 與 網頁設計 說明
網站架設 網頁設計:網站類型與成本費用說明
https://des13.com/news/1578-web.html
推薦閱讀:全後台模組化形象官網
簡易電子書下載:一頁式網頁設計電子書
如果您喜歡我們的文章,歡迎分享!也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網,符合各式商業模式與需求,請參考:https://des13.com/service/rwd.html
Written by Ring
作者:益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗