问题标签 [share-open-graph]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
53 浏览

facebook - 大 og:imgae 但 Facebook 显示的是小方块

我们使用的是 1920x1080 的大图,但在 Facebook 上分享 URL 后,它仍然显示小方块而不是大图。

我们定义了 og:image

并尝试了 Facebook 调试器(但没有帮助):https ://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwww.marketingminer.com%2Fsk%2Fblog%2Flink-building-pruzkum- mezi-specialisty.html

网址:https ://www.marketingminer.com/sk/blog/link-building-pruzkum-mezi-specialisty.html

应该是什么问题?

0 投票
1 回答
425 浏览

reactjs - 托管在 S3 上的静态 GatsbyJS 站点中的动态 Open Graph 元标记

该应用程序可以获取用户的信息并注册他的帐户。然后用户可以将他的推荐链接发布www.site.com/username到社交媒体,并且在注册时为每个用户生成的唯一图像(具有用户名和用户名)应该在社交平台上显示为 Open Graph 图像。

我曾尝试使用Gatsby Helmet Plugin,但显然,头盔添加的元标记并未添加到爬虫可以抓取的索引文件

我现在能看到的唯一可能的方法是将我的应用程序迁移到 NextJS,这将是相当多的工作。有什么办法可以让它在盖茨比工作?任何形式的帮助将不胜感激。

谢谢你。

编辑:另一种可能的方法是将此 gatsby 应用程序部署到服务器,在服务器上呈现应用程序,然后返回呈现的响应。基本上将其转换为服务器端呈现的应用程序。这是可能的还是有什么好的方法来实现它?

0 投票
1 回答
415 浏览

twitter - 首次在 Twitter 上分享产品链接时,产品图片未呈现

产品在Twitter 上的分享首次没有渲染产品图片。

我已经<meta>用 og:image 值设置了标签。但推特第一次没有显示这张图片。

我在元标记下面有代码。

0 投票
0 回答
1388 浏览

reactjs - 反应中的动态打开图

这是我网站中的一个动态页面:link

当在 Whatsapp、Facebook 等中分享时,我将所有这些代码作为动态图标、动态标题、动态描述和最重要的动态开放图(例如 og:image)的元标记提供给这个页面。

现在,如果你输入上面页面的链接,通过f12可以看到head部分的og:image正好——

,但是例如在 Whasapp 上共享页面时,该图像未显示,而是呈现了网站图标。

共享时渲染图像的快照

请问有什么帮助吗?我只需要 og:image 工作:)

0 投票
1 回答
83 浏览

javascript - 为什么 whatsapp 不按应有的方式读取我的 og:tags?

所以我有一个网页可以自动生成 og:tags 以在 facebook、whatsapp 等上进行链接预览,但 whatsapp 显然无法抓取它们。它在 facebook 上运行良好,但在 whatsapp 上却不行。在whatsapp中,它只是给了我这个错误消息(见图片。有时,其他时候什么都没有显示)就像网站有错误一样(它没有,你可以像访问任何其他页面一样访问该页面)。

og:tags 在站点源代码中的标记中也是正确的。

有谁知道为什么会这样?

在此处输入图像描述

在此处输入图像描述

0 投票
0 回答
139 浏览

php - 使用 PHP 获取 og:image url

我正在尝试修改我在此处找到的一些 PHP 代码,以使其从任何 url 获取 og:image url,标签通常是这样的(当一个不存在时,我会做一个 isset)

或者可能是

我正在使用的代码..

这现在正在提取所有元标记中的所有“内容”,我需要它只搜索并返回 og:image url,但不知道如何做到这一点,非常感谢任何帮助。

编辑添加:我可能不需要数组,因为我只会返回 1 个输出 url,我只是从示例代码开始,认为这是一个很好的起点并适应它,但已经卡住了。再次感谢。

如果我们在https://www.bbcgoodfood.com/recipes/classic-sausage-mash上运行上述内容,我得到的输出是..

0 投票
1 回答
524 浏览

javascript - 无法使用开放图形元标记从我的 React next.js 网站共享 Facebook/Twitter 内容

我有一个 Next.js 应用程序,在其中我无法将内容共享到 Facebook 和 Twitter。我已经在文档的头部标签中添加了所需的开放图元标签,并且正在使用 React Helmet 动态更改这些元标签。如果我使用检查器并查看元素并查看头部内部,我可以看到打开的图形元标记正在使用正确的信息进行更改。但是,当我点击分享到 Facebook 或 Twitter 时,我没有看到任何打开的图形数据被插入到结果帖子或推文中。

任何人都可以就导致此问题的原因以及如何解决此问题给我任何建议吗?我认为这就像添加正确的元标记然后共享一样简单,但我很难做到这一点。任何帮助将不胜感激!

0 投票
1 回答
733 浏览

html - Facebook、Whatsapp 和 iMessage 的 OpenGraph 图像标准

Whatsapp 链接共享的 Open Graph 标签显示我可以有两个或多个 Open Graph 图像,例如 Facebook 的矩形图像和 Whatsapp 的正方形图像:

Facebook 和 Whatsapp 都使用为他们准备的图像。iMessage 也适用于桌面。

但是,iPhone XR 上的 iMessage 两个图像并排显示,结果很丑:

iMessage 上的结果

目前,我已经对用户代理是否是 Whatsapp 实施了服务器端检查,在这种情况下,元标记在所有页面上使用 400x400 图像,而对所有其他页面使用 facebook 1200x630 图像。如果有人想调试,我可以恢复到以前的提交。

如何让 Open Graph 图片分享标签与 Facebook、Whatsapp、iMessage 等主要分享平台以及不同设备兼容?

0 投票
0 回答
148 浏览

wordpress - 如果图像丢失,如何添加默认 og:image?

是否可以在打开的图表中添加默认图像。 <meta property="og:image" content="https://www.example.com/wp-content/uploads/2020/09/example.jpg" /> 当前类别,分页页面,存档页面等中缺少图像。所以我想在打开的图表中添加默认图像。我正在使用 Yoast SEO Wp 插件。

0 投票
1 回答
1118 浏览

html - Whatsapp 图像通过 React js 与文本共享

我正在尝试通过我的网站在 WhatsApp 上启用链接共享(文本 + 图像)。我已经实现了 OG 标签。

在头上——

在我的身体里——

我通过共享调试器验证了我的标签,一切似乎都井井有条,调试器正在获取我的所有标签。

这是 Whatsapp 锚标签 -

但在分享时我只收到文字 - 请访问https://easygov.co.in/PanAdvertisement

我无法弄清楚我错过了什么或做错了什么。

谢谢!