Next.js 14中如何动态添加自定义og:video:secure_url元标签？

方法1：通过generateMetaData的other字段添加 #

Next.js的generateMetaData支持通过other数组添加任意自定义元标签，刚好能解决你需要的og:video:secure_url需求。示例代码如下：

export async function generateMetaData({ params }) {
  // 动态获取视频安全URL，比如从params或数据库查询
  const secureVideoUrl = "https://your-secure-video-url.com/video.mp4";

  return {
    openGraph: {
      type: "video.other",
      url: secureVideoUrl, // 原有的openGraph配置
    },
    // 添加自定义OG元标签
    other: [
      {
        property: "og:video:secure_url",
        content: secureVideoUrl,
      },
      // 这里还可以加其他自定义元标签，比如og:video:width等
    ],
  };
}

方法2：直接在页面组件中渲染meta标签 #

如果更习惯直接写HTML，在Next.js 14的App Router中，你可以在页面组件（支持服务器/客户端组件）中直接添加<meta>标签，Next.js会自动将其注入到页面头部：

export default async function VideoPage({ params }) {
  const secureVideoUrl = "https://your-secure-video-url.com/video.mp4";

  return (
    <>
      {/* 直接添加自定义meta标签 */}
      <meta property="og:video:secure_url" content={secureVideoUrl} />
      <div>
        {/* 页面内容 */}
      </div>
    </>
  );
}

注意：这种方式虽然直接，但如果是动态数据（比如从数据库获取URL），推荐用generateMetaData，因为它是Next.js官方推荐的元数据管理方式，能更好地处理SEO和服务器端渲染场景。

内容的提问来源于stack exchange，提问作者badmagick