做SEO的人大多盯着关键词密度和外链数量,却容易忽略页面里最基础的东西。其实字号优化这种看似纯粹的前端样式调整,在搜索引擎评估页面质量和用户体验时扮演着不太显眼但关键的角色。本文想从实际项目里的观察出发,聊聊字号设置是怎么和SEO产生关联的。
搜索引擎虽然不直接“看”页面长什么样,但会通过用户行为信号来判断内容是否好读。如果正文用12px甚至更小的字号,在手机上基本得眯着眼看,跳出率自然会高。我们之前接手过一个企业站,PC端正文是14px,移动端没单独适配,用Chrome模拟发现实际渲染只有约11px。改到16px之后,移动端平均停留时间从38秒涨到52秒。
下面是当时移动端CSS里最简单的修复片段:
body {
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 768px) {
body {
font-size: 17px;
}
}这里顺带说一句,行高最好跟着字号走,纯改字号不调行高,文字会挤在一起,可读性反而下降。
Google的页面体验信号里明确提到过可读性相关因素,虽然没公开说“字号小于多少就扣分”,但Lighthouse的可访问性审计里有一条“Document doesn't use legible font sizes”,会检查移动端小于12px的文本占比。如果占比过高,可访问性评分掉下来,间接影响整体质量评估。
我们用一张表对比过两种字号策略在审计工具里的差异:
| 项目 | 小字号方案 | 优化后方案 |
|---|---|---|
| 移动端最小正文 | 11px | 16px |
| Lighthouse可访问性 | 72分 | 96分 |
| 文字对比度 | 部分不达标 | 全部达标 |
| 核心网页指标CLS | 0.18 | 0.05 |
可以看到,合理的字号优化不仅让文字清楚,还顺带稳住了布局偏移,因为很多错位来自不同字号元素加载顺序乱掉。
H1到H6本身有默认字号,但不少人用CSS把它们全重置成一样大,或者用span假装标题。搜索引擎依赖标题标签理解页面结构,如果视觉上H2比H1还大,爬虫虽不care样式,但用户一眼乱掉,分享率和回搜率都会差。我们建议保留语义标签,只用font-size做微调:
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }这样既能维持层级,又不会在手机上让H1撑爆屏幕。
中文网页常犯的错误是沿用英文站的字号逻辑。英文单词有空格,12px还能断词,中文连续字符密集,低于15px就发虚。我们的做法是移动端正文最低16px,老人医养类站点直接18px起。也可用clamp做流式字号:
font-size: clamp(16px, 4vw, 20px);这样在窄屏不会太小,宽屏不会过大,对SEO的好处是统一了各尺寸下的阅读体验,减少因缩放导致的临时跳转。
把字号优化放进日常巡检很有必要。我们内部用的清单包含三条:移动端正文不小于16px、标题标签字号递减、对比度超4.5:1。每次发版前用axe或Lighthouse跑一遍,发现问题提工单。这种习惯让站点在自然搜索里的长期衰减慢了不少。
字体是内容的衣服,太小没人愿意靠近,太大又显空洞,合身才留得住人。
回头看,字号优化从来不是设计部门的私事。它卡在用户体验和搜索引擎评判的交叉口,花半小时改几行CSS,可能比发十条外链更划算。下次排查排名波动时,不妨先翻翻样式表,看看是不是字先在劝退访客。
评论
加载中...