vil*_*asv 11 seo server-side-rendering next.js next.js13
在 Next.js 13.4 上使用 appDir 的文档说明如下：
第 3 步：迁移 next/head
在pages目录中，next/head React组件用于管理标题和元等HTML元素。在应用程序目录中，next/head 被新的内置 SEO 支持替换。
但该next/head组件也能够添加非 SEO 标签。特别是，我想添加<link rel="...">标签。如果元数据机制似乎不支持链接标签（仅支持自定义<meta>标签），如何实现这一目标？
我无法将标签直接添加到根布局，因为有些标签只应该存在于网站主页上。如果布局知道当前路线，我可以有条件地将标签添加到根布局，但它似乎不适用于 SSG。
我认为该文档涵盖了如何添加<link rel="...">标签，您只需要遵循他们预定义的方式即可。
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#manifest https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
// in your app/page.tsx export metadata
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
icons: {
icon: '/icon.png',
shortcut: '/shortcut-icon.png',
apple: '/apple-icon.png',
other: {
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
},
};
export default function Page() {
... // your code here
}
<link rel="manifest" href="https://nextjs.org/manifest.json" />
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
rel="apple-touch-icon-precomposed"
href="/apple-touch-icon-precomposed.png"
/>
验证与next@13.4.1
| 归档时间： |
|
| 查看次数： |
9697 次 |
| 最近记录： |