‫بهبود سئو در برنامه‌های Blazor و ASP.NET Core با استفاده از JSON-LD Structured Data

• گوگل به صراحت JSON-LD را توصیه می‌کند.
• نیازی به تغییر در HTML اصلی صفحه نیست (برخلاف microdata یا RDFa).
• در Razor یا Blazor به راحتی با یک قابل اضافه شدن است.
• کاملاً جدا از محتوای قابل مشاهده کاربر است و تجربه‌ی کاربری را خراب نمی‌کند.

public class BlogPostViewModel
{
    public string Title { get; set; } = string.Empty;
    public string Description { get; set; } = string.Empty;
    public DateTime PublishedDate { get; set; }
    public DateTime? UpdatedDate { get; set; }
    public int WordCount { get; set; }
    public string Language { get; set; } = "fa-IR";
    public List<string> Categories { get; set; } = new();
    public string Slug { get; set; } = string.Empty;
}

<!-- JSON-LD Structured Data برای مقاله بلاگ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "@Model.Title",
  "description": "@Model.Description",
  "datePublished": "@Model.PublishedDate:yyyy-MM-ddTHH:mm:ssZ",
  "dateModified": "@(Model.UpdatedDate.HasValue ? Model.UpdatedDate.Value.ToString("yyyy-MM-ddTHH:mm:ssZ") : null)",
  "author": {
    "@type": "Person",
    "name": "نام نویسنده",
    "url": "https://yoursite.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "نام سایت شما",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/img/logo.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yoursite.com/blog/@Model.Slug"
  },
  "image": "https://yoursite.com/img/og-image-@Model.Slug.jpg",
  "wordCount": @Model.WordCount,
  "inLanguage": "@Model.Language",
  "keywords": "@string.Join(", ", Model.Categories)"
}
</script>

• چون در JSON-LD از @context و @type استفاده می‌شود و Razor هم از @ برای کد زدن استفاده می‌کند، باید با @@ فرار کنیم یا از قالب‌بندی جدید (@: یا Interpolated String) استفاده کنیم. در مثال بالا من از قالب‌بندی تمیزتر استفاده کردم تا کد خواناتر باشد.

• اگر از @if استفاده کنید و dateModified وجود نداشته باشد، یک کامای اضافی می‌ماند و JSON نامعتبر می‌شود. راه‌حل بهتر استفاده از عملگر شرطی داخل رشته یا حذف کامل فیلد در صورت null بودن است (همان‌طور که در کد بالا انجام دادیم).

• حتماً @id داخل mainEntityOfPage را به URL کامل و کانونیکال صفحه اختصاص دهید. این کار از مشکلات duplicate content جلوگیری می‌کند.

• بهتر است یک تصویر Open Graph اختصاصی برای هر پست بسازید (حداقل 1200×630 پیکسل) و آدرس آن را در image قرار دهید.

// Components/StructuredData.razor
@inject IHttpContextAccessor HttpContextAccessor

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "@Title",
  "description": "@Description",
  "datePublished": "@PublishedDate:yyyy-MM-ddTHH:mm:ssZ",
  @(UpdatedDate.HasValue ? $"\"dateModified\": \"{UpdatedDate:yyyy-MM-ddTHH:mm:ssZ}\"," : ""),
  "author": { ... },
  "publisher": { ... },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "@CanonicalUrl"
  },
  "image": "@ImageUrl",
  "wordCount": @WordCount,
  "inLanguage": "@Language",
  "keywords": "@string.Join(", ", Categories)"
}
</script>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public string Description { get; set; } = "";
    [Parameter] public DateTime PublishedDate { get; set; }
    [Parameter] public DateTime? UpdatedDate { get; set; }
    [Parameter] public int WordCount { get; set; }
    [Parameter] public string Language { get; set; } = "fa-IR";
    [Parameter] public List<string> Categories { get; set; } = new();
    [Parameter] public string ImageUrl { get; set; } = "";
    [Parameter] public string? CanonicalUrl { get; set; }
}

<StructuredData Title="@Model.Title"
                Description="@Model.Description"
                PublishedDate="@Model.PublishedDate"
                UpdatedDate="@Model.UpdatedDate"
                WordCount="@Model.WordCount"
                Categories="@Model.Categories"
                ImageUrl="https://yoursite.com/img/og-@Model.Slug.jpg"
                CanonicalUrl="https://yoursite.com/blog/@Model.Slug" />

• Google Rich Results Test: https://search.google.com/test/rich-results
• Schema Markup Validator: https://validator.schema.org