From £99/Month
img
By: Asad Butt
Last Updated: October 16, 2018

Implement Structured Data Using JSON-LD, Schema.NET And Asp.Net MVC

Rich Snippets | Asp-Net MVC

We recently added Structured data to our article pages on our website. If you are looking to implement Jason-LD formatted data in structured format, this might help.

Table Of Contents



The use of Rich Snippets (or Schema.org markup) is becoming more and more relevant as it does benefit search engines, users and yes, even site operators.

Embedded content: https://www.youtube.com/watch?v=MF9lS3UU0ww

What Is JSON-LD?

JSON-LD, or JavaScript Object Notation for Linked Data, is a method of encoding Linked Data using JSON.

(Wikipedia)


JSON-LD stands for JavaScript Object Notation

It is a collection of multi-dimensional Arrays, holding simple string values in the form of key-value pairs.

JSON-LD is a format for linked data which is lightweight, easy to implement and is supported by Google, Bing and other web giants.

JSON-LD helps people publish information on the web in a way that is machine-readable and easily understandable by Search engines like Google.

{
  "@context": {
  "name": "http://xmlns.com/foaf/0.1/name",
  "homepage": {
  "@id": "http://xmlns.com/foaf/0.1/workplaceHomepage",
  "@type": "@id"
  },
  "Person": "http://xmlns.com/foaf/0.1/Person"
 },
  "@id": "https://me.example.com",
  "@type": "Person",
  "name": "John Smith",
  "homepage": "https://www.example.com/"
}

Why Use Microdata?

"The HTML5 microdata specification is a way to label content to describe a specific type of information—for example, reviews, person information, or events. Each information type describes a specific type of item, such as a person, and event, or a review. For example, an event has the properties venue, starting time, name, and category."

Introduction to Structured Data | Google

Content is created with human beings as an audience but the not search engines. Content and structure that people can understand well when they consume it. But search engines have had a limited understanding and had a little bit of tough time understanding the content accurately.

To rank some content, search engines need to understand it well.

Solution? Microdata.

By adding relevant information to the HTML of your content, the information that search engines can understand well, like telling them what the content is about, the author, the publication date, rating by customers if its a product or service, or location information in its place, we can help search engines and other applications better understand your content.

Microdata is a set of simply a set of tags, part of HTML5, that helps you achieve this goal.


What Is Schema.org?

Schema.org is a community working together using a collaborative approach. It creates, maintains, and promotes schemas for structured data.

It was CoFounded by Google, Microsoft, Yahoo and Yandex and Schema.org. Any shared effort makes it easier for developers to agree on a schema and get the maximum benefits.

Schema.org defines a set of standard classes and their properties for objects and services in the real world. By using these classes we can translate content into machine-readable format. This machine-readable format is now a common standard used by creators to translate their content (websites) and search engines (Google) to consume.


What Are Rich Snippets?

rich-snippets-quoracreative-1

Rich Snippets is the structured data markup that content producers can add to their existing HTML. This helps search engines to better understand what information is contained on a webpage. Major search engines, especially Google, have taken a step further and use structured data to analyze and then present richer search results in searches, helping users to find the relevant information.\n\nIn order to be eligible for rich results, you should mark up your site’s pages using one of three supported formats:


JSON-LD And Search Engine Optimization (SEO)

Being a developer by profession, I never bothered about search engine optimization (SEO).

Basic SEO is what naturally comes when we develop web applications but a few of us delve into things like server response time, Keywords analysis, On-site SEO etc

Why should we? There are separate departments in place for all these tasks. Publishing, marketing, and quality control etc.

Not before I developed and ran quoracreative, I came to realize how important and challenging it is to rank your website in top search engine result pages (SERPs).

Rich Snippets (or Schema.org markup) is one of the very import part of On-Site SEO and it is getting traction.

For your content to introduce itself to Google algorithms at the machine level, rich snippets are crucial.

They provide Google and Bing and other search engines with some contextual information about your content.

Contextual information can include various bits such as the content is basically an article, recipe, feedback, Image, Author information or a lot more.

Or contact information for a business like street address, postcode, email or phone number which could greatly enhance your rankings with respect to location-based search results in Google.

You can also include information like title, description, main content area, publication date, any relevant ratings for a product or service

Whilst the search engines algorithms have improved a lot at understanding a piece of content, it is like giving them a helping hand.

Help search engines so they can help you.

Google On Schema.org Vs JSON-LD?

Google advises us to focus on JSON-LD more than schema.org.

A very interesting point to note is, Google has a patent about searching semi-structured data with a focus on JSON-LD. All their practical example use JSON on their Introduction to Structured Data page for developrs.

This is what Google advises us:

1. Use JSON-LD

Most Search structured data uses schema.org vocabulary, but you should rely on the documentation on developers.google.com as definitive for Google Search behaviour, rather than the schema.org documentation. Attributes or objects not described here are not required by Google Search, even if marked as required by schema.org.


2. Use the Structured Data Testing Tool

Then Google advises us to use the Structured Data Testing Tool, to test your pages conform to Google guidelines when you prepare pages for use with Structured Data.

3. Use Structured Data Report

After you have prepared page(s) for use with Structured Data, check on the status of your pages using Structured Data Report in Google Search Console

This will flag any problems which may occur anytime after the page(s) have been set up.

I strongly recommend keeping an eye on it when you carry out your periodic SEO audits.

Important Bits

@context:

Context points to a public schema which describes the "things".

A Thing is kind of base class or interface.

Further subtypes can include things like:

  • Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
  • Embedded non-text objects: AudioObject, ImageObject, VideoObject
  • Event
  • Organization
  • Person
  • Place, LocalBusiness, Restaurant ...
  • Product, Offer, AggregateOffer
  • Review, AggregateRating

Getting started with schema.org

If you navigate to the above resource you will find properties which can be used to further describe your type or subtype.

More information you can add, more helpful it is for a search engine to understand your content.

Think of JSON-LD as a faster, cleaner, more simple delivery mechanism for the schema. It's like Deliveroo is for a restaurant business.

Search engines more than prefer pages with it as they are able to crawl the code with ease. It is like your webpage and crawler both speaking the same language.

It helps search engines understand the data better more quickly. For this article, we will briefly discuss how to Implement structured Data to generate Rich Snippets using Schema.Net.


Structured Data Tools By Google

You can test compliance with technical guidelines using the following tools.

Be sure to test your structured data using the Structured Data Testing tools during and after development using the Structured Data Testing Tool.

When you have implemented structured data always keep an eye on the status of Rich results after deployment using Structured Data Search Appearance tool.

The health of the web pages is very important and we need to make sure pages don't break due to reasons like templating etc.


Other Available Tools


Implementation Using Asp.Net MVC

Here is step by step guide to help you out. We will be using Schema.org objects turned into strongly typed C# POCO classes for use in .NET. All classes can be serialized into JSON/JSON-LD and XML, typically used to represent structured data in the head section of the HTML page.

Visual Studio | Tools | Package Manager Console

Use this command: Install-Package Schema.NET -Version 3.4.0

Structured Data could be added to existing markup. For this purpose we will take value from our Model Object and fill POCO object from Schema.Net Library which will then help us generate JSON-LD


Model Class "Article"

Add Namespace:

using Schema.NET;

We have a sample Model named as "Article"

public class Article
{ 
 public string ArticleID { get; set; }

    public string Title { get; set; }
    public string Heading { get; set; }
    public string Description { get; set; }
    public string Url { get; set; }
    public string ImageUrl { get; set; }
    public string ImageID { get; set; }
    public string Author1 { get; set; }

    [DisplayFormat(DataFormatString = "{0:MMMM dd, yyyy}", ApplyFormatInEditMode = true)]
    public DateTime DatePublished { get; set; }

    [DisplayFormat(DataFormatString = "{0:MMMM dd, yyyy}", ApplyFormatInEditMode = true)]
    public DateTime LastUpdated { get; set; }

    public string Category1 { get; set; }
    public string Category2 { get; set; }

    public string Body { get; set; }
    public string ArticleType { get; set; }
    public string Topic { get; set; }
    public List<string> SubHeadings { get; set; }
}

How Do We Pass Values From Model To Schema?

   var article = articleManager.GetArticleByUrl(1234); // fetch some object
   
   
   var organization = new Organization()
        {
            Name = "Quoracreative",
            Email = "[email protected]",

            Address = new PostalAddress()
            {
                StreetAddress = "My Street Address",
                AddressLocality = "Brixton",
                AddressRegion = "London",
                PostalCode = "BX1 1AA",
                AddressCountry = "UK"
            },                

            Url = new Uri("https://quoracreative.com"),
            Logo = new Uri("https://quoracreative.com/images/mobile-devices-2017980_640.png"),
            SameAs = new Uri("https://www.facebook.com/quoracreative")
        };
    
    Uri uri = new Uri("https:" + result.ImageUrl.ToString());

        Person author = new Person();
        author.Name = result.Author1;

        var articleStructuredSchema = new Schema.NET.Article()
        {
            Author = author,
            Creator = author,
            DatePublished = new DateTimeOffset(result.DatePublished, TimeSpan.Zero),
            DateModified = new DateTimeOffset(result.LastUpdated, TimeSpan.Zero),
            Description = result.Description,
            Headline = result.Heading,
            Publisher = new Organization() { Name = "Your Organization" },
            ArticleBody = result.Body,
            Name = result.Title,
            Image = uri,
            MainEntityOfPage = new Values<CreativeWork, Uri>(uri),
            ThumbnailUrl = uri,
            CopyrightHolder = organization,
        };

        ViewBag.JasonLd = articleStructuredSchema.ToString();
        SetResponseHeaders();

        return View(result);

Use @Html.Raw() Helper In View

 <script type=\"application/ld+json\">
  @Html.Raw(ViewBag.JsonLd)
 </script>

The code above will out out similar JSON-LD

{
  "@context":"http://schema.org",
  "@type":"WebSite",
  "alternateName":"An Alternative Name",
  "name":"Your Site Name",
  "url":"https://example.com"
}

Tip: How Can I Format A Microsoft JSON Date?

Dates and times can be difficult for machines to understand. Consider the date "04/01/11". Does it mean January 11, 2004? January 4, 2011? Or April 1, 2011? To make dates unambiguous, use the time tag along with the datetime attribute. The value of the datetime attribute is the date specified using YYYY-MM-DD format. The HTML code below specifies the date unambiguously as April 1, 2011.

Dates, times, and durations: use the time tag with datetime

Some variations:

<time datetime="2011-04-01">04/01/11</time>
<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

To implement date in Asp.Net MVC use following:

  1. Use substr function to take out the Date part.
  2. Use parseInt function to get the integer
  3. You can then pass resulting number to Date constructor.
var date = new Date(parseInt(jsonDate.substr(6)));  

Tip: Other Resources

JSON-LD processor for .NET, Implements the W3C JSON-LD 1.0 standard

PM> Install-Package json-ld.net -Version 1.0.6

Learn more about Structured Data Testing


Conclusion on Structured Data Use

  • Implementing Structured Data using Schema.Net and JSON-LD can be extremely productive for your webpages
  • Always make sure that the facts and information you provide are accurate and precise.
  • It is the only alternative to existing HTML option and fewer have the expertise to use it, so you can have an edge.
  • Always follow the Google Structured Data Guidelines from Google.

Further Reading

Published Under: Rich Snippets
Disclaimer: “Whilst we have made every effort to ensure that the information we have provided is accurate, it is not and advice. We cannot accept any responsibility or liability for any errors or omissions. Visit third party sites at your own risk. This article does not constitute legal advice.

From £99/Month