前端三十|19. [FE] 如何實現網站 SEO?

Schaos
Schaos’s Blog
Published in
7 min readOct 5, 2019

--

一個好的想法,在好的團隊共同協作之下可能可以成為好的產品,但如果市場不知道有這樣好的產品存在,前述所有的好,也只能淪為白功;在這個資訊爆量的時代,如何從海量的網站中脫穎而出,成為被市場看見的那一個,也就成了每間公司都在追尋的聖杯。

知道聖杯就在那,但實務上該如何做呢?這就是今天我們要討論的主題。

本系列文已經重新編校彙整編輯成冊,並正式出版囉!

前端三十:從 HTML 到瀏覽器渲染的前端開發者必備心法好評販售中!

喜歡我文章內容的讀者們,歡迎您前往購買支持

SEO

網站 SEO,也就是網站搜尋引擎最佳化(Search Engine Optimization),指的是讓網站順應搜尋引擎的演算法進行修改,使網站更容易被使用者看到。

乍看之下很弔詭對吧,我們又不是搜尋引擎的開發者,要怎麼知道演算法中重視的內容是什麼呢?別擔心,搜尋引擎霸主 Google 一直以來都有在新聞、社群媒體、每年的 Google IO 等場合公開說明他們的搜尋演算法會參考哪些標的,以及哪些內容會造成負面影響。知名且權威性的數位行銷媒體 Search Engine Land 更是每年都會將這些公開資訊收攏整理,並製成類似元素週期表的形式呈現:

圖中的主要區塊是「基本影響因子」,右上角則是「負面影響因子」,右下則是「新興影響因子」;綜合這些影響因素,不難看出一個網站除了內容品質之外,程式品質對 SEO 的影響也蠻巨大的對吧?接下來就依照這張圖,從前端的角度來思考看看如何才能優化 SEO 吧~

影響因子

基本影響因子包含了以下六項:內容架構標題HTML可信度連結使用者,其中最直接與前端相關的,毫無疑問就是 HTML 這項,而 HTML 的內容除了決定頁面顯示時的結構外,也會大幅度的引響搜尋引擎爬蟲如何解讀這個網站。

HTML

首先是每個網站理論上都要加上去的標題 & 描述,也就是大家都很熟悉的:

<head>
<title>Title</title>
<meta name="description" content="Description">
</head>

--

--