前端日拱一卒D1——結構化與SEO

DerekZ95發表於2018-07-19

前言

餘為前端菜鳥,感姿勢水平匱乏,難觀前端之大局。遂決定循前端知識之脈絡,以興趣為引,輔以幾分堅持,望於己能解惑致知、於同道能助力一二,豈不美哉。

本系列程式碼及文件均在 此處

SEO

描述

SEO(search engine optimization, 搜尋引擎優化),利用搜尋引擎的搜尋規則來提高目標網站在搜尋引擎索引庫內的得分和排名。

常用

  • title
  • description
    <meta name="description" content="xxxx" />
    複製程式碼
  • keywords
    <meta name="keywords" content="xxxx" />
    複製程式碼

html結構化

語義化標籤

header, nav, section, aside, article, footer等,詳見 github

好處

  • 語義化標籤具有更豐富的含義,方便開發、維護
  • 利於搜尋引擎識別頁面的各部分
  • 方便其他裝置

WAI-ARIA

描述

ARIA(Accessible Rich Internet Applications, 可訪問富網際網路應用),是一個為殘疾人士等提供無障礙訪問動態、可互動web內容的技術規範

簡單瞭解

  • role 部分html5標籤自帶role,主要是設定元素的角色
  • aria- aria屬性有不少,主要是控制元素的一些行為表現

這一part其實不是很感興趣,點到為止,詳細內容參考大漠老師的 WAI-ARIA 無障礙Web規範

web components

標準化的元件封裝

每個元件組織自己的html/css/js,不影響頁面其他部分

shadow dom

通過shadow dom建立子dom樹,和主文件流互不干擾

使用

  • 元件內定義好html結構和樣式,也即模板
  • 通過js指令碼將模板轉為dom elment並插入到shadow root
  • 在document上註冊一個自定義的key
  • 元件被link引用後,可以直接使用這個key作為自定義標籤使用
  • 具體程式碼見 github

好處

  • 無侵入、標準化元件
  • 語義化,結構化

雖發表於此,卻畢竟為一人之言,又是每日學有所得之筆記,內容未必詳實,看官老爺們還望海涵。

相關文章