技术 SEO

技术 SEO 是网站优化的基础设施，确保搜索引擎能够顺利抓取、索引和理解你的网站内容。即使内容再优质，如果存在技术障碍，搜索引擎也无法正确评估和排名你的页面。

网站架构优化

URL 结构设计

良好的 URL 结构帮助搜索引擎和用户理解页面内容，同时影响排名和点击率。

URL 设计原则：

简洁明了

• 使用简短、有意义的 URL
• 避免冗长的参数和数字

包含关键词

• URL 中包含页面主题关键词
• 使用连字符分隔单词

层级清晰

• 保持合理的目录层级（建议不超过 3 层）
• 体现内容的逻辑关系

统一规范

• 使用小写字母
• 避免特殊字符
• 统一使用 HTTPS

URL 示例对比：

好的 URL：
https://www.example.com/blog/seo-guide
https://www.example.com/products/laptop/dell-xps-15

不好的 URL：
https://www.example.com/p?id=123&cat=5
https://www.example.com/Products/LAPTOP/Dell_XPS_15!!!

网站导航优化

清晰的导航结构帮助用户和搜索引擎理解网站内容组织。

导航优化要点：

主导航

• 包含最重要的页面链接
• 使用描述性锚文本
• 控制导航项数量（建议 5-7 个）

面包屑导航

• 显示用户当前位置
• 使用结构化数据标记
• 提供返回上级的路径

页脚导航

• 包含重要页面和次要页面
• 提供站点地图链接
• 包含联系方式和隐私政策

内部链接结构

内部链接帮助搜索引擎发现页面，传递页面权重，建立内容关系。

内部链接最佳实践：

链接深度

• 确保每个页面都能在 3 次点击内到达
• 重要页面应该有更多内部链接指向

锚文本优化

• 使用描述性锚文本
• 避免使用"点击这里"等无意义文本
• 自然融入内容

链接相关性

• 链接到相关内容页面
• 建立主题集群结构

分页和无限滚动

对于内容较多的页面，需要正确处理分页和无限滚动的 SEO 问题。

分页处理：

<!-- 第一页 -->
<link rel="next" href="https://example.com/page/2">

<!-- 中间页 -->
<link rel="prev" href="https://example.com/page/1">
<link rel="next" href="https://example.com/page/3">

<!-- 最后一页 -->
<link rel="prev" href="https://example.com/page/2">

无限滚动处理：

• 提供分页版本供搜索引擎抓取
• 使用 pushState 更新 URL
• 确保每个内容片段都有独立 URL

页面速度优化

页面加载速度是重要的排名因素，直接影响用户体验和转化率。Google 的研究表明，页面加载时间每增加 1 秒，转化率下降 7%。

Core Web Vitals 优化

Core Web Vitals 是 Google 评估页面体验的核心指标。

LCP（最大内容绘制）优化

目标：≤ 2.5 秒

优化方法：

• 优化服务器响应时间（TTFB）
• 使用 CDN 加速内容分发
• 优化图片大小和格式
• 预加载关键资源
• 移除渲染阻塞资源

<!-- 预加载关键图片 -->
<link rel="preload" as="image" href="hero-image.webp">

<!-- 预加载关键字体 -->
<link rel="preload" as="font" href="font.woff2" crossorigin>

INP（交互到下一次绘制）优化

目标：≤ 200 毫秒

优化方法：

• 减少 JavaScript 执行时间
• 分解长任务
• 使用 Web Workers 处理复杂计算
• 优化事件处理器

// 分解长任务
function processLargeArray(array) {
  const chunkSize = 100;
  let index = 0;
  
  function processChunk() {
    const chunk = array.slice(index, index + chunkSize);
    chunk.forEach(item => processItem(item));
    index += chunkSize;
    
    if (index < array.length) {
      requestIdleCallback(processChunk);
    }
  }
  
  requestIdleCallback(processChunk);
}

CLS（累积布局偏移）优化

目标：≤ 0.1

优化方法：

• 为图片设置明确的尺寸
• 为动态内容预留空间
• 避免在现有内容上方插入内容
• 使用 transform 动画代替改变布局的动画

<!-- 为图片设置尺寸 -->
<img src="image.jpg" width="800" height="600" alt="描述">

<!-- 或使用 CSS aspect-ratio -->
<img src="image.jpg" style="aspect-ratio: 4/3;" alt="描述">

资源优化

图片优化

图片通常占页面大小的 50% 以上，优化图片对提升速度至关重要。

优化策略：

• 选择合适的格式（WebP、AVIF）
• 压缩图片质量
• 使用响应式图片
• 实施懒加载

<!-- 响应式图片 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy" width="800" height="600">
</picture>

<!-- 使用 srcset 提供不同尺寸 -->
<img 
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  src="medium.jpg"
  alt="描述"
>

CSS 优化

• 压缩 CSS 文件
• 移除未使用的 CSS
• 内联关键 CSS
• 异步加载非关键 CSS

<!-- 内联关键 CSS -->
<style>
  /* 首屏关键样式 */
  .header { ... }
  .hero { ... }
</style>

<!-- 异步加载非关键 CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

JavaScript 优化

• 压缩 JavaScript 文件
• 使用 defer 或 async 属性
• 代码分割和懒加载
• 移除未使用的代码

<!-- defer：HTML 解析完成后执行 -->
<script src="script.js" defer></script>

<!-- async：下载完成后立即执行 -->
<script src="analytics.js" async></script>

<!-- 懒加载 JavaScript -->
<script>
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const script = document.createElement('script');
          script.src = 'lazy-script.js';
          document.body.appendChild(script);
          observer.unobserve(entry.target);
        }
      });
    });
    observer.observe(document.querySelector('#lazy-section'));
  }
</script>

服务器优化

启用压缩

使用 Gzip 或 Brotli 压缩文本资源，可减少 60%-80% 的传输大小。

Nginx 配置：

# 启用 Gzip 压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_min_length 1000;

# 启用 Brotli 压缩（如果支持）
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml;

启用浏览器缓存

设置合适的缓存策略，减少重复请求。

Nginx 配置：

# 静态资源缓存
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML 页面缓存
location ~* \.html$ {
  expires 1h;
  add_header Cache-Control "public, must-revalidate";
}

使用 CDN

内容分发网络（CDN）将内容缓存到全球各地的服务器，减少用户访问延迟。

CDN 选择考虑因素：

• 节点覆盖范围
• 性能和稳定性
• 价格和流量计费
• 安全功能（DDoS 防护、WAF）

移动端优化

响应式设计

响应式设计是 Google 推荐的移动端适配方式，使用同一套代码适配不同设备。

响应式设计要点：

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询

/* 移动优先 */
.container {
  width: 100%;
  padding: 15px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

弹性布局

/* 使用 Flexbox */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 1 300px; /* 最小宽度 300px，自动换行 */
}

/* 使用 Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

移动端友好性检查

使用 Google Mobile-Friendly Test 检查页面的移动端适配情况。

常见问题及解决方案：

文字太小

• 确保字体大小至少 16px
• 避免用户需要缩放才能阅读

点击目标太小

• 按钮和链接至少 48x48 像素
• 点击目标之间保持足够间距

内容超出屏幕

• 避免水平滚动
• 使用响应式布局

弹窗遮挡内容

• 避免全屏弹窗
• 确保弹窗可以轻松关闭

结构化数据

什么是结构化数据

结构化数据是一种标准化的格式，用于向搜索引擎提供关于页面内容的明确信息。使用结构化数据可以获得富媒体搜索结果，提高点击率。

常用结构化数据类型

文章（Article）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEO 优化完整指南",
  "image": "https://example.com/seo-guide.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-15"
}
</script>

产品（Product）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro",
  "image": "https://example.com/iphone-15-pro.jpg",
  "description": "最新款 iPhone，配备 A17 Pro 芯片",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/iphone-15-pro",
    "priceCurrency": "CNY",
    "price": "8999",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "1250"
  }
}
</script>

常见问题（FAQ）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "什么是 SEO？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SEO 是搜索引擎优化，通过优化网站提高在搜索引擎中的排名。"
      }
    },
    {
      "@type": "Question",
      "name": "SEO 需要多长时间见效？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常需要 3-6 个月才能看到明显的 SEO 效果。"
      }
    }
  ]
}
</script>

面包屑导航（BreadcrumbList）

<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/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO 优化指南"
    }
  ]
}
</script>

结构化数据测试

使用以下工具验证结构化数据的正确性：

• Google Rich Results Test
• Schema Markup Validator
• Google Search Console 的增强功能报告

robots.txt 和站点地图

robots.txt 配置

robots.txt 文件位于网站根目录，用于控制搜索引擎爬虫的访问权限。

基本语法：

# 注释以 # 开头

# User-agent 指定爬虫
User-agent: *

# Allow 允许访问
Allow: /

# Disallow 禁止访问
Disallow: /admin/
Disallow: /private/
Disallow: /temp/

# Sitemap 指定站点地图位置
Sitemap: https://example.com/sitemap.xml

# 针对特定爬虫的规则
User-agent: Googlebot
Disallow: /no-google/

User-agent: Baiduspider
Disallow: /no-baidu/

常见配置示例：

# 允许所有爬虫访问所有内容
User-agent: *
Allow: /

# 禁止访问特定目录
User-agent: *
Disallow: /admin/
Disallow: /login/
Disallow: /cart/
Disallow: /checkout/

# 禁止访问特定文件类型
User-agent: *
Disallow: /*.pdf$
Disallow: /*.zip$

# 允许访问 CSS 和 JS（重要！）
User-agent: *
Allow: /css/
Allow: /js/

# 指定站点地图
Sitemap: https://example.com/sitemap.xml

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-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

站点地图最佳实践：

• 只包含规范 URL
• 保持更新，及时添加新页面
• 大型网站可拆分为多个站点地图
• 使用站点地图索引文件管理多个站点地图

<!-- sitemap-index.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-pages.xml</loc>
    <lastmod>2024-01-01</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap-posts.xml</loc>
    <lastmod>2024-01-15</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap-products.xml</loc>
    <lastmod>2024-01-20</lastmod>
  </sitemap>
</sitemapindex>

HTTPS 和安全性

启用 HTTPS

HTTPS 是 Google 的排名因素，也是用户信任的基础。

启用步骤：

1. 获取 SSL/TLS 证书（推荐 Let's Encrypt 免费证书）
2. 配置服务器启用 HTTPS
3. 设置 HTTP 到 HTTPS 的重定向
4. 更新网站内部链接为 HTTPS

Nginx 配置示例：

server {
  listen 80;
  server_name example.com www.example.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl http2;
  server_name example.com www.example.com;
  
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  
  # SSL 优化配置
  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_prefer_server_ciphers on;
  ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
  ssl_session_cache shared:SSL:10m;
  ssl_session_timeout 10m;
  
  # HSTS
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

安全最佳实践

使用 HSTS

HTTP Strict Transport Security 强制浏览器使用 HTTPS 连接。

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

设置安全响应头

# 防止点击劫持
add_header X-Frame-Options "SAMEORIGIN" always;

# 防止 MIME 类型嗅探
add_header X-Content-Type-Options "nosniff" always;

# XSS 保护
add_header X-XSS-Protection "1; mode=block" always;

# 内容安全策略
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.example.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; frame-ancestors 'self';" always;

技术 SEO 审计清单

定期进行技术 SEO 审计，确保网站没有技术问题影响排名。

抓取和索引

• robots.txt 配置正确
• XML 站点地图已提交
• 无 noindex 错误标记
• 无 canonical 标签错误
• 无 404 错误页面
• 无重定向链（A→B→C）

页面速度

• LCP ≤ 2.5 秒
• INP ≤ 200 毫秒
• CLS ≤ 0.1
• 图片已优化
• CSS/JS 已压缩
• 启用浏览器缓存
• 使用 CDN

移动端

• 响应式设计
• 移动端友好性测试通过
• 文字大小合适
• 点击目标大小合适
• 无水平滚动

安全性

• 启用 HTTPS
• SSL 证书有效
• 无混合内容警告
• 安全响应头已设置

结构化数据

• 结构化数据语法正确
• 富媒体测试通过
• 无结构化数据错误

小结

技术 SEO 是网站优化的基础，确保搜索引擎能够顺利抓取和索引你的内容。关键要点回顾：

• 设计清晰的网站架构和 URL 结构
• 优化页面速度，达到 Core Web Vitals 标准
• 实施响应式设计，确保移动端体验
• 使用结构化数据增强搜索结果展示
• 正确配置 robots.txt 和站点地图
• 启用 HTTPS 并实施安全最佳实践

技术 SEO 需要持续监测和优化，定期进行技术审计，及时发现和解决问题。

下一章，我们将学习站内 SEO，了解如何优化页面内容和元素。