动态开放图式反应

编程问答 2022-06-07

问题描述

我希望网站图标和OG图片是动态的（link to the page）。我的网站上有一个页面。

因此，我为此目的使用了react-helmet，react-Meta-tags和react-favicon。

页面标题部分的

代码：

import React,{ useState } from "react";
import Helmet from "react-helmet";
import Favicon from 'react-favicon';
import MetaTags from 'react-Meta-tags';

export default function MetaData(props) {
    const [Meta] = useState({
        name: props.name,description: props.description,ogUrl: props.ogUrl,imgurl: props.imgurl
    });

    return (
        <>
            <MetaTags>
                <Meta name="title" content={Meta.name} />
                <Meta
                    name="description"
                    content={Meta.description}
                />

                <Meta property="og:title" content={Meta.name} />
                {Meta.imgurl && <Meta property="og:image" content={Meta.imgurl} />}
                <Meta
                    property="og:description"
                    content={Meta.description}
                />
                <Meta property="og:url" content={Meta.ogUrl} />
            </MetaTags>
            <Helmet>
                <title>{Meta.name}</title>
                {Meta.imgurl && <link rel="icon" href={Meta.imgurl}></link>}
                <Meta name="title" content={Meta.name} />
                <Meta
                    name="description"
                    content={Meta.description}
                />
                <Meta property="og:title" content={Meta.name} />
                {Meta.imgurl && <Meta property="og:image" content={Meta.imgurl} />}
                <Meta
                    property="og:description"
                    content={Meta.description}
                />
                <Meta property="og:url" content={Meta.ogUrl} />
                <link rel="icon" id="favicon" href={Meta.imgurl} />
                <link rel="apple-touch-icon" href={Meta.imgurl} />
            </Helmet>
            {Meta.imgurl && <Favicon url={Meta.imgurl} />}
        </>
    );
}

也有我的Index.html页面，其中配置了默认标头：

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="utf-8" />
  <title>Bucard | Digital Business Card</title>

  <Meta name="viewport" content="width=device-width,initial-scale=1" />
  <Meta name="theme-color" content="#000000" />
  <link rel="canonical" href="https://bucard.co.il/" />

  <link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <Meta name="title" content="Bucard | Digital Business Card" />
  <Meta name="description"
    content="Bucard - כרטיס הביקור הדיגיטלי לעסק שלך,עיצוב חדשני עם פיצ'רים מיוחדים,שיתוף בקלות ברשתות החברתיות וחווית משתמש מעולה!" />

  <!-- Tag Manager -->
  <!-- Analytics -->

  <Meta property="og:locale" content="he_IL" />
  <Meta property="og:type" content="website" />
  <Meta property="og:title" content="Bucard | Digital Business Card" />
  <Meta property="og:image" content="https://bucard.co.il/favicon.ico" />
  <Meta property="og:description"
    content="Bucard - כרטיס הביקור הדיגיטלי לעסק שלך,שיתוף בקלות ברשתות החברתיות וחווית משתמש מעולה!" />
  <Meta property="og:url" content="https://bucard.co.il/" />
  <Meta property="og:site_name" content="Bucard" />

</head>

<body>
  <!-- Google Tag Manager -->
  <div id="root"></div>
</body>

</html>

我的问题是动态og:image，og:title和og:description无法正常工作。 我正在尝试的是使“肉店”图像成为此页面的og：image（社交媒体上的共享图像）。 您可以使用打开的图形预览工具自己检查一下，或者甚至尝试将其发送到Whatsapp或Facebook中，然后看到og：image将被渲染为默认的网站收藏夹图标（“ Bu”图像）。

How the sharing renders currently How I need it to be rendered

感谢所有帮手！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlmeta-tagsreact-helmetreactjsreactjsshare-open-graph