Html 密密麻麻好複雜?基礎觀念篇來了!
不知道你是否聽到 Coding 就開始心慌慌? 這種燒腦的事情,不是應該是工程師的專利嗎?
為什麼學個 SEO 還要學打 Code ?
不緊張,其實 Html 相較於其他語法相當好學,據說,只要花上一個月,人人都能學好 Html ,它在 SEO 界佔據著舉足輕重的位置,簡單來說,只要有網站的存在,Html 就不會缺席。今天這篇文章看完,相信你因為害怕而跳動的心會撲通撲通變成欣喜而興奮的悸動,原來,Html 出乎意料的這麼人性化,這麼簡單好學。
首先,在認識一門學問前,我們必須看看它長什麼樣子,才能對於它有個初步印象。

「紫的、咖的、藍的……,看了就好暈……。」
如果這是你對 Html 的第一印象,那它對你來說肯定是個面惡心善的 SEO 夥伴,在認識 Html 之後,你會發現,人家完完整整,有頭又有身體,Html 其實是個樸實無華的好人。

Html 是什麼?
「逼一 逼一 逼一 ,我是 Html (HyperText Markup Language)。」
(英語:HyperText Markup Language,簡稱:HTML)
Html,顧名思義就是一種程式語言。
人和人之間可能用中文、英文、日文……交談,而我們和瀏覽器之間也需要藉由一個語言交談,才能互相溝通,而這時候使用的語言,就是 Html ,瀏覽器藉由閱讀我們撰寫的 Html 語言,讀取並了解其中的意思後,就會將其呈現成我們所看見的網頁外觀,然而,一個網頁中涉及的語法不僅僅是 Html 而已,還有 CSS 和 JavaScript,三者其中的分別在這裡先不細談,簡而言之,Html 就像網頁的骨架,是最為基礎、核心的部分,而後兩者是在骨架上點綴,讓網頁變得更有趣的裝飾。
再回頭看看那張可能不小心惹你生氣的圖,第一眼看來密密麻麻,按住不耐的心情睜大眼睛仔細觀察,你會發現, Html 主要由一個又一個的標籤組成,它就像是網頁的骨架,呈現網頁的基礎架構。

Html 的基本元素 – 標籤
一個又一個的標籤,給一段段的程式碼分組,讓瀏覽器可以快速理解每段程式碼分屬在哪些地方。而每個標籤都是有頭有尾的,頭會以 <標籤名稱> 組成,尾則會多個左斜線</標籤名稱>。
形式:<element>內容</element>
舉例:<title> 麵包屑(Breadcrumbs)是什麼?SEO 優化必備知識! – GHMK 樂水營銷顧問 </title>

這段程式碼告訴瀏覽器我的標題叫做,瀏覽器閱讀過後就會呈現樂水營銷於瀏覽器的標題,你可以在到 麵包屑(Breadcrumbs)是什麼?SEO 優化必備知識! 這篇文章的頁面點擊右鍵、檢視網頁原始碼後就能看到這段程式碼了。
Html 的三大部分
在琳瑯滿目的標籤中,有三個標籤是 SEO 新手一定要知道的,分別是宣告、Head、Body,因為這三個標籤在 Html 界中無所不在。
第一部分 – 宣告:告訴瀏覽器你用 Html 跟它溝通

如果不先說一聲,瀏覽器是沒有辦法理解你是用什麼語言跟它溝通的,必須先「宣告」我要用 Html 跟你說話囉,瀏覽器才知道接著的語言使用的都是 Html ,進而才能夠解讀 Html。
第二部分 – Head:網頁中的頭

網頁的頭範圍就從<head>開始到</head>結束,通常在<head>標籤中會包含網頁名稱、網頁的樣式以及網頁的相關資訊。
第三部分 – Body:網頁中的主體
Body,顧名思義就像網頁中的身體,幾乎我們在瀏覽網頁中看見的所有內容都在<body>標籤當中,文字、超連結、圖片,各種資訊多呈現在<body>當中。

Html 是我們與瀏覽器溝通會使用的一種語言,因此想要做好 SEO 優化網頁時,就必須對 Html 有一定程度的認識,其中的三大標籤:宣告、<head>、<body> 幾乎無所不在,藉由宣告可以告訴瀏覽器我們使用的語言是 Html ,<head> 則乘載的網頁中的各類資訊,像是名稱、樣式,而 <body> 包含的內容更為廣泛,平常瀏覽網頁的文字、超連結和圖片多呈現在 <body> 當中。
結語
總而言之,由於 Html 就像網頁中的骨幹,因此在做 SEO 時,接觸到 Html 就是不可避免的事情,然而,Html 並不是一門很難的學問,是相當有結構的,只要花上一個月,人人都能學好 Html ,這篇文章介紹了 Html 主要是以標籤構成,而最常見的三大部分則是:宣告、<Head>、<Body>,想要看到 Html 語法,只要在網頁中點擊右鍵、檢視網頁原始碼,就能看見了。
想知道更多 SEO 的小知識,你還可以參考以下文章:
麵包屑(Breadcrumbs)是什麼?SEO 優化必備知識!
有沒有聽過糖果屋的故事?
在森林裡,孩子們天真無邪的丟下一個又一個的麵包屑,以為這樣就不會迷路,沒想到回頭一看麵包屑全被動物們吃到一個也不剩,於是,孩子們就此失去了方向。

所以什麼是麵包屑(Breadcrumbs)?
我想聽完剛剛的故事,你或多或少有了答案,麵包屑在網站中替我們指引方向,導覽我們到我們想去的網頁,簡單來說,麵包屑就是有條理的呈現網頁中一個接著一個的路徑。
博客來 > MUJI無印良品 > 美妝保養 > 系列保養 > 敏感肌 > 商品介紹

藉著清楚的分類,我們得以順利的找到我們想要的內容,如果糖果屋裡孩子們的麵包屑沒有被小動物們吃掉,那麼他們也可以藉著麵包屑的導引順利找到回家的路,麵包屑對於 SEO 來說,就是導覽、導引的概念,它為網站做詳細的路線規劃,藉著一個又一個的麵包屑為路標,讓我們順利找到內容。
麵包屑(Breadcrumbs) 的好處還有哪些?
單就童話故事本身,你或許不小心以為麵包屑就只有指引方向這個好處,但是在網站中建立路標,讓使用者可以輕鬆找到他們想看的網頁,這帶來的好處還不只這些。
優化使用者體驗
你有想過,如果一個網站裡沒有麵包屑是什麼感受嗎?這就好比在一個網頁中塞入滿滿的文字,然後每段文字上直接附上超連結,要你自己從中找到想去的網站,如果你有對金閃閃的眼睛,那當然沒問題,但是對一般人來說早就眼花撩亂,良好的麵包屑,可以有效的替使用者減少不必要的時間浪費,因為良好的分類導引可以讓人簡單依序的找到目標網站。
留住使用者的心
麵包屑做得好, SEO 優化沒煩惱!好的麵包屑就會做到清晰明瞭的導引,進而擁有良好的網頁架構,讓每個網頁都被看見,就不會有明明有這個網頁,卻沒有人發現這個網頁存在的問題。
不佔空間的給網站加分
麵包屑不只好吃,還不佔空間,短短的一條導覽就能讓使用者找到需要的網頁。
聽起來這麼棒,所以麵包屑(Breadcrumbs)要怎麼做?
麵包屑對 SEO 大有幫助,但是進入網站還是不知所措,要點哪裡才算用到麵包屑呢?在這裡我們分別介紹 WordPress 網站以及其他網站要怎麼運用麵包屑來優化 SEO。
WordPress 網站
如果你的網站是以 WordPress 經營,那就簡單了,你可以直接安裝麵包屑外掛,不需要太複雜的程序就能建立麵包屑,常見的外掛有 Yoast SEO plugin 、 Breadcrumb ,安裝上去再簡單設定一下就能完成了。
非 WordPress 網站
如果不是 WordPress 網站,那要安裝麵包屑就得自行撰寫 Breadcrumbs Code 了,這方面就會變得比較複雜,建議諮詢會架設網站的工程師,好好規劃麵包屑的階層之間要怎麼安排,接著再來設置麵包屑,一般而言,常見能用來設置麵包屑的 Code 有 Microdata 、 JSON-LD ,建議大家可以根據自己的網站需求選擇。
使用麵包屑(Breadcrumbs)的三大注意事項
或許你有了技術基礎,但是就版面上還是有些小訣竅是需要注意的。
- 每個階層的文字不該太長,會降低易讀性
- 每個階層的連結都必須是有效連結,否則就白分類了
- 分階層是好事,但要注意不該太多層,簡單明瞭才是王道
看完以上,不知道你對麵包屑是否有多一點的認識?其實麵包屑的概念很簡單,就是讓網頁和網頁之間的連結是有條理的,透過清楚的階層呈現,我們才能輕易的找到想去的網頁,也能藉此避免某些網頁的路徑呈現的不夠清晰,而就此被使用者忽略。
如果對於 SEO 你還沒有初步的概念,可以參考:
跟上趨勢,2020 Google 重大更新懶人包!
今年 Search On 的發表會,你看了嗎?這一次更新有了不同於以往的巨大突破,搜尋結果變得更廣泛,同時變得更加精準,除此之外,Google 也宣布未來也會陸續有更多功能的更新。
其中最讓人注意的就是 BERT 上的大量應用,它讓 Google 的搜尋欄變得更人性化,我們不再需要配合 Google 輸入機器才能理解的搜尋關鍵字,而是口語化的說出自己的問題, Google 就能夠找出最契合你問題的答案。
為什麼這麼厲害? BERT 到底是什麼?
BERT 是一個讓機器可以理解字裡行間意義的模型,你可能話中有話,你可能這個詞語在這句話、那句話分別想表達的是不同的意思,透過 BERT ,這些都能被 Google 所理解,也就是說,BERT 讓 Google 搜尋變得更人性化了。
既然這麼好用,為什麼現在才做呢?其實這麼好的東西,Google 早就應用在英文介面裡了,接著 Google 才開始讓 BERT 涉入其他語言領域,在2019年12月,應用 BERT 的語言已經超過了 70 種。

除此之外,Google 還公佈了其他重大的更新:
1. 疫情即時更新
因應現在的疫情,Google 也做了更動,我們可以透過 Google Maps 即時知道現在什麼地方可能發生疫情,進而能即時做相對的預防措施,不久後,使用者也可以直接透過 AR 從 Google Map 上看到餐廳、店家。
2. 輕鬆哼一下,Google 就能幫你找歌
Google 發現一個月內, Google 找歌的搜尋次數竟然破億!在發現了有這麼多的用戶有找歌的需求後, Google 貼心的做了找歌的功能更新,未來找歌不再需要在搜尋欄裡輸入一堆歌詞,只要點下 Google 搜尋列上的麥克風 icon,讓 Google 靜靜欣賞這首歌 10~15 秒,你就能找到答案。
Do you know that song that goes, “da na na na na do do?” We bet Google Search does. 😉 Next time a song is stuck in your head, just #HumToSearch into the Google app and we’ll identify the song. Perfect pitch not required → https://t.co/xOFYTukjOk #SearchOn pic.twitter.com/3LRN4HJMKG
— Google (@Google) October 15, 2020
3. 虛擬實境再進化
Google 現在能主動識別現實中的東西,更多了以圖找圖的功能。
4. 商家資訊即時更新
現在的商家資訊更加完備了,像是營業時間或是是否提供外帶,除此之外也可以知道當前店家的繁忙程度,就可以避免大老遠到現場,才發現四處都人擠人,等了好久還沒辦法買到想要的東西,除此之外,我們也可以知道店家是否有規定要戴口罩、事先預約等需求,Google 藉由 Duplex 的技術有效的即時更新重要資訊。
5. Google 檢索段落
以往在 Google 搜尋欄輸入關鍵字,Google 只會用檢索標題,關鍵字無法直接檢索到網站內部的段落,為了找到更精確的搜尋結果,使用者必須點開每個搜尋結果,瀏覽每個頁面裡的段落,才有可能找到自己真正想要搜尋的內容。
在發現了這個問題後,Google 決定更深入的理解網頁內部,連著段落也要讀進去,未來使用者不再需要點進每個搜尋結果,像大海撈針一樣漫無目的的搜尋自己想看的資訊,Google 會幫你掃過每個網頁內部的段落,幫你找到最適合的答案。
所以 Google 轉而檢索段落了嗎?
檢索方式還是以整個網頁為主,只是在搜索的過程中也會檢索段落,考慮網頁中的內容所表達的意義與關鍵字的搜尋意圖是否相關,進而呈現最相關的搜尋結果。
檢索方式的改變會影響搜尋結果上的網站排名嗎?
會的,雖然 Google 仍然以檢索整個網頁為主,收錄網頁的數量不會因為更新而有所改變,不過因為多了檢索段落的行為,有可能整體內容看似無關,但是只要部分段落與關鍵字相關,就仍然會被呈現在搜尋結果中,進而影響搜尋結果上的網站排名,也就是說,有些網站過去可能因為在一篇文章中談論太多主題而沒有被收錄進來,現在也有可能因為與關鍵字有所關聯而被呈現在搜尋結果裡了。
總而言之,Google 這次做了相當多因應時代需求的更新,像是疫情近期不斷升溫,Google 就增加了疫情、商家資訊的即時更新,讓人們可以有效的即時知道重要資訊,而網頁檢索的方式也做了更動,以往輸入關鍵字後還要耗費相當多的時間點開每個網頁一個一個瀏覽,找到能解答自己問題的段落,現在不必這麼麻煩了, Google 會在檢索過程檢索網頁,同時呈現最符合你搜尋意圖的段落,經過這次的改動,搜尋範圍變得更廣泛且能更精準的迎合使用者的需求。
此外,如果你好奇這次 Google 大量運用 BERT 演算法會對 SEO 帶來哪些影響,
你可以參考:談 Google BERT 演算法對SEO的可能影響
以下是官方在 Twitter 上的相關更新公告:
From helping you with the right spelling in milliseconds to finding that exact passage in a webpage or moment in a video, Google Search uses AI to get just what you’re looking for. #SearchOn pic.twitter.com/gbYYMrIggM
— Google (@Google) October 15, 2020
1 in 10 search queries are misspelled in Google Searches. Soon, a new change will help us at Google make a greater improvement in detecting & dealing with spelling mistakes than we’ve been able to do over the past five years. #SearchOn pic.twitter.com/5Lq4frWh8Y
— Danny Sullivan (@dannysullivan) October 15, 2020
Search On 2020: Whoa. Google can index passages of a webpage vs. the whole page. New algo can zoom into a passage that answers a question and ignores the rest of the page. Starting next month. pic.twitter.com/oRwBS7DOIm
— Glenn Gabe (@glenngabe) October 15, 2020
1 in 10 search queries are misspelled in Google Searches. Soon, a new change will help us at Google make a greater improvement in detecting & dealing with spelling mistakes than we’ve been able to do over the past five years. #SearchOn pic.twitter.com/5Lq4frWh8Y
— Danny Sullivan (@dannysullivan) October 15, 2020
完整 Search On 發表會影片:
參考文章:
How Google indexes passages of a page and what it means for SEO
Google: BERT now used on almost every English query
A deep dive into BERT: How BERT launched a rocket into natural language understanding
一點就通,想打好底子的 SEO 新手必看!
店員推銷什麼,我們就只能相信什麼,在以往的年代,資訊是不對等的。
到了現在,在購買商品前我們仰賴的不再是面對面的店員話術,而是網路。
只要拿起手機搜尋,就可以立即看到網友的評價、使用心得、商品比價,網路豐富的資源幫助我們弭平商家與消費者之間的資訊落差,「搜尋」成為購買商品必經的過程,我們透過搜尋找到問題的答案,對搜尋引擎的依賴是越來越深,因此,搜尋結果排序儼然成為了商家的戰場。

所以,什麼是 SEO ?
SEO 意即 Search Engine Optimization「搜尋引擎優化」,透過了解搜尋引擎的運作規則來優化網站,進而提高目標網站在搜尋結果中的排名,當排序越是前面,瀏覽者點閱進網站的可能性就越大,進而為網站帶來曝光。
SEO 還有什麼效益?
1. 免費又長期的網站曝光
SEO 雖然需要大量的內容累積讓搜尋引擎認識你的網站,但是它帶來的曝光是長期的,一旦成功打好底子,就能製造源源不絕的自然流量,除此之外,比起付費的關鍵字廣告,搜尋者更偏好點進自然排序的搜尋結果。
2. 彌補有限的廣告預算
廣告帶來的流量,雖然能產生曝光,但一旦沒有經費繼續投放廣告,流量就幾近於零,其效益是相當短暫的,如果將廣告比喻作西藥,那麼 SEO 就是中藥,短期內看不到效果,長期下來卻能全方位的調養你的身體,雖然在剛開始耗費時間、精力,但是隨著時間過去,SEO 帶來的效益是長遠的,正好彌補了廣告的不足。
3. 建立信賴感
根據心理學理論可以知道,如果同樣的事物不斷曝光在同一個人面前,那個人就會對這個事物感到熟悉,未來在做選擇時就會自然而然選擇這個事物,舉個例子,說到汽水,我們自然而然就會聯想到可口可樂,這是因為我們的日常充斥著可口可樂,我們的心智已經被可口可樂侵佔了。
良好的 SEO 操作就可以讓你的網站在搜尋結果中排名靠前,進而產生重複曝光,讓人習以為常,不知不覺地對你的網站產生信賴感。

如果想學 SEO ,該如何下手才好?
網路上四處都是 SEO 的文章,看著看著反而是越來越迷茫了,要會打扣、要會設計網站,還要會寫文案,什麼都要會,更讓人害怕的是,影響 SEO 的因素據說有兩百多個,這到底要讓人從哪裡下手才好?
莫急、莫慌、莫害怕, SEO 看來博大精深,但是它絕對沒有你以為的嚇人。
簡單來說,SEO 就像學習蓋一棟房子,好的房子可能是因為良好的架構,也可能是漂亮的裝潢,兩者都會吸引人們入住,優化網站的方式也是,你可以從技術面著手,也可以從內容面開始。
建立良好架構:技術 SEO
從技術面著手,就像是給網站製造一個清晰明瞭的自我介紹,讓 Google 爬蟲可以輕鬆知道你的網站在做什麼,進而精準地將你的網站放置在正確的搜尋結果上。
技術 SEO 包含網站速度、SSL 憑證設定、Sitemap 的建立,這些項目的操作能為你的網站畫上重點,讓 Google 從茫茫的資訊中找到方向,進而認識、收錄你的網站。
擁有豐富內涵:內容 SEO
為什麼我們會使用搜尋引擎?意圖是什麼?不就是為了找到問題的答案嗎!因此,搜尋引擎會將最能解決搜尋者意圖的搜尋結果排前,因為這就是搜尋引擎存在的目的。
內容 SEO 包含關鍵字操作、文案內容撰寫,再者就是讓人一看就想點進來的好標題!
和技術 SEO 比起來,內容 SEO 相對感性,以精煉的文字操弄人心,要如何規劃出讓人不知不覺看完整篇文章的內容?又甚至點進文章的延伸閱讀連結,在你的網站內逛了又逛?這就是內容 SEO 在做的事情了。
總而言之,SEO 雖然剛開始比較費時費力,必須打造良好的網站架構以及豐富且優質的內容,還得等待一段時間讓搜尋引擎認識你的網站,卻能有效得耗費低成本帶來長期效益,因此 SEO 絕對是值得你投資的一門學問。
想學好 SEO ,你還可以看看這些文章: