如何获取 twitter:image 元标记网站的基本 URL？
Posted
技术标签:
【中文标题】如何获取 twitter:image 元标记网站的基本 URL？【英文标题】：How do I get the base url of the site for twitter:image meta tag? 【发布时间】：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吗？ 这个答案***.com/a/55151122/615274帮助我明白了我需要使用副作用来获取nextjs的页面组件中window.location.href的值。
【参考方案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://***.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 前缀留空并在客户端定义它。
【讨论】：
请查看***.com/questions/50968603/… 并解释“在服务器端保留 url 前缀为空并在客户端定义它”如何在这种特殊情况下有所帮助。【参考方案4】：以下屏幕截图说明了一切。如果您无法访问 window 对象，那么您可能正在使用它实际上无法访问的地方。您可以尝试在 标记中编写短脚本，并可以更新元值。在该脚本中，您可以访问 window 对象。
【讨论】：
请查看***.com/questions/50968603/… 并解释window 对象的图像在这种特殊情况下的帮助。【参考方案5】：
假设您可以使用普通的客户端 JavaScript（我之前没有使用过 nextjs），您可以使用 window.location.origin 访问页面的基本 url
【讨论】：
我是 nextjs 和 nodejs 的新手，组件是 nextjs 页面，在尝试window.location.origin 时出现错误消息窗口未定义
@user615274 您的代码是否在服务器端运行（在 Node 上而不是在浏览器中）？如果是这样，我不正确，您不能使用客户端 JavaScript
OP 询问了机器人使用的元标记...它们中的大多数不运行客户端页面，只查看服务器响应 - 所以window.location 在这种情况下没有用。跨度>
以上是关于如何获取 twitter:image 元标记网站的基本 URL？的主要内容，如果未能解决你的问题，请参考以下文章
Facebook Debugger lint 工具获取 HTTP 206 - 未检测到 Open Graph 元标记（其他工具可以）