iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

用敏捷管理我跟 HTML&CSS 的 30 天親密接觸系列 第 25

|Day 25| 敏捷開發、SEO 和 HTML&CSS 的緊密關係

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20191008/20120833ssZPtxB6hh.png

昨天有聊到敏捷的精神,其實就是希望透過即時反饋的方式,讓所有人可以提前知道狀況,並且作出行動,最重要的是,因為逐步精進的關係,就能避免過程中造假,而無法知道實際狀況。

而影響SEO最關鍵的三個標籤是titleheadermeta description,必須要好好做與網頁內容相符合的規劃。但如果要讓你的網頁自然排序向前,豐富網站內容,並且給使用者優良的體驗,不要投機取巧,例如隱藏文字或連結甚至,一但搜尋引擎查到了,就會給予扣分的懲罰,進而影響搜尋引擎上的排名。

如何優化

HTML 端

  • 標題:強調重點,關鍵字越重要放越前面。

  • 標題落在 28 個中文字或是 56 含空格的英數字

  • meta-description:大約 80 個中文字左右以符合搜尋引擎規格。不用過度使用關鍵字堆疊成無意義的字詞。

    <meta name="description" content="五倍紅寶石程式網頁設計課程,帶你掌握業界網頁前端、後端開發課程,讓你擁有實戰技能以及經驗,轉職工程師成功免求人,提供工程師助教、線上補課,不怕跟不上課程進度">
    
  • 應用語意化標籤:在適當的位置用合適的標籤,例如 h1- h6 是用於標題的,p 適用於段落的。

  • 圖片應使用alt 屬性加以說明。

  • 網頁必須要有charset的宣告。其實宣告對 SEO 本身沒太大影響,但如果因為沒有做好宣告,導致亂碼的問題,就會讓跳出率變高。

    HTML5 的 charset 宣告方式 <meta charset="UTF-8">
    

CSS 端

  • 巧妙利用CSS佈局,將重要內容的HTML程式碼放在最前面。
  • 謹慎使用 display:none :因為搜尋引擎會過濾掉display:none其中的內容。
  • 網頁如果有圖文並茂並且有多媒體內容可以讓訪客的時間拉長。
  • 網頁內應避免有隱藏連結,或是太小字或太小尺寸的圖檔連結:明明網頁存在的內容,卻設計為隱藏,會被搜尋引擎視為欺騙,進而影響排名。
    • 白色的背景用白色的文字。
    • 將文字的字體大小設為零。
    • 將連結至於非常小的文字或是圖片上。
    • 在網頁上設計方便的社交按鈕,透過有效分享提升在搜尋引擎上的信度。

敏捷開發

定期的觀察,也許是兩週或是一個月,觀察到站流量是否有突然增加或是減少的現象,如果有應該立即找出問題,例如關鍵字的熱搜度改變等,應盡快採取措施,好符合敏捷的精神。


如果你是 PM

透過定期立會的關係,即時反應狀況給客戶,並和技術團隊研擬優化計劃。

如果你是 工程師

透過技術提昇網頁的價值,寫出精簡且架構完整的網站,讓爬蟲在爬資料的同時,可以快速透過語意標籤來找到你的網站。


上一篇
|Day 24|敏捷管理和鐵人賽的關聯
下一篇
|Day 26| 實做一個專屬履歷吧!
系列文
用敏捷管理我跟 HTML&CSS 的 30 天親密接觸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Vita Ora
iT邦新手 4 級 ‧ 2019-10-09 08:48:06

好文,謝謝分享。

我要留言

立即登入留言