如何在 Facebook、WhatsApp 或 reactjs 中的任何平台上共享任何链接时显示图像

Question

我是 reactjs 的新手。当我分享链接时，它应该显示图像。我尝试使用 react-meta-tags 依赖项更新元标记，但没有奏效，但它正在更新文档标题，但不适用于图像。我尝试使用 react-document-meta 但没有奏效。 请帮我

import React from "react";
import "./styles.css";
import MetaTags from "react-meta-tags";

export default function App() {
  return (
    <div className="wx-1120px border-box pxl-10px">
      <MetaTags>
        <title>Page 1</title>
        <meta
          id="meta-description"
          name="description"
          content="Some description."
        />
        <meta id="og-title" property="og:title" content="MyApp" />
        <meta
          id="og-image"
          property="og:image"
          content="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg"
        />
      </MetaTags>
      <h3 className="wx-100precent fsx-48px din-bo alText-center mxb-15px">
        Test Title{" "}
      </h3>
      <img
        src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg"
        alt="test"
        height="300"
        width="300"
      />
      <p className="alText-center din-re fsx-14px color-HEX666666 mxb-30px">
        Published by - Test User | 8 minute read
      </p>

      <style jsx>{`
        .word-wrap {
          word-wrap: break-word;
          text-align: justify;
        }
      `}</style>
    </div>
  );
}

Answer 1

WhatsApp 不支持大小超过 300kB 的图像。

添加此元标记以在 WhatsApp 中显示图像（小于 300kB）

<meta property="og:image" content="url_image">