Structured Data

Micro data used from Schema.org for a Webpage
This post is specific for Orchard 1.8.1 and PJS.Bootstrap 3.2.0.This implementation could be useful for anyone. How I did it. No more hard coding micro data. Added to Orchard Contrib.Reviews Module and then to Themes I add shapes to tailor the structured data in my Orchard site.Some HistoryIn 2011 the big three search engines (Google, Microsoft and Yahoo!) announced they were collaborating to create and support a new HTML markup called schema.

In short, schema is an attempt to create a uniform, simple and consistent HTML markup.  Why?  Well to make the web more useful, for the search engines and for you.  For the search engines, it becomes hard to interpret or recover the original data from your site after it is formatted into HTML.  That’s were markup comes in.  It is a language applied by website designers to help search engines interpret the HTML code.  And it takes much more work to markup your site if every search engine is asking for different formats.  

Enter the nested schema.

Schema is not actually its own language, but instead is based on microdata format.  Previously, there were three main markup formats: microformats, RDFa, and HTML5 microdata.  Where microformats are simple and easy to use, RDFa is considered extensive and flexible.  Microdata was considered to be a balanced format, somewhere between the other two.  It is for its more balanced nature that this format was chosen to be the basis for schema.

Markup gives you the tools to help differentiate your Ghost from the others.  This language, invisible to visitors to your website, provides a road map that helps search engines understand which of these your data actually references.

Furthermore, search engines use this data to create rich snippets (search results enhanced by structured markup) on the SERP.
Now you might be asking yourself, what is involved and how does it work?  At its core, schema takes the microdata format for HTML, and expands it considerably.  If you are experienced with HTML5 then schema is simply a matter of learning the nested hierarchy.I will in detail instruct Orchard Users and Programmers how to do this themselves easily. Internet Positioning is a essential part of Web development and should be exemplified by Orchards developers instead or ignored. Ignored because its a pain to get right and I guess its not in there field.I spent several years doing page emulation and positioning for Green Flash in San Diego, as a database administrator and being responsible for query's separating gig's of data to see position results I found the importance of html structure, "structured data", as in proper html format mainly images and links, as that is all we had for positioning.Now the machine coding as Structure Data makes this Oh so Simple if you can find the proper implementations within your website structure.Orchards GalleryTesting Orchards Gallery with Contrib.Reviews the Gallery has no structured data at all.Below in Orchard Projects structured data.

The excerpt from the page will show up here. The reason we can't show text from your webpage is because the text depends on the query the user types.

Authorship Testing Result
Page does not contain authorship markup. Learn more
Authorship Image in search results.

Please enter a Google+ profile image link to disply your site image on your Goole + profile, mine as https://lh4.googleusercontent.com/-hghmtP5s7Lk/AAAAAAAAAAI/AAAAAAAABUo/B_3MM7FrQbU/s46-c-k-no/photo.jpg. Learn more

My Results

Here is my results after tweaking Orchard 1.9- int or beta, and  PJS.Bootstrap Theme Shapes.

Structured data testing tools I used are Google and Bing.

This page with Bing Validate.

How I added Schema WebPage into my site and NESTING the contents within.

The image below shows perfect structured data in this Blog Post  with Google's Structured Data Testing Tool having aggregate ratings, comments, breadcrumbs, Person, and a site links search box with .jason-ld as:

<script type="application/ld+json">
{
   "@@context": "http://schema.org",
	
   "@@type": "WebSite",
	
   "url": "https://www.example-petstore.com/",
   "potentialAction": {
     "@@type": "SearchAction",
     "target": "https://query.example-petstore.com/search?q={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
</script>

Notice that I added a double @@ symbol  before context and type twice, for usage in mvc if not you will get a error.

Added my Meta Content with Vandelay Industries - 1.7, Meta tags and Classy for individual page meta keywords and descriptions. .

To check page metadata as Keywords and Descriptions a easy to us Meta Checker is at http://www.exadium.com/tools/metadata/

Here is how I did this; Not changing any of the core or modules. Add Contrib.Reviews module.

Then add to Orchards Theme PJS.Bootstrap 3.2.0 to Document.cshtml the below.

Document.cshtml.

Then add to Orchards Theme PJS.Bootstrap 3.2.0 to Layout.cshtml the below.

 

Layout.cshtml.

Added the Shapes below to Themes\PJS.Bootstrap\Views\ folder and added Contrib.Stars.js to my theme scripts folder and Contrib.Stars.css to my theme styles folder and registered them in my theme project file, for the Contrib.Reviews parts to function properly in my theme. The added changed shapes are Parts.Reviews.cshtml and Parts.Stars.Details.cshtml. The shape with no changes is Parts.Stars.NoAverage.cshtml

Here is the changes to Parts.Reviews.cshtml

Parts.Reviews.cshtml.

Parts Stars details changes.

Parts.Stars.Details.cshtml.

Stars.NoAverage.cshtml has no change from the one in Contrib.Reviews so copy it over to your theme views parts folder or just name it Parts.Stars.NoAverage.cshtml and put it in your Theme Views folder..

I added my personal and author information in my footer along with publisher links and authorship link to your plus profile

Added publisher link as: Google+ profile link: https://plus.google.com/117122847504916016102?rel=author .

Added a Google+ profile image link to disply your site image on your Google + profile, mine as https://lh4.googleusercontent.com/-hghmtP5s7Lk/AAAAAAAAAAI/AAAAAAAABUo/B_3MM7FrQbU/s46-c-k-no/photo.jpg

Author and Location.

For Comments microdata I added Parts.Comment.cshtml in my Theme Views folder.

Parts.Comment.cshtml

I have added itemprop="replyToUrl" toCommentReplyButton.cshtml.

No Comments

Comments are Moderated, from, "(Spam-bots)", before they are posted.

 54521 Views