前端能控制的 SEO 基本功：写好 title、description，用对语义化标签，把速度和移动端适配做到位。
一提到 SEO，很多人脑子里冒出来的是"外链""权重""关键词堆砌"这些运营向的词。但实际上，前端能控制的那部分 SEO，才是地基。地基没打好，上面再怎么运营也立不住。
这篇我们只聊前端能落地的部分：title 和 description 怎么写、语义化标签怎么帮搜索引擎读懂结构、heading 层级和图片 alt 的作用、页面速度和移动端适配、URL 和结构化数据。这些做完，你的页面在"可被正确理解"这件事上就超过了大半网站。
搜索结果页上，用户第一眼看到的就是 title 和 description。这两个写得好不好，直接决定点击率。很多网站的 title 是默认的"首页"，description 干脆没写，等于把门面让给了搜索引擎自己抓。
title 的写法有几个要点：核心关键词放前面，品牌名放后面用分隔符隔开，总长度控制在 30 个中文字以内（超出会被截断）。
<!-- 好的 title：核心词在前，品牌在后 -->
<title>字体排印进阶-尧图网站设计</title>
<!-- 糟糕的 title：空泛、无关键词 -->
<title>首页</title>
<title>欢迎来到我们的网站</title>description 是对页面内容的一句话概括，会显示在搜索结果的标题下方。它不直接影响排名，但影响点击。写法上要包含关键词、读起来通顺、控制在 70-120 个中文字。
<meta name="description"
content="字体排印进阶教程：从字号层级、行高、字间距到中英文混排，掌握让正文真正好读的排印细节。">搜索引擎是"看不懂图"的读者，它靠标签理解页面。一堆 div 堆出来的页面，对它就是一锅粥；用 header、main、article、footer 这些语义标签，它就能分清哪是导航、哪是正文、哪是页脚。
main 标签尤其重要，它明确告诉搜索引擎"这是页面主体内容"，抓取时会优先对待。nav 标签包裹主导航，搜索引擎就知道这块是导航而非正文，不会把导航文字当成内容关键词。
<body>
<header>
<nav>主导航</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>正文……</p>
</article>
</main>
<footer>版权信息</footer>
</body>heading 标签（h1-h6）是页面的"大纲"，搜索引擎靠它判断内容结构和重点。规则和写文章大纲一样：整页一个 h1，子标题用 h2，再细分用 h3，不要跳级。
<article>
<h1>SEO 基础入门</h1> <!-- 全页唯一主标题 -->
<section>
<h2>title 的写法</h2> <!-- 章节标题 -->
<h3>关键词位置</h3> <!-- 小节，不跳级 -->
</section>
</article>另一个常被忽略的细节是图片的 alt 属性。搜索引擎读不出图片内容，全靠 alt 文字理解图片是什么。装饰性图片可以用空 alt（alt=""），但内容图片一定要写清楚描述。
<!-- 内容图：写清楚在表达什么 -->
<img src="font-scale.jpg"
alt="字号层级示意图，从 h1 的 36px 到正文的 16px">
<!-- 装饰图：空 alt，避免干扰 -->
<img src="divider.png" alt="">页面速度是搜索引擎明确计入排名的因子。用户也等不了，3 秒打不开大概率就走。前端能做的速度优化主要有三块：压缩、懒加载、减少请求。
<!-- 懒加载：首屏外图片延迟加载 -->
<img src="case-portfolio.jpg"
alt="作品集案例"
loading="lazy"
width="400" height="260">给图片加上 width 和 height 属性也很关键，浏览器能据此预留位置，避免图片加载完把布局顶下去（累积布局偏移 CLS），这是核心网页指标之一。
现在搜索引擎主要看移动版，移动端体验差等于自毁前程。最基本的是 viewport 标签必须正确设置，再加上响应式布局让页面在手机上可读可点。
<meta name="viewport"
content="width=device-width, initial-scale=1">URL 也要讲究语义化。一串问号参数的 URL 既不好看也不利于 SEO，换成带关键词的路径更友好：
<!-- 不友好：一堆参数 -->
/page?id=123&cat=5
<!-- 友好：语义清晰 -->
/tutorial/typography语义化 URL 让人一看就知道页面讲什么，搜索引擎也更容易理解层级关系。用短横线分隔单词，别用下划线或中文。
结构化数据是用 JSON-LD 告诉搜索引擎"这是个教程""这是个商品""这是个面包屑"，让它在搜索结果里展示富摘要（比如带星标、带价格、带面包屑）。前端实现就是在页面里加一段 script。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "字体排印进阶：让正文真正好读的排印细节",
"author": { "@type": "Organization", "name": "尧图设计编辑部" },
"datePublished": "2026-07-15"
}
</script>结构化数据不一定立刻见效，但写对了零成本，写错了也不扣分。对教程类、商品类、FAQ 类页面尤其值得加。
这些就是前端能掌控的 SEO 基本功。把它们逐条对照现有项目查一遍，你会发现能补的洞不少。下一课我们换换脑子，进入 CSS 动画，看怎么让页面动起来又不喧宾夺主。