第四章：技术SEO与网站架构

┌─────────────────────────────────────────────────────┐
│              Core Web Vitals 指标体系                │
├─────────────────────────────────────────────────────┤
│                                                     │
│  LCP (Largest Contentful Paint)                    │
│  └─ 最大内容绘制 < 2.5秒 (优秀)                      │
│     └─ 衡量加载性能                                  │
│                                                     │
│  FID (First Input Delay)                           │
│  └─ 首次输入延迟 < 100毫秒 (优秀)                    │
│     └─ 衡量交互性                                    │
│                                                     │
│  CLS (Cumulative Layout Shift)                     │
│  └─ 累积布局偏移 < 0.1 (优秀)                        │
│     └─ 衡量视觉稳定性                                │
│                                                     │
└─────────────────────────────────────────────────────┘

浏览器渲染流程：
HTML → DOM树 ─┐
              ├→ 渲染树 → 布局 → 绘制 → 合成
CSS → CSSOM树 ─┘

优化要点：

1. 减少关键资源数量
2. 减少关键资源大小
3. 优化关键资源加载顺序

缓存层级架构：
┌─────────────┐
│  浏览器缓存   │ ← Cache-Control, ETag
├─────────────┤
│   CDN缓存    │ ← Edge Cache
├─────────────┤
│  反向代理缓存 │ ← Nginx, Varnish
├─────────────┤
│  应用层缓存   │ ← Redis, Memcached
├─────────────┤
│  数据库缓存   │ ← Query Cache
└─────────────┘

方案对比：
┌──────────────┬─────────────────┬─────────────────┐
│    方案       │     优势         │     劣势        │
├──────────────┼─────────────────┼─────────────────┤
│ 响应式设计    │ 维护成本低       │ 性能优化复杂     │
│              │ URL统一         │ CSS体积大       │
│              │ 无重定向         │                 │
├──────────────┼─────────────────┼─────────────────┤
│ 独立移动站    │ 性能优化灵活     │ 维护成本高       │
│ (m.domain)   │ 可定制化高       │ 需要重定向       │
│              │                 │ SEO配置复杂     │
├──────────────┼─────────────────┼─────────────────┤
│ 动态服务      │ 性能最优         │ 实现复杂         │
│              │ 用户体验好       │ 缓存策略复杂     │
└──────────────┴─────────────────┴─────────────────┘

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

<!-- 标准页面指向AMP -->
<link rel="amphtml" href="https://example.com/page.amp.html">

<!-- AMP页面指向标准页 -->
<link rel="canonical" href="https://example.com/page.html">

优秀的URL结构示例：
✓ https://example.com/blog/seo-guide
✓ https://example.com/products/laptop/lenovo-x1

避免的URL结构：
✗ https://example.com/page?id=123&cat=45
✗ https://example.com/2024/12/25/post-title
✗ https://example.com/产品/笔记本 (避免中文URL)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/page1</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

# 基本结构
User-agent: *           # 适用于所有爬虫
Disallow: /admin/      # 禁止爬取admin目录
Allow: /admin/public/  # 允许爬取特定子目录
Crawl-delay: 10        # 爬取延迟（秒）
Sitemap: https://example.com/sitemap.xml

# 针对特定爬虫
User-agent: Googlebot
Disallow: /tmp/
Allow: /

User-agent: Baiduspider
Disallow: /private/

# 阻止所有爬虫（测试环境）
User-agent: *
Disallow: /

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /?s=
Disallow: /search/
Allow: /wp-admin/admin-ajax.php

User-agent: *
Disallow: /checkout/
Disallow: /cart/
Disallow: /account/
Disallow: /*?sort=
Disallow: /*?filter=
Allow: /products/

错误：Disallow: /*.pdf  # 不是所有爬虫都支持
正确：Disallow: *.pdf$  # Googlebot支持

网站类型对应Schema：
┌────────────────┬──────────────────────┐
│   网站类型      │   推荐Schema类型      │
├────────────────┼──────────────────────┤
│ 博客文章        │ Article, BlogPosting │
│ 产品页面        │ Product, Offer       │
│ 本地商户        │ LocalBusiness        │
│ 食谱网站        │ Recipe               │
│ 活动信息        │ Event                │
│ 教程内容        │ HowTo, Course        │
│ FAQ页面        │ FAQPage              │
│ 评论评分        │ Review, Rating       │
└────────────────┴──────────────────────┘

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "技术SEO完全指南",
  "author": {
    "@type": "Person",
    "name": "张三"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "SEO学院",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg"
    }
  }
}

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro",
  "image": "https://example.com/iphone.jpg",
  "description": "最新款iPhone",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "price": "7999",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "官方旗舰店"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "1289"
  }
}

# 站点基础信息
title: 技术博客
description: 分享编程和技术心得
url: https://username.github.io
baseurl: /blog

# SEO相关
author: 张三
twitter:
  username: zhangsan
  card: summary
social:
  name: 张三
  links:

    - https://github.com/zhangsan
    - https://twitter.com/zhangsan

# 插件配置
plugins:

  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-feed

# 默认值设置
defaults:

  - scope:
      path: ""
      type: posts
    values:
      layout: post
      author: 张三

# Gemfile
gem 'jekyll-seo-tag'

# _config.yml
plugins:

  - jekyll-seo-tag

# 在模板中使用
{% seo %}

baseURL = "https://example.com/"
languageCode = "zh-cn"
title = "我的技术博客"

[params]
  description = "分享技术与思考"
  author = "张三"

[params.seo]
  canonical = true
  schema = true
  opengraph = true
  twitter_cards = true

[sitemap]
  changefreq = "weekly"
  filename = "sitemap.xml"
  priority = 0.5

[outputs]
  home = ["HTML", "RSS", "JSON"]

<!-- layouts/partials/head.html -->
<meta name="description" content="{{ .Description | default .Site.Params.description }}">
<link rel="canonical" href="{{ .Permalink }}">

<!-- Open Graph -->
<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Description | default .Site.Params.description }}">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">

<!-- 结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": {{ .Title }},
  "datePublished": {{ .Date.Format "2006-01-02" }},
  "author": {
    "@type": "Person",
    "name": {{ .Site.Params.author }}
  }
}
</script>

# A记录（推荐）
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

# CNAME记录（子域名）
blog.example.com → username.github.io

# GitHub Actions工作流
name: Build and Deploy
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:

      - uses: actions/checkout@v2
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3

URL结构选择：
┌─────────────────────────────────────────┐
│ 1. 子域名：zh.example.com                │
│    优点：清晰分离，独立优化              │
│    缺点：域名权重分散                    │
├─────────────────────────────────────────┤
│ 2. 子目录：example.com/zh/               │
│    优点：集中域名权重                    │
│    缺点：管理复杂                        │
├─────────────────────────────────────────┤
│ 3. 参数：example.com?lang=zh             │
│    优点：实施简单                        │
│    缺点：SEO效果差                       │
├─────────────────────────────────────────┤
│ 4. 独立域名：example.cn                  │
│    优点：本地化程度高                    │
│    缺点：成本高，管理分散                │
└─────────────────────────────────────────┘

<!-- 在<head>中添加 -->
<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/">
<link rel="alternate" hreflang="en-US" href="https://example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

<!-- 或在Sitemap中 -->
<url>
  <loc>https://example.com/page</loc>
  <xhtml:link rel="alternate" hreflang="zh-CN" href="https://example.com/zh/page"/>
  <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en/page"/>
</url>