SEO 优化
什么是 SEO
SEO（Search Engine Optimization）搜索引擎优化，通过优化网页内容和结构，提高网站在搜索引擎中的排名。
HTML SEO 优化
1. Title 标签
html
<head>
<title>页面标题 - 网站名称</title>
</head>最佳实践:
- 长度控制在50-60个字符
- 包含主要关键词
- 每个页面使用唯一的标题
- 标题格式：主关键词 - 副关键词 | 网站名称
2. Meta Description
html
<head>
<meta name="description" content="页面描述，150-160个字符">
</head>最佳实践:
- 长度控制在150-160个字符
- 包含主要关键词
- 描述要吸引人，提高点击率
- 每个页面使用唯一的描述
3. Meta Keywords
html
<head>
<meta name="keywords" content="关键词1,关键词2,关键词3">
</head>注意: 现代搜索引擎已不再重视keywords标签，可以省略。
4. Canonical URL
html
<head>
<link rel="canonical" href="https://example.com/page">
</head>作用: 指定页面的规范URL，避免重复内容问题。
5. Robots Meta
html
<head>
<meta name="robots" content="index,follow">
</head>常用值:
index: 允许索引noindex: 不允许索引follow: 允许跟踪链接nofollow: 不允许跟踪链接noarchive: 不允许缓存
html
<!-- 允许索引和跟踪 -->
<meta name="robots" content="index,follow">
<!-- 不允许索引，但允许跟踪 -->
<meta name="robots" content="noindex,follow">
<!-- 允许索引，但不允许跟踪 -->
<meta name="robots" content="index,nofollow">
<!-- 不允许索引和跟踪 -->
<meta name="robots" content="noindex,nofollow">6. Open Graph 标签
html
<head>
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="网站名称">
</head>作用: 优化社交媒体分享效果。
7. Twitter Card 标签
html
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">
</head>作用: 优化Twitter分享效果。
语义化 HTML
使用语义化标签
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>文章标题</h2>
<time datetime="2024-01-01">2024-01-01</time>
</header>
<section>
<h3>章节标题</h3>
<p>文章内容...</p>
</section>
</article>
</main>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
</ul>
</aside>
<footer>
<p>© 2024 网站名称</p>
</footer>
</body>
</html>标题层级
html
<h1>页面主标题（每页只有一个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h2>二级标题</h2>
<h3>三级标题</h3>注意: 不要跳过标题层级，如h1直接到h3。
图片优化
Alt 属性
html
<img src="image.jpg" alt="详细描述图片内容">最佳实践:
- 所有图片都要有alt属性
- alt文本要详细描述图片内容
- 装饰性图片可以使用空alt属性
文件名优化
html
<!-- 好的文件名 -->
<img src="red-apple-on-white-background.jpg" alt="红苹果在白色背景上">
<!-- 不好的文件名 -->
<img src="IMG_12345.jpg" alt="图片">响应式图片
html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="图片描述" loading="lazy">
</picture>链接优化
内部链接
html
<a href="/article/seo-guide" title="SEO优化指南">SEO优化指南</a>最佳实践:
- 使用描述性锚文本
- 链接到相关内容
- 避免使用"点击这里"等通用文本
外部链接
html
<a href="https://example.com" rel="nofollow" target="_blank">外部链接</a>注意: 对于付费链接或不可信的外部链接，使用rel="nofollow"。
网站地图
XML Sitemap
xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2024-01-01</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/about</loc>
<lastmod>2024-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>提交 Sitemap
在robots.txt中添加：
txt
Sitemap: https://example.com/sitemap.xmlRobots.txt
txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /private/
Sitemap: https://example.com/sitemap.xml结构化数据
JSON-LD 格式
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章标题",
"image": "https://example.com/image.jpg",
"author": {
"@type": "Person",
"name": "作者姓名"
},
"publisher": {
"@type": "Organization",
"name": "网站名称",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2024-01-01",
"dateModified": "2024-01-01"
}
</script>常用结构化数据类型
html
<!-- 网站信息 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "网站名称",
"url": "https://example.com"
}
</script>
<!-- 面包屑导航 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "https://example.com"
},{
"@type": "ListItem",
"position": 2,
"name": "分类",
"item": "https://example.com/category"
}]
}
</script>
<!-- 产品信息 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "产品名称",
"image": "https://example.com/product.jpg",
"description": "产品描述",
"brand": {
"@type": "Brand",
"name": "品牌名称"
},
"offers": {
"@type": "Offer",
"price": "99.99",
"priceCurrency": "CNY",
"availability": "https://schema.org/InStock"
}
}
</script>性能优化
页面加载速度
html
<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="critical.js" as="script">
<!-- 预连接到第三方域名 -->
<link rel="preconnect" href="https://example.com">
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://example.com">
<!-- 懒加载图片 -->
<img src="image.jpg" alt="图片" loading="lazy">移动端优化
html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">
</head>面试常见问题
1. SEO 优化的关键点有哪些？
- 合理的标题和描述
- 语义化HTML标签
- 图片alt属性
- 内部链接优化
- 网站地图
- 结构化数据
- 页面加载速度
- 移动端友好
2. meta description 的作用是什么？
meta description用于描述页面内容，显示在搜索结果中，影响用户点击率。
html
<meta name="description" content="页面描述，150-160个字符">3. canonical URL 的作用是什么？
canonical URL指定页面的规范URL，避免重复内容问题，帮助搜索引擎理解哪个URL是主要版本。
html
<link rel="canonical" href="https://example.com/page">4. 什么是结构化数据？
结构化数据是一种标准化的数据格式，帮助搜索引擎更好地理解页面内容，可以显示富媒体搜索结果。
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章标题"
}
</script>5. 如何优化图片的SEO？
- 使用描述性的文件名
- 添加alt属性
- 压缩图片大小
- 使用响应式图片
- 使用现代图片格式（WebP）
html
<img src="red-apple.jpg" alt="红苹果在白色背景上" loading="lazy">通过理解SEO优化的各种技术和最佳实践，可以提高网站在搜索引擎中的排名，增加流量。