既 Google 今年五月核心演算法的更新,原創性內容對於 SEO 越來越重要,當擁有好的內容後,勢必加入一些 SEO 的相關設定,就能提升整體 SEO 的分數,而 SHOPLINE 提供部落格功能給各位店家使用,而究竟該如何透過部落格功能寫出一篇有利於 SEO 的文章架構呢?讓我們一起來了解吧!

本文主要會提供文章的架構排版教學,以及一些 SEO 撰文技巧參考,其中會包含部分簡單的 HTML 教學,各位可以將其參考使用在 SHOPLINE 部落格上,讓整篇文章更符合 Google 搜尋引擎的喜好。

這裡不會教學如何使用 CSS 語法來調整部落格,所以並不會影響整個網站的前台設計,僅會提供簡易的 HTML 教學應用在部落格優化上,所分享的語法調整也「僅供參考」,若有相關問題歡迎於文章下方留言,編輯會盡快回答你唷!

SEO 文章架構該怎麼做?

一本書中,都會有章節、單元等層級,而每個章節中可能也會有分小節,這些分層都讓整本書看上去更有架構,讀者在閱讀時也較為容易,如下圖,編輯選用一篇文章作為範例,上半部為沒有分斷落的文章,而下半部則是有做調整的文章,兩者一比較,是不是下面的文章閱讀起來較為容易呢?

文章有分層會讓閱讀起來更清楚
圖一、文章有分層會讓閱讀起來更清楚

由於下半部文章主要加入了「引言」、「段落標題」兩個元素,讓文章更有分層感,而為什麼要做分層這件事呢?

在 Google SEO 入門指南當中有提到,對於 Google 在檢索頁面時,若是頁面中的 HTML 分層明確,會較符合搜尋引擎的喜好,使網站在搜尋結果排名有較好的曝光位置。而透過 「H 標籤」就能夠讓文章有明確的分層,H 標籤總共有六種不同的大小,從 <h1> 到 <h6>,其重要性由大到小依次降低,因此在文章設定 H 標籤建議從 H1 開始。

而在 SHOPLINE 部落格功能當中,「文章標題」就屬於 H1,所以在之後文章內容,我們可以從 H2 開始設定起(H1 建議只使用一次即可,由於 Google 爬蟲會透過 H1 來了解文章內容,若設定超過 1 個或是沒有設定 H1,會使 Google 不容易判斷你的重點是什麼!),首先,我們從後台「網店設計」->「部落格」中新增一篇文章後,請根據以下步驟來調整:

Step 1:將你的文章加入清楚的段落標題

當你打完一篇文章後,如果你有明確的文章架構,也有清楚的分段,就能讓讀者容易閱讀;但若是沒有,建議可以先將你的文章進行分段,在合適的地方加上「段落標題(H2)」,讓文章整體更有層次感。

而如果要使用 SHOPLINE 部落格設定 H 標籤,請先在文字編輯的地方,點擊「 </> 」View HTML 的按鈕,此時會進入 HTML 檢視模式,找到你要調整的段落標題,在程式碼最前面改成 <h2>,最後改成 </h2>。

點擊「 </> 」 View HTML 按鈕可以修改 HTML,找到要轉成 H 標籤的地方,修改後即可
圖二、點擊「 </> 」 View HTML 按鈕可以修改 HTML,找到要轉成 H 標籤的地方,修改後即可

修改完後再點擊「 </> 」View HTML 按鈕,即可看到標題有所改變(如下圖),會呈現淺藍色較大文字,並有一條分隔線的狀態,但這並不是瀏覽網站時呈現的面(註:會因不同版型做變換),這時不妨店家可以點擊下面「更新」並實際到瀏覽畫面觀看,看是否是自己想要的呈現。

設定好 H 標籤後可以自行調整顏色及字體大小
圖三、設定好 H 標籤後可以自行調整顏色及字體大小

若是你想要調整文字色彩,也可以把這個段落標題反白選取,並點擊編輯器上的「字體顏色」,自行選擇想要的顏色;同時也可以調整文字大小,但這裡建議的是,由於目前系統預設 H1 的字體大小是 24 px,所以各位在設定自己段落標題(H2)字體大小時,建議可設定為 22,因為 Google 對於 H 標籤的檢視時,會認為 H1 最大,其後依序變小,所以若你的 H2 大小設定比 H1 大時,會不利於 Google 檢索你文章的架構,想當然就會降低 SEO 的分數。

同理,若你想要設定 H3,就在程式碼中改成 <h3> </h3> 來包住要設定的文字。另外,最好不要跳著使用 H 標籤,請依照數字順序使用,舉例來說,不要設定了 H2 以後,下一個階層就使用 H4,而字體大小也建議一層一層遞減,如編輯建議 H2 字體大小設定為 22px,那 H3 則可設定為 20px,以此類推。 

而關於 H3 之後的使用時間,就可以想像成「段落中的段落小標題」,如下圖示意,店家就能夠自行判斷各個 H 標籤的使用時機。

Google 演算法對於文章段落的喜好,依序從  H1 至 H6 使用 H 標籤
圖四、Google 演算法對於文章段落的喜好,依序從  H1 至 H6 使用 H 標籤

📌 以上有用到程式碼調整的部分,歡迎店家以及讀者參考使用,並請定期留意商店前台呈現狀況!

Step 2:優化你的段落標題 SEO

當各位店家設定好段落標題的 H 標籤後,則可以一並進行 SEO 的優化,大部分有 SEO 觀念的店家都知道,在文章中置入「適量」的關鍵字,有利於文章的 SEO,而有時候硬要在文章中強行置入關鍵字,不僅會讓文章讀起來不順暢,更會降低讀者閱讀體驗,反而讓 Google 認定你的文章不符合讀者的需求,降低文章的搜尋排名曝光。

這時候,段落標題就很適合拿來做關鍵字的置入,舉例來說,如果一個健身用品品牌,今天想透過撰寫「在家健身 7 步驟」的相關文章,並且設定關鍵字為「在家健身」,這時候就可以將段落標題調整為:

  • 在家健身步驟一:………………….
  • 在家健身步驟二:………………….
  • 在家健身步驟三:………………….

不僅比較不會影響文章閱讀的順暢度,同時也可以有效的在文章各段落中置入相關關鍵字。

繼續閱讀文章

後續文章視覺優化怎麼做?

在清楚地將文章分段明確後,此時可以進行文章後續的視覺優化,編輯大概整理了三種可以調整的地方,各位店家可以視情需求進行調整,分別為「設定引言」、「調整文字行距」、「設定文章封面」

文章優化一、設定引言:

文章引言就像是一本書的摘要,簡述文章的重點,藉此勾起讀者閱讀(如下示意圖灰色區塊),而 SHOPLINE 的部落格功能會將文章最前面的文字放在部落格首頁,因此設定文章引言有助於吸引顧客點擊閱讀(如本文圖十),各位店家不妨可以嘗試加入引言,而具體該怎麼用 SHOPLINE 的部落格設定文章引言呢?

可以加入引言提升閱讀體驗
圖五、可以加入引言提升閱讀體驗

上圖為編輯在文章中第一段加入引言後,整體文章看上去就更有層次感,各位店家可以到文章編輯器地方,同樣點擊「 </>」View HTML 按鈕,此時在你想要修改的段落的,將其前後的 <p> 前面加上 <blockquote> 及 </p> 後面加上  </blockquote>,即可變成引言的形式。

在要轉成引言的地方加上 <blockquote> 標籤
圖六、在要轉成引言的地方加上 <blockquote> 標籤

如果店家想要改變引言的樣式,編輯提供了簡單的設定方式,只要店家將前面的<blockquote> 之中加入「style=”background-color:#f6f6f6;border-left:solid 5px gray”」,即可變成如圖五的樣式。

而在圖六中,只要變更紅色字體的部分,就可以簡易調整引言的背景色及左側線條粗細、顏色。至於其餘更多的 HTML 教學,如果店家有興趣可以自行上網搜尋,本文就不多著墨介紹。

📌 以上有用到程式碼調整的部分,歡迎店家以及讀者參考使用,並請定期留意商店前台呈現狀況!

文章優化二、調整文字行距:

文字的上下行距也會影響閱讀的體驗,若是店家想要調整文字的行距,也可以透過簡單的語法來設定。

行距會影響讀者閱讀體驗,可依自己網站調整適合的行距
圖七、行距會影響讀者閱讀體驗,可依自己網站調整適合的行距

如圖八,從兩段行距不同的段落中的程式碼可發現,它們只差了一個語法「style=”line-height:2;”」,只要加入在要調整段落開頭的 <p> 之中即可,而 line-height 後面的數字則是你要設定的行距,各位店家可以自己嘗試設定看看。

使用 line-height 來調整行距
圖八、使用 line-height 來調整行距

而這時候店家可能會想,每個段落都要設定會不會太麻煩,其實若店家是從頭開始打文章的話,只要在第一行設定好後,之後你按下 Enter 換行後的段落,都會是同樣的行距,減少店家再次設定的時間。

📌 以上有用到程式碼調整的部分,歡迎店家以及讀者參考使用,並請定期留意商店前台呈現狀況!

文章優化三、設定文章封面:

最後,文章的封面也會影響讀者閱讀,可以加入在文章的最前面,加入後圖片就會在「部落格首頁」中呈現出來,而店家可以自行設計文章封面,或是購買授權的圖庫,如果想要使用網路上的免費圖庫,針對授權問題,請各位店家在使用時務必注意,以免有侵權的疑慮唷!

可以在文章一開始加上圖片,提升文章質感
圖九、可以在文章一開始加上圖片,提升文章質感
設定好文章首圖後,在部落格首頁就會出現文章中的首圖作為封面照
圖十、設定好文章首圖後,在部落格首頁就會出現文章中的首圖作為封面照

此外,建議各位店家在上傳文章圖片時,建議可先預設一個統一的規格大小(建議店家圖片寬度至少要 800 px,在切換不同版型時圖片都可以維持在清晰的狀態),這樣從文章封面看上去較有一致性且清楚,不會有圖片忽大忽小的問題,像電商教室的文章封面就會統一使用 890 x 428 像素的大小,給各位店家參考。

綜合以上,如果你是在 Word 等編輯軟體中打好文章,設定好 H 標籤後再貼到 SHOPLINE 的文章編輯器的話,強烈建議要先清除格式再進行設定,這樣文字格式和顏色比較不會帶到額外的語法,為避免以上疑慮,建議你直接在 SHOPLINE 編輯器中進行文章撰寫是最好的唷!

《網店設計風格指南》
風格簡潔有力的網站,會讓人對品牌留下幹練、大器的印象,而色彩繽紛的網站,可以傳達活潑有朝氣的氛圍

總結

以上就是本次的 SHOPLINE 部落格優化教學,由於很多網頁前端視覺上的設定是可以透過 CSS 語法設定(SHOPLINE 也有開放給店家自由設定)來統一調整,但由於 CSS 語法若沒設定好,影響的層面就比較多,可能會使其餘頁面也受到影響,因此本文只著重在透過部落格文章編輯器去做視覺優化,讓各位有在經營部落格的店家可以嘗試簡單的調整,讓文章的閱讀體驗變得更好吧!

你覺得文章有幫助到你嗎?

歡迎給我們評論唷!

4.6 / 5. 共有 21

可以留下你的評論讓我們知道

延伸閱讀

追蹤電商教室,趨勢新知報你知