OpenGraph Metadata Component

Author: linkdotnet

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -1,7 +1,6 @@
 @page "/BlogPost/{blogPostId}"
 @using LinkDotNet.Domain
 @using LinkDotNet.Infrastructure.Persistence
-@using Microsoft.AspNetCore.Components.Web.Extensions.Head
 @inject IRepository _repository
 @inherits MarkdownComponentBase
 
@@ -11,8 +10,7 @@
 }
 else
 {
-    <Meta property="og:title" content="@BlogPost.Title" />
-    <Meta property="og:image" content="@BlogPost.PreviewImageUrl" />
+    <OgData Title="@BlogPost.Title" PreviewImageUrl="@BlogPost.PreviewImageUrl"></OgData>
     <div class="blog-outer-box">
     <div class="content blog-container">
         <div class="blog-content">

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -1,9 +1,12 @@
 @page "/"
 @using LinkDotNet.Domain
 @using LinkDotNet.Infrastructure.Persistence
+@using Markdig
 @inject IRepository _repository
 @inject AppConfiguration _appConfiguration
 
+<OgData Title="@(Markdown.ToPlainText(_appConfiguration.Introduction.Description))" PreviewImageUrl="@_appConfiguration.Introduction.BackgroundUrl"></OgData>
+
 <IntroductionCard Introduction="_appConfiguration.Introduction"></IntroductionCard>
 
 <div class="content px-4">

LinkDotNet.Blog.Web/Shared/OgData.razor

@@ -0,0 +1,17 @@
+@using Microsoft.AspNetCore.Components.Web.Extensions.Head
+@inject NavigationManager _navigationManager
+
+<Meta property="og:title" content="@Title" />
+<Meta name="image" property="og:image" content="@PreviewImageUrl" />
+<Meta property="og:type" content="article" />
+<Meta property="og:url" content="@_navigationManager.Uri" />
+
+@code {
+
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public string PreviewImageUrl { get; set; }
+
+}