iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

意識界歸來的前端系列 第 3

3 件關於網站架構、網站閱讀性的小事

  • 分享至 

  • xImage
  •  

Google 爬蟲透過解析網站架構,來理解網站的內容和重點,而對於好的「網站架構」來說,「網站可讀性」可是一大重點。

此篇不是要介紹如何提升 SEO,而是在探討些關於 結構(structure)可讀性(Readability),因為當文章做好這兩點,不只能提升閱讀性,相對得 Google 爬蟲也能更加理解網站內容。


善用標籤

更好的 title 標籤描述、更清楚明確的分段內容,並依照重要程度適當添加 h1~h6 標籤,都有助於提升文章結構。

段落內容

  • 副標 h2
  • 小標 h3
  • 強調內容(粗體、斜體)

延伸閱讀:


標題長度

這裡的標題指的不是 h1~h6 而是網頁標題 <title></title>

這篇 What Is The Best Title Tag Length For SEO? 文章,提取 English Google SEO office-hours from November 19, 2021 影片中提到 title 長度討論。

總結:title 的長度不會引響 SEO

但是對於 SERP(search engine results pages,代表搜尋引擎結果),是有影響的!
從下方圖片來看可以看出 PJ 大的文章標題沒有完整顯示,部分內容被審略為「...」。

google documentation - Best practices for creating Web Stories 的 Keep the title short 有提到關於 title 長度:「Keep titles shorter than 90 characters. We recommend using a descriptive title that is shorter than 70 characters.」
「要少於 90 個字元,建議使用少於 70 個字元來描述標題。」

推測是因為 [JS] 物件導向 JavaScript (object-oriented JavaScript), 如果要完整顯示會超過,且避免英文單字斷掉,因此最後 title link 才會是 [JS] 物件導向JavaScript (object-oriented...

合適的字元長度

出自於 contentking-Title tag

最大長度:60 個字元或 575 個像素
最小長度:30 個字元或 285 像素

標題產生機制

2021 年 8 月 google 提出 「標題產生機制」,此規範定義出了網頁標題可能會被修改的原因,也定義了一個新名詞「Title link」,用來代表 SERP 結果的文章題。

關於影響 Title link 的規範可以參考這篇文件 Control your title links in search results,下方列出文件的三個小節。

如果 title link 發生了非預期的結果可以參考看看常見標題被修改的狀況

常見標題被修改的狀況中,覺得 Inaccurate title elements 蠻有趣(因為自己常犯)因此特別拉出來。

下方範例會被修改為「Stuffed animals - Site Name」

<title>Giant stuffed animals, teddy bears, polar bears - Site Name</title>

Inaccurate title elements :當不能準確表達網頁內容時 title link 可能就會被修改更能幫助使用者閱讀的標題,例如上方範例含有動態內容(dynamic content)。

推測是上方範例不夠明確,contentking - Title tag
這篇文章有提到以下兩點,感覺適合用來補充上方範例:

  • 使用大小寫英文混合的標題
  • 避免重複特別字元(例如:破折號 -豎線 |豆號 ,

延伸閱讀


網站跳出率(Bounce Rate)

跳出率:簡單來說進到網站後,沒有再跳轉到其他網站就離開了。

這篇 Bounce Rate: Is It a Google Ranking Factor? 文章
,提取 English Google Webmaster Central office-hours from June 12, 2020影片中 Google 的 John Mueller 證實 Bounce Rate 不影響 SEO

雖然跳出率不會直接影響 SEO,但這個指標或許可以作為判斷網站內容是否吸引人之一。

下方圖片來自於 Backlinko Bounce Rate,從圖片可以觀察,排名越前面的網站,跳出率越低。

解決跳出率

文章中有提出許多可能解決跳出率的方法,其中有幾點我覺得非常受用,且有助於提升閱讀體驗。

  • Lots of white space:大量的使用空白、換行。
  • Skimmable paragraphs:將較大的段落拆為更小的句子。
  • Section subheadings:善用副標題,將段落內容切為表達得更清楚明確。
  • 15-17px font:內容文字大小為 15-17px,因為更小的字體在手機是必要放大才能。(這邊指的是內文,不同的標題會有其它適合的文字大小)

延伸閱讀:The SEO Impact of Bounce Rate (What You Need to Know),文章內有探討 google 可能不使用跳出率作為衡量標準的幾個原因。


conclusion

當文章擁有更好的 結構(structure),不只能提升 可讀性(Readability),相對能帶來更優質的內容,對於讀者來說也能更快速找尋需要的知識來閱讀。


reference


上一篇
多個 h1 標籤
下一篇
新手常見的標籤錯誤用法
系列文
意識界歸來的前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言