gpt4 book ai didi

html - 当使用React JS在社交媒体,Gmail和Skype上共享链接时,如何为Url创建预览(图像和描述)?

转载 作者:行者123 更新时间:2023-12-03 14:08:55 26 4
gpt4 key购买 nike

我们正在使用React JS开发一个Web应用程序。

我们希望在社交媒体网站和Skype上共享时显示图像和描述。

现在,当URL链接被共享时,仅URL会像这样显示:

enter image description here

但是我们想在Nat地理站点中使其看起来像这样:

enter image description here

我们尝试过的是:

index.html in /projectname/public/ folder
<head>
<meta charset="utf-8">
<meta name="keywords" content="Description goes here">
<meta name="author" content="title goes here">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="light">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>

在manifest.json中,我们有:
{
"short_name": "ABC",
"name": "Title",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

我们怎样才能做到这一点?是因为URL上附加了端口号吗?

它也似乎不适用于localhost URL。

谢谢

最佳答案

您需要设置Open Graph Meta标签:
https://ogp.me

默认情况下,React在客户端上渲染。在某些情况下(例如,在Facebook上共享链接时),它们不会渲染您的网站来检测这些元标记。
在这种情况下,您需要服务器端渲染(例如,使用NextJS或https://prerender.io)

关于html - 当使用React JS在社交媒体,Gmail和Skype上共享链接时,如何为Url创建预览(图像和描述)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58505765/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com