Chatper 8: Semantic Markup

“A day wasted on others is not wasted on one’s self.” - Charles Dickens, A Tale of Two Cities

What does this quote have to do with Semantic Markup? Read on to learn more.

Classify your Itemscope:

The first step in preparing your content is to classify what it is all about.  This is called the “ itemscope”.  An itemscope allows you to  specifically define blocks of code and assist the search engines in determining  what your code block is about.

There are 12 itemscopes that you can start with. These are the most generic classifications that you can choose from. As you work your way down, the classifications your options will become more specific.

Here is our website content that we want to work with. For this example we are going define our content as a Creative Work.

<h1>RESPONSIVE LAYOUT MAKER</h1> 
<h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> 
<p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> <p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </p> 
<p> For more information, visit https://www.coffeecup.com/responsive-layout-maker </p>

Classify your Itemprop:

Under each itemscope you will find itemproperties which are specific to the itemscope currently selected. For Creative Work, we will now have these itemproperties to choose from. For this example we want to classify this page as an Article.

Now with this further classification, we know this is a Creative Works > Article which would give us this markup around our content:

<div itemscope itemtype="http://schema.org/Article"> 
<h1>RESPONSIVE LAYOUT MAKER</h1> 
<h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> 
<p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </p> 
<p>For more information, visit https://www.coffeecup.com/responsive-layout-maker</p> </div>

Refining your Itemprop:

Now that the content is correctly classified, you can further classify and define a variety of code blocks within the itemscope with specific itemproperties.  

Under each itemscope you have many itemproperties to choose from. This will then allow us to further classify how the other code blocks categorized. Here we can define how our header texts, URL’s and paragraphs blocks should be classified.

For the rest of our content we will want to use the itemprops name, headline and text.

<div itemscope itemtype="http://schema.org/Article"> 
<span itemprop="name"> <h1>RESPONSIVE LAYOUT MAKER</h1> </span> 
<span itemprop="headline"> <h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> </span> 
<span itemprop="text"> <p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </span> </p> 
<p> For more information, visit https://www.coffeecup.com/responsive-layout-maker</p> </div>

We can also define other elements with an itemscope using itemproperties from Thing (the top level itempscope which Creative Works is under).  This would allow us to define how to handle the URL in our markup.  Because this is a Creative Works itemscope, you have access to all the itemprops under Creative Works and all itempropts that Creative Works belongs to as well.

 The itemprop for URL is located in the Thing Properties.

<div itemscope itemtype=" http://schema.org/Article"> <span itemprop="name"> <h1>RESPONSIVE LAYOUT MAKER</h1> </span> 
<span itemprop="headline"> <h2>Rapid Browser Based Website Prototyping and Wireframing.</h2> </span> 
<span itemprop="text"> <p> Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. </p> 
<p> This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready. </span> </p> 
<p> <span itemprop="url"> For more information, visit https://www.coffeecup.com/responsive-layout-maker </span></p> </div>

The End Result!

Now that we have our page classified, here is how the search engines will read this:

• They will know this is an Article
• The name of  this article is: “RESPONSIVE LAYOUT MAKER”
• The headline reads as: “ Rapid Browser Based Website Prototyping and Wireframing.”
• It has the URL of :  https://www.coffeecup.com/responsive-layout-maker
• The article has the text of:   “Content is king! But to make him rule effectively and be loved, he needs the support of a strong layout that works on any screen or device size. One that gives the content room to flourish and adapts to it's unique character. Responsive Layout Maker is the only App that creates fluid CSS layouts with custom breakpoints, making content universally usable and readable. This App offers everything from flexible grids (including Bootstrap) to custom breakpoints. Prototype simple, or utterly complex, responsive design scenarios from the content out. Cumbersome and unrealistic static representations are a thing of the past. Instead kickstart projects with adaptive content and layout code that is crisp, clean and production ready.”

How cool is that! :-)

Open Graph is another form of Semantic Markup that is specific to Facebook, Pinterest and Google+. When someone shares content from your website to their timeline on Facebook, such as a link. Facebook takes a small snapshot of your website and uses it as a preview of the shared content. Open Graph allows you to customize this content by adding semantic tags so that the preview is more pointed and relevant to your website. Open Graph can be a powerful tool for branding your products, videos, etc. Adding Open Graph into your website can integrate your site into to the social concept allowing your customers to start conversations about your products but using the content you specify.

For example, the movie “Bob’s Beard” on Vimeo might include the following Tags:

 <meta property=”og:title” content=”Bob’s Beard”/>
 <meta property=”og:type” content=”movie”/>
 <meta property=”og:url” content=”https://vimeo.com/68967326”/>
 <meta property=”og:site_name” content=”Vimeo”/>

Twitter Cards allow you to add media experiences to Tweets that link to your web page content. By adding HTML to your webpage a users Tweet can be turned into a nice advertisement for your website. Showcasing your content in a “card” like fashion. This card is added to the tweet and can be seen by all followers of that user.

Twitter has seven different card types that can be applied to a Tweet.

• Summary Card: This is a default Card and includes a title, description, thumbnail, and Twitter account attribution.
• Summary Card with Large Image: Similar to a Summary Card, but allows you to feature an image.
• Photo Card: A Tweet sized photo Card.
• Gallery Card: A Tweet Card that highlights an album of photos.
• App Card: Provides a profile for your application.
• Player Card: Used for Video, Audio and media player content.
• Product Card: Show off your products using this Tweet Card.

Using the same example above the meta information for our video card would be as follows:

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@Vimeo">
<meta name="twitter:title" content="Bob’s Beard">
<meta name="twitter:description" content="Bob chops his beard.">
<meta name="twitter:player" content="https://vimeo.com/68967326">

So what does this have to do with the quote in the beginning of the article? Because a day setting up your content for others to share, is not a waste of time, however it is a benefit to one’s self, thus, not making it a waste of time at all.

Learn more about Semantic Markup:

We have a few articles that explain a bit more about semantic markup and how to use it!

• Structured Data: It's happening right now!
• Implementing Structured Data