Blazor 托管 WebAssembly 上的预览链接不起作用

Question

我有一个包含食谱等的网站，并且经常在 Facebook 上分享链接。但是，预览链接未正确显示页面图像和标题。

该应用程序是 Blazor Webassemble 托管解决方案。我已按照此链接上的说明进行操作

控制 ASP.NET Core Blazor 应用中的内容

它仍然不起作用。这是我所做的。

客户项目：

Program.cs - 添加到 Main()

builder.RootComponents.Add<HeadOutlet>("head::after");

index.html - 添加到

<title>BBQFriend - BBQ Recipes, Cook Logs and More.</title>
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="BBQFriend.com" />
    <meta property="og:image" content="https://www.bbqfriend.com/Logos/IconBackground.png" />
    <meta name="description" content="A complete BBQ recipe designer and journal. Helping you cook your very best, every time." />

服务器项目：

_Layout.cshtml -

<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

    <title>BBQFriend - BBQ Recipes, Cook Logs and More</title>
    <meta property="og:site_name" content="BBQFriend.com" />
    <meta property="og:image" content="_content/BBQFriend.Components/Logos/BBQFriend.svg" />
    <meta name="description" content="A complete BBQ recipe designer and journal. Helping you cook your very best, every time." />

_Host.cshtml -

 <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

    <title>BBQFriend - BBQ Recipes, Cook Logs and More.</title>
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="BBQFriend.com" />
    <meta property="og:image" content="https://www.bbqfriend.com/Logos/IconBackground.png" />
    <meta name="description" content="A complete BBQ recipe designer and journal. Helping you cook your very best, every time." />

Blazor 组件剃刀

<PageTitle>BBQFriend - @Recipe?.Name by @Recipe?.UserName</PageTitle>
<HeadContent>
    <meta name="og:title" content="BBQFriend - @Recipe?.Name by @Recipe?.UserName">
    <meta name="og:description" content="@Recipe?.Description">
    @if (!string.IsNullOrEmpty(Recipe?.PhotoUrl))
    {
        <meta name="og:image" content="@Recipe?.PhotoUrl">
    }
    else
    {
        <meta name="og:image" content="https://www.bbqfriend.com/Logos/IconBackground.png">
    }
</HeadContent>

每次我发布这样的链接https://www.bbqfriend.com/Recipe/BBQFriend/Smoked-Chicken-and-Chimichurri-FaceBook 上的预览不会显示图像，只显示默认标题“BBQFriend - 烧烤食谱、烹饪日志等等。”

我正在寻找的是具有食谱标题和食谱照片的预览。我错过了什么？

Answer 1

查看您渲染的页面与您提供的示例代码，请注意您正在渲染的 _Host.cshtml、_Layout.cshtml 和 index,html 页面：

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

但是在 Blazor Component Razor 上您正在渲染

<meta name="og:image" content="...">

因此，您实际上正在重新渲染 和

Facebook 似乎更受青睐 vs

OpenGraph 网站的示例使用

<meta property="og:image" ...>

这是另一个答案，解释了两者之间的区别： https://stackoverflow.com/a/22418095/22600206

您应该更新 Blazor 组件才能使用 。

拥有实际的后备图像也是一个好主意。