💄 Hosted page SEO optimization

DysonNetwork.Zone/Pages/About.cshtml

@@ -4,8 +4,75 @@
 
 @{
     Layout = "_LayoutContained";
+
+    var pageTitle = "About";
+    var pageDescription = "Information page.";
+    var ogType = "website";
+    string? ogImageUrl = null;
+    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
+    var siteName = Model.Site?.Name ?? "Solar Network";
+
+    if (Model.UserAccount != null)
+    {
+        pageTitle = $"About {Model.UserAccount.Nick ?? Model.UserAccount.Name}";
+        if (!string.IsNullOrWhiteSpace(Model.UserAccount.Profile?.Bio))
+        {
+            pageDescription = Model.UserAccount.Profile.Bio;
+        }
+        else
+        {
+            pageDescription = $"Profile of {Model.UserAccount.Nick ?? Model.UserAccount.Name} on {siteName}";
+        }
+        
+        ogType = "profile";
+        ogImageUrl = Model.UserPictureUrl;
+        if(!string.IsNullOrEmpty(ogImageUrl) && !ogImageUrl.StartsWith("http"))
+        {
+            ogImageUrl = $"{Request.Scheme}://{Request.Host}{ogImageUrl}";
+        }
+    }
+    else if (Model.Site != null)
+    {
+        pageTitle = $"About {Model.Site.Name}";
+        if(!string.IsNullOrWhiteSpace(Model.Site.Description))
+        {
+            pageDescription = Model.Site.Description;
+        }
+        ogType = "website";
+        ogImageUrl = null;
+    }
+
+    if (!string.IsNullOrWhiteSpace(pageDescription) && pageDescription.Length > 160)
+    {
+        pageDescription = pageDescription.Substring(0, 157) + "...";
+    }
 }
 
+@section Head {
+    <title>@pageTitle - @siteName</title>
+    <meta name="description" content="@pageDescription" />
+    <link rel="canonical" href="@canonicalUrl" />
+
+    <meta property="og:title" content="@pageTitle" />
+    <meta property="og:description" content="@pageDescription" />
+    <meta property="og:type" content="@ogType" />
+    <meta property="og:url" content="@canonicalUrl" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta property="og:image" content="@ogImageUrl" />
+    }
+    <meta property="og:site_name" content="@siteName" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="@pageTitle" />
+    <meta name="twitter:description" content="@pageDescription" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta name="twitter:image" content="@ogImageUrl" />
+    }
+}
+
+
 @if (Model.UserAccount != null)
 {
     @if (!string.IsNullOrEmpty(Model.UserBackgroundUrl))

DysonNetwork.Zone/Pages/Index.cshtml

@@ -11,5 +11,6 @@
         <img src="~/favicon.png" width="80" height="80" alt="Logo" class="mb-1 mx-auto"/>
         <h1 class="text-2xl">Hello World 👋</h1>
         <p>Here are the Solar Network Pages</p>
+        <p class="text-sm opacity-80 mt-1">为什么这个首页长这样呢？因为羊不知道该放什么，所以如果你有想法欢迎跟羊讲！</p>
     </div>
 </div>

DysonNetwork.Zone/Pages/Posts.cshtml

@@ -3,8 +3,50 @@
 @{
     Layout = "_LayoutContained";
     const string defaultAvatar = "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp";
+
+    var pageTitle = "Posts";
+    var pageDescription = "A collection of posts.";
+    string? ogImageUrl = null;
+    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
+    var siteName = Model.Publisher?.Nick ?? Model.Publisher?.Name ?? "Solar Network";
+
+    if (Model.Publisher != null)
+    {
+        pageTitle = $"Posts by {Model.Publisher.Nick ?? Model.Publisher.Name}";
+        pageDescription = $"Browse posts written by {Model.Publisher.Nick ?? Model.Publisher.Name}.";
+        if (Model.Publisher.Background != null)
+        {
+            ogImageUrl = $"{Request.Scheme}://{Request.Host}/drive/files/{Model.Publisher.Background.Id}";
+        }
+    }
 }
 
+@section Head {
+    <title>@pageTitle - @siteName</title>
+    <meta name="description" content="@pageDescription" />
+    <link rel="canonical" href="@canonicalUrl" />
+
+    <meta property="og:title" content="@pageTitle" />
+    <meta property="og:description" content="@pageDescription" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="@canonicalUrl" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta property="og:image" content="@ogImageUrl" />
+    }
+    <meta property="og:site_name" content="@siteName" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="@pageTitle" />
+    <meta name="twitter:description" content="@pageDescription" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta name="twitter:image" content="@ogImageUrl" />
+    }
+}
+
+
+
 <div class="container mx-auto px-8 py-8">
     <h1 class="text-3xl font-bold mb-8 px-5">
         <span class="mdi mdi-note-text-outline"></span> Posts

DysonNetwork.Zone/Pages/Posts/Details.cshtml

@@ -1,9 +1,76 @@
 @page "/p/{slug}"
+@using NodaTime
 @model DysonNetwork.Zone.Pages.Posts.DetailsModel
 @{
     Layout = "_LayoutContained";
+    
+    var post = Model.Post;
+    var pageTitle = post?.Title ?? "Post";
+    var pageDescription = post?.Description; 
+    string? ogImageUrl = null;
+    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
+
+    if (post != null)
+    {
+        if (string.IsNullOrWhiteSpace(pageDescription) && !string.IsNullOrWhiteSpace(post.Content))
+        {
+            var plainText = System.Text.RegularExpressions.Regex.Replace(post.Content, "<.*?>", string.Empty);
+            pageDescription = plainText.Length > 160 ? plainText.Substring(0, 157) + "..." : plainText;
+        }
+
+        var imageAttachment = post.Attachments.FirstOrDefault(a => a.MimeType != null && a.MimeType.StartsWith("image"));
+        if (imageAttachment != null)
+        {
+            ogImageUrl = $"{Request.Scheme}://{Request.Host}/drive/files/{imageAttachment.Id}";
+        }
+    }
 }
 
+@section Head {
+    <title>@pageTitle</title>
+    @if (!string.IsNullOrWhiteSpace(pageDescription))
+    {
+        <meta name="description" content="@pageDescription" />
+        <meta property="og:description" content="@pageDescription" />
+        <meta name="twitter:description" content="@pageDescription" />
+    }
+    <link rel="canonical" href="@canonicalUrl" />
+
+    <meta property="og:title" content="@pageTitle" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="@canonicalUrl" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta property="og:image" content="@ogImageUrl" />
+    }
+    
+    @if(post != null)
+    {
+        <meta property="article:published_time" content="@post.CreatedAt.ToString("o", System.Globalization.CultureInfo.InvariantCulture)" />
+        @if (post.EditedAt.HasValue)
+        {
+            <meta property="article:modified_time" content="@post.EditedAt.Value.ToString("o", System.Globalization.CultureInfo.InvariantCulture)" />
+        }
+
+        @foreach (var tag in post.Tags)
+        {
+            var tagName = !string.IsNullOrEmpty(tag.Name) ? tag.Name : tag.Slug;
+            if(!string.IsNullOrEmpty(tagName))
+            {
+                <meta property="article:tag" content="@tagName" />
+            }
+        }
+    }
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="@pageTitle" />
+    @if (!string.IsNullOrEmpty(ogImageUrl))
+    {
+        <meta name="twitter:image" content="@ogImageUrl" />
+    }
+}
+
+
 <div class="container max-w-4xl mx-auto px-8 py-8">
     <article>
         @if (Model.Post != null)

DysonNetwork.Zone/Pages/Shared/_Layout.cshtml

@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="~/DysonNetwork.Zone.styles.css" asp-append-version="true"/>
     
     <link rel="icon" type="image/png" href="~/favicon.png" />
+    
+    @await RenderSectionAsync("Head", required: false)
 </head>
 <body>
 

DysonNetwork.Zone/Pages/Shared/_LayoutContained.cshtml

@@ -7,32 +7,43 @@
 }
 
 <div class="navbar backdrop-blur-md bg-white/1 shadow-xl px-5">
-  <div class="flex-1">
+    <div class="flex-1">
-    <a class="btn btn-ghost text-xl" asp-page="/Index">@siteDisplayName</a>
+        <a class="btn btn-ghost text-xl" asp-page="/Index">@siteDisplayName</a>
-  </div>
+    </div>
-  <div class="flex-none">
+    <div class="flex-none">
-    <ul class="menu menu-horizontal px-1">
+        <ul class="menu menu-horizontal px-1">
-      <li><a asp-page="/Posts">Posts</a></li>
+            <li><a asp-page="/Posts">Posts</a></li>
-      <li><a asp-page="/About">About</a></li>
+            <li><a asp-page="/About">About</a></li>
-    </ul>
+        </ul>
-  </div>
+    </div>
 </div>
 
 <main class="content-main">
     @RenderBody()
 </main>
 
-<style>
+@section Scripts
-    .navbar {
+{
-        height: 64px;
+    @await RenderSectionAsync("Scripts", required: false)
-        position: fixed;
+}
-        top: 0;
+
-        left: 0;
+@section Head
-        right: 0;
+{
-        z-index: 1000;
+    @await RenderSectionAsync("Head", required: false)
-    }
+
-    .content-main {
+    <style>
-        height: calc(100vh - 64px);
+        .navbar {
-        margin-top: 64px;
+            height: 64px;
-    }
+            position: fixed;
-</style>
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+
+        .content-main {
+            height: calc(100vh - 64px);
+            margin-top: 64px;
+        }
+    </style>
+}