问题标签 [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 投票
1 回答
79 浏览

php - 为什么 Facebook 不会加载通过 php 文件加载的 og:image?

我正在使用 php 文件将图像加载到我的网页中,因为它们托管在 webroot 之外。除了 Facebook 在og:image以这种方式加载时没有在元标记中注册图像之外,一切都运行良好。

具有讽刺意味的是,有问题的页面是https://www.molecularmagic.net/hosting/the.computing.cafe/www/index.php?t=3b3c55

有问题的元标记是:

与图像一起发送的标头是:

在这种情况下,Facebook 共享调试器给了我这个错误:

对于其他页面,og:image标签为:

文件名后面的数字是filemtime强制 FB 重新加载图像,如果我改变它。与此图像一起发送的标头是:

...和 ​​Facebook 共享调试器正确呈现图像。

我已经非常努力地确保发送图像时的标题file.php尽可能接近从“真实”图像文件发送的标题。

我知道这是通过提供图像引起的,file.php但我不明白为什么当标题看起来相同时,Facebook 会告诉我图像具有无效的内容类型。

谁能建议为什么会这样?

0 投票
0 回答
59 浏览

url - 通过 3rd 方应用程序共享时,LinkedIn 无法识别 OG 标签

首先,值得注意的是,这个过程完美地运行了 2 年。大约 2 周前它开始间歇性地失败。

我们使我们的客户能够通过我们的 Linkedin 应用程序将带有自定义 OG 图像的 URL 共享到 Linkedin。

目前,它没有像这样的“预览”图像https://www.linkedin.com/feed/update/urn:li:activity:6811038971855020032/(截图https://i.imgur.com/I8OsZy1.png )

但是,当使用LinkedIn Post Inspector 检查时,它可以完美运行https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fjobadder.refari.co%2Fsocial%2F8e3284ec-d6b8-4d0b-b6a8-cb2a19a56432% 2F(同一件事的截图https://i.imgur.com/dYItzDI.png

如果我将 URL 手动粘贴到 LinkedIn,它也会毫无问题地获取 OG 图像。https://i.imgur.com/S0TTVE7.png

值得注意的是,此示例中获取的图像为 438kb(因此不大)

据我们所知,这是 Linkedin 获取 OG 图像的问题,但我非常愿意被告知其他情况。任何帮助都将非常感激。

0 投票
1 回答
52 浏览

facebook-opengraph - og:image:url 与 og:image 之间的区别

我的网页应该同时包含og:image:urlandog:image还是只包含og:image

另外,我需要包括og:image:widthandog:image:height吗?

0 投票
1 回答
302 浏览

html - 用于 opengraph 的 mkdocs 元标记

我希望在共享指向我的 mkdocs 文档的链接时进行图像预览,该文档由 RTD 托管和构建。我需要覆盖站点的 HTML 标头并添加一个开放图形协议。

经过一番调查,我发现了一些关于 Material 主题的 HTML 覆盖的资源:
https://squidfunk.github.io/mkdocs-material/reference/meta-tags/
https://rohancragg.co.uk/writing/social -media-sharing/
像这样的 sphinx 插件是理想的:
https ://github.com/wpilibsuite/sphinxext-opengraph

不幸的是,我在文档中使用 mkdocs 和 readthedocs 主题,显然,这并不完全支持元扩展:

这是我所做
的:我能够添加扩展并链接包含开放图形协议的 main.html 覆盖。链接共享工作得很好!不幸的是,现在我文档中的所有页面都呈现为白色。我在构建的日志(如下)中没有收到错误消息,或者我忽略了一些东西。
查看原始 html,我可以看到标题现在只包含 opengraph 协议,而正文是空的:

本质上,我想知道是否有一种方法可以将元标记添加到 readthedocs 主题的标题中,类似于 Material 主题中的可能性。

这是来自 readthedocs 的构建日志:

0 投票
0 回答
26 浏览

android - Android SMS 消息应用程序忽略 og 图像标签

我为我的网站设置了 og:image 标签等,它在 https://developers.facebook.com/tools/debug/https://www.opengraph.xyz/等工具上运行良好

我的 og:image 大小为 1598 × 838。当我在 Facebook、Twitter 等上分享图片时效果很好,但当我在 SMS 上分享图片时,Google 的 SMS 应用程序会以某种方式选择该页面上的不同图片并将其用于分享预览。

如何为 SMS 应用程序指定收集图像?

0 投票
0 回答
20 浏览

linkedin - LinkedIn og:从自己的网站上的 url scraper 无法读取图像内容

通过 Facebook 的调试器运行我的 URL 时,通过我的 API 可以很好地返回图像:

Facebook 调试器 Facebook 调试器

但是,相同的 URL 不会为 LinkedIn 返回任何内容: 在此处输入图像描述

如果我直接链接我从中提取的网站上托管的图像,它可以工作(图像在大小、比例等方面相同):

两者之间只有代码更改

即使您将我的图像 API 链接直接粘贴到调试器中,它也可以: 在此处输入图像描述

我完全不知道为什么它不会在 LinkedIn 上返回我的图像。

0 投票
0 回答
11 浏览

github - 是否有获取 GitHub 存储库 OpenGraph 图像的 RESTful 方式?

我知道某些数据有可用的 API吗?该链接是否可通过这些API获得?或者,有没有办法生成它?

具体来说,我想获取这张图片的网址。

在此处输入图像描述

0 投票
2 回答
55 浏览

html - 在页面加载后向 iOS 发出 meta og:image 属性标签内容更改的信号

我正在为一个 Web 项目实现og:image标签。在页面加载并返回 HTTP 调用后,标签​​中的值会异步更新。

iOS 似乎在页面加载时就提取了标签的内容,如果那里没有值,则消息应用程序中不会呈现任何图像..即使该值仅在几秒钟后填充。有什么解决方法吗?

0 投票
0 回答
125 浏览

facebook-opengraph - 在 iOS WhatsApp 中显示链接的打开图元标记

有来自两个不同站点的两个页面

  1. http://nastyazelenetskaya.pixlpark.ru/calendars
  2. http://printkov.pixlpark.ru/prints/notepads

当我将链接复制到 iOS WhatsApp 中的第一个链接时,标签不显示。

但是对于第二个,所有标签都显示没有任何问题。

https://i.stack.imgur.com/Q9jUf.jpg

我对它们都使用相同的元标记。


中的标签

正文中的标签

0 投票
1 回答
33 浏览

html - 使用链接 rel="canonical" 时可以省略“og:url”吗

在设置新网页并防止搜索引擎出现重复内容问题时,我使用 canonical tag <link rel="canonical" href="https://example.com/slug" />

我遇到了开放图形协议,以改善在社交媒体上共享网页时的体验。

就我而言,我打算使用规范来消除 http/https、非 www/www 之间的重复项或删除 url 参数,例如https://example.com/slug?foo=bar.

对于这种情况,规范标签和开放图元数据看起来og:url会执行相同的功能。我应该同时包含两者还是可以安全地省略og:url元数据?

先感谢您