SEO基础知识 - 搜索引擎优化完整指南

1. SEO概述

1.1 什么是SEO

SEO(Search Engine Optimization)搜索引擎优化,是提升网站在搜索引擎结果页(SERP)中排名的实践,目标是增加自然(非付费)流量。

核心目标:

提高排名: 在搜索结果中获得更高位置
增加流量: 吸引更多访问者
提升转化: 将访问者转化为用户/客户
建立权威: 在行业中建立品牌认知

1.2 SEO的重要性

搜索引擎流量占比:
- 93% 的在线体验从搜索引擎开始
- 75% 的用户不会点击第二页
- 第一位结果的点击率约为28.5%
- 第二位约15%
- 第三位约11%

对React应用的挑战:

客户端渲染(CSR)默认不利于SEO
JavaScript依赖影响爬虫抓取
需要特殊处理以优化SEO

1.3 搜索引擎工作原理

typescript

// 搜索引擎的三个核心过程
1. 爬取(Crawling): 发现新页面和更新
   - Googlebot访问网站
   - 跟踪链接发现新页面
   - 读取robots.txt

2. 索引(Indexing): 分析和存储内容
   - 解析HTML内容
   - 提取关键词
   - 构建索引

3. 排名(Ranking): 对搜索结果排序
   - 相关性分析
   - 权威性评估
   - 用户体验指标

2. React应用的SEO挑战与解决方案

2.1 客户端渲染的SEO问题

jsx

// ❌ CSR - 搜索引擎可能看到空白页面
function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  if (!data) return <div>Loading...</div>;
  
  return <div>{data.content}</div>;
}

// 搜索引擎爬虫看到的:
<div id="root">
  <div>Loading...</div>
</div>

2.2 解决方案对比

typescript

// 1. SSR (Server-Side Rendering) - Next.js
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// 优点: 完整的HTML内容,最佳SEO
// 缺点: 服务器负载高,TTFB较长

// 2. SSG (Static Site Generation) - Next.js
export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data }, revalidate: 3600 };
}

// 优点: 性能最佳,SEO优秀
// 缺点: 不适合动态内容

// 3. ISR (Incremental Static Regeneration)
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60 // 每60秒重新生成
  };
}

// 优点: 结合SSG和SSR优势
// 缺点: 实现复杂度较高

// 4. Prerendering - react-snap
npm install react-snap
// package.json
"scripts": {
  "postbuild": "react-snap"
}

// 优点: 简单易用
// 缺点: 动态内容支持有限

2.3 Next.js SEO最佳实践

tsx

// pages/blog/[slug].tsx
import Head from 'next/head';

export default function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <Head>
        <title>{post.title} | My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.coverImage} />
        <meta property="og:type" content="article" />
        <link rel="canonical" href={`https://myblog.com/blog/${post.slug}`} />
      </Head>
      
      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    </>
  );
}

export async function getStaticProps({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  
  return {
    props: { post },
    revalidate: 3600 // ISR: 每小时重新生成
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking' // 新文章会自动生成
  };
}

3. 页面优化

3.1 标题优化

tsx

// ✅ 优秀的标题
<title>React 19 完整教程 - 从入门到精通 | 前端学习</title>

// ❌ 不好的标题
<title>首页</title>
<title>React React React React Tutorial</title> // 关键词堆砌

// 标题最佳实践
const PageTitle = ({ title, siteName = 'My Site' }: Props) => {
  const fullTitle = title ? `${title} | ${siteName}` : siteName;
  
  // 限制长度
  const truncatedTitle = fullTitle.length > 60 
    ? fullTitle.slice(0, 57) + '...'
    : fullTitle;
  
  return (
    <Head>
      <title>{truncatedTitle}</title>
    </Head>
  );
};

// 使用
<PageTitle title="React Hooks 详解" />
// 输出: React Hooks 详解 | My Site

3.2 Meta描述优化

tsx

// ✅ 优秀的描述
<meta 
  name="description" 
  content="深入学习React 19的全部特性,包括Hooks、Server Components、Suspense等。适合初学者和进阶开发者。" 
/>

// ❌ 不好的描述
<meta name="description" content="React tutorial" /> // 太短
<meta name="description" content="This is a very long description..." /> // 太长(>160字符)

// Meta描述组件
interface MetaDescriptionProps {
  description: string;
  maxLength?: number;
}

const MetaDescription = ({ description, maxLength = 160 }: MetaDescriptionProps) => {
  const truncated = description.length > maxLength
    ? description.slice(0, maxLength - 3) + '...'
    : description;
  
  return (
    <meta name="description" content={truncated} />
  );
};

3.3 URL结构优化

typescript

// ✅ SEO友好的URL
/blog/react-hooks-tutorial
/products/laptop/macbook-pro
/category/web-development

// ❌ 不友好的URL
/blog?id=123
/p/12345
/cat.php?c=1&sc=2

// URL生成函数
function generateSEOFriendlySlug(title: string): string {
  return title
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '') // 移除特殊字符
    .replace(/[\s_-]+/g, '-')  // 空格和下划线转为连字符
    .replace(/^-+|-+$/g, '');   // 移除首尾连字符
}

generateSEOFriendlySlug('React 19: 新特性详解!');
// 输出: react-19-新特性详解

// Next.js路由优化
// ✅ 使用动态路由
pages/
  blog/
    [slug].tsx          // /blog/react-tutorial
  products/
    [category]/
      [id].tsx          // /products/electronics/123

// ❌ 查询参数路由
pages/
  blog.tsx              // /blog?slug=react-tutorial
  products.tsx          // /products?category=electronics&id=123

4. 内容优化

4.1 关键词研究与使用

typescript

// 关键词策略
interface KeywordStrategy {
  primary: string;        // 主关键词
  secondary: string[];    // 次要关键词
  longtail: string[];     // 长尾关键词
}

const blogPostKeywords: KeywordStrategy = {
  primary: 'React Hooks',
  secondary: ['useState', 'useEffect', 'React 19'],
  longtail: [
    'React Hooks 完整教程',
    'React Hooks 最佳实践',
    'React 19 Hooks 新特性'
  ]
};

// 关键词密度
function calculateKeywordDensity(content: string, keyword: string): number {
  const words = content.toLowerCase().split(/\s+/);
  const keywordCount = words.filter(word => word.includes(keyword.toLowerCase())).length;
  return (keywordCount / words.length) * 100;
}

// 理想密度: 1-2%
const content = "Your blog content here...";
const density = calculateKeywordDensity(content, 'React Hooks');
console.log(`关键词密度: ${density.toFixed(2)}%`);

4.2 语义化HTML

tsx

// ✅ 语义化标签
function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <header>
        <h1>{post.title}</h1>
        <time dateTime={post.publishedAt}>
          {formatDate(post.publishedAt)}
        </time>
      </header>
      
      <section>
        <p>{post.content}</p>
      </section>
      
      <footer>
        <address>
          作者: <a href={`/author/${post.authorId}`}>{post.authorName}</a>
        </address>
      </footer>
    </article>
  );
}

// ❌ 非语义化
function BlogPost({ post }: { post: Post }) {
  return (
    <div>
      <div>
        <div>{post.title}</div>
        <div>{post.publishedAt}</div>
      </div>
      <div>{post.content}</div>
    </div>
  );
}

4.3 标题层级

tsx

// ✅ 正确的标题层级
<article>
  <h1>主标题 - 每页只有一个</h1>
  
  <section>
    <h2>一级章节</h2>
    <p>内容...</p>
    
    <h3>二级章节</h3>
    <p>内容...</p>
    
    <h4>三级章节</h4>
    <p>内容...</p>
  </section>
  
  <section>
    <h2>另一个一级章节</h2>
    <p>内容...</p>
  </section>
</article>

// ❌ 错误的层级
<div>
  <h2>跳过了h1</h2>
  <h4>跳过了h3</h4>
  <h1>多个h1</h1>
</div>

// 自动生成目录
function generateTableOfContents(content: string) {
  const headings = content.match(/<h([2-4]).*?>(.*?)<\/h\1>/g) || [];
  
  return headings.map((heading) => {
    const level = parseInt(heading.match(/<h(\d)/)?.[1] || '2');
    const text = heading.replace(/<\/?h\d.*?>/g, '');
    const id = text.toLowerCase().replace(/\s+/g, '-');
    
    return { level, text, id };
  });
}

5. 技术SEO

5.1 页面加载速度

tsx

// 图片优化
import Image from 'next/image';

// ✅ 使用Next.js Image组件
<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={1200}
  height={600}
  priority // 首屏图片
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
/>

// ✅ 懒加载
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(
  () => import('../components/HeavyComponent'),
  {
    loading: () => <p>Loading...</p>,
    ssr: false
  }
);

// 代码分割
// pages/dashboard.tsx
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false
});

const Analytics = dynamic(() => import('../components/Analytics'), {
  ssr: false
});

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Chart />
      <Analytics />
    </div>
  );
}

5.2 移动端优化

tsx

// viewport配置
<Head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>

// 响应式图片
<picture>
  <source
    media="(min-width: 1200px)"
    srcSet="/hero-large.jpg"
  />
  <source
    media="(min-width: 768px)"
    srcSet="/hero-medium.jpg"
  />
  <img
    src="/hero-small.jpg"
    alt="Hero"
  />
</picture>

// Next.js响应式图片
<Image
  src="/hero.jpg"
  alt="Hero"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  width={1200}
  height={600}
/>

5.3 Canonical URL

tsx

// 避免重复内容问题
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function BlogPost({ post }: { post: Post }) {
  const router = useRouter();
  const canonicalUrl = `https://myblog.com${router.asPath}`;
  
  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

// 处理查询参数
function getCanonicalUrl(path: string, params: URLSearchParams) {
  // 移除不必要的参数
  const cleanParams = new URLSearchParams();
  const importantParams = ['category', 'page'];
  
  importantParams.forEach(param => {
    const value = params.get(param);
    if (value) {
      cleanParams.set(param, value);
    }
  });
  
  const queryString = cleanParams.toString();
  return queryString ? `${path}?${queryString}` : path;
}

6. 链接优化

6.1 内部链接

tsx

// ✅ 描述性锚文本
<Link href="/blog/react-hooks">
  <a>了解React Hooks完整教程</a>
</Link>

// ❌ 非描述性
<Link href="/blog/react-hooks">
  <a>点击这里</a>
</Link>

// 面包屑导航
function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol itemScope itemType="https://schema.org/BreadcrumbList">
        {items.map((item, index) => (
          <li
            key={item.href}
            itemProp="itemListElement"
            itemScope
            itemType="https://schema.org/ListItem"
          >
            <Link href={item.href}>
              <a itemProp="item">
                <span itemProp="name">{item.label}</span>
              </a>
            </Link>
            <meta itemProp="position" content={String(index + 1)} />
          </li>
        ))}
      </ol>
    </nav>
  );
}

// 使用
<Breadcrumbs items={[
  { label: '首页', href: '/' },
  { label: '博客', href: '/blog' },
  { label: 'React教程', href: '/blog/react-tutorial' }
]} />

6.2 外部链接

tsx

// ✅ 外部链接最佳实践
<a 
  href="https://external-site.com"
  target="_blank"
  rel="noopener noreferrer nofollow" // nofollow:不传递权重
>
  External Link
</a>

// 信任的外部链接
<a 
  href="https://trusted-site.com"
  target="_blank"
  rel="noopener noreferrer" // 不加nofollow
>
  Trusted Link
</a>

// 链接组件
interface ExternalLinkProps {
  href: string;
  children: React.ReactNode;
  trusted?: boolean;
}

const ExternalLink = ({ href, children, trusted = false }: ExternalLinkProps) => {
  const rel = trusted 
    ? 'noopener noreferrer'
    : 'noopener noreferrer nofollow';
  
  return (
    <a href={href} target="_blank" rel={rel}>
      {children}
    </a>
  );
};

7. 结构化数据

7.1 JSON-LD实现

tsx

// BlogPostSchema.tsx
interface BlogPostSchemaProps {
  post: {
    title: string;
    excerpt: string;
    publishedAt: string;
    modifiedAt?: string;
    authorName: string;
    authorImage: string;
    image: string;
    url: string;
  };
}

export function BlogPostSchema({ post }: BlogPostSchemaProps) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    image: post.image,
    datePublished: post.publishedAt,
    dateModified: post.modifiedAt || post.publishedAt,
    author: {
      '@type': 'Person',
      name: post.authorName,
      image: post.authorImage
    },
    publisher: {
      '@type': 'Organization',
      name: 'My Blog',
      logo: {
        '@type': 'ImageObject',
        url: 'https://myblog.com/logo.png'
      }
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': post.url
    }
  };
  
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
    </Head>
  );
}

7.2 常用Schema类型

tsx

// 产品Schema
const productSchema = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: 'Product Name',
  image: 'https://example.com/product.jpg',
  description: 'Product description',
  brand: {
    '@type': 'Brand',
    name: 'Brand Name'
  },
  offers: {
    '@type': 'Offer',
    url: 'https://example.com/product',
    priceCurrency: 'USD',
    price: '99.99',
    availability: 'https://schema.org/InStock'
  },
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: '4.5',
    reviewCount: '100'
  }
};

// FAQ Schema
const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'What is React?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'React is a JavaScript library for building user interfaces.'
      }
    }
  ]
};

// 本地企业Schema
const localBusinessSchema = {
  '@context': 'https://schema.org',
  '@type': 'Restaurant',
  name: 'Restaurant Name',
  address: {
    '@type': 'PostalAddress',
    streetAddress: '123 Main St',
    addressLocality: 'City',
    postalCode: '12345',
    addressCountry: 'US'
  },
  geo: {
    '@type': 'GeoCoordinates',
    latitude: 40.7128,
    longitude: -74.0060
  },
  telephone: '+1-555-123-4567',
  openingHours: 'Mo,Tu,We,Th,Fr 09:00-17:00'
};

8. SEO性能监控

8.1 Core Web Vitals

typescript

// 监控核心网络指标
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify(metric);
  
  // 使用 sendBeacon 发送数据
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/analytics', body);
  } else {
    fetch('/analytics', { body, method: 'POST', keepalive: true });
  }
}

// 监控所有指标
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

// Next.js集成
// pages/_app.tsx
import { useReportWebVitals } from 'next/web-vitals';

export default function MyApp({ Component, pageProps }: AppProps) {
  useReportWebVitals((metric) => {
    console.log(metric);
    // 发送到分析服务
  });
  
  return <Component {...pageProps} />;
}

8.2 SEO审计工具集成

typescript

// lighthouse CI配置
// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000', 'http://localhost:3000/blog'],
      numberOfRuns: 3
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }]
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

// package.json
{
  "scripts": {
    "lighthouse": "lhci autorun"
  }
}

9. SEO Checklist

typescript

// SEO检查清单
const seoChecklist = {
  technical: [
    '每个页面有唯一的<title>标签',
    '每个页面有唯一的meta description',
    '使用语义化HTML标签',
    '图片有alt属性',
    '页面加载速度 < 3秒',
    '移动端友好',
    '有sitemap.xml',
    '有robots.txt',
    '使用HTTPS',
    'Canonical URL设置正确'
  ],
  content: [
    '标题包含主关键词',
    '内容原创且有价值',
    'URL简短且描述性强',
    '关键词密度适中(1-2%)',
    '内部链接合理',
    '标题层级正确(h1-h6)',
    '内容长度充分(>300词)'
  ],
  advanced: [
    '结构化数据(Schema.org)',
    'OpenGraph标签',
    'Twitter Cards',
    '面包屑导航',
    '404页面优化',
    '301重定向设置',
    'hreflang标签(多语言)'
  ]
};

// 自动检查函数
async function checkSEO(url: string) {
  const response = await fetch(url);
  const html = await response.text();
  const dom = new DOMParser().parseFromString(html, 'text/html');
  
  const results = {
    title: {
      exists: !!dom.querySelector('title'),
      length: dom.querySelector('title')?.textContent?.length || 0,
      valid: (dom.querySelector('title')?.textContent?.length || 0) < 60
    },
    description: {
      exists: !!dom.querySelector('meta[name="description"]'),
      length: dom.querySelector('meta[name="description"]')?.getAttribute('content')?.length || 0,
      valid: (dom.querySelector('meta[name="description"]')?.getAttribute('content')?.length || 0) < 160
    },
    h1: {
      count: dom.querySelectorAll('h1').length,
      valid: dom.querySelectorAll('h1').length === 1
    },
    images: {
      total: dom.querySelectorAll('img').length,
      withoutAlt: dom.querySelectorAll('img:not([alt])').length
    }
  };
  
  return results;
}

10. 国际化SEO

tsx

// hreflang标签
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function SEOHead() {
  const router = useRouter();
  const { locale, locales, asPath } = router;
  
  return (
    <Head>
      {/* 当前语言 */}
      <link
        rel="alternate"
        hrefLang={locale}
        href={`https://example.com/${locale}${asPath}`}
      />
      
      {/* 其他语言 */}
      {locales?.map((loc) => (
        <link
          key={loc}
          rel="alternate"
          hrefLang={loc}
          href={`https://example.com/${loc}${asPath}`}
        />
      ))}
      
      {/* 默认语言 */}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`https://example.com${asPath}`}
      />
    </Head>
  );
}

11. 常见SEO错误

typescript

// ❌ 错误1: JavaScript渲染的内容
<div id="root"></div>
<script>
  // 内容由JS渲染,爬虫可能看不到
</script>

// ✅ 解决: 使用SSR/SSG
export async function getServerSideProps() {
  return { props: { data } };
}

// ❌ 错误2: 重复内容
<title>Home Page</title> // 多个页面使用相同标题

// ✅ 解决: 每个页面唯一标题
<title>{post.title} | My Blog</title>

// ❌ 错误3: 忽略404页面
// 默认404页面无SEO优化

// ✅ 解决: 自定义404页面
// pages/404.tsx
export default function Custom404() {
  return (
    <>
      <Head>
        <title>页面未找到 | My Site</title>
        <meta name="robots" content="noindex,nofollow" />
      </Head>
      <h1>404 - 页面未找到</h1>
      <Link href="/">返回首页</Link>
    </>
  );
}

// ❌ 错误4: 慢速加载
import HugeComponent from './HugeComponent';

// ✅ 解决: 代码分割
const HugeComponent = dynamic(() => import('./HugeComponent'), {
  loading: () => <Spinner />,
  ssr: false
});

12. SEO工具推荐

typescript

// 1. 关键词研究
- Google Keyword Planner
- Ahrefs
- SEMrush
- Ubersuggest

// 2. 技术SEO
- Google Search Console
- Screaming Frog
- Lighthouse
- PageSpeed Insights

// 3. 内容优化
- Yoast SEO (WordPress)
- Surfer SEO
- Clearscope

// 4. 监控分析
- Google Analytics
- Google Search Console
- Ahrefs
- Moz Pro

// 5. Schema标记
- Google Structured Data Testing Tool
- Schema.org
- JSON-LD Schema Generator

13. 总结

React应用SEO优化的关键要点:

选择合适的渲染策略: SSR/SSG/ISR根据需求选择
优化页面元素: title、description、URL、heading
提升性能: 图片优化、代码分割、懒加载
结构化数据: 使用Schema.org增强搜索结果
技术SEO: sitemap、robots.txt、canonical
内容质量: 原创、有价值、关键词优化
持续监控: Core Web Vitals、Search Console

通过系统地实施这些SEO最佳实践,可以显著提升React应用在搜索引擎中的表现。

SEO基础知识 - 搜索引擎优化完整指南 ​

1. SEO概述 ​

1.1 什么是SEO ​

1.2 SEO的重要性 ​

1.3 搜索引擎工作原理 ​

2. React应用的SEO挑战与解决方案 ​

2.1 客户端渲染的SEO问题 ​

2.2 解决方案对比 ​

2.3 Next.js SEO最佳实践 ​

3. 页面优化 ​

3.1 标题优化 ​

3.2 Meta描述优化 ​

3.3 URL结构优化 ​

4. 内容优化 ​

4.1 关键词研究与使用 ​

4.2 语义化HTML ​

4.3 标题层级 ​

5. 技术SEO ​

5.1 页面加载速度 ​

5.2 移动端优化 ​

5.3 Canonical URL ​

6. 链接优化 ​

6.1 内部链接 ​

6.2 外部链接 ​

7. 结构化数据 ​

7.1 JSON-LD实现 ​

7.2 常用Schema类型 ​

8. SEO性能监控 ​

8.1 Core Web Vitals ​

8.2 SEO审计工具集成 ​

9. SEO Checklist ​

10. 国际化SEO ​

11. 常见SEO错误 ​

12. SEO工具推荐 ​

13. 总结 ​

SEO基础知识 - 搜索引擎优化完整指南

1. SEO概述

1.1 什么是SEO

1.2 SEO的重要性

1.3 搜索引擎工作原理

2. React应用的SEO挑战与解决方案

2.1 客户端渲染的SEO问题

2.2 解决方案对比

2.3 Next.js SEO最佳实践

3. 页面优化

3.1 标题优化

3.2 Meta描述优化

3.3 URL结构优化

4. 内容优化

4.1 关键词研究与使用

4.2 语义化HTML

4.3 标题层级

5. 技术SEO

5.1 页面加载速度

5.2 移动端优化

5.3 Canonical URL

6. 链接优化

6.1 内部链接

6.2 外部链接

7. 结构化数据

7.1 JSON-LD实现

7.2 常用Schema类型

8. SEO性能监控

8.1 Core Web Vitals

8.2 SEO审计工具集成

9. SEO Checklist

10. 国际化SEO

11. 常见SEO错误

12. SEO工具推荐

13. 总结