模板 SEO 优化清单：从 meta 标签到结构化数据
好的 SEO 能让你的网站在搜索引擎中获得更多流量，本文是完整的优化清单。
一、基础 Meta 标签
必须设置
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 视口设置（响应式必备） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题（每个页面不同，60字以内） -->
<title>页面标题 - 网站名称</title>
<!-- 页面描述（155字以内） -->
<meta name="description" content="页面简介，会显示在搜索结果中">
<!-- 关键词 -->
<meta name="keywords" content="关键词1,关键词2,关键词3">
推荐设置
<!-- canonical 防重复内容 -->
<link rel="canonical" href="https://example.com/page">
<!-- Open Graph（社交分享） -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/page">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
二、语义化 HTML
正确使用标签
<header>头部导航</header>
<nav>导航菜单</nav>
<main>
<article>
<h1>文章标题</h1>
<section>...</section>
</article>
</main>
<aside>侧边栏</aside>
<footer>页脚</footer>
标题层级
- 每页只有一个 <h1>
- <h2> 到 <h6> 按层级使用
- 不要跳级（h1 → h3 是错的）
三、性能优化
图片优化
<!-- 使用 webp 格式 -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="描述文字" loading="lazy">
</picture>
<!-- 设置宽高避免布局偏移 -->
<img src="image.jpg" width="800" height="600" alt="">
资源预加载
<!-- 预加载关键资源 -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">
四、结构化数据
文章结构化数据
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章标题",
"author": { "@type": "Person", "name": "作者" },
"datePublished": "2026-01-15",
"image": "https://example.com/cover.jpg"
}
</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/article"
}]
}
</script>
五、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>2026-01-15</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
</urlset>
六、robots.txt
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml