使用 React JS 在社交媒体、Gmail 和 Skype 上共享链接时，如何创建 URL 的预览（图像和描述）？
我们正在使用 React JS 开发一个 Web 应用程序。
我们希望在社交媒体网站和 Skype 上共享时显示图像和描述。
现在，当 URL 链接被共享时，只有 URL 会像这样显示：
但是我们想让它在 Nat geo 站点中看起来像这样：
.
我们尝试过的是：
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）
使用 React 客户端渲染，您应该使用react-helmet.
import React from 'react';
import { Helmet } from 'react-helmet';
class Application extends React.Component {
render() {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="mysite.com/example" />
</Helmet>
...
</div>
);
}
}
使用 SSG 或 SSR 渲染检查框架（如 Next.js 和 Gatsby.js）的其他可能的解决方案
- 这是行不通的，因为头盔仍然在客户端被调用，并且社交媒体不运行 JS。 (3认同)
| 归档时间： |
|
| 查看次数： |
6317 次 |
| 最近记录： |