Improving SEO With ASP.Net MVC - Part 1 - Creating Better SEO URLs

Improving SEO With ASP.Net MVC - Part 2 - SEO Tags

The Problem

Google has been making a big push to add new search features, rich results and rich cards. In order to do this, developers need to use either JSON-LD markup or Microdata. This can be confusing for new developers who are not familiar with either of those markup types.

The Solution

Google has done a really good job of explaining everything and providing example at the following site: Introduction to Structured Data Types. Below are several examples of the most common markups you can add to your site. They include breadcrumbs, organization data and blog/article information. There are a handful of additional features that we won't go in depth into but more information on Recipes, Events, Products, Reviews and Courses can be found on Google's Search Gallery.

If you need help with your specific scenario, feel free to leave us a comment below and we can help direct you in the right direction on which structure data types you should add to your site.

Setup

We often are setting structure data in our individual views throughout our site. In order to code them properly so they show up right above the closing </body> tag we have implement a @RenderSection for "Script" that is placed in our _Layout file for the site.

@RenderSection("Scripts", required: false)

The purpose of the required:false is to let the RenderSection call know that Scripts is not required in every view that we create. More information on the RenderSection call can be found in the MSDN documenation for System.Web.Webpages.

To then utilize the RenderSection throughout our code we can then simply use the following in each view:

@section Scripts{
//Place Code here}
Breadcrumbs.

Google Structured Data Breadcrumbs

Breadcrumbs are very beneficial to search engines because it helps them determine the hierarchy of your site and how pages are interconnected. When google structured data for breadcrumbs are used and indexed by google you can expect to see the following result on your search listings.

To accomplish this you can use JSON-LD markup or Microdata. Our prefeence is JSON-LD because it's a much cleaner markup that can be place inside a RenderSection <script></script> tag versus being marked up directly in our HTML.

JSON-LD Example:

@section Scripts{
<script type="application/ld+json">
{
  "@@context": "http://schema.org",
  "@@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@@type": "ListItem",
    "position": 2,
    "item": {
      "@@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  },{
    "@@type": "ListItem",
    "position": 3,
    "item": {
      "@@id": "https://example.com/books/authors/annleckie",
      "name": "Ann Leckie",
      "image": "http://example.com/images/author-leckie-ann.png"
    }
  },{
    "@@type": "ListItem",
    "position": 4,
    "item": {
      "@@id": "https://example.com/books/authors/ancillaryjustice",
      "name": "Ancillary Justice",
      "image": "http://example.com/images/cover-ancillary-justice.png"
    }
  }]
}
}
</script>
Microdata Example:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span>
        <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span>
      <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
      <span itemprop="name">Ancillary Justice</span>
      <img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

For more examples check out Google's Breadcrumbs.

Organization Data

Organization data allows you to add things such as a company logo, corporate contact numbers, social profiles and more.

JSON-LD Example:

@section Scripts{
<script type="application/ld+json">
{
  "@@context": "http://schema.org",
  "@@type": "WebSite",
  "name": "Your WebSite Name",
  "alternateName": "An alternative name for your WebSite",
  "url": "http://www.your-site.com"
}
}
</script>

Microdata Example:

<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>Your WebSite Name</title>
<link rel="canonical" href="https://example.com/" itemprop="url">

Additional examples for Site Logos, Social Profile Links and Corporate

Blog/Article Information

Google Structured Data Articles

Promoting your created content should be your number one priority. If you are going to invest the time to create quality blog posts and articles you should be sending as much data as possible to google to try and become their top listing for your topic. To do that we utilize Google's structured data for Articles.

JSON-LD Example:

@section Scripts{
<script type="application/ld+json">
{
  "@@context": "http://schema.org",
  "@@type": "NewsArticle",
  "mainEntityOfPage": {
    "@@type": "WebPage",
    "@@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@@type": "Organization",
    "name": "Google",
    "logo": {
      "@@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

Microdata Example:

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

For more information check out Google Articles.