你想想，爬虫和社交媒体的机器人来访问你的页面时它们其实挺“笨”的。它们希望拿到的是Yi经渲染好的、完整的HTML，而不是先kan到一堆Loading状态，然后等半天JavaScript跑完了才蹦出个标题。Metadata APIZui大的优势就在于，它允许你在服务端组件里直接声明这些信息，由服务端直接渲染输出。这意味着什么？意味着爬虫一进来就Neng精准地抓取到你的标题、描述，根本不会出现空白或者那种尴尬的占位文案。

咱们来kan个实际的例子。在`app/layout.tsx`或者具体的页面`layout.tsx`里你Ke以直接导出一个`metadata`对象。这不仅仅是写个标题那么简单，你Ke以把站点标题模板、默认描述、搜索引擎验证代码、Open Graph协议、Twitter卡片，甚至是规范链接一股脑儿全配置好。

import type { Metadata } from "next";
export const metadata: Metadata = {
  title: {
    template: "%s | Texavor",
    default: "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
  },
  description: "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
  verification: {
    google: "R53D-JHFSD93JDhjhds_ei99JFADSF", // 记得换成你在Search Console拿到的真家伙
  },
  openGraph: {
    title: "Texavor - GEO & Content Optimization Platform",
    description: "Build your AI content workflow. Discover topics across ChatGPT and Perplexity.",
    // images: "/easywriteOpenGraph.png", 别忘了配图
  },
  twitter: {
    card: "summary_large_image",
    title: "Texavor - GEO & Content Optimization Platform",
    description: "Build your AI content workflow. Discover topics across ChatGPT and Perplexity.",
    // images: "/easywriteOpenGraph.png",
  },
  alternates: {
    canonical: "/",
  },
};

kan到没？这样配置下来不管是Google还是Facebook，甚至是Twitter，抓取到的dou是你精心准备好的“名片”。特别是对于那些需要按请求动态生成元数据的页面你还Ke以导出一个异步的`generateMetadata`函数，根据`params`和`searchParams`来返回定制化的Metadata对象。这比以前手写`head`要省心太多了重复劳动直接减少了一大半。

咱们得承认一个残酷的现实：没人有耐心等一个慢吞吞的网站。Google早就把Core Web Vitals作为排名的重要参考了。这不仅仅是为了讨好搜索引擎，geng是为了留住你的用户。

这里面有几个关键指标你得心里有数。LCP，也就是Zui大内容绘制时间，它衡量的是页面主要内容加载出来的速度。CLS，累积布局偏移，这个Zui搞心态，比如你正要点按钮，结果图片突然加载出来把按钮挤跑了这就是CLS太差。还有INP，这是衡量你点了按钮之后页面多久Neng给你反馈。

在Next.js里搞好这些指标其实有捷径。首当其冲的就是图片优化。千万别直接用HTML的``标签了老老实实用`next/image`吧。这组件简直是性Neng优化的神器，它Neng自动压缩图片、实现懒加载，还Neng配合`fill`或者`width`/`height`属性完美适配父容器，Zuo响应式布局简直不要太爽。

import Image from "next/image";
export function ArticleCover {
  return (
    

      
    
  );
}

这里有个细节千万别漏：`alt`属性务必填写！这不仅是对无障碍访问的支持，geng是图片搜索排名的关键。Ru果你把图片部署在Vercel上，`next/image`还会自动走Vercel的图片优化服务。虽然免费Hobby计划每月有1000次的优化额度，但这钱花得绝对值，为了那几毫秒的提升，值得。

Next.js App Router给了我们三种常见的渲染模式，选对模式，SEO效果事半功倍。我kan过一张图，把SSR、SSG、ISR的差异画得hen清楚。其实选型没那么复杂，你就kan你的页面特性。

Ru果你的页面内容是动态的，比如实时数据、用户个性化信息，那就用SSR。服务端渲染Neng保证首屏HTML里就包含主要内容，爬虫一进来就Nengkan到，不会先kan到一屏Loading。这对收录和AI抓取dou非常友好。

Ru果是营销页面、文档、博客这种发布后不怎么变的，果断上SSG。构建的时候直接生成静态HTML，访问起来飞快，CDN一发，全球秒开。

Zui推荐的是ISR。它结合了前两者的优点。你Ke以在页面文件顶部导出一个`revalidate`值。比如下面的代码表示该页面Zui多缓存3600秒，超过这个时间后下一个请求会触发后台重新生成页面。

export const revalidate = 3600;

这样Zuo的好处是除了SEO，在Vercel等平台上还Neng极大地减轻服务器压力，控制成本。静态或ISR页面直接走CDN，只有真正的动态请求才需要回源到服务器。这既保证了用户kan到的内容相对新鲜，又守住了你的钱包。

你内容Zuo得再好，Ru果爬虫找不到，那也是白搭。Sitemap就是给Google、Bing这些搜索引擎准备的导航图。它们通过Search Console或Webmaster Tools提交的Sitemap来识别你站点里有哪些公开页面。

在Next.js里ZuoSitemap简直不要太简单。你只需要在`app`目录下放一个`sitemap.ts`或者`sitemap.js`，Next.js就会自动把它识别为一个特殊的Route Handler。默认情况下它是会被缓存的，除非你用了动态API。

咱们Ke以结合静态页面和动态页面来生成一个完整的Sitemap。比如下面这段代码，我们把首页、博客列表页这种静态的，和从数据库里拉出来的博客文章详情页拼在一起。

import type { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/posts";
interface Post {
  slug: string;
  updated_at: string;
}
export default async function sitemap: Promise {
  const staticPages: MetadataRoute.Sitemap = ;
  const posts = await getAllPosts;
  const postPages: MetadataRoute.Sitemap = posts.map => ({
    url: `https://www.texavor.com/blog/${post.slug}`,
    lastModified: new Date,
    changeFrequency: "weekly",
    priority: 0.6,
  }));
  return ;
}

这里要注意，Ru果你用的不是项目根路径作为base URL，记得在返回的每条记录里写上完整的绝对URL。`lastModified`、`changeFrequency`、`priority`这些参数，你Ke以根据实际geng新频率来调整。上线后记得去Search Console里把这个Sitemap的URL提交一下这样搜索引擎发现新页面的速度会快hen多。

到了2026年，Ru果你的页面还没有结构化数据，那真的太亏了。Schema标记就像是给页面内容贴上了详细的标签，帮助搜索引擎和问答引擎理解你的页面到底在说什么。

这不仅仅是为了在传统搜索结果里出个富文本摘要，geng重要的是为了AI搜索。当ChatGPT或者Google AI Overview在生成回答时它们geng倾向于引用那些结构清晰、语义明确的页面。这就是为什么说结构化数据是连接SEO和AEO的桥梁。

目前Zui推荐的形式是JSON-LD。它用一段独立的`script type="application/ld+json"`来注入数据，维护起来比Microdata那种直接写在HTML标签上的方式要清爽得多。

比如你有一个产品页面你Ke以这样写：

interface Product {
  id: string;
  name: string;
  image: string;
  description: string;
}
export default async function Page {
  const { id } = await params;
  const product = await getProduct;
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    image: product.image,
    description: product.description,
  };
  return (