Implement a CMS Site using MVC with Inbuilt SEO Functionality

In this short article, you will gain an interesting approach on how to best create a basic CMS (Content Management System) in MVC (Model View Controller) that covers some SEO (Search engine optimisation) Basic requirements.

Before you continue you need to be familiar with the concepts mentioned above and have a sound knowledge of:

• C# language
• MVC .NET Framework
• SQL Database server
• Entity Framework
• The need for SEO

Most of the architectures for a Content managed website is made up of an MVC web application that connects to a database used to store your content. I am using a Windows hosting with Microsoft SQL server but this example can be applied to any other technology Stack.

When we create a table in the database to store the articles, we will think for both content and SEO. For the content, I will need:

• ArticleId -> primary key to identify the article
• Summary -> A short description of the article used for those read more samples
• FullArticle -> To store the HTML with the full article
• As I will be using this table to store page articles and sub articles, this can be achieved by Section and Category. For example Section: Home and Category: MainArticle would identify this article as the main article in the home page.
• Section -> Page name
• Category -> MainArticle, SubArticle
• Position -> In case of multiple articles in the same page, we can use this for ordering purposes
• AppId -> This will identify to which Application the article belongs as I have one CMS for several sites

For SEO, I will need some further data:

• Title - We will use this to tag the page title. Ideally, we have a title that describes the page in 40 characters.
• Publishdate - We can use this to put articles in non published state
• MetaTags - Meta tags ara comma separated text that will describe your article.
• UpdateDate - This date will be used in the sitemap and part of the article meta information
• AuthorId - Google plus AuthorId. This will be used to associate the article to the author profile and even display the author image in the search engine result. To get the author Id, load your Google plus profile and look for the OID Html tag in the source example oid="111254170622220751214"
• SeoIndex - I will use this flag to exclude the article from having it SEOIndexed. This is used mainly if the article will appear more than once as Google does not like indexing repeated content.

The SQL for this final table will look like the one below:

Loading The Data

I suggest to create a new class library in the project which will take care of reading and writing data. Having the process done through a Class Library will allow us to reuse this logic in the Web site and the Content Management Site. In the Class Library, we will create a DataEntity that will map entities to the database for reading and storing data.

As this data needs to be retrieved very fast, we will create a class that returns all the Articles using some server caching so that we save on database hits and have the application run faster as this is another SEO critical success factor. The in-memory object cache (System.Web.Caching.Cache) is used to store commonly used expensive data on server side and the code below shows how you can easily achieve this.

Using the Data

We will add the meta data tags and the page title in the MVC master page. This is normally located in the Views/Shared/_Layout.cshtml by making use of dynamic variables in the page Header.

In the HomeController, create a method to call the get articles for that particular page.

The SetMetaTag method will create the meta tags to be replaced by the tags we just created in the Layout Page. We will be creating 2 types of meta tags. The typical HTML5 meta tag that is used to provide data about the HTML document and the og:tag also known as the open graph tag. These type of tags are used by social applications like Facebook, Twitter and Google search engine to interpret the information in your page.

The Full Article

In my page design, I will be using the Section and category fields to create pages. A page will be made up of Category for example "Home" and different subCategories example mainSection, SubArticle. In this way, I can control the whole page from one cms and treat all the parts of this page as different articles. My basic page view would look something like this:

This is the main article:

These are the sub articles displayed as summary with the read more option:

For the read more option, I am using url rewriting so that I can provide a human friendly url. This way, I can use the title field defined in the table for the article as the url name and trick Google and readers into believing that this is the actual page file name. Where in truth, I will be using the article Id to load the article into a standard page.

Url routing is a cool feature of MVC and it can be easily controlled from the class Global.ascx.cs. In the Application_Start section, look for the class that registers routes. In the RegisterRoutes class, I will add a Map route for the full article so that I can pass the full article title as the name but point it to the same controller.

In this case, I am using the HomeController FullArticle method to route any FullArticle url. Example ../../FullArticle/18/How this site works  will be rerouted to the full article method that will render the article by loading the data using the article id which is passed in the url as if it was just a folder for the page.

In the full article view, I will make use of the AuthorId if present to associate the article to the author and display his image.