发布/共享URL链接时的React缩略图预览

Question

我试图从我的react项目中的不同链接获取页面预览，但它只显示了index.html的“主页”预览。我知道React是一个SPA，但是当我分享/发布这些链接时，有没有一个模块或方法来显示预览/缩略图？我使用Wordpress的无头CMS作为API调用的后端。我想发布文章的预览/缩略图/等。我创造。

示例: www.foxnews.com

​

Answer 1

我也遇到了同样的问题，下面是我是如何解决它的

我已经在页面网站中添加了缩略图，可以从路线访问(你想给他一个缩略图)

将页面(或者至少是第一张图片)的第一个元素设置为

因为:缩略图链接拍摄您的网站的第一张图片

然后用Css确保图片不会出现，而是！警告!不要这样做：

display : none

因为它将作为一个删除的图片，不会被考虑

下面是我如何做到这一点的一个例子！

页面的.jsx文件中的

<div className="thumbnail">
      <img src="/thumbnails/landing.png" alt=""/>
</div>

sass中的样式与css中的样式相同。

.thumbnail
    position : absolute
    top : 0 
    z-index : -5000
    width : 0px
    height : 0px
    img
        object-fit : cover
        width : 0px
        height : 0px

Answer 2

react应用程序的公共文件夹中有一个名为index.html的文件

在其中，您应该像这样添加meta属性标记

​

<meta property="og:URL" content="%PUBLIC_URL%/localImage.jpg" />

<meta property="og:type" content="article" />
    
<meta property="og:title" content="lorem ipsum lorem ipsum" />
    
<meta property="og:description" content="lorem ipsum" />

<meta property="og:image" content="%PUBLIC_URL%/localImage.jpg" />

​

​

​