当前位置:知识文库 ❯ 图文

框架集成：24. 框架SEO与HTML： - 详细教程与实战指南

一、教程简介

搜索引擎优化（SEO）是Web应用获取自然流量的关键手段。然而，现代前端框架主导的单页应用（SPA）在SEO方面面临诸多挑战：内容动态渲染导致搜索引擎爬虫难以抓取、meta标签管理混乱、缺少结构化数据等。

本教程将深入探讨前端框架与SEO的关系，从SPA的SEO挑战出发，系统讲解meta标签管理、结构化数据、sitemap生成、预渲染、SSR/SSG的SEO优势，以及框架SEO最佳实践，帮助你在享受框架开发效率的同时，确保应用具备优秀的搜索引擎可见性。

二、核心概念

SEO基础原理

搜索引擎爬虫的工作流程包括：发现URL（通过sitemap、外链、已索引页面）、抓取页面（请求HTML内容）、解析内容（提取文本、链接、结构化数据）、索引存储（建立倒排索引）、排序返回（根据相关性、权威性排序）。

传统服务端渲染的HTML对爬虫非常友好，爬虫可以直接获取完整内容，包括标题、meta标签、正文文本和链接等。

代码示例


<!-- 传统服务端渲染的HTML - 爬虫友好 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品详情 - 我的商城</title>
    <meta name="description" content="高品质产品，限时优惠中">
    <meta name="keywords" content="产品, 商城, 优惠">
    <!-- 爬虫可以直接获取完整内容 -->
</head>
<body>
    <h1>产品详情</h1>
    <p>这是产品的详细描述信息...</p>
    <div class="price">¥299.00</div>
    <a href="/related-product">相关产品</a>
</body>
</html>

SPA的SEO挑战

SPA的HTML初始状态为空壳，所有内容都需要JavaScript执行后才能渲染。这给SEO带来了以下核心问题：

内容不可见：初始HTML为空壳，爬虫可能无法获取内容
Meta标签缺失：所有页面共享同一个<title>和<meta description>
URL问题：Hash路由（#/page）不被搜索引擎视为独立页面
渲染延迟：JavaScript执行需要时间，爬虫可能超时
链接不可发现：动态生成的链接爬虫可能无法追踪
重复内容：多个URL可能指向相同内容

代码示例


<!-- SPA的HTML - 爬虫难以处理 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的应用</title>
    <!-- 没有具体的页面描述和关键词 -->
</head>
<body>
    <div id="app"></div>
    <!-- 所有内容都需要JavaScript执行后才能渲染 -->
    <script src="/js/app.js"></script>
</body>
</html>

Google爬虫与JavaScript渲染

Google的爬虫采用两波索引策略：第一波直接抓取原始HTML并索引静态内容；第二波使用Chrome无头浏览器渲染页面、执行JavaScript并索引动态内容。需要注意的是，第二波索引可能延迟数小时到数周！

提示：使用Google Search Console的URL检查工具可以检测页面是否可被爬虫正确渲染。

三、Meta标签管理

React Meta管理

在React中，可以使用react-helmet-async库来管理Meta标签。该库允许在组件中声明式地设置页面标题、meta标签和link标签。

代码示例


// 方式1：使用react-helmet-async管理Meta标签
// npm install react-helmet-async

// 页面组件示例
function ProductPage() {
    const product = {
        name: '高端无线耳机 Pro',
        description: '主动降噪，40小时续航，Hi-Res认证音质',
        price: '¥1,299',
        image: 'https://example.com/headphones.jpg',
        url: 'https://example.com/products/headphones-pro',
    };

    return (
        <div>
            <Helmet
                title={`${product.name} - 我的商城`}
                meta={[
                    { name: 'description', content: product.description },
                    { name: 'keywords', content: '耳机,无线耳机,降噪耳机' },
                    // Open Graph标签
                    { property: 'og:title', content: product.name },
                    { property: 'og:description', content: product.description },
                    { property: 'og:image', content: product.image },
                    { property: 'og:url', content: product.url },
                    { property: 'og:type', content: 'product' },
                    // Twitter Card标签
                    { name: 'twitter:card', content: 'summary_large_image' },
                ]}
                link={[
                    { rel: 'canonical', href: product.url },
                ]}
            />
            <div className="card">
                <h1>{product.name}</h1>
                <p>{product.description}</p>
            </div>
        </div>
    );
}

Vue Meta管理

Vue 3中可以使用@unhead/vue来管理Meta标签，或者手动实现Meta管理composable。

代码示例


// Vue 3中使用@unhead/vue管理Meta标签
// npm install @unhead/vue

// 手动实现Meta管理composable
function useMeta(metaInfo) {
    const updateMeta = (info) => {
        // 更新title
        if (info.title) {
            document.title = info.title;
        }

        // 更新meta标签
        if (info.meta) {
            info.meta.forEach(m => {
                const selector = m.name
                    ? `meta[name="${m.name}"]`
                    : m.property
                    ? `meta[property="${m.property}"]`
                    : null;

                let el = document.querySelector(selector);
                if (!el) {
                    el = document.createElement('meta');
                    if (m.name) el.setAttribute('name', m.name);
                    if (m.property) el.setAttribute('property', m.property);
                    document.head.appendChild(el);
                }
                el.setAttribute('content', m.content);
            });
        }
    };

    // 响应式更新
    watch(metaInfo, (newVal) => {
        updateMeta(newVal);
    }, { deep: true });

    onMounted(() => {
        updateMeta(metaInfo.value || metaInfo);
    });
}

Nuxt.js的SEO配置

Nuxt 3提供了强大的SEO配置能力，可以在全局和页面级别设置Meta标签。使用useSeoMeta和useHead组合式函数可以轻松管理SEO。

代码示例


// Nuxt 3 的SEO配置 - nuxt.config.ts
export default defineNuxtConfig({
    app: {
        head: {
            // 全局默认meta标签
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: '我的Nuxt应用',
            meta: [
                { name: 'description', content: '使用Nuxt构建的SEO友好应用' },
                { name: 'theme-color', content: '#ffffff' },
                { property: 'og:site_name', content: '我的Nuxt应用' },
            ],
            link: [
                { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
                { rel: 'canonical', href: 'https://example.com' },
            ],
            htmlAttrs: {
                lang: 'zh-CN',
            },
        },
    },
});

// 页面级SEO配置 - app/pages/products/[id].vue
<script setup>
const route = useRoute();
const { data: product } = await useFetch(`/api/products/${route.params.id}`);

// 使用useSeoMeta设置SEO标签
useSeoMeta({
    title: () => `${product.value?.name} - 我的商城`,
    ogTitle: () => product.value?.name,
    description: () => product.value?.description,
    ogDescription: () => product.value?.description,
    ogImage: () => product.value?.image,
    ogUrl: () => `https://example.com/products/${route.params.id}`,
    ogType: 'product',
    twitterCard: 'summary_large_image',
});
</script>

四、结构化数据

结构化数据（Schema.org）可以帮助搜索引擎理解页面内容，并在搜索结果中展示富媒体信息。常用的结构化数据类型包括Product、Article、BreadcrumbList、FAQPage、Organization等。

产品结构化数据

代码示例


{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "高端无线耳机 Pro",
    "image": [
        "https://example.com/photos/headphones-1.jpg",
        "https://example.com/photos/headphones-2.jpg"
    ],
    "description": "主动降噪，40小时续航，Hi-Res认证音质",
    "sku": "HP-PRO-001",
    "brand": {
        "@type": "Brand",
        "name": "SoundMax"
    },
    "offers": {
        "@type": "Offer",
        "url": "https://example.com/products/headphones-pro",
        "priceCurrency": "CNY",
        "price": "1299.00",
        "priceValidUntil": "2024-12-31",
        "itemCondition": "https://schema.org/NewCondition",
        "availability": "https://schema.org/InStock",
        "seller": {
            "@type": "Organization",
            "name": "我的商城"
        }
    },
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.7",
        "reviewCount": "128",
        "bestRating": "5"
    }
}

文章结构化数据

代码示例


{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "2024年前端框架趋势分析",
    "image": "https://example.com/frontend-trends-2024.jpg",
    "datePublished": "2024-01-15T08:00:00+08:00",
    "dateModified": "2024-01-16T10:30:00+08:00",
    "author": [
        {
            "@type": "Person",
            "name": "张三",
            "url": "https://example.com/authors/zhangsan"
        }
    ],
    "publisher": {
        "@type": "Organization",
        "name": "技术博客",
        "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/logo.png"
        }
    },
    "description": "深入分析React、Vue、Angular等主流框架的发展趋势"
}

框架中动态注入结构化数据

代码示例


// React组件中注入结构化数据
function ProductPage({ product }) {
    const structuredData = {
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: product.name,
        description: product.description,
        image: product.images,
        offers: {
            '@type': 'Offer',
            price: product.price,
            priceCurrency: 'CNY',
            availability: product.inStock
                ? 'https://schema.org/InStock'
                : 'https://schema.org/OutOfStock',
        },
    };

    return (
        <div>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify(structuredData)
                }}
            />
            <h1>{product.name}</h1>
            <p>{product.description}</p>
        </div>
    );
}

提示：使用Google富媒体结果测试工具（https://search.google.com/test/rich-results）或Schema Markup Validator（https://validator.schema.org/）验证结构化数据。

五、Sitemap生成

Sitemap是搜索引擎发现网站URL的重要途径。XML Sitemap标准格式包含URL、最后修改时间、更新频率和优先级等字段。对于大型网站，可以使用Sitemap索引文件来组织多个Sitemap。

XML Sitemap标准格式

代码示例


<?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-15</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://example.com/products/headphones-pro</loc>
        <lastmod>2024-01-14</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.8</priority>
    </url>
    <url>
        <loc>https://example.com/blog/frontend-trends-2024</loc>
        <lastmod>2024-01-16</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.6</priority>
    </url>
</urlset>

Next.js Sitemap生成

代码示例


// app/sitemap.ts - Next.js App Router
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    // 静态页面
    const staticPages = [
        {
            url: 'https://example.com',
            lastModified: new Date(),
            changeFrequency: 'daily',
            priority: 1.0,
        },
        {
            url: 'https://example.com/about',
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 0.5,
        },
    ];

    // 动态产品页面
    const products = await fetch('https://api.example.com/products')
        .then(res => res.json());

    const productPages = products.map(product => ({
        url: `https://example.com/products/${product.id}`,
        lastModified: new Date(product.updatedAt),
        changeFrequency: 'weekly' as const,
        priority: 0.8,
    }));

    return [...staticPages, ...productPages];
}

// app/robots.ts - robots.txt配置
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
    return {
        rules: {
            userAgent: '*',
            allow: '/',
            disallow: ['/api/', '/admin/', '/cart/'],
        },
        sitemap: 'https://example.com/sitemap.xml',
    };
}

Nuxt.js Sitemap生成

代码示例


// nuxt.config.ts
export default defineNuxtConfig({
    modules: ['@nuxtjs/sitemap'],

    sitemap: {
        hostname: 'https://example.com',
        gzip: true,

        // 静态路由
        routes: [
            { url: '/', changefreq: 'daily', priority: 1.0 },
            { url: '/about', changefreq: 'monthly', priority: 0.5 },
        ],

        // 动态路由
        sources: [
            async () => {
                const products = await $fetch('/api/products');
                return products.map(p => ({
                    url: `/products/${p.id}`,
                    lastmod: p.updatedAt,
                    changefreq: 'weekly',
                    priority: 0.8,
                }));
            },
        ],

        // 排除路由
        exclude: [
            '/admin/**',
            '/api/**',
            '/cart/**',
        ],
    },
});

六、预渲染方案

预渲染是在构建时生成静态HTML的过程。与SSR不同，预渲染不需要服务器运行时，生成的HTML可以直接部署到CDN。预渲染适合内容不频繁变化的页面，如关于页、产品详情页等。

特性	预渲染	SSR	SSG
生成时机	构建时	每次请求	构建时
服务器需求	无需	需要	无需
内容更新	需重新构建	实时	需重新构建
部署方式	静态托管	Node.js服务器	静态托管/CDN
适用场景	内容稳定的页面	动态内容	博客、文档

Webpack: prerender-spa-plugin

代码示例


// vue.config.js / webpack.config.js
const PrerenderSPAPlugin = require('@prerenderer/prerenderer');
const PuppeteerRenderer = require('@prerenderer/renderer-puppeteer');

module.exports = {
    configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                // 静态文件路径
                staticDir: path.join(__dirname, 'dist'),
                // 需要预渲染的路由
                routes: [
                    '/',
                    '/about',
                    '/products/headphones-pro',
                    '/products/watch-ultra',
                    '/blog/frontend-trends-2024',
                ],
                // 渲染器配置
                renderer: new PuppeteerRenderer({
                    // 等待页面渲染完成
                    renderAfterDocumentEvent: 'render-event',
                    // 等待特定元素出现
                    renderAfterElementExists: '#app',
                    // 最大等待时间
                    renderAfterTime: 5000,
                    // 无头模式
                    headless: true,
                }),
            }),
        ],
    },
};

// 在应用中触发渲染完成事件
// main.js
new Vue({
    router,
    render: h => h(App),
    mounted() {
        // 通知预渲染器页面已就绪
        document.dispatchEvent(new Event('render-event'));
    },
}).$mount('#app');

七、SSR/SSG的SEO优势

服务端渲染（SSR）和静态站点生成（SSG）是SEO最优的渲染策略。它们能确保爬虫直接获取完整内容，无需等待JavaScript执行。

SEO指标	CSR (SPA)	SSR	SSG	ISR
首屏内容可见性	差（需JS执行）	好（服务端输出HTML）	好（预生成HTML）	好（缓存HTML）
Meta标签管理	差（动态设置）	好（服务端设置）	好（构建时设置）	好（缓存时设置）
结构化数据	中（需JS执行）	好（HTML中直接包含）	好（HTML中直接包含）	好（HTML中直接包含）
爬虫抓取效率	低（需渲染）	高（直接获取）	高（直接获取）	高（直接获取）
页面加载速度	慢（JS+API）	中（服务端渲染）	快（CDN分发）	快（CDN分发）
社交分享预览	差（OG标签缺失）	好（服务端设置）	好（构建时设置）	好（缓存时设置）

Next.js App Router SEO最佳实践

代码示例


// app/layout.tsx - 全局SEO配置
import type { Metadata } from 'next';

export const metadata: Metadata = {
    metadataBase: new URL('https://example.com'),
    title: {
        default: '我的商城 - 品质生活',
        template: '%s | 我的商城',
    },
    description: '发现优质产品，享受品质生活',
    keywords: ['商城', '购物', '品质生活'],
    authors: [{ name: '我的商城' }],
    creator: '我的商城',
    openGraph: {
        type: 'website',
        locale: 'zh_CN',
        url: 'https://example.com',
        siteName: '我的商城',
        title: '我的商城 - 品质生活',
        description: '发现优质产品，享受品质生活',
        images: [{
            url: 'https://example.com/og-image.jpg',
            width: 1200,
            height: 630,
            alt: '我的商城',
        }],
    },
    twitter: {
        card: 'summary_large_image',
        title: '我的商城 - 品质生活',
        description: '发现优质产品，享受品质生活',
        images: ['https://example.com/og-image.jpg'],
    },
    robots: {
        index: true,
        follow: true,
        googleBot: {
            index: true,
            follow: true,
            'max-video-preview': -1,
            'max-image-preview': 'large',
            'max-snippet': -1,
        },
    },
    alternates: {
        canonical: 'https://example.com',
        languages: {
            'zh-CN': 'https://example.com',
            'en-US': 'https://example.com/en',
        },
    },
};

八、框架SEO最佳实践

技术SEO清单

语义化HTML：使用header, main, article, section, nav等语义化标签
唯一标题：确保每个页面有唯一的title和meta description
Canonical标签：使用canonical标签避免重复内容
Hreflang标签：实现正确的hreflang标签（多语言站点）
URL结构：确保URL结构清晰、可读
History路由：使用History API路由而非Hash路由
404页面：实现正确的404页面
robots.txt：配置robots.txt
XML Sitemap：生成并提交XML Sitemap
Core Web Vitals：确保页面加载速度达标
移动端适配：实现移动端适配
HTTPS：使用HTTPS
结构化数据：添加结构化数据标记
图片alt：确保图片有alt属性
分页处理：实现正确的分页处理（prev/next）

框架特定SEO最佳实践

代码示例


// ==================== 通用最佳实践 ====================

// 1. 路由配置 - 使用History模式
// Vue Router
const router = createRouter({
    history: createWebHistory(), // 不要用createWebHashHistory()
    routes: [...],
});

// React Router
// 使用BrowserRouter而非HashRouter
import { BrowserRouter } from 'react-router-dom';

// 2. 数据预取 - 确保爬虫能获取内容
// Next.js - Server Components
export default async function Page() {
    const data = await fetchData(); // 服务端获取
    return <div>{data.content}</div>;
}

// Nuxt.js - useFetch
const { data } = await useFetch('/api/data');

// 3. 图片优化
// Next.js Image组件
import Image from 'next/image';
<Image
    src="/product.jpg"
    alt="产品图片"
    width={800}
    height={600}
    priority // 首屏图片优先加载
/>

// 4. 链接处理 - 确保爬虫可以发现
// 使用框架的Link组件而非JavaScript跳转
// Next.js
import Link from 'next/link';
<Link href="/products/123">产品详情</Link>

// Nuxt.js
<NuxtLink to="/products/123">产品详情</NuxtLink>

Core Web Vitals与SEO

Google的核心Web指标直接影响搜索排名，主要包括LCP（最大内容绘制）、FID/INP（首次输入延迟/交互到绘制延迟）、CLS（累积布局偏移）三个指标。

LCP：目标2.5秒以内，使用SSR/SSG确保首屏内容快速显示，优化图片，预加载关键资源
FID/INP：目标FID < 100ms, INP < 200ms，减少JavaScript执行时间，使用代码分割
CLS：目标0.1以内，为图片和视频设置明确的宽高，预留广告位空间

九、浏览器兼容性

特性	Chrome	Firefox	Safari	Edge	说明
History API	5+	4+	5+	12+	所有现代浏览器支持
Meta标签动态修改	全版本	全版本	全版本	全版本	客户端SEO基础
JSON-LD结构化数据	全版本	全版本	全版本	全版本	不依赖浏览器，由搜索引擎解析
Service Worker	40+	44+	11.1+	17+	用于预缓存和离线支持
preload/prefetch	50+	56+	11+	17+	资源预加载提示

SEO工具/服务	支持情况	说明
Google爬虫JS渲染	支持	第二波索引，有延迟
Bing爬虫JS渲染	部分支持	能力有限，建议SSR/SSG
百度爬虫JS渲染	不支持	强烈建议SSR/SSG
社交媒体爬虫	不支持	OG标签必须在HTML中
结构化数据	Google/Bing/Yandex	需要在HTML中直接输出

十、注意事项与最佳实践

SEO关键注意事项

选择正确的渲染策略：内容驱动型网站优先使用SSG/SSR，交互型应用可使用CSR+预渲染
Meta标签必须完整：每个页面都应有唯一的title、description和OG标签
使用语义化HTML：搜索引擎依赖HTML结构理解内容
避免客户端渲染关键内容：爬虫可能不会等待JavaScript执行
URL规范化：使用canonical标签，避免重复内容
社交分享预览：OG标签必须在服务端输出，社交媒体爬虫不执行JS

代码规范示例

代码示例


<!-- 规范：SEO友好的页面结构 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 基础SEO标签 -->
    <title>产品名称 - 分类 - 网站名称</title>
    <meta name="description" content="150字以内的页面描述">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/products/123">

    <!-- Open Graph标签 -->
    <meta property="og:type" content="product">
    <meta property="og:title" content="产品名称">
    <meta property="og:description" content="产品描述">
    <meta property="og:image" content="https://example.com/product-image.jpg">
    <meta property="og:url" content="https://example.com/products/123">

    <!-- Twitter Card标签 -->
    <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/product-image.jpg">

    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "产品名称",
        "description": "产品描述"
    }
    </script>
</head>
<body>
    <!-- 语义化HTML结构 -->
    <header>
        <nav aria-label="主导航">
            <a href="/">首页</a>
            <a href="/products">产品</a>
        </nav>
    </header>

    <main>
        <article>
            <h1>产品名称</h1>
            <p>产品描述</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 我的网站</p>
    </footer>
</body>
</html>

十一、常见问题与解决方案

问题1：SPA页面在搜索引擎中显示空白

纯SPA的页面在搜索结果中可能显示为空白或"加载中"。解决方案包括：使用SSR/SSG框架（迁移到Next.js或Nuxt.js）、预渲染关键页面（使用prerender-spa-plugin）、动态渲染（为爬虫提供预渲染的HTML）、在初始HTML中包含关键内容。

问题2：社交媒体分享不显示预览

Facebook/Twitter/微信分享时没有标题、描述和图片。原因是社交媒体爬虫不执行JavaScript。解决方案是确保OG标签在服务端HTML中输出。

问题3：百度不收录SPA页面

百度爬虫不支持JavaScript渲染，无法收录SPA页面。解决方案包括：使用SSR/SSG（推荐）、百度主动推送API、生成静态快照提交给百度。

问题4：重复内容导致SEO降权

同一内容出现在多个URL（如www和非www、HTTP和HTTPS、带参数和不带参数）会导致SEO降权。解决方案是使用canonical标签指向规范URL，并配置服务器端301重定向。

十二、总结

本教程系统讲解了前端框架与SEO的关系，核心要点如下：

SPA的SEO挑战：纯客户端渲染导致内容不可见、Meta标签缺失、社交分享预览失败等问题，需要采取针对性措施。
Meta标签管理：使用react-helmet-async（React）、@unhead/vue（Vue）、Next.js Metadata API、Nuxt useSeoMeta等工具管理页面标题、描述、OG标签等。
结构化数据：使用Schema.org词汇表为搜索引擎提供结构化信息，包括Product、Article、BreadcrumbList、FAQPage等类型，可以增强搜索结果的展示效果。
Sitemap生成：为搜索引擎提供网站URL清单，使用Next.js sitemap.ts或Nuxt @nuxtjs/sitemap模块自动生成。
预渲染：对于无法使用SSR/SSG的SPA，可以使用prerender-spa-plugin或vite-plugin-prerender在构建时生成静态HTML。
SSR/SSG的SEO优势：服务端渲染和静态生成能确保爬虫直接获取完整内容，是SEO最优的渲染策略。
最佳实践：选择正确的渲染策略、使用语义化HTML、确保Meta标签完整、优化Core Web Vitals、正确处理多语言SEO。

选择SEO策略时应根据项目需求权衡：内容型网站优先SSG/SSR，工具型应用可使用CSR+预渲染，电商等需要实时数据的内容型网站推荐SSR+ISR。

标签：框架SEO Meta标签结构化数据 Sitemap 预渲染 SSR优化搜索引擎优化

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

后端通信：20. API设计与文档 - 从入门到实践详解

后端通信：19. 错误处理与重试 - 从入门到实践详解

后端通信：18. 请求缓存策略 - 从入门到实践详解

后端通信：17. 请求认证与授权 - 从入门到实践详解

快速访问

相关推荐