Jean Ching Design Studio

我是Jean,身邊的動物們都是我的一種意象，從左至右分別是..豹：效率品質、兔子：單純善良、熊：勇於挑戰。

我是Jean,我們都是我的一種意象，分別代表"效率品質"、"單純善良"、"勇於挑戰"。

尚在設置中..

更多作品
請往右滑

SMZB Website

2019-7

LDsport Website

2020-2

娛樂城

2018-7

FR Pay

2019-1

520LOVE 活動頁

2020-5

樂動票選活動頁

2020-5

山貓直播

2019-6

AK體育APP

2020-6

萬億用戶調查表

2017-10

icon套件設計

2020-4

按鈕換色

2020-6

Hi~ 歡迎來到我的設計工作室(Jean Ching Design Studio 「簡稱JCDS」) 。

我是網頁 / 平面設計師Jean，目前有在進行網頁接案，對我來說，「網頁」就是客戶在線上的「門面」，透過每次的案件設計，從中激發靈感之外，也期許自己能不斷精進、提升專業知識，期待能帶給客戶滿意、好操作的線上平台！

兼職接案，讓我更享受與客戶面溝通、講解需求的細膩過程，從中了解他們對自己孩子(網頁)的渴望。平時我也喜歡繪圖，利用自己專屬的繪風，詼諧地設計出朋友圈的生活和意象，不僅能製造驚喜，也帶來了周圍更多的歡笑。

空閒時間，我熱愛戶外極限運動 — 攀岩抱石，這真的是一項很有趣的活動，邀請有興趣的朋友一起抱石『趣』呦！除此，近期也在學習做甜點，期待之後能把設計的技能，帶到甜點製作，不僅好吃，更要求美觀！

另外我也在經營自己的FB粉絲專頁，兩種畫風分別有「Q版插圖」和「美式插圖」。在JCDS我將陸續增加更多相關的內容及有趣的事物，並在此紀錄我的學習筆記，如果你感到好奇，歡迎點擊首頁的『熊熊』看看喔~

我也喜愛認識新朋友，如對我有興趣，請聯繫我~ :D

Mail

jc2810ouo@gmail.com

粉絲專頁

履歷連結

■ ╬ ×

SEO網站優化

▼SEO網站優化
SEO簡介

SEO簡介

SEO（Search Engine Optimization）搜尋引擎最佳化。

影響SEO方向

網站公司 - 網站架設、主機維護

營運單位 - 產品銷售、消費者回饋與觀察

行銷單位 - 支援優化、更新內容

優化團隊 - SEO技術執行、策略擬定

“SEO專案沒有結案的一天，只有階段性任務的完成”

Step 1. 擬定操作策略
網站健檢
案件履歷
行銷STP
競爭對手分析

Step 2. 基礎優化調整
結構調整
全站差異化
內／外部連結規劃
內容配置建議

Step 3. 進階優化規劃
手機版網站優化
多語系網站優化
網站速度改善
社群SEO建議

成效好壞必須依據當初預計達成的目標來看，且必須依據網站類別、使用者意圖來評估。

成效評估標準包括加入的會員名單數、網站瀏覽人次、首頁跳出率、訪客回訪率、績效指標的設定等，每種數據背後顯示的意義也不同，因此成效評估不能單一而論。

相關來源

SEO優化入門與技巧

SEO優化入門與技巧

(1) 提供獨特而有用的內容

在生產內容的時候，永遠要考慮：我現在所提供的內容，對使用者可以帶來什麼幫助？是使用者想看到的嗎？我能提供有別於他人的價值嗎？

對SEO來說，好的內容應盡可能的原創，建立獨特的價值，有助於解決使用者在搜尋時想要解決的問題。

(2) 社群媒體經營

當社群分享數變多，你的內容被人們看到且連結的機會也跟著增加。

當認識你的人變多，人們在搜尋結果中看到標題寫著你的品牌，因熟悉而決定點擊你的機會可能提高。

社群媒體上的品牌傳播，有助於增加人們在搜尋引擎搜尋你的「品牌+相關字詞」的次數，連帶可能幫助到相關字詞的排名。

(3) 撰寫網頁標題與描述

獨特、準確而簡短的網頁（Title）與描述（meta Description）不僅影響搜尋引擎的索引，同時也是使用者在看到搜尋結果時，第一眼區別你的網頁與其他網頁的方式，影響人們點選連結的意願。

另外h標籤、簡短url、圖片alt撰寫，也會有所影響。

(4) 善用內部連結

透過文章內的超連結至站內的其他相關頁面，除了可以導引使用者繼續閱讀其他內容，也可以幫助網路蜘蛛搜爬網站與收錄頁面。

意圖行銷

(1) 結合大數據，找出真實的消費者樣貌

提供一個更完整的消費者樣貌，更能協助品牌明確地了解消費者意圖。

(2) 善用各式智慧工具，打造全方位高關聯廣告

意圖結合SEO字詞規劃：

產業大字雖然能接觸到最多的潛在消費者，但也代表著競爭程度相對的高，甚至有的搜尋只是想了解產業知識並非有意購買。

消費者需求通用字，多半是消費者想先知道是否有可以滿足他需求的服務或產品，處於還沒決定要買什麼產品的階段。

如果都能先做好品牌字、產品字，再開始進攻消費者需求通用字、產業字，則會是SEO最理想的作戰策略。

品牌字 > 產品字 > 消費者需求通用字 > 產業字

跨國SEO

(1) 多語言 & 多地區網站

多語言網站- 以語言的角度出發，如果你的網站的內容含有2種以上的語言，你的網站就是多語言網站。

多地區網站- 以國家/地區使用者的角度出發，以網站是否明確指定多地區為判斷標準。

多語言和多地區網站是可以同時存在的。

(2) 網頁中的語言是否相當明確

如果一定要並排顯示，你可以使用robots.txt來防止Google檢索網頁內自動翻譯的內容。

(3) 重複的內容和國際網站

重複內容可是SEO的一個大忌。如果要在不同網址上提供同樣內容給相同使用者 (例如，如果jeanouo.uk/ 和 jeanouo.com/ex/ 同時顯示了給香港使用者內容)，就應該選一個偏好的版本，並適當地進行重新導向 (或使用 rel=canonical 連結元素)。

(4) 網址的安排

根據Google的官方資料說明，Google在判斷網站的語系時，主要是根據網頁的內容來判斷的，但是網址的安排也是非常的重要。例如，.ca網址表示為加拿大的子網域或.fr來表示為法文的子網域。

詳細請見網域與網址這篇

內容經營

為了讓網站相關的關鍵字曝光，必須提高網站與字詞的相關度。以提升網站的E-A-T，E-A-T也是影響搜尋排名的因素。

當不斷產出在該領域中專業、權威且可信任的內容，便能提升網站整體的E-A-T分數。

Expertise - 網站內容是否具專業性（原創且有根據的內容）

Authority - 在該專業相關網站中的權威性，與在相似網站中的優劣性。

Trust - 會產生與個人重要訊息相關的網站是否值得信任且安全。（例如：網站憑證是否為Https）

使用者體驗

Google使用者體驗指標為：為：LCP、FID、CLS。

First Input Delay (FID) - 使用者首次可以和頁面互動的時間（可能是連結、按鈕或是跳出式元素）

Largest Contentful Paint (LCP) - 顯示最大內容元素所需時間

Cumulative Layout Shift (CLS) - 累計版面配置轉移，避免網頁佈局突然改變

詳細請見SEO相關工具這篇的"網站測速工具"

相關來源
搜尋引擎演算法

搜尋引擎演算法

熊貓演算法--Panda Update(針對網站品質)

高品質、原創的內容，將會獲取Google搜尋引擎的信賴'；而複製、低品質、堆砌文字的內容，將會是熊貓演算法首要打擊的對象。

打擊低品質內容網站，獎勵提供原創、吸引人內容的網站。

過於精簡的網站，文字、主題相關性較低。

不同網站、網址，但重複出現的相同內容。

低價值的內容，對使用者沒有價值。

內容農場 (Content Farm)，僱用大量作家撰寫大量的短文章，或是使用搜爬程式，自動蒐集不同網站內容，更新在自己的網站當中。

網站中付費廣告版位比例過高，缺少原創內容。

多為網站連結的低價值內容頁面，例如黃頁網站。

搜尋結果與網站內容不相符。

重點：應外部連結相關性高

企鵝演算法--Penguin Update(針對網站連結)

網站外部連結的經營，以"提供優質的使用者體驗"為出發點產生優質的外部連結。

如網站品質太差或是相關性不高，搜尋排名很有可能會受到企鵝的懲罰。

避免外部連結文字不相干，讓使用者感到被欺騙。

以提升內容相關性為出發點去規劃外部連結。

創造吸引人的網站內容獲取自然的外部連結。

重點：避免重複內容、精簡內容、廣告比例高及使用關鍵字堆疊

蜂鳥演算法--Hummingbird Update(針對搜尋行為)

使用自然語言處理，透過理解搜尋語句的意思，來確定使用者的搜尋意圖。

打擊大量關鍵字充斥、低質內容的網站。

RankBrain演算法

以機器學習為核心的演算法出現。剔除低品質的文章，提供更精確的搜尋結果。

Possum（負鼠演算法）

讓本地搜尋的結果更加準確(Local Pack)。

讓那些具有特定區域服務內容的中小企業，更有機會在這趨勢下打敗大型品牌。

Fred（佛瑞德演算法）

較注重在內容品質上的把關。

2017年下旬開始，Google對於網站的內容要求越來越高，文字敘述的部份變多了，以往2行的網站描述，現在都會到4-5行。

Google為了更完善的使用者體驗，meta description應撰寫跟網站內容相關度高而且精準的內容，才有辦法透過這些敘述吸引企業想要的點擊。

相關來源

網域與網址

通用頂級域（英語：Generic top-level domain，縮寫為gTLD）是網際網路名稱與數字地址分配機構（IANA）管理的頂級域（TLD）之一。該機構專門負責網際網路的域名系統。

基礎建設頂級域（.arpa）

國家及地區頂級域（ccTLD）

國際頂級域（IDN）

基礎建設頂級域（.arpa）- 國際化國家及地區頂級域

通用頂級域（gTLD）

通用頂級域在1985年1月創立，當時共有6個通用頂級域，主要供美國使用：

最初創立的通用頂級域
通用頂級域	用途
.com	商業機構；現無限制
.edu	供教育機構使用
.gov	供美國政府的聯邦、州及地方各級部門使用
.mil	供美國軍事機構使用
.net	原供網絡服務供應商使用；現無限制
.org	原供不屬於其他通用頂級域類別的組織使用；現無限制

1998年10月，網際網路名稱與數字地址分配機構 (Internet Corporation for Assigned Names and Numbers，ICANN)成立並接收管理域名的工作。ICANN在2000年11月16日公布其選擇的7個新通用頂級域名：

ICANN，是位於美國加利福尼亞的非營利社團，主要由網際網路協會的成員組成，建立於1998年9月18日，目的是接管包括管理域名和IP位址的分配等與網際網路相關的任務。

新通用頂級域
通用頂級域	用途
.aero	（取自航空工程一詞對應的英文翻譯「aeronautics」）與航空相關的網站所開放的贊助類頂級域。
.biz	屬商業域名，源自「business」
.coop	專供合作社，源自「cooperative」
.info	主要針對提供信息的網站或組織申請，但沒明確限制，源自「information」
.museum	專供博物館使用
.name	代表個人域名、個人用戶註冊，但不限制註冊者身份
.pro	具特定專業人士和組織註冊，如律師、會計師、醫生、工程師等，源自「professional」

統整

現在使用中的通用頂級域：

通用
通用頂級域	用途
.com	供商業機構使用；但無限制
.info	供資訊性網站使用；但無限制
.moe	供ACG從業者與愛好者使用；但無限制
.net	原供網絡服務供應商使用；現無限制
.org	原供不屬於其他通用頂級域類別的組織使用；現無限制
.xyz	通過新的方式向全球人類提供新的交流平台，包含X、Y、Z世代的全球社群；無限制

通用限制
通用限制頂級域	用途
.biz	供商業使用
.name	供家庭及個人使用
.pro	供部份專業使用

贊助
贊助頂級域	用途
.asia	供亞太地區的公司、組織及個人使用
.cat	供加泰隆尼亞語/文化使用
.coop	供聯合會 (cooperatives)使用
.edu	供教育機構使用
.gov	供美國政府及其屬下機構使用
.int	供由條約而成立的國際性機構使用
.jobs	供求職相關網站使用
.mil	供美國軍事機構使用
.mobi	供手提電話等裝置網站使用
.museum	供博物館使用
.post	供郵政服務使用
.tel	供連接電話網絡與網際網路的服務使用
.travel	供旅行社、航空公司、酒店及旅遊協會等機構使用
.xxx	供色情網站使用

非官方TLD及建議
通用頂級域
.berlin
.sco
.love

相關來源

SEO相關工具

SEO相關工具：

Search Console(Google的網站管理員工具)

Google Analytics(簡稱GA，Google分析)

Google Ads(關鍵字規劃工具)

Bing 網站管理員工具

PageSpeed Insights(網站測速工具)

Pingdom(網站測速工具)

WebPageTest(網站測速工具)

Chrome擴充功能 Web Vitals(網站測速工具)

Chrome開發者工具 Linghthouse(網站測速工具)

Chrome開發者工具 Network(網頁速度狀態)

Google Trends(Google搜尋趨勢)

結構化測試工具

行動裝置相容性測試

SEO相關影片：

Google工程師講解網路蒐爬機制
SEO從網站建立一開始

SEO從網站建立一開始

一開始先用樹狀圖把想要的內容條列出來，方便內部思考、規劃與溝通。

範例：

(1)關於我們 - 公司簡介、營業項目、公司歷史、未來展望、企業文化與理念與得獎認證等。

(2)產品、服務項目介紹 - 產品種類、特色、規格、業務範圍、產品使用注意事項等，另外產品購買和詢價管道。

(3)客戶見證 - 成功案例分享。

(4)公司能力與優勢 - 專業技術、專利與品質控管等。

(5)支援服務 - 提供使用者手冊或型錄和FAQ、保固維修等服務。

(6)聯絡我們 - 公司聯絡資訊、交通資訊、服務據點等。

(7)新聞中心 - 有關公司的新聞內容與活動資訊、活動相簿、優惠資訊。

(8)人力資源 - 徵才資訊、工作環境、薪資福利等。

(9)投資關係 - 財務、股務資訊，投資消息等。

(10)社會責任 - 社會關懷與公益參與。

HTML
- ▼HTML
- <abbr>
  
  CSS
  
  <p>
  <abbr title="Cascading Style Sheets">CSS</abbr>
  </p>
  
  abbr屬性
  
  <abbr>屬性專用在英文縮寫解釋上，當hover時，可以加上attributes的title來標示縮寫全文。
- <address>
  
  Written by Jean.
  Visit us at:
  jeanouo.github.io
  新北市汐止區
  
  <address>Written by
    <a href="mailto:jc2810oo@gmail.com">
      Jean
    </a>.
    Visit us at:
    jeanouo.github.io
    新北市汐止區
  </address>
  
  address屬性
  
  當寫道地址時使用<address>屬性。
- <area>
  
  <img src="img/code/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
  <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>
  
  area屬性
  
  可利用<area>屬性內的設定，去自定義img內的多邊形區塊連結。
  
  (1) 圖片本身設定<usemap>屬性值，用id方式去搜尋<map>屬性內相同的name id做連結。
  
  (2) 再在<map>屬性裡面定義許多<area>屬性區塊，並定義它的形狀值(shape)為預設default | 矩形rect | 圓形circle | 三角形poly，再用coords屬性值定義形狀點和大小，以及alt、href，以及alt、href。
CSS
- ▼CSS
- 內容尚在更新中..

▼JS

製作"聯絡我們"表單

HTML <form method="post" action="mail.php">
  <div class="formbox">
    <div class="tfbar">
      <label?>
        <b>公司名稱 / <em>Company</em>
          <span class="error"><?php if(!empty($_GET['company'])){echo "必填欄位";}?></span>
        </b>
        <input type="text" class="tf" name="C_company" placeholder="請輸入公司名稱" required>
      </label>
    </div>
    <div class="tfbar">
      <label>
        <b>姓名 / <em>Name</em>
          <span class="error"><?php if(!empty($_GET['name'])){echo "必填欄位";}?></span>
        </b>
        <input type="text" class="tf" name="C_name" placeholder="請輸入姓名" required>
      </label>
    </div>     <div class="tfbar">       <label class="tel">         <b>公司電話 / <em>Telephone</em>           <span class="error"><?php if(!empty($_GET['tel'])){if($_GET['tel']=='1'){echo "必填欄位";}else{echo "格式錯誤";}}?></span>         </b>         <input type="tel" class="tf" name="C_tel" maxlength="12" pattern="[0]{1}[2-8]{1}-[0-9]{3,4}-[0-9]{4}" placeholder="請輸入02-8888-8888..." required>       </label>       <label class="ext">         <b>分機 / Extension       < input type="num" class="tf" name="C_ext" placeholder="請輸入分機">

手機 / Cell

信箱 / Email

javascript

影響SEO方向

網站公司 - 網站架設、主機維護

營運單位 - 產品銷售、消費者回饋與觀察

行銷單位 - 支援優化、更新內容

優化團隊 - SEO技術執行、策略擬定

“SEO專案沒有結案的一天，只有階段性任務的完成”

lorem

Step 1. 擬定操作策略
網站健檢
案件履歷
行銷STP
競爭對手分析

Step 2. 基礎優化調整
結構調整
全站差異化
內／外部連結規劃
內容配置建議

Step 3. 進階優化規劃
手機版網站優化
多語系網站優化
網站速度改善
社群SEO建議

成效好壞必須依據當初預計達成的目標來看，且必須依據網站類別、使用者意圖來評估。

相關來源

SEO簡介

影響SEO方向

SEO優化入門與技巧

搜尋引擎演算法

網域與網址

SEO相關工具：

SEO從網站建立一開始

abbr屬性

address屬性

area屬性

影響SEO方向