0

这是我网站中的一个动态页面：link

当在 Whatsapp、Facebook 等中分享时，我将所有这些代码作为动态图标、动态标题、动态描述和最重要的动态开放图（例如 og:image）的元标记提供给这个页面。

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: "https://bucard.co.il/server/public/images/uploads/1601487360190-meat-shop-logo_71835-89.jpg"
    });
    
    return (
        <>
            <MetaTags>
                <meta name="title" content={`Digital Card Of ${meta.name}`} />
                <meta
                    name="description"
                    content={meta.description}
                />

                <meta property="og:title" content={`Digital Card Of ${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>{`Digital Card Of ${meta.name}`}</title>
                {meta.imgUrl && <link rel="icon" href={meta.imgUrl}></link>}
                <meta name="title" content={`Digital Card Of ${meta.name}`} />
                <meta
                    name="description"
                    content={meta.description}
                />
                <meta property="og:title" content={`Digital Card Of ${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} />
            </Helmet>
            {meta.imgUrl && <Favicon url={meta.imgUrl} />}
        </>
    );
}

现在，如果你输入上面页面的链接，通过f12可以看到head部分的og:image正好——

<meta property="og:image" content="https://bucard.co.il/server/public/images/uploads/1601487360190-meat-shop-logo_71835-89.jpg">

，但是例如在 Whasapp 上共享页面时，该图像未显示，而是呈现了网站图标。

共享时渲染图像的快照

请问有什么帮助吗？我只需要 og:image 工作:)

4

0 回答 0