前端 SEO 优化要点
前端开发中需要注意的 SEO 优化技巧
问题
前端开发需要注意哪些 SEO 优化？
解答
1. 语义化 HTML
使用正确的 HTML 标签，帮助搜索引擎理解页面结构。
<!-- 不推荐 -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="article">...</div>
</div>
<!-- 推荐 -->
<header>
<nav>...</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<section>...</section>
</article>
</main>
<footer>...</footer>2. 合理的标题层级
每个页面只有一个 h1，标题层级不要跳跃。
<h1>页面主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h2>另一个二级标题</h2>3. Meta 标签优化
<head>
<!-- 页面标题，建议 50-60 字符 -->
<title>前端 SEO 优化指南 | 网站名</title>
<!-- 页面描述，建议 150-160 字符 -->
<meta name="description" content="介绍前端开发中的 SEO 优化技巧">
<!-- 关键词（搜索引擎权重已降低，但仍可设置） -->
<meta name="keywords" content="SEO,前端,优化">
<!-- 告诉搜索引擎如何索引 -->
<meta name="robots" content="index,follow">
</head>4. 图片优化
<!-- 必须添加 alt 属性 -->
<img src="photo.jpg" alt="产品展示图">
<!-- 使用响应式图片 -->
<img
src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
sizes="(max-width: 600px) 300px, 600px"
alt="响应式图片示例"
>
<!-- 懒加载非首屏图片 -->
<img src="photo.jpg" alt="图片" loading="lazy">5. 链接优化
<!-- 有意义的链接文本 -->
<a href="/products">查看所有产品</a> <!-- 推荐 -->
<a href="/products">点击这里</a> <!-- 不推荐 -->
<!-- 外部链接添加 rel 属性 -->
<a href="https://external.com" rel="noopener noreferrer">外部链接</a>
<!-- 不需要传递权重的链接 -->
<a href="/login" rel="nofollow">登录</a>6. 结构化数据
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "前端 SEO 优化要点",
"author": {
"@type": "Person",
"name": "作者名"
},
"datePublished": "2024-01-01"
}
</script>7. 性能优化
页面加载速度影响 SEO 排名：
<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//api.example.com">
<!-- 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">8. 移动端适配
<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 响应式设计或独立移动站点 -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com">9. URL 规范化
<!-- 指定规范 URL，避免重复内容 -->
<link rel="canonical" href="https://example.com/page">10. SSR / SSG
SPA 应用对 SEO 不友好，考虑使用：
- SSR：Next.js、Nuxt.js 服务端渲染
- SSG：静态站点生成
- 预渲染：prerender-spa-plugin
关键点
- 使用语义化 HTML 标签，让搜索引擎理解页面结构
- 每个页面设置唯一的 title 和 description
- 图片必须有 alt 属性，合理使用懒加载
- 提升页面加载速度，Core Web Vitals 影响排名
- SPA 应用使用 SSR 或预渲染解决爬虫抓取问题
- 使用 canonical 标签避免重复内容
- 添加结构化数据增强搜索结果展示
目录