Understanding Schema Markup for the Lazy Blogger

Estimated Reading Time:

Part One

Alright, alright, you got me! I admit it, okay?

Yes, I am a nerd. What gave it away? Was it the glasses? Or, the fact that I keep talking about SEO strategy? (Yeah, I hear you muttering under your breath, Rumi!)

Before you roll your eyes and worry that lip wondering if you should care about this, let me tell you that

a) if you like categorizing and organizing everything in your life, then you're going to LOVE this, and

b) this can help make your site look super pretty when it shows up in the search results, called Rich Snippets, which improves how often people click through to your site, meaning

c) it indirectly helps increase your site's visibility in search engines. Now, as you may have guessed by now, this is a fairly vast subject but we are going to focus specifically on how it applies to blogging platforms.

If you have a blog and want to add schema markup, it is much much easier to do this than if you were building your site from the ground up, believe me!

Having said that, we are going to keep it super simple (KISS) and go through every single, niggling question, a non-technical, non-nerd, and (be honest) a lazy blogger might have. Let's begin with the basics.





Topics covered:
  • What is Markup?
  • What is Microdata?
  • Why does markup matter to content writers ...bloggers ?
  • Does knowing about Schema Markup help with your blog post content?
  • What is Schema.org Microdata?
  • How do the schemas work? Basic stuff that’s good to know.
  • What’s getting added to your HTML?
  • This seems like a lot of work. Or, is it?
  • Markup Helper and What’s next


What is Markup?

In the traditional, non-digital sense, it is the 'process of correcting text in preparation for printing'. Which is slightly similar to how it applies to the computer world where we assign certain characters or 'tags' to indicate how content should look when it is displayed (or printed, even) and especially to assign a logical structure to the document.

To do this, markup languages have evolved, since the dawn of computers, to help define how a document (or your content) is processed and displayed by the computer.

One such commonplace markup language is Hyper Text Markup Language. In other words, HTML!

What is Microdata?

As you may have guessed, it's not just enough to tag parts of your content as image, or text paragraph, etc. which is what you usually do with HTML. Often, you need to tag your (let's say) image further as either a product image, publisher image, company logo, and so on.

So, over the past few decades, some very smart people have come together to build languages within markup languages to specify how relevant information can be classified better, therefore preserving the spirit of the data in a logical manner that promotes faster discovery.

Such 'metadata' is what search engines, browsers, and other readers can extract (or crawl) and use it to provide a better and richer browsing experience for the user. The vocabulary used to write metadata is called Microdata.

Why does markup matter to content writers ...bloggers ?

 One of the best ways to explain why bloggers should care about markup in their posts is this sentence from the ISO group:

"If both the indexer and the searcher are guided to choose the same term for the same concept, then relevant documents will be retrieved."

Search engines, like Google, use complex algorithms to match text strings of data in a bid to organize the underlying metadata and index them appropriately to provide a relevant experience for the user. So, when you search for something on Google, you get the illusion that there is some intelligence applied to pull all this information while it just really is a very thorough librarian.

In short, it's important to markup your data to help along this process of indexing.

Does adding markup help with your blog post content?


 Yes, it does! When you know where search engines pull up different kinds of information from, you learn where you need to enter the relevant content keywords in your blog post. For example, most beginner bloggers ignore the 'Search Description' box (in the Blogger / Blogspot platform) when writing their post. Even if they do write it in, they might not add the keywords that describe the content of the subject exactly.

When you pay attention to details like the 'Search Description' of your post, you've already helped markup part of your data. Case in point. Below is for our Google search listing when someone searches on 'praktan review'. The snippet you see there is what I had entered in the 'Search Description' box while editing the post.


If you don’t add in that piece of information, Google typically picks up the first line of your post and uses that in the snippet area of the search result.


But, marking up your content depending on the type of blogpost you are writing makes a huge difference. If you want to make your blogposts look extra special when someone searches with a relevant keyword, you could make it look great with rich snippets and rich cards that have images.

Like this:

What is Schema.org Microdata?

 Hold up! What is Schema.org? The search engine giants, Google, Microsoft, Yandex, and Yahoo, sponsored a collaborative, community-driven project called Schema.org whose mission is to create, maintain, and promote schemas for structured data on the Internet. In their words:

“If you add schema.org markup to your HTML pages, many companies and products—including Google search—will understand the data on your site.”

Which works wonderfully for us. Many of the core members and contributors work for these companies so you get the insider view of how to organize your data appropriately.

Continue.

Now, if you just do a plain search for any of these terms, it’s easy to step onto the confusion train and then onto the struggle bus of technical terminology. To keep with our KISS theme, we are going to specifically focus on HTML microdata in our markup language.

How do the schemas work? Basic stuff that’s good to know.

If you think about it, most information in the world is kinda designed into a hierarchy that interconnect with each other in some way or the other.

For example, if you are writing a blogpost about your travel experiences, you are writing a type of ‘article’. And, the properties that this blogpost would have are: a name or the title of the blogpost, a date for publishing, an author, an image, the body of the article, and so on.

Now, if you continue to think about it, an author is also the property of a type of ‘Person’ who also has a name, a website URL maybe, a date of birth, etc. That birthdate can also come under the property of ‘time’, along with published date.

So, even though information has an inherent hierarchy, it also has connections with other types of information ... like the structure of the DNA weaving and preserving the evolution of data. (#beingcornyaboutcode) Keeping all this in mind, schemas in the Schema.org documentation have a hierarchy but are also related to other types depending on the data available.

What’s getting added to your HTML?

 Again, you don’t need to manually type this into your blog post because you can use tools like the ‘Structured Data Markup Helper’ (more on that coming to you soon in a blogpost near you) It’s just good to understand what the underlying markup is that will help make your blogpost more relevant to search engines like Google. There are three terms that help you define your data.

 Itemscope: This element gets added to the section of your article where you want to start adding markup. Let’s say you are writing a recipe. The HTML version of a post that has a recipe for chocolate chip cookies might look like this:
  ... <div>   <h1>The Most Delicious Recipe for Chocolate Chip Cookies</h1>     <img src="chocolatechipcookies.png" / >     <span>Every time we get a spell of chilly weather here, I start baking some good ol’ fashioned chocolate chip cookies. Though I say it’s old fashioned, it’s far from it.     </span>   <h3>Ingredients</h3>     <span>All purpose flour</span>     <span>Eggs</span>     <span>Sugar</span>     <span>Chocolate</span>   <h3>Instructions</h3>     <div>     1. Mix it all.     2. Bake it all.     3. Eat it all.     </div> </div> ...
We are going to use "The Most Delicious Recipe for Chocolate Chip Cookies" as the title of the recipe. So, we start by adding itemscope to the <div> element like this.
 ... <div itemscope>   <h1>The Most Delicious Recipe for Chocolate Chip Cookies</h1> ...
Sometimes itemscope is written like this itemscope="". It works either way, so not to worry. Adding itemscope specifies that the piece of HTML code entered with the <div>...<div> indicates that there is relevant search-worthy information here.

Itemtype

itemtype is an element that can be added immediately after itemscope to define what type of data is contained. In this case, we add the schema link for 'Recipe'. Like so: ... <div itemscope itemtype="http://schema.org/Recipe">   <h1>The Most Delicious Recipe for Chocolate Chip Cookies</h1> ... Itemprop

Now, don’t be shy - open up the link. It gives you the complete list of properties under the Recipe type. Remember how we talked about properties of different types of data? This is how it would look once you neatly organize and add itemprop wherever it applies in your article.
  ... <div itemscope itemtype="http://schema.org/Recipe">   <h1 itemprop="name">The Most Delicious Recipe for Chocolate Chip Cookies</h1>     <img itemprop="image" src="chocolatechipcookies.png" / >     <span itemprop="description">Every time we get a spell of chilly weather here, I start baking some good ol’ fashioned chocolate chip cookies. Though I say it’s old fashioned, it’s far from it.     </span>   <h3>Ingredients</h3>     <span itemprop="recipeIngredient">All purpose flour</span>     <span itemprop="recipeIngredient">Eggs</span>     <span itemprop="recipeIngredient">Sugar</span>     <span itemprop="recipeIngredient">Chocolate</span>   <h3>Instructions</h3>     <div itemprop="recipeInstructions">     1. Mix it all.     2. Bake it all.     3. Eat it all.     </div> </div> ...

In the above piece of code, we have defined the data items with properties like name, image, description, recipeIngredient, and recipeInstructions. There are a lot more properties that can be added under the Recipe schema, including nutritional information, calorie information, serving size, time taken, and so on. So, you can really mark and label every part of your blog and enable your post to appear in the search results something like this:

This seems like a lot of work... Or, is it?

 It usually is. However, there are some advantages to using a blogging platform or using a website template. They usually come pre-added with some common schema elements. For example, even if you did nothing at all to markup your content, the template Blogger HTML would typically come prefilled with the Blogposting schema.

So, common elements like the published date, article body, blogpost title, author name, author URL, etc. are automatically picked up by search engines. 

But, we still want those cool images to show up when we show up in Google’s search results, right? Never fear!

Markup Helper and What’s next

 Google has a Structured Data Markup Helper that’s awesome at helping you markup your data with just a few clicks.

It’s a pretty intuitive tool so you should be able to start on it right away, if you want. Or, you could wait for the next ‘Slog That Blog’ post that’s all about it. Until then, au revoir and enjoy the knowledge bomb you've just received! #KnowledgeBomb



Comments

Popular Posts