BLOG
SEO友好的前端结构应该注意什么
SEO 友好的前端不是只写关键词，而是让页面结构清楚、链接可访问。
搜索引擎和 AI 抓取页面时，最先读取的不是视觉稿，而是 HTML 结构。标题、描述、正文层级、链接是否可点击，这些决定了页面被如何理解。SEO 友好的前端，核心不是堆关键词，而是让结构清楚、链接可达、内容可读。
这类问题不能只看最终画面是否好看，还要确认页面在真实环境中的行为：抓取工具能否读到正文、窄屏下文字是否换行、键盘用户能否走完整个导航。前端开发经常要在动画、布局、加载速度和移动端适配之间做取舍。先把问题范围说清楚，再决定处理顺序，可以减少返工，也方便后来维护。
结构上先保证什么
每个公开页面都应该具备几个基础元素：唯一的 title、meta description、canonical 链接、清晰的标题层级和站内链接。这些不是可选项，而是抓取方理解页面的入口。
title 描述页面主题，description 提供摘要，canonical 告诉搜索引擎哪个 URL 是权威版本。正文标题用 h1 到 h6 组织层级，不要跳级，也不要一个页面出现多个 h1。站内链接使用普通 <a> 标签，并带有 href 属性，这样抓取工具才能跟踪。
一个常见的反面例子是：把重要文字画在图片里，或者用 JavaScript 动态生成内容。图片里的文字抓取工具读不到，动态内容如果执行时机不对，也可能在抓取时缺失。文字应该直接放在 HTML 中，图片只承担补充说明的作用。
链接和导航的可访问性
链接是否可访问，不只是能不能点，还包括抓取工具能否发现。使用 <a href="..."> 是基本要求。不要用 <div> 或 <span> 模拟链接，也不要依赖 onclick 跳转，因为抓取工具不会执行这些行为。
导航菜单在移动端经常被折叠成汉堡按钮。如果这个按钮只能通过鼠标点击展开，键盘用户和部分辅助技术用户就无法使用。展开菜单的按钮应该能获得焦点，按回车可以触发，菜单展开后链接可以被 Tab 键依次到达。
一个容易出错的地方是：菜单展开后没有管理焦点，用户按 Tab 时焦点跳到了页面底部的内容，而不是菜单里的第一个链接。检查方法很简单：用键盘走一遍页面，从顶部开始，看能否依次到达所有导航链接，再走回来。
结构化数据与摘要
详情页可以补充结构化数据，比如文章、产品、或常见问题。结构化数据使用 JSON-LD 格式放在 <head> 中，它帮助搜索引擎理解页面内容的类型和属性。比如一篇文章，可以标记标题、作者、发布日期和摘要。
结构化数据不是越多越好。只标记页面实际包含的内容，不要标记页面上不存在的信息。如果页面没有评分功能，就不要标记评分字段。检查时可以用搜索引擎提供的富媒体结果测试工具，或者直接查看 JSON-LD 是否符合语法。
摘要部分，meta description 虽然不直接影响排名，但会影响搜索结果中的展示文字。写清楚页面内容，包含关键信息，但不要堆砌关键词。描述应该是一句通顺的话，而不是关键词列表。
图片和懒加载的边界
图片是页面内容的重要组成部分，但处理不当会影响加载速度和抓取效果。每张图片都应该有 alt 属性，描述图片内容。如果图片只是装饰性的，alt 可以留空，但不要省略属性本身。
懒加载是常用的性能优化手段。它让图片在接近视口时才加载，减少初始请求量。但懒加载有一个边界：如果实现方式不当，抓取工具可能看不到图片内容。使用 loading="lazy" 属性时，图片仍然在 HTML 中，抓取工具可以读到。但如果用 JavaScript 延迟插入图片，抓取时可能还没执行到那一步。
另一个边界是窄屏下的图片显示。大尺寸图片在手机上加载慢，也容易撑破布局。CSS 中设置 max-width: 100% 让图片自适应容器宽度，是常用的做法。检查时把浏览器窗口缩窄，看图片是否溢出、文字是否被挤压。
容易忽略的细节
前端开发中，有些问题不会出现在最终效果图里，但会影响实际使用。
动画是其中之一。为了视觉冲击加入过多动画，会让页面变慢，尤其在移动设备上。CSS 动画和 JavaScript 动画各有适用场景。CSS 动画适合简单的过渡和位移，JavaScript 动画适合更复杂的交互。检查时打开开发者工具的性能面板，看动画期间的帧率是否稳定。
文字换行是另一个容易被忽略的地方。在电脑大屏上看起来正常的文字，在手机窄屏上可能挤成一团。长 URL 或长英文单词需要设置 overflow-wrap: break-word 才能正常换行。检查时把页面缩到手机宽度，逐段看文字是否可读。
代码结构模块化也值得注意。如果所有样式写在一个大文件里，所有脚本堆在一个页面中，后期每改一个地方都可能牵动其他部分。把样式按组件拆分，脚本按功能模块组织，维护时只需要找到对应的文件。
遇到异常时的处理顺序
页面出现问题，比如抓取不到内容、样式错乱或脚本报错，先保留现场再排查。打开开发者工具，查看控制台报错、网络请求状态和页面源码。记录下问题出现的环境：浏览器、设备、操作步骤。
逐项排除，不要一次修改多个地方。如果怀疑是懒加载导致图片不显示，先禁用懒加载测试；如果怀疑是 CSS 动画导致卡顿，先移除动画看是否恢复。每次只改一个变量，确认结果后再进行下一步。
检查时换一个使用环境重新查看。电脑上正常不代表手机上正常，Chrome 正常不代表 Safari 正常。页面要检查电脑和手机，设计稿要检查尺寸与可读性，服务器设置要检查日志和备份。问题记录下来以后，下一次处理同类任务会更快。
代码示例与边界情况
下面是一个简单的页面结构示例：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题 - 网站名称</title>
<meta name="description" content="页面内容摘要">
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<header>
<nav>
<a href="/">首页</a>
<a href="/articles">文章</a>
</nav>
</header>
<main>
<h1>正文标题</h1>
<p>正文内容。</p>
<img src="image.jpg" alt="图片描述" loading="lazy">
</main>
</body>
</html>
```
这个结构在正常情况下工作良好。假设网络加载失败，loading="lazy" 的图片不会阻塞页面主体内容的渲染，文字可以正常阅读。但要注意，如果图片是内容的核心部分，比如一张数据图表，仅靠 alt 文字可能不足以传达全部信息。这时应该在正文中补充图表的文字说明。
键盘操作方面，假设用户使用 Tab 键导航。上面的导航链接可以依次获得焦点，按回车可以跳转。如果导航中有下拉菜单，需要确保菜单项也能通过键盘到达。一种常见的做法是使用 aria-expanded 属性标识菜单状态，并管理焦点在菜单打开后移动到第一个菜单项。
窄屏下，上面的结构不需要额外处理就能正常显示。但如果导航链接太多，可能需要用 CSS 媒体查询在窄屏下调整布局，比如把水平排列改为垂直排列，或者使用折叠菜单。折叠菜单的实现需要额外注意键盘可达性，不能只依赖鼠标点击。
评论
登录后可发表评论。