时间戳

首页 > 解决方案 > Nextjs 获取元标记的 url

next.js - Nextjs 获取元标记的 url

问题描述

我不是对元标签的疯狂体验，但据我所知，元标签喜欢og:url或twitter:url帮助平台如 twitter 或 facebook 来缓存结果，而不必在每次使用时再次查询页面。

因此，我试图获取每个页面的 url，包括动态页面，如下所示：

<meta property="og:url" content={router.asPath} />

这显然会导致/contact或/news/1- 我认为这是一个问题（是吗？），那么我如何包含整个 url？像window.location.href服务器端的东西？

标签： next.jsseometa

解决方案

由于没有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} />

推荐阅读