HTML - 无障碍与SEO
无障碍访问(A11y)和搜索引擎优化是现代Web开发的重要考量。
无障碍访问 - ARIA属性
| 属性 | 说明 | 示例 |
|---|---|---|
role |
定义元素的角色 | role="button", role="navigation" |
aria-label |
为元素提供可访问标签 | aria-label="关闭菜单" |
aria-labelledby |
引用其他元素作为标签 | aria-labelledby="heading1" |
aria-describedby |
引用描述元素 | aria-describedby="tooltip" |
aria-hidden |
隐藏元素（屏幕阅读器） | aria-hidden="true" |
aria-expanded |
展开状态 | aria-expanded="true/false" |
aria-pressed |
按下状态 | aria-pressed="true" |
aria-disabled |
禁用状态 | aria-disabled="true" |
aria-current |
当前项指示 | aria-current="page" |
aria-live |
实时更新区域 | aria-live="polite" |
无障碍访问 - 其他要点
| 要点 | 说明 |
|---|---|
| 语义化HTML | 使用header/nav/main/article/section/aside/footer等语义标签 |
| 图像alt | 为所有img添加alt描述，装饰性图片alt="" |
| 表单标签 | 使用label关联输入控件，required/aria-required标记必填 |
| 键盘导航 | 确保所有交互可通过键盘完成，tabindex控制顺序 |
| 焦点样式 | 不为:focus设置outline: none，提供可见焦点指示 |
| 颜色对比度 | 文本与背景对比度至少4.5:1（大文本3:1） |
| 跳过链接 | 提供"跳转到主要内容"链接 |
| 表格可访问性 | 使用th的scope属性，caption标签提供标题 |
SEO 优化 - Meta标签
| 标签 | 说明 | 示例 |
|---|---|---|
<title> |
页面标题（最重要SEO因素） | <title>页面标题 - 网站名</title> |
description |
页面描述（搜索结果摘要） | <meta name="description" content="页面描述..."> |
keywords |
关键词（多数搜索引擎已忽略） | <meta name="keywords" content="关键词1,关键词2"> |
author |
作者 | <meta name="author" content="作者名"> |
viewport |
视口设置（影响移动体验） | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
robots |
爬虫规则 | <meta name="robots" content="index,follow"> |
generator |
生成工具 | <meta name="generator" content="WordPress 6.0"> |
referrer |
引用来源策略 | <meta name="referrer" content="strict-origin-when-cross-origin"> |
SEO 优化 - 结构化数据
| 类型 | 说明 | 使用场景 |
|---|---|---|
| JSON-LD | 结构化数据格式，script标签嵌入 | 富摘要、Knowledge Panel |
| Schema.org | 通用词汇表 | 所有类型内容 |
Article |
文章类型 | 博客文章、新闻 |
Product |
产品类型 | 商品信息、价格 |
Organization |
组织类型 | 公司信息、Logo |
BreadcrumbList |
面包屑类型 | 页面路径导航 |
FAQ |
问答类型 | 常见问题（富摘要） |
LocalBusiness |
本地商家 | 店铺信息、营业时间 |
SEO 优化 - Open Graph
| 属性 | 说明 | 示例 |
|---|---|---|
og:title |
分享标题 | <meta property="og:title" content="标题"> |
og:description |
分享描述 | <meta property="og:description" content="描述"> |
og:image |
分享图片（重要） | <meta property="og:image" content="图片URL"> |
og:url |
页面URL | <meta property="og:url" content="页面URL"> |
og:type |
内容类型 | <meta property="og:type" content="website"> |
og:site_name |
网站名称 | <meta property="og:site_name" content="网站名"> |
og:locale |
语言/地区 | <meta property="og:locale" content="zh_CN"> |
twitter:card |
Twitter卡片类型 | <meta name="twitter:card" content="summary_large_image"> |