如何获取 twitter:image 元标记网站的基本 URL？答案

【问题标题】：How do I get the base url of the site for twitter:image meta tag?如何获取 twitter:image 元标记网站的基本 URL？
【发布时间】：2020-08-25 15:59:08
【问题描述】：

我在一个降价文件中有以下前题。

---
title: "Hello world!"
excerpt: "Lorem ipsum dolor sit amet"
coverImage: "/assets/blog/hello-world/cover.png"
date: "2020-03-16T05:35:07.322Z"
author:
  name: Mario
  picture: "/assets/blog/authors/mario.png"
ogImage:
  url: "/assets/blog/hello-world/cover.png"
---

我需要将图片的完整网址传递给推特卡元twitter: image 并打开图元property = "og: image"

为此，我需要获取站点的基本 url 以将其用作我通过前端获取的图像路径的前缀

<Head>
  {/* Twitter */}
  ...
  <meta name="twitter:image" content={data.ogImage.url} />

  {/* Open Graph */}
  ...
  <meta property="og:url" content={``} key="ogurl" />
  <meta property="og:image" content={data.ogImage.url} key="ogimage" />
</Head>

目前data.ogImage.url 的值为/assets/blog/hello-world/cover.png，但为了工作，我需要在此输出前面加上站点基本网址

如何在 nextjs 中获取站点的基本 url？

【问题讨论】：

我之前没用过nextjs但是你能用vanilla JavaScript吗？
这个答案stackoverflow.com/a/55151122/615274帮助我明白了我需要使用副作用来获取nextjs的页面组件中window.location.href的值。

标签： javascript reactjs next.js

【解决方案1】：

有几种方法可以实现这样的事情：

在 env 文件中创建您的基本 URL，并通过 proccess.env 引用它（This 可能有助于这种方法）。

.env 文件：

// .env

REACT_APP_BASE_URL=http://example.com/

index 文件：

<!-- index -->

<meta property="og:image" content={`${process.env.BASE_URL}${data.ogImage.url}`} key="ogimage" />

使用相对路径，在这种方法中，您应该使用像这样工作的图像相对路径（this 可能会有所帮助）：

假设我们有以下结构：

--src
  |--assets
     |--images
        |--image.png
--index

如果我们在索引文件中，我们将像这样引用该图像：

<meta property="og:image" content={`./src/${data.ogImage.url}`} key="ogimage" />
                                            |__let's say this will return assets/images/image.png

使用 javascript 内置方法，例如 window.location。要访问基本 URL，我们可以像这样从中获取 origin 属性：window.location.origin （对于在 next.js 中使用此方法this 可能会有所帮助）。
```
<meta property="og:image" content={`${window.location.origin}${data.ogImage.url}`} key="ogimage" />
```

注意：正如 @AlexeiLevenkov 在 cmets 中提到的，因为您要求提供图像的完整路径，所以最好的方法是坚持第一种方法。

【讨论】：

请注意，由于问题询问“我需要将图像的完整 url 传递给 twitter 卡 meta twitter: image and open graph meta property = "og: image"" 只有第一个选项实际上与问题相关.这是唯一可能的选择 - 在服务器上呈现网页的代码通常不知道它将在哪个 url 上公开，因此必须传入该值。而且由于有问题的标签是针对机器人的，它们通常必须呈现在服务器上一边。

【解决方案2】：

正如这个答案https://stackoverflow.com/a/55151122/615274 中所解释的，在组件中使用副作用允许我访问window 对象，因此window.location.href 最终解决方案看起来与此类似

export default function Post({ post, name }) {
  const { data, content } = post;
  const [origin, setOrigin] = React.useState("");

  React.useEffect(() => {
    setOrigin(window.location.origin); // <-- here I get access to window
  }, []);

  return (
    <Layout title={data.title} description={data.excerpt}>
      <Head>
        {/* Twitter */}
        <meta name="twitter:image" content={`${origin}${data.ogImage.url}`} />

        {/* Open Graph */}
        <meta property="og:image" content={`${origin}${data.ogImage.url}`} key="ogimage"
        />
      </Head>

      <main>
        <PostBody data={data}>{content}</PostBody>
      </main>
    </Layout>
  );
}

在twitter:image和og:image的内容属性中，我可以像`${origin}${data.ogImage.url}`这样设置完整的url

【讨论】：

这是没有意义的，因为 Facebook bot 不会渲染页面并在这里看到一个空值。

【解决方案3】：

在server side rendering 期间，您没有window，因此您无法访问location。但是您可以在服务器端将url 前缀留空并在客户端定义它。

【讨论】：

请查看stackoverflow.com/questions/50968603/… 并解释“在服务器端保留 url 前缀为空并在客户端定义它”如何在这种特殊情况下有所帮助。

【解决方案4】：

以下屏幕截图说明了一切。如果您无法访问 window 对象，那么您可能正在使用它实际上无法访问的地方。您可以尝试在标记中编写短脚本，并可以更新元值。在该脚本中，您可以访问 window 对象。

【讨论】：

请查看stackoverflow.com/questions/50968603/… 并解释window 对象的图像在这种特殊情况下的帮助。

【解决方案5】：

假设您可以使用普通的客户端 JavaScript（我之前没有使用过 nextjs），您可以使用 window.location.origin 访问页面的基本 url

【讨论】：

我是 nextjs 和 nodejs 的新手，组件是 nextjs 页面，在尝试 window.location.origin 时出现错误消息窗口未定义
@user615274 您的代码是否在服务器端运行（在 Node 上而不是在浏览器中）？如果是这样，我不正确，您不能使用客户端 JavaScript
OP 询问了机器人使用的元标记...它们中的大多数不运行客户端页面，只查看服务器响应 - 所以window.location 在这种情况下没有用。跨度>