Next.js 13 -如何为每个页面添加自定义json脚本标记

webghufk 于 2023-05-06 发布在其他

关注(0)|答案(1)|浏览(104)

上下文

使用next.js版本13
使用新的/app目录
使用typescript tsx等。
目标

要在每页的<script>标记中添加schema.json，请执行以下操作：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Thing",
  ...
}
</script>

解决方案尝试

已尝试使用/head.tsx，似乎不适用于每个路由
已尝试使用<Head>标记，新的/app目录似乎不支持该标记
尝试使用next/script（from this solution），但似乎在客户端加载脚本，我希望它被添加在构建时或服务器上
尝试使用新的“基于配置的元数据”，但它说不支持“脚本”标记...

如何为每个页面添加<script type="application/ld+json">服务器端？

next.js

来源：https://stackoverflow.com/questions/76134510/next-js-13-how-can-i-add-a-custom-json-script-tag-to-each-page

1条答案

按热度按时间

vd2z7a6w1#

未来的读者

好吧，似乎它还没有在头部支持（discussion for feature on Github）
基本上，在next@13.3.1中，您需要将Schema.orgjson脚本标记添加到页面主体，而不是添加到页面头部

export default function Page() {
  return (
    <>
      <script
        key="schema-jsonld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonObj, null, "\t") }}
      />
     ....

它仍然会被搜索引擎读取，但希望它很快就能添加到<head>中。🙏

赞(0）回复(0）举报 2023-05-06

我来回答

Next.js 13 -如何为每个页面添加自定义json脚本标记

1条答案

相关问题

热门标签

最新问答