面试题：Next.js动态路由与电商网站SEO优化

路由配置

使用静态路由生成（SSG）：
- Next.js 可以通过 getStaticProps 方法在构建时生成静态页面。这对于电商产品页面、分类页面等相对稳定的内容非常适用。搜索引擎更容易抓取静态页面。
- 示例代码：

// pages/products/[productId].js
import React from'react';
import Product from '../components/Product';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const productId = context.params.productId;
    const product = await getProductById(productId);
    return {
        props: {
            product
        },
        revalidate: 60 * 60 * 24 // 一天后重新验证（如果使用增量静态再生）
    };
}

export async function getStaticPaths() {
    const products = await getAllProducts();
    const paths = products.map(product => ({
        params: { productId: product.id.toString() }
    }));
    return { paths, fallback: false };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <Product product={product} />
        </div>
    );
};

export default ProductPage;

避免过度动态路由：虽然动态路由很灵活，但过多的动态参数可能导致搜索引擎难以理解页面结构。尽量将动态部分限制在必要的参数上，如产品 ID 等。

元数据管理

设置页面标题和描述：
- 每个页面都应该有一个清晰、有吸引力且包含关键词的标题和描述。在 Next.js 中，可以使用 next/head 组件来设置这些元数据。
- 示例代码：

import React from'react';
import Head from 'next/head';

const ProductPage = ({ product }) => {
    return (
        <div>
            <Head>
                <title>{product.title} - [电商网站名称]</title>
                <meta name="description" content={product.description.substring(0, 150)} />
            </Head>
            {/* 页面内容 */}
        </div>
    );
};

export default ProductPage;

Open Graph 协议元数据：
- 为了在社交媒体等平台上正确展示电商页面，设置 Open Graph 元数据很重要。这也有助于搜索引擎更好地理解页面内容。
- 示例代码：

import React from'react';
import Head from 'next/head';

const ProductPage = ({ product }) => {
    return (
        <div>
            <Head>
                <meta property="og:title" content={product.title} />
                <meta property="og:description" content={product.description.substring(0, 150)} />
                <meta property="og:image" content={product.imageUrl} />
                <meta property="og:url" content={`[网站域名]/products/${product.id}`} />
                <meta property="og:type" content="product" />
            </Head>
            {/* 页面内容 */}
        </div>
    );
};

export default ProductPage;

其他优化

图片优化：
- 使用 Next.js 的 next/image 组件来优化图片加载，确保图片有合适的 alt 属性，这对搜索引擎理解图片内容很重要。
- 示例代码：

import React from'react';
import Image from 'next/image';

const ProductPage = ({ product }) => {
    return (
        <div>
            <Image
                src={product.imageUrl}
                alt={product.title}
                width={300}
                height={200}
            />
            {/* 页面内容 */}
        </div>
    );
};

export default ProductPage;

结构化数据（Schema.org）：
- 在页面中添加结构化数据，帮助搜索引擎更好地理解页面内容的类型和关系，例如产品的价格、品牌、库存等信息。可以通过在页面中添加 JSON - LD 格式的脚本实现。
- 示例代码：

import React from'react';
import Head from 'next/head';

const ProductPage = ({ product }) => {
    const structuredData = {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": product.title,
        "description": product.description,
        "image": product.imageUrl,
        "brand": {
            "@type": "Brand",
            "name": product.brand
        },
        "offers": {
            "@type": "Offer",
            "price": product.price,
            "availability": product.inStock? "https://schema.org/InStock" : "https://schema.org/OutOfStock"
        }
    };
    return (
        <div>
            <Head>
                <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
            </Head>
            {/* 页面内容 */}
        </div>
    );
};

export default ProductPage;

星途面试题库

面试题：Next.js动态路由与电商网站SEO优化

知识考点

面试题答案

路由配置

元数据管理

其他优化