标签: facebook-opengraph

使用 Open Graph 添加价格范围而不是单一价格

Facebook Open Graph 规定产品价格可以这样指定：

<head prefix="og: http://ogp.me/ns# product: http://ogp.me/ns/product#">
    ...
    <meta property="og:title" content="----PRODUCT TITLE----" />
    <meta property="og:description" content="----PRODUCT DESCRIPTION----" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="http://-----PRODUCT_URL----" />
    <meta property="og:image" content="http://-----PRODUCT_IMAGE_URL----" />
    <meta property="product:price:amount" content="----PRICE----" /> 
    <meta property="product:price:currency" content="USD" />
    ...
</head>

Run Code Online (Sandbox Code Playgroud)

其中包括产品的价格。

然而，我试图展示的产品由于品种不同，有一个价格范围而不是单一价格。Open Graph 是否可以确定价格范围？如果没有，有人知道解决方法吗？

structured-data e-commerce facebook-opengraph

Meh*_*hdi

2017 01-16

5
推荐指数

0
解决办法

1470
查看次数

即使定义了宽度和高度，Facebook 打开图形图像也不会显示在第一个共享上

在过去几周内，显示共享页面的窗口（提交共享之前）在第一次共享页面时不会显示指定的 og:image。该图像显示在共享帖子本身和以下共享请求上。

我们通过 FB 调试器运行页面并收到以下消息

提供的“og:image”属性尚不可用，因为新图像是异步处理的。为了确保新 URL 的共享包含图像，请使用“og:image:width”和“og:image:height”标签指定尺寸。了解更多

问题是我们确实定义了 og:image:width 和 og:image:height 标签，FB 调试器甚至在显示此消息的同一页面上显示它们...请参阅下面的附图。

知道可能是什么原因造成的吗？

facebook facebook-graph-api facebook-opengraph

mik*_*lin

2017 01-24

5
推荐指数

1
解决办法

2446
查看次数

og:image 和 og:url 应该放在 <meta> 还是 <link> 中？

对于og:image和og:url，由于它们有 URL，我可以将它们放在link标签中而不是meta标签中吗？这样更好吗？

og:image另外，使用这两个标签 wrt和有何区别og:url？

html rdfa meta-tags facebook-opengraph

jay*_*ant

2017 01-29

5
推荐指数

1
解决办法

5739
查看次数

打开图/og：元标签 Facebook Messenger

寻找最佳实践解决方案。目前，我的脚本中有元标记，用于在从网页转发链接时显示开放图谱元数据。

所有图标均为 112x112，即方形，在 WhatsApp 等上显示效果很好。当输入 NewsFeed 时，它们在 Facebook 上显示效果也很好。

然而 - 如果我尝试通过 Facebook Messenger 转发该提要 - 图像的尺寸不同，似乎我需要更高的分辨率。

为此需要对脚本进行哪些调整？我不想重新定义或添加新的图像。

谢谢

image facebook-opengraph facebook-messenger

eez*_*zee

lucky-day

5
推荐指数

0
解决办法

934
查看次数

图像社交元标签 - property="og:image" name="twitter:image" itemprop="image"

当 URL 共享时，社交网络可以很好地从网站中提取标题和描述，但对于图像，仍然需要创建自定义元标记：property="og:image" name="twitter:image" itemprop="image". 我的问题是，这行得通吗？

<meta property="og:image" name="twitter:image" itemprop="image" content="http://example.com/image.jpg" />

Run Code Online (Sandbox Code Playgroud)

因此，我不必为网站上的每个网页创建 3 个不同的元标记。

html microdata schema.org facebook-opengraph twitter-card

Dre*_*ord

2022 06-07

5
推荐指数

1
解决办法

5121
查看次数

问题

我正在将create-react-app与 Firebase 结合使用，这一直是我的梦想，但我遇到了障碍。我想将从用户提供的 URL 获取 Open Graph 元数据的功能合并到我的应用程序中，但据我们所知，在浏览器中完成此操作会被阻止。

这个使用节点的开放图元数据的示例非常接近我想要做的事情。

我尝试过的

我已经查看了自述文件，特别是Proxying API Requests in Development。

我已经在这里和 create-react-app Github 存储库（开放和封闭）上搜索了相关问题。CORS 和类似的结果已经返回，但在如何整合某些东西来实现这一目标方面仍然存在相当大的差距。

我读过建议我应该使用 Express 的评论，但我不确定如何将其与 create-react-app 和 webpack 结合起来（更不用说这在生产中如何工作）。

我想我只是还没有完全把所有的部分放在一起来完成这个任务，如果有人有时间的话，我会很感激指导。

package.json 文件

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "dependencies": {
    "firebase": "^3.9.0",
    "material-ui": "^0.18.7",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.0.2",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-avatar": "^2.3.0",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": …

Run Code Online (Sandbox Code Playgroud)

express facebook-opengraph reactjs create-react-app

jam*_*821

2017 08-08

5
推荐指数

1
解决办法

5712
查看次数

将开放图形信息添加到托管 pdf 文件中？

这里有点业余，所以如果这个问题是我应该知道的，但我不知道，我提前道歉。我试图找出是否有一种方法可以将 Open Graph 信息添加到我在 public_html 文件夹中托管的 pdf 文件中。

澄清一下，我有一个 WordPress 网站，其中有一个名为“知识库”的页面，其中包含链接到我通过 FTP 传输到该 WordPress 文件夹中的各种有用 PDF 文件的项目组合项目。当我尝试在 Facebook 上分享该文件的链接时，我愚蠢地意识到，没有显示任何图像、描述或标题。有什么办法可以缓解这种情况吗？我可以在共享 URL 中添加更多信息吗？我可以将元数据添加到 PDF 中吗？我可以链接到另一个页面并以某种方式将元数据放在那里，然后自动重定向到 PDF 链接吗？

我先声明一下，我不是程序员，所以请对我宽容一些。预先感谢您的任何帮助...

pdf wordpress facebook facebook-opengraph

Kir*_*ten

2017 09-06

5
推荐指数

0
解决办法

1717
查看次数

Facebook、linkedin 和 twitter 的 OpenGraph 元

我试图确保在共享我的网站时显示正确的元信息。我以为我可以正常工作，但我在不同的社交网站上遇到了一些问题，如下所示：

Twitter 提取文本，但不显示指定的图像。
LinkedIn 显示文本，但似乎使用了错误的图像，因此它被拉伸。
Facebook 不显示任何内容。如果我发布 URL，则所有内容都会显示为超链接。

最初我只有这些meta name="twitter:东西，但后来添加了meta property="og:上面的内容，因为我被告知这是 LinkedIn 需要的。

这是我在网站中使用的元/OpenGraph 数据head：

<!-- OpenGraph -->
<meta property="og:title" content="myurl.com - What this website is" />
<meta property="og:description" content="Specialising in lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod." />
<meta property="og:url" content="http://myurl.com" />
<meta property="og:image" content="/img/site/linkedin-media-image.png" />

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitteruser">
<meta name="twitter:url" content="https://myurl.com">
<meta name="twitter:title" content="I am a lorem ipsum dolor sit amet, consectetur …

Run Code Online (Sandbox Code Playgroud)

twitter facebook meta-tags facebook-opengraph linkedin-api

use*_*440

2017 09-22

5
推荐指数

1
解决办法

2065
查看次数

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

我使用 vue init nuxt /express myprojectstart 启动了 nuxt 应用程序。

这是我的目录。

page
|- _project.vue
|- project
  | - index.vue

Run Code Online (Sandbox Code Playgroud)

_project.vue的配置

export default {
  head () {
    return {
      title: this.project.title,
      meta: [
        {property: 'fb:app_id', content: '12873892173892'},
        {property: 'og:title', content: this.project.title},
        {property: 'og:image', content: this.project.image},
      ],
    }
  }
},
async asyncData ({app, params, error}) {
  const project = await app. $ axios. $ get (`/ project`)
    return {
      project: project.project,
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

但是，如果您按 Facebook 共享按钮，则不会出现所需的标题和图像。

我认为这是服务器端渲染问题。但我无法解决这个问题。

我将不胜感激你的帮助。

facebook facebook-opengraph vue.js server-side-rendering nuxt.js

hye*_*luv

lucky-day

5
推荐指数

1
解决办法

2万
查看次数