时间戳

首页 > 解决方案 > 为什么我的动态标题在下一个 js 中不起作用

reactjs - 为什么我的动态标题在下一个 js 中不起作用

问题描述

我为元标记创建了这个组件，这是一个示例：

import React from "react";
const Meta = ({ pageTitle, desc }) => {
return (
 <>
  <meta charSet="utf-8" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="Author" content="Luteya Coulston Namasa" />
  <meta name="description" content={desc}/>
  <title>{`Luteya Coulston | ${pageTitle}`}</title>
</>
);
};

export default Meta;

我面临的问题是它在加载时显示所有标签，但在完全加载标签后，如title重写<title></title> 并被Open Graph protocol完全删除。我可能做错了什么？

标签： reactjsnext.js

解决方案

将它们包裹在 next/head 中

<Head>
  <meta charSet="utf-8" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="Author" content="Luteya Coulston Namasa" key="author"/>
  <meta name="description" content={desc}/>
  <title>{`Luteya Coulston | ${pageTitle}`}</title>
</Head>

如果您使用相同的元标记，请添加一个键，以免重复。

_app.js 中应使用默认标签。og：标签，标题和描述等应在您的页面中使用

推荐阅读