下面我为你分别提供了 Nuxt 3（Vue） 和 Next.js 14（React） 的 SEO 配置代码示例，内容确保兼容 MySQL 的 utf8_general_ci，没有 emoji 和特殊字符，可以安全复制粘贴使用。

一、Nuxt 3 SEO 配置示例（服务端渲染）

1. 安装并创建 Nuxt 3 项目

npx nuxi init nuxt-seo-appcd nuxt-seo-appnpm installnpm run dev

2. 示例页面 pages/index.vue

<template>  <main>    <h1>SEO Services in Singapore</h1>    <p>We help your business rank higher on search engines through proven strategies.</p>  </main></template><script setup>useHead({  title: 'SEO Services in Singapore | Example Agency',  meta: [    { name: 'description', content: 'Top-rated SEO agency offering on-page and technical SEO in Singapore.' },    { name: 'robots', content: 'index, follow' },    { property: 'og:title', content: 'SEO Services in Singapore | Example Agency' },    { property: 'og:description', content: 'Reach more customers with our SEO strategies.' },    { property: 'og:type', content: 'website' },    { property: 'og:url', content: 'https://www.example.com' },    { property: 'og:image', content: 'https://www.example.com/images/seo-banner.jpg' }  ],  link: [    { rel: 'canonical', href: 'https://www.example.com/' }  ],  script: [    {      type: 'application/ld+json',      children: JSON.stringify({        "@context": "https://schema.org",        "@type": "Organization",        "name": "Example Agency",        "url": "https://www.example.com",        "logo": "https://www.example.com/logo.png"      })    }  ]})</script>

二、Next.js 14 SEO 配置示例（App Router）

1. 创建项目

npx create-next-app@latest seo-next-appcd seo-next-appnpm installnpm run dev

选择 App Router，启用默认的服务端组件（Server Components）。

2. 示例页面 app/page.tsx 或 app/page.jsx

export const metadata = {  title: 'SEO Services in Singapore | Example Agency',  description: 'Top-rated SEO agency offering on-page and technical SEO in Singapore.',  openGraph: {    title: 'SEO Services in Singapore | Example Agency',    description: 'Reach more customers with our SEO strategies.',    url: 'https://www.example.com',    images: [      {        url: 'https://www.example.com/images/seo-banner.jpg',        width: 1200,        height: 630,        alt: 'SEO Banner'      }    ]  },  alternates: {    canonical: 'https://www.example.com'  }}export default function HomePage() {  return (    <>      <main>        <h1>SEO Services in Singapore</h1>        <p>We help your business rank higher on search engines through proven strategies.</p>      </main>    </>  )}

3. 添加结构化数据 JSON-LD

在组件中插入如下代码：

import Script from 'next/script'export default function HomePage() {  return (    <>      <Script        id="organization-schema"        type="application/ld+json"        dangerouslySetInnerHTML={{          __html: JSON.stringify({            "@context": "https://schema.org",            "@type": "Organization",            "name": "Example Agency",            "url": "https://www.example.com",            "logo": "https://www.example.com/logo.png"          })        }}      />      <main>        <h1>SEO Services in Singapore</h1>        <p>We help your business rank higher on search engines through proven strategies.</p>      </main>    </>  )}

三、建议配套优化

无论使用 Nuxt 或 Next，都建议添加以下资源来完善 SEO：

• robots.txt 文件（在 public 目录中）

User-agent: *Allow: /Sitemap: https://www.example.com/sitemap.xml

• sitemap.xml（可使用插件或手动生成）

• 开启服务器 Gzip 压缩和 HTTP 缓存

• 将图片压缩为合适大小，提升加载速度

• 所有页面设置 <title> 和 <meta description>

如你有实际项目需求，我也可以帮你把这些模板融合进你的页面结构中，或者帮你自动生成 SEO 配置的脚本。是否需要进一步整合到项目里？