我试图在我的og:image
meta标签中包含一个图像,该标签动态加载特定商店的图像,该图像由使用我的应用程序的用户共享,当他想通过WhatsApp共享商店时,它会显示带有商店标题,描述和图像的缩略图。
但它不加载,所以我去打开开发者工具并检查我的 meta标签的元素,我发现URL导致了这个错误:
{
"error": {
"code": 400,
"message": "Invalid HTTP method/URL pair."
}
}
下面是我的代码:
共享链接的着陆页:
<meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
<meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content=""/>
<meta property="og:image" content ="<?php echo $_GET["img"];?>"
发送的URL:
https://MyWebsiteName.com/share/?shop=xJbOcJDm1EOAkQdj0P3Q&title=Sorso&desc=Proudly%20Serving%20Gardelli%20Specialty%20Coffees&img=https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image%2FxJbOcJDm1EOAkQdj0P3Q%2F125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6
meta标记检查:
<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media"/>
有什么问题?我如何将firebase存储图像URL正确加载到 meta标签?
编辑:
在传递的url中包含firebase存储令牌,但仍然得到相同的错误:
{
"error": {
"code": 400,
"message": "Invalid HTTP method/URL pair."
}
}
<meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
<meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="<?php echo $_GET["img"].""."&token=".$_GET["token"]; ?>"/>
<meta property="og:image" content ="<?php echo $_GET["img"].""."&token=".$_GET["token"];?>"/>
我相信问题是 meta标记正在将“/”符号的编码从%2F转换为“/”,这就是为什么它是无效的。我如何使 meta标签不这样做我的网址?
2条答案
按热度按时间mpgws1up1#
最近我也遇到了类似的问题,必须通过后台保存图片,并提供一个公共持久化url;经过一番研究,发现了这篇很棒的文章:
https://www.sentinelstand.com/article/guide-to-firebase-storage-download-urls-tokens
如果url需要在服务器端生成
基本上,如果url无效(这可能导致您发布的400错误),则问题可能与tokenurl参数有关:当您上传文件到云存储时(不知道是否也是手动的,但肯定是使用SDK库),您的文件会自动获取一个令牌,该令牌存储在“firebaseStorageDownloadTokens”元数据密钥中。
客户端SDK库可以生成正确的公共URL,但服务器端SDK似乎没有相同的功能(至少不是全部)。
如果你建立你的网址添加此令牌,那么你应该能够公开访问您的图像。在我上面链接的文章中,有一个NodeJS的例子,我根据自己的需要(Golang)修改了代码。
代码上的相关部分为2:
1.上传文件后,获取它的属性和元数据,以便检索分配的令牌
1.以 “https://firebasestorage.googleapis.com/v0/b/[bucket]/o/[file]?alt=media&token=[token]"
不要忘记URL编码的文件名!
url是否在客户端生成
也就是说,客户端SDK库应该能够生成这样的url,而无需手动获取文件元数据,但如果url无效,则应首先检查url本身,并使用浏览器验证结果,然后检查问题是否可能是php解析的querystring。
让我们假设你的客户端生成了一个这样的url,并且你已经检查了url的正确性(注意,下面的url已经被编码了,请参阅编码为“%20”的空格):
在将URL传递给服务器之前,我会在Javascript中这样编码:
现在,在服务器端,您解码querystring值以重新获得url:
pw9qyyiw2#
我用我的 axios 解决了这个问题。而不是用?={url}使用json代替。传递数据的方式?={url}将URL“%2F”中的字符串转换为“/”