從前端設計的角度來實踐SEO！ - Astral Web 歐斯瑞有限公司

本文將提供您SEO-friendly的幾項HTML設置方針：結構化頁面，正確使用H 標籤，設置Micro Data，設置麵包屑，建立Title和Meta標籤等等。

RecentPosts 前端開發：使用@supports來檢查瀏覽器支援性 前端開發：解決sliderjs垂直滑動時出現的高度問題 Magento2開發–設置排程群組 前端開發：解決SASS的禁用警告“Using/fordivisionisdeprecatedandwillberemovedinDartSass2.0.0.“ 前端開發：讓你的Bootstrap4下拉選單支援多層次選單 文章分類 Shopify Magento Magento2開源版 Magento2商業版 電子商務 Zendesk Mailchimp Akeneo PIM Oracle 網站技術與設計 Adobe教學 前端開發 後端開發 網站測試 Wordpress 行銷與實用好文 最新動向 文章彙整文章彙整 SelectMonth May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2) 關於歐斯瑞 Back 工作機會 Magento Back Magento解決方案 Back Magento服務 MagentoOpenSource MagentoCommerce MagentoCommerceCloud MagentoOMS MagentoXMiraklB2B2C商城 MagentoforB2B/B2E Magento內部系統串接 Back ERP管理系統整合  PIM商品管理系統整合 POS系統整合 CRM客戶管理系統整合 Magento外部系統串接 Back 各國金流系統 第三方客服系統 Magento健檢中心 Back Magento1升級Magento2 Magento維運服務 MagentoforHeadless&PWA Back MagentoforHeadless&PWA Shopify 企業電商顧問 Back 電商轉換率分析CRO 網站速度優化 AWS主機伺服器建置維運服務 成功經驗 Back 客戶成功案例 客戶回饋 新知分享 Back Magento Shopify 聯絡我們 從前端設計的角度來實踐SEO！ByAstralWeb7yearsagoNoComments首頁 / 網站技術與設計 / 前端開發 / 從前端設計的角度來實踐SEO！ 搜尋引擎有兩個主要功能： 爬行網站並建立索引。

提供搜尋使用者最相關的網站排名列表。

搜尋引擎優化（SEO，SearchEngineOptimization）就是讓網站在搜尋引擎產生的列表中有較好的排名，進而獲得流量。

就前端工作者而言，搜尋引擎優化(SEO)的首要工作要從網頁的結構化開始做起，並且同時考量使用者體驗。

結構化的網頁 為了加速搜尋引擎正確了解網頁的資訊，將網頁資訊有結構的呈現給搜尋引擎是相當重要的事情。

而為了實現網頁的結構化，我們可以使用以下幾個方法： 1.使用HTML5結構標籤(語意標籤)Structural/SemanticElements HTML5有許多結構標籤(語意標籤)可以使用，以下是常用的標籤例表。

用語意標籤製作HTML5文件的好處有： 看標籤就可以知道哪個部份是標題或選單。

搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊。

之後的維護工作變得更簡單與容易。

2.正確設置

,, ~是設置標題用的標籤，其中,,這幾個html標籤對SEO都有很大的加分作用，尤其是，通常用來強調網頁最重要的部份，可以設置成網頁標題或是文章標題；至於,,相對的就不是那麼重要，可以忽略。

既然是標題用的標籤，就不適合用來標記整段文章。

如果要強調整段文章的話，可以用來加粗整段文章或是修改css，調整文字的顏色，尺寸等。

~標籤必須要照著順序排下來，而且中間不能有斷層，也就是說你不能設了，標籤而省略，但是你可以省略保留以及。

不論是→→，或是→都是不利於SEO的。

另外，一個網頁也許有多個段落，所以你的設置可能變成這樣：→→→→→。

這樣子也是可以的。

3.Microdata Microdata是一種結構性的標示，可以用來表示網頁內容的語意。

目前Google，Bing，Yahoo三大搜尋引擎透過Schema.org共同推動Microdata，所以您可以直接使用Schema.org所定義的標記。

Microdata(微資料)是屬於HTML5的一部分,目的是希望網頁設計師在設計網頁時可以有方法可以標示每個字串的含意,讓搜尋引擎更清楚的了解到每個網頁想要表達的意思，並且簡化了RDFa與Microformats的複雜度。

例如「歐斯瑞」對搜尋引擎有許多不同的含意,可能是指姓名、電影名稱、產品名稱、公司名稱等……，那搜尋引擎要如何了解這個名詞指的是什麼呢？這就是Microdata(微資料)發揮的地方。

想了解更多，你可以參考我們之前的文章： 善用SCHEMA標記，讓搜尋引擎更容易了解你的內容！ 利用GOOGLE的STRUCTUREDDATATESTINGTOOL檢查SCHEMA標記是否正確 4.breadcrumbs路徑導覽麵包屑網頁設計 麵包屑在整個網站中扮演了重要的導航角色，不僅可以讓使用者清楚知道目前所在位置，更方便使用者回到上級目錄，也減少了使用者點擊次數。

使用麵包屑的同時，別忘了用schema.org向搜尋引擎宣告他「麵包屑的身份」。

首頁›第一級目錄›第二級目錄 ›現在頁面 5.Title與Meta標籤 Meta標籤是向搜尋引擎介紹網頁資訊的好方法。

在搜尋引擎開始檢索網站時，最先遇到的便是及標籤。

適當的說明可以幫助搜尋引擎了解網頁資訊，並在適當的時候將資訊呈現在搜尋結果中。

想了解更多？你可以參考相關資訊：讓Google識別的中繼標記 網頁標題 網頁標題 這個標記的內容通常顯示為搜尋結果(以及使用者瀏覽器)中的標題，標題可供使用者快速掌握搜尋結果的內容，瞭解搜尋結果與查詢內容的相關性，因此十分重要。

一般來說，使用者會依據資訊的主要內容決定要點閱的搜尋結果，所以請盡量在您的網頁上提供簡明且具有描述性的網頁標題。

你可以參考Google的相關資訊：查看您的網頁標題和摘要 meta的存放位置 …標籤須放置在….之間。

如： 關鍵字 關鍵字須用逗號(,)隔開；最好不要有空白，例如：客製化Magento網頁設計，因為有些搜尋引擎會將它們視為三個關鍵字。

網站描述 沒有給網站描述時，搜尋引擎通常會自動抓網頁的前25字做為網頁內容摘要，呈現在搜尋結果上。

但有時網頁的前25字可能未必能表達文章的宗旨。

網頁隱私 用來告知搜尋引擎該網頁是否可被搜尋，並且有幾個參數可作設定： noindex：不要檢索。

nofollow：只檢索該頁，不檢索該頁裡的鏈結。

noindex,nofollow：搜尋引擎的小蜘蛛到這裡時，就會停止，不作任何的檢索。

作者 網頁編碼 中文網頁較常使用big5，但有時一些特殊字元則會出現?所以建議將網頁編碼設為utf-8。

網頁路徑 網頁相容模式 這部分若沒指定，會依照使用者所使用的瀏覽器的版本為主，因此可利用此語法跟瀏覽器說，用那個版本來作瀏覽。

關閉圖片選單 關閉滑鼠移到圖片上方，出現儲存圖片的相關控制選單。

宣告自然語言(中文，英文…) 你可以參考我們之前的文章：4個SEO優化不容錯過的設定！ 6.圖片與影片的優化： 為了讓搜尋引擎更容易了解圖片和影片的資訊，我們必須針對圖片和影片做一些設定： 圖片優化： 替代文字ALT 指定寬度及高度 為圖片取個有意義的檔名 在圖片週圍添加相關的文字訊息 影片優化： 製作影片時為影片增加Metadata，為所有的影片建立一個瀏覽清單，該使用者可以輕易找到你的影片。

使用sitemap讓搜尋引擎知道影片的存在，並使用schema.org的標記你的影片。

儘量將影片放在網站相同域名底下。

如果使用將影片放在Youtube，那就建立一個專業的Youtube頻道，將影片連結自己的網站，讓其他人可以嵌入你的影片，適當的使用關鍵字及影片描述。

若是使用iframe嵌入影片，可使用title標籤描述影片。

創造一個較好的使用者體驗環境： 1.減少使用者點擊的次數 根據「three-clickrule」，如果使用者按了三次滑鼠按鈕，連續點選了三個不同階層的導覽超連結，卻還是找不到需要的資訊，通常就會失去耐心一走了之。

所以，導覽系統最好不超過三層。

因此，設計一個扁平化的網站架構是相當必要的。

但如果您的網站擁有清楚的導覽(navigation)，適合給予使用者提示的訊息，讓使用者能夠不費力思考如何點擊，直接進行下一步，我想他們也不會介意多點擊幾次的。

2.響應式網頁設計 隨著智慧型手機的普及，上網裝置愈來愈多元，為了讓使用者不論使用何種尺寸的螢幕拜訪你的網站，都能獲得良好的閱讀體驗，在不同的解析度的裝置中，呈現不同的排版是一項必要的工作。

而為了達成這個目的，我們可以專門為行動裝置開發行動版的網站，同時擁有電腦版及行動版(手機版)的網站；也可以做響應式的設計讓網站可以依據使用的裝置的解析度大小，自動調整成最適當的版面。

3.錯誤頁面 自訂404頁面 404網頁是指使用者嘗試連結您網站上不存在的網頁時所看到的網頁。

提供適當的連結及資訊，並鼓勵他們進一步瀏覽您的網站。

設定301導向 當您的網站搬家時，您需要設定301導向，將使用者導向到新的網站去。

如果搜尋引擎使用原來的網址訪問你的網站，得到301錯誤，那麼搜尋引擎就知道你已經更換了網址，下次搜尋引擎蜘蛛就會使用新的網址來索引你的網站。

同時，舊網站的權重也會轉移到新的網站去。

4.加快網站載入的速度 使用正確的圖片尺寸。

例如在產品目錄頁使用小尺寸的縮圖，進到產品說明頁面時才使用較大的圖片。

儘可能減少圖片的檔案大小，可參考線上免費工具： Smushit ImageOptimizer 「csssprites」將網站所用到的圖示等合併成一張大圖片 設計網頁時，常會用CSS來設定一些標籤圖示，讓畫面更美觀。

雖然這些圖示的檔案都不大，但是如果數量一多，對主機也是會造成負擔的，這時候我們可以將小圖示整合成一張大圖，再另外寫CSS去設定圖示的位置及尺寸大小。

線上免費工具： CyotekSpriter CssPrites 其他調整 啟用gzip壓縮，節省流量 不要包含不必要的JavaScript 儘可能壓縮你的css及JavaScript 使用外部css及JavaScript 刪除任何不必要的元素 儘可能簡化你的code 不要使用表格來做頁面的佈局(排版)，當網頁內容有需要用表格呈現時才用使用表格。

您可以使用一些免費工具來檢測你的網頁，並依檢測結果來調整。

免費線上分析網頁載入速度工具： Pingdom GTmetrix PageSpeed 其他 向網站提交sitemap 使用robots.txt限制搜尋引擎對無需檢索的部分進行檢索 為每個連結增加title標記 為每個連結增加rel標記 儘可能使用短網址 保持網址的一致性 如果您是跨國服務的網站，多語系網站，那一定得使用hreflang提供正確語言和地區的網址 儘量減少使用flash，搜尋引擎無法檢索flash的內容 記得為frame加入title標題 使用rel=”nofollow”禁止權重的傳遞 使用有意義的網址，不要使用參數 減少無謂的連結， 使用rel=”canonical”連結元素指出偏好網址 避免太多次的重新導向 避免重複的內容 檢測追蹤工具 在網站安裝GoogleAnalytics追蹤碼，請參考網站管理員工具。

以上是我們提供的方法，歡迎大家參考！     RecentPosts 前端開發：使用@supports來檢查瀏覽器支援性 前端開發：解決sliderjs垂直滑動時出現的高度問題 Magento2開發–設置排程群組 前端開發：解決SASS的禁用警告“Using/fordivisionisdeprecatedandwillberemovedinDartSass2.0.0.“ 前端開發：讓你的Bootstrap4下拉選單支援多層次選單 文章分類 Shopify Magento Magento2開源版 Magento2商業版 電子商務 Zendesk Mailchimp Akeneo PIM Oracle 網站技術與設計 Adobe教學 前端開發 後端開發 網站測試 Wordpress 行銷與實用好文 最新動向 文章彙整文章彙整 SelectMonth May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2)  00000 歐斯瑞-一個對網路世界充滿熱情的團隊 歐斯瑞提供免費電商知識，並協助各大類型之企業 電商諮詢建置與 Magento和 Shopify相關的電商專案。

立即聯繫我們 上一篇文章新手必看─6個改善網站速度的技巧(含WordPress/Magento)下一篇文章使用網址產生器，追蹤Facebook臉書廣告效益的方法！推薦文章前端開發：使用@supports來檢查瀏覽器支援性2022-05-26 0前端開發：解決sliderjs垂直滑動時出現的高度問題2022-05-24 0Magento2開發–設置排程群組2022-05-20 0前端開發：解決SASS的禁用警告“Using/fordivisionisdeprecatedandwillberemovedinDartSass2.0.0.“2022-05-20 0Categories:  前端開發網站技術與設計Tags:  SEO,搜尋引擎優化,前端開發,網站技術與設計 留下回應取消回覆 你的電子郵件地址不會被公開.姓名* 電子郵件* 網站 維運服務