January 22, 2018

Semantic markup using Schema.org in DXA

What is Semantic SEO:  Semantic SEO is giving meaning to your  data embedded in the html Tags using some metadata. and which would be utilized by the search engine to index your page in better way.

Why do i care: Semantic SEO is hot topic these days because Google and other Search engine have updated their algorithm to consider and give little higher weight to pages having  semantic markups. It seems inevitable that including semantic mark-up tags in your html will become more important,  check this: Schema mark-up rank higher in SERP’s.

What is Schema.org
Schema.org  provides vocabulary to give semantics to your html tags , which is supported by  Google & Bing. You can find out schema from schema.org for your particular entity and tag the content with that to give it a meaning.
schema.org standards allows specified entities such as products, places or people to be identified in your HTML with different attributes.

Example: Markup with semantic attributes

<div prefix="s: http://schema.org" typeof="s:Movie">
<h1  property="s:name">Avatar</h1>
  <span  property="s:genre">Science fiction</span>
</div>

On inspecting above tags, you will find out above details have been given meaning by adding those attributes (bold). so without this any search engine can't distinguish between what is above information exactly. Now Search engine knows its A movie which has name Avatar, and its a Sci fiction.

Without semantics Google may have index it as book, some mythological character etc. but now its has specific meaning and that's the purpose of Semantics SEO and Schema.org.

Formats: Schema.org just provided the vocabulary or schema to give meaning to your information, but hows this vocabulary is attached to content is , where format comes to the picture.
following are the main formats using which we can tag our content.


DXA and Semantic SEO : 
DXA makes life very easy for us to add those ugly semantics markups into your html tags. Its very good feature which comes OOTB in the DXA all version.

DXA default Implementation: DXA comes with RDFa Lite implementation.  RDFa Lite consists of five simple attributes; vocab, typeof, property, resource, and prefix. so its lite version of RDFa which i mentioned in the list above.
if you want to use any of other format in your code, then you have to implement it.

[SemanticEntity(Vocab = "http://schema.org", EntityName = "Movie", Prefix = "s", Public = true)]
    public class Movie: EntityBase
    {
        [SemanticProperty("s:name")]
        public string Name { get; set; }
         [SemanticProperty("s:genre")]
        public string Genre { get; set; }
    }

SemanticEntity -:  This attribute actually defines which Vocabulary you are going to use
EntityName: Entity name from specified Vocab. Name is one of schema in Schema.org
Prefix: kind of namespace. so if you define multiple formats , Vocab on the it. it would help to differentiate.
Public=true/false:  Semantic attributes will only be applied to markup if Public=true, otherwise it will be ignored.
SemanticProperty: Name of  Entity properties has to match with the name defined in schema.org/Movie only then it will add meaning and will be used by Google to index.

<div @Markup.Entity(Model)>
  <h1 @Markup.Property(Model, "Name")>@Model.Name</h1>
   <span @Markup.Property(Model, "Genre")>@Model.Genre</span>
</div>

so when this is executed, it will give output  as shown above.

Semantics markup Validation using Google structure testing tool; developers.google.com/structured-data/testing-tool/