我正在尝试通过我的应用在多个社交媒体平台上共享链接。我的应用程序在 react native 中,我正在使用 react-native-share 插件。我添加了指定所有细节的开放图形标签。
我面临的问题是,预览缩略图在 Twitter 上预览时看起来不错,但是当我尝试在 Facebook 上预览时,缩略图被放大了。下面是 Facebook 共享调试器中的标签。我试过改变宽度和高度,但它不起作用。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta data-vue-meta="ssr" property="og:title" content="Olympe deGouges Needs you to Cast your Vote!" />
<meta data-vue-meta="ssr" property="og:image" content="https://s3.amazonaws.com/bestest-production/facebook-1000-1605101600332/1605101600471.png" />
<meta data-vue-meta="ssr" property="og:image:width" content="1200" />
<meta data-vue-meta="ssr" property="og:image:height" content="630" />
<meta data-vue-meta="ssr" name="twitter:card" content="summary_large_image" />
<meta data-vue-meta="ssr" name="twitter:image" content="https://s3.amazonaws.com/bestest-production/twitter-1000-1605101600410/1605101600508.png" />
<meta data-vue-meta="ssr" name="twitter:image:width" content="1200" />
<meta data-vue-meta="ssr" name="twitter:image:height" content="630" />
<meta name="msapplication-TileColor" content="#0e80c9" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#0e80c9" />
这是它在推特上的样子,缩略图显示了完整的图像。 推特链接预览
而且,当我分享 Facebook 的 URL 时,缩略图在结束时被裁剪 Facebook 链接预览