在 Next.js 中实现动态 OpenGraph URL：优化 SEO 和用户体验

2024-03-10 09:03:52

在 Next.js 中实现动态 OpenGraph URL

介绍

OpenGraph 是用于在社交媒体和消息传递应用程序中共享内容的元数据标准。其中一个最重要的属性是 og:url，它指定了页面内容的规范 URL。在 Next.js 项目中，动态设置此值对于确保页面在共享时具有正确的 URL 至关重要。

解决方法

导入 useRouter钩子

import { useRouter } from 'next/router';

获取当前页面 URL

const router = useRouter();
const currentUrl = router.asPath;

设置动态 og:url

return {
  ...
  openGraph: {
    ...
    url: currentUrl
    ...
  }
  ...
};

代码示例

以下示例展示了如何在 getStaticProps 或 getServerSideProps 函数中实现动态 og:url：

export async function getStaticProps({ params, searchParams }) {
  ...

  const router = useRouter();
  const currentUrl = router.asPath;

  ...

  return {
    ...
    props: {
      ...
      metadata: {
        ...
        openGraph: {
          ...
          url: currentUrl
          ...
        }
        ...
      }
      ...
    }
    ...
  };
}

常见问题解答

为什么需要动态设置 og:url？
动态 og:url 确保页面在共享时具有正确的 URL，即使 URL 包含查询参数或其他动态部分。
如何手动设置 og:url？
如果您不希望使用 useRouter 钩子，可以手动从 window.location.href 获取 URL。
如何使用TypeScript？
如果您正在使用 TypeScript，请在导入时指定 useRouter 钩子的类型：import { useRouter } from 'next/router';.
如何为不同的页面设置不同的 og:url？
您可以根据当前页面的路由（router.pathname）设置不同的 og:url。
为什么我的 og:url 设置不生效？
请检查您的 Next.js 版本是否支持动态 og:url。如果您使用的是旧版本，可能需要升级到最新版本。