如何解决Nextjs 获取元标记的 url
我对元标签的体验并不疯狂,但据我所知,og:url
或 twitter:url
之类的元标签可以帮助 twitter 或 facebook 等平台缓存结果,而不必查询每次使用的页面。
因此,我试图获取每个页面的 url,包括动态页面,如下所示:
<meta property="og:url" content={router.asPath} />
这显然导致 /contact
或 /news/1
- 我认为这是一个问题(是吗?),那么我如何包含整个网址?类似于 window.location.href
但服务器端?
解决方法
由于没有 window
对象服务器端,您必须检查它并在客户端进行。
选项 1
检查 window
:
<meta property="og:url" content={window ? window.location.href : "https://somehardcoded.url"} />
选项 2
使用 useEffect
钩子,因为它只在客户端运行:
const [url,setUrl] = useState("https://somehardcoded.url")
useEffect(() => {
setUrl(window.location.href);
});
<meta property="og:url" content={url} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。