آموزش سئو در Asp.net core
مرحله اول
یک پروژهASP.NET Core MVCدر ویژوال استودیو ایجاد کنید.
مرحله دو
یک فولدر " Helpers" ایجاد کنید و داخل این فولدر یک کلاس به نام " SEOPageMetaHelper" اضافه کنید. این کلاس به عنوان ارائه‌دهنده (provider) داده استفاده می‌شود، شما می‌توانید از پایگاه داده یا XML یا هر منبع داده دیگری استفاده کنید، اما من از این کلاس برای اهداف آموزشی جهت سادگی کار استفاده می‌کنم.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DynamicMetaTags.Helpers
{
public static class SEOPageMetaHelper
{
public static IEnumerable<Tuple<string, string, string, string>> Collections
{
get
{
return new List<Tuple<string, string, string, string>>
{
new Tuple<string, string, string, string>("Home/Index", "Dynamic Index", "Index Description","keyword1,keyword2"),
new Tuple<string, string, string, string>("Home/About", "Dynamic About", "About Description","keyword3,keyword4"),
new Tuple<string, string, string, string>("Home/Contact", "Dynamic Contact", "Contact Description","keyword5,keyword6")
};
}
}
}
}
در مرحله بعد، شما باید سرویسی را ایجاد کنید که صفحه اصلی layout_ را تزریق کنیم و از آن برای ادغام متاتگ‌ها استفاده می‌کنیم.
بنابراین یک سرویس در فولدر Helpers به نام " HelperService" ایجاد می‌کنیم.
public class HelperService
{
private StringBuilder sb = new StringBuilder();
public string InjectMetaInfo(string urlSegment)
{
var metaInfo = SEOPageMetaHelper.Collections.Where(s => s.Item1.Equals(urlSegment,StringComparison.InvariantCultureIgnoreCase)).SingleOrDefault();
//If no match found
if (metaInfo == null)
return string.Empty;
sb.Append("<title>" + metaInfo.Item2 + "</title>");
sb.Append(Environment.NewLine);
sb.Append($"<meta name='description' content='{metaInfo.Item3}'/>");
sb.Append(Environment.NewLine);
sb.Append($"<meta name='keywords' content ='{metaInfo.Item4}'/>");
string metaTag = sb.ToString();
sb = null;
return metaTag;
}
}
کد واقعا ساده است، من فقط اطلاعات متاتگ صفحه خاصی را گرفته و یک متاتگ ایجاد می‌کنم، این کار را می‌توان ساده‌تر کرد، اما برای نسخه آموزشی خوب است.
اکنون باید این سرویس را به عنوان وابستگی ثبت کنیم زیرا باید آن را در صفحه Layout_ تزریق کنیم.
فایل startup.cs را باز کرده و آن را ثبت می‌کنیم.
services.AddScoped<HelperService>();
بنابراینstartupمن این‌گونه به نظر می‌رسد:
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddScoped<HelperService>();
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
حالا باید Layout.cs_ را که در فولدر Views/Shared است را آپدیت کنیم و ما باید این سرویس را به این شکل تزریق کنیم:
@using DynamicMetaTags.Helpers @inject HelperService helperService <!DOCTYPE html> <html>
در حال حاضر می‌توانیم helperService را در این صفحه استفاده کنیم زیرا آن را در Razor view تزریق کردیم. بنابراین قطعه کد بعدی که متاتگ‌ها را تزریق می‌کند این‌گونه است:
@{
string segements = $"{this.ViewContext.RouteData.Values["controller"]}/{this.ViewContext.RouteData.Values["action"]}";
@(Html.Raw(helperService.InjectMetaInfo(segements)));
segements = null;
}
این کد بخش‌های جاری controller/action را می‌گیرد، آن‌ها را ساخته و آن‌ها را به HelperService به عنوان پارامتر ارسال می‌کند، متد HelperService متاتگی که در بخش head صفحه مدیریت می‌شود را باز می‌گرداند.
حالا هدر صفحه این‌گونه به نظر می‌رسد:
@using DynamicMetaTags.Helpers
@inject HelperService helperService
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - DynamicMetaTags</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
@{
string segements = $"{this.ViewContext.RouteData.Values["controller"]}/{this.ViewContext.RouteData.Values["action"]}";
@(Html.Raw(helperService.InjectMetaInfo(segements)));
segements = null;
}
</head>
<body> ..
// body code
اکنون وقت آن رسیده تا کار واقعی برنامه آموزشی خود را ببینیم.
آنچه که انتظار داریم رخ دهد:
صفحه اصلی باید عنوان را " Dynamic Index" نشان دهد.
صفحه اصلی باید متاتگ type=”description” را " Index Description" نشان دهد.
صفحه اصلی باید متاتگ type=”keyword” را " keyword1,keyword2" نشان دهد.
اجازه دهید پروژه را اجرا کنیم.
نتیجه خروجی چیزی است که ما انتظار داشتیم.
در اینجا می‌بینیم که title، متاتگ description، متاتگ keywordsداینامیک در Home/Index view اصلی تزریق شده‌اند.
اجازه دهید ویوی دیگری مثل contact و about را امتحان کنیم.
به طور پیش‌فرض ASP.NET core شامل <title> در صفحه Layout_ است، بنابراین من قصد دارم این تگ را حذف کنم زیرا آن را به صورت داینامیک تزریق کردیم.
لطفا توجه داشته باشید
فایل Layout.cshtm_ را باز کرده و title>@ViewData["Title"] - DynamicMetaTags</title> f> را حذف کنید و حالا فقط ما یک تگ title در صفحه‌ای که تزریق کرده‌ایم داریم.
