标签: facebook-opengraph

将链接分享到用户墙后,如何避免图像在 Facebook 预览中被“裁剪”

我一直在为这个问题而苦苦挣扎,希望有人能帮忙:

我有一个在 Facebook 上共享的页面(当前使用 js sdk / fb.ui / 方法:“共享”),流程工作正常,页面被共享,但用户墙上或提要上的页面预览有时显示方形图像有时显示矩形图像。

我已经在页面上正确设置了开放图标签,并且刮刀似乎发现一切正常,但当它显示在用户墙上时,我仍然遇到这种不一致的情况。有没有一种方法可以指定 2 个不同的图像(一个用于方形演示,另一个用于矩形)?

另一件事是,根据最佳实践文档,我在 og:image 标签上指定的图像恰好是 1200 x 630 像素。

facebook facebook-opengraph

5
推荐指数
1
解决办法
1万
查看次数

打开图元标签以在 Facebook 上分享 GIF

我已经为标题和网址添加了元标记。gif 的网址工作正常,但在 Facebook 上的预览中未显示标题。有什么额外的配置吗?

meta-tags facebook-opengraph

5
推荐指数
1
解决办法
3778
查看次数

Metas 打开图来构建与动画 gif 的共享

我正在尝试建立一个页面来分享动画 GIF,就像 Giphy 一样。

如果您共享此链接 ( http://giphy.com/gifs/mQpZtX0gKDESA ),您会看到共享图像变得可以播放。需要注意的是,我不想分享 gif 的直接链接。我需要用 gif 共享我的页面,并且共享需要显示可播放的 gif。

我已经尝试复制 Giphy 使用的所有元标记,但没有运气。

如果有人知道这件事,我将非常感激。

感谢您的帮助。

share facebook animated-gif facebook-opengraph giphy

5
推荐指数
1
解决办法
3361
查看次数

Vue 中的动态 Meta 标签(Open Graph)

我有一个 Vue.js 应用程序,当链接在社交媒体(主要是 Facebook)上共享时,我想使用 Open Graph Meta Tags 来显示一些内容(标题、描述、图像)。

我使用 vue-meta 在我使用标题模板的地方显示标题,并且该部分运行良好(除了一个问题,解决后可能会解决)。

metaInfo () {
return {
  titleTemplate: this.item.title + ' | %s',
  meta: [
    {property: 'og:title', content: ' | My Site'},
    {property: 'og:site_name', content: 'My Site'},
    // The list of types is available here: http://ogp.me/#types
    {property: 'og:type', content: 'website'},
    // Should the the same as your canonical link, see below.
    {property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
    {property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
    // Often the same as your meta description, but not always. …
Run Code Online (Sandbox Code Playgroud)

facebook-opengraph firebase vue.js vue-meta

5
推荐指数
0
解决办法
2628
查看次数

Whatsapp 用来抓取网站的用户代理是什么?

我正在一个网站上做一些 SEO 调整,我注意到 Whatsapp 接受最后列出的任何“og:image”。出于某种奇怪的原因,当我列出 whatsapp 的小图片时,我的推特卡片也选择了那个,而不是我专门为 Twitter 提供的那个。

所以我正在考虑只列出“og:images”,不包括 Whatsapp 的那个,除非用户代理是 WhatsApp 的。

考虑到这一点,我想知道 WhatsApp 的爬虫提供的用户代理是什么?

facebook-opengraph twitter-card

5
推荐指数
1
解决办法
4305
查看次数

OG 标签不适用于 react-helmet 和 Netlify

我一生都无法弄清楚这一点。以下站点托管在 Netlify 上并启用了预渲染。检查页面时,所有 OG 标签都是正确的。这些标签是使用 react-helmet 注入的。

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

在 Facebook 调试器上抓取上述 URL 时,它会响应:

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
Run Code Online (Sandbox Code Playgroud)

唯一应该存在的错误/警告之一是app_id,我不在乎。

我已经等了 48 多个小时才清除缓存,我尝试使用附加到 URL 的查询字符串进行抓取,并且图像具有绝对 URL。但即使是描述标签也没有通过。

请使用 react-helmet 和 Netlify 的人对这个问题有明确的认识吗?

prerender facebook-opengraph netlify react-helmet

5
推荐指数
1
解决办法
3934
查看次数

React facebook 共享无法使用服务器端渲染处理开放图元标记

我曾尝试在 facebook 上与 React 共享图像。我使用 react-helmet npm 动态添加了 og:image 标签,并使用 react-snapshot 预渲染了构建。在查看源时,og:image URL 存在,但是当我尝试共享图像时,它不会共享。

如果我在 index.html 中提供静态 og:image URL,facebook 将按预期工作。我已经尝试使用 react-snapshot 进行预渲染并添加元标记

import {Helmet} from "react-helmet";

fbshare1 = () => {
    window.open(
        'https://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href), 
        'facebook-share-dialog', 
        'width=626,height=436'); 
        return false;
}

<Helmet>
  <title>About us Title</title>
        <meta property="og:url" content="https://little-parrot-19.localtunnel.me" />
        <meta property="og:title"  content="Welcome to Passup" />
        <meta property="og:description"  content="A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article." />
        <meta property="og:image" …
Run Code Online (Sandbox Code Playgroud)

facebook-opengraph reactjs react-helmet

5
推荐指数
1
解决办法
2626
查看次数

如何将网页与 Facebook 页面相关联?fb:pages 被弃用了吗?

在网页上,我包括

<meta property="fb:pages" content="123...">   
Run Code Online (Sandbox Code Playgroud)

以及各种开放图信息。我最近用那个号码创建了那个 Facebook“页面”。

当链接在 Facebook 上共享 og:image 等工作时,但没有连接到我尝试链接的 Facebook“页面”。相反,共享的右上角有一个“i”,它提供了一个关于此网站的信息框,上面写着“Facebook 页面:未找到”。(我首先将 url 放在共享调试器中,然后在那里重新抓取了 url。)

我看到有一些方法可以在“业务经理”中验证您对整个域的所有权(facebook 文档,但它说:

您仍然可以将开放图谱标签添加到您的网站以表明所有权——这不需要使用商务管理器。您可以在 Open Graph - Object Properties 文档中找到有关实施 fb:pages 标记的更多信息。

所以我认为 fb:pages 应该可以工作,而且我认为它应该像我一样工作。不幸的是,该引用的链接现在转到了不相关的文档。此外,Facebook 的共享调试器显示fb:app_id在它在页面上找到的 Open Graph 属性中。

另一方面,还有其他文档只fb:app_id被提及。那么,是否仍然可以在不制作应用程序或在您的网页上包含更多 Facebook 交互性的情况下,仅在网页中说明它应该与哪个 Facebook“页面”相关联?(就像我想的fb_pages那样。)

facebook facebook-opengraph

5
推荐指数
1
解决办法
2193
查看次数

使用开放图谱协议时 &lt;html prefix="og: http://ogp.me/ns#"&gt; 是强制性的吗?

简单的问题:

我需要这个吗:

<html prefix="og: http://ogp.me/ns#">
Run Code Online (Sandbox Code Playgroud)

要使用这个:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Run Code Online (Sandbox Code Playgroud)

为什么?

html meta facebook-opengraph

5
推荐指数
1
解决办法
1173
查看次数

Instagram Grap Api 为最近的媒体 GET 请求返回空数据

我正在尝试将所有相关媒体添加到我的主题标签#Corona 中,该标签使用ig-hashtag-id 标识:17843934877037015,因此我发送了我的 GET 请求:GET graph.facebook.com/17843934877037015/recent_media?user_id=myUserID 它应该像在此处的 facebook 文档中显示的那样工作:https:/ /developers.facebook.com/docs/instagram-api/guides/hashtag-search但我将空数据作为 Json 结果返回。

    {
  "data": [
  ],
  "paging": {
    "cursors": {
      "after": "UVZAGRFdEZAEdjRTlGYkROUk9XRk1PR1o0TnpsTGEwcEJVVE5mVTI1SmFuQkhXRzV0UldRM2JWaFdla0pKUkZAaUE1WcEZAOelZAZAYjFRMFptZAEhTbHB6ZADJOWWRWbHpTSFpUZAG1OZAlUyOVNjMVpHZAVdGclpUZA3RXZAz09"
    },
    "next": "https://graph.facebook.com/v10.0/17843934877037015/recent_media?access_token=myAccessToken&pretty=0&user_id=myUserID&limit=25&after=UVZAGRFdEZAEdjRTlGYkROUk9XRk1PR1o0TnpsTGEwcEJVVE5mVTI1SmFuQkhXRzV0UldRM2JWaFdla0pKUkZAaUE1WcEZAOelZAZAYjFRMFptZAEhTbHB6ZADJOWWRWbHpTSFpUZAG1OZAlUyOVNjMVpHZAVdGclpUZA3RXZAz09"
  }
}
Run Code Online (Sandbox Code Playgroud)

非常感谢您提供任何建议的帮助:)

facebook-graph-api facebook-opengraph instagram-api instagram-graph-api

5
推荐指数
1
解决办法
283
查看次数