Ah yes, I am about to go over search engine optimization in asp.net core. I was working on a project for this small company and they wanted to make sure their website was SEO friendly. Therefore, I needed to include the friendly meta tags to improve the site ranking in the search engines.

Why Search Engine Optimization

According to WikiPedia, Search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine.
Well, you got it. If you are in the business of building web application, your goal is to be found and win. Therefore, SEO is one of the most important aspects in web development and must be done on every website you publish.

Managing Meta Tags

The website was a dynamic website where content was being created by the users on the fly. I needed a way to capture and render the basics meta tags, such as title, keyword, description, and author in the header of the pages. If you’ve worked with ASP.NET Core, you know it is not straight forward as it sounds due to master/layout page that is shared with all other pages on the site. At first, I thought of define some ViewBag or ViewData in the _Layout page and update it in each action method to update those tags per page respectively, would be a nightmare, so how did I deal with them? The answer is simple, due to this ASP.NET Core MVC SEO package

Solution

For this demonstration, I am creating a simple ASP.NET Core 2.1 application and then adding this package from Nugget.

PM> Install-Package AspNetSeo.CoreMvc

Now, that the package is installed in the project, let’s configure it to add the title and description. We’ll register the SEO-Helper in the Startup.cs to be used as a service using Dependency Injection.

      // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure(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.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddSeoHelper();
        }

Now, we need to update our layout header file that way those tags can render on every pages using that layout.

Next, we need to update _ViewImports.cshtml file with the following

@addTagHelper *, AspNetSeo.CoreMvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Next, let’s update the controller and the action method as shown below. As you can see I am inheriting from the SeoController instead and setting the page title, description and metakeywords in the action method.

 public class HomeController : SeoController
    {
        public IActionResult Index()
        {
            this.Seo.PageTitle = "This is a quick demo on how to add meta tags to asp.net core";
            this.Seo.MetaDescription = "What Are Meta Tags? Meta tags helps you with seo. sample test.";
            this.Seo.MetaKeywords = "Seo, Meta tags, Search Engines";
            return View();
        }
    }

Finally, after running the site and view the source code you can see the tags added accordingly. Source code can be found on Github MVCCoreSeo demo.