How to Use Markup in Your Website and Why You Should

Dann Albright 26-06-2017

Search engines are amazingly powerful 7 Google Search Alternatives and Their Trademark Features Are you a die-hard Google user? Give these alternative search engines a try. From privacy to helping out charitable causes, these search engines could give you some reasons to change the way you browse. Read More . They can interpret the often unclear language we use to figure out what we’re looking for, determine the best resource to answer our questions, and show it to us within fractions of a second.


Google is even getting really good at answering questions in the search results page, obviating the need to click on anything. It even personalizes search results How To Disable Google's Personalization Of Search Results Read More . And that helps people find the information they’re looking for faster.

But search engines can’t do it this on their own — they need help from site owners and developers. And schema markup is one way in which you can help out on your own site.

What Is Schema Markup?

Schema markup is a way of highlighting specific pieces of structured data.

What’s structured data? It’s information that’s organized and tagged so it can be better understood by machines. In short, schema markup is information that helps search engines find specific types of information on your web page. It’s easiest to look at an example.

Google has its own interactive example of schema markup that details an apple pie recipe:


google structured data tool

Above, you can see the JavaScript that defines the prep time, total time, recipe yield, and various nutrition facts for the recipe.

It should be noted at this point that there are two main ways to mark up the structured data: with JSON What Is JSON? A Layman's Overview Whether you plan to be a web developer or not, it's a good idea to at least know what is JSON, why it's important, and why it's used all around the web. Read More or with inline HTML tags. Google recommends the JSON method, but we’ll go over both later on.

Here’s how Google pulls out the specific nutrition information:


schema markup nutrition has thousands of different types of markup that you can use to better show search engines the information on your page. The TechArticle type, for example, includes, among many other things, the following attributes:

  • proficiencyLevel
  • wordCount
  • audience
  • creator
  • dateCreated
  • dateModified
  • datePublished
  • publishingPrinciples
  • typicalAgeRange

There are full schema for libraries, lodging businesses, apartments, visual arts events, broadcast channels, delivery methods, game server statuses, and more.

The idea is to make sure search engines know what each piece of information on your page actually represents, so it can show those pieces of information to people who are looking for them.


The Benefits of Schema Markup

OK. Schema markup tells search engines what’s on your page — what’s the big deal?

Google puts it like this:

“When information is highly structured and predictable, search engines can more easily organize and display it in creative ways.”

For example, you might see tour dates for the upcoming Slayer tour displayed directly in the search results:

schema markup results


Or get specific information about a movie when you search for it:

schema markup sicario

Google is getting better all the time at finding this information on its own, but correctly using schema markup makes the process easier, and makes it more likely for the information on your page will be featured.

And when search engines know exactly what’s on your page, they can show it to people who are looking for it right inside of search results. And that’s good for everyone.

Getting Started With Structured Data

Now that you’ve seen the benefits of using markup, it’s time to start diving in. We’ll start with the easiest tool around: Google’s Data Highlighter.

You’ll need your site to be connected to Google’s Search Console (formerly known as Webmaster Tools Get Deeper Search Insights For Your Site With Webmaster Tools Search Queries Changes to the Search Queries tool in Google Webmasters could change how you do your topic research. Content generation on the web involves creativity and user-focus, and a lot of keyword research. Read More ). If you need help getting it set up, check out Yoast’s useful walkthrough.

Once you’ve done that, sign into Search Console and click on Search Appearance > Data Highlighter. Hit the Start Highlighting button on the right side of the screen.

google data highlighter

Next, you’ll need to enter the URL of a page you want to tag and select the type of markup you’ll be doing. In this particular case, we’ll be using the Articles markup type.

schema markup article type

Because I’m highlighting an article on a site that posts a lot of articles, I’ll keep Tag this page and others like it checked.

Now you’ll see a split screen: your page on the left, and available markup fields to the right.

It’s really simple from here. Just start highlighting! Whenever you highlight text (or click on an image) a small menu will appear where you can select the type of information you highlighted.

Here, I’ve highlighted the title of the page. All I have to do is click “Title” in the menu.

data highlighter title

Now the title is populated in the right pane.

data highlighter title populated

I’ll continue on, highlighting the author, date published, main image, and category (I highlighted the tags at the top of the article, and all three were imported as categories).

data highlighter pane

And we’re done! That’s all there is to it.

When you hit Done, Data Highlighter will help you apply this markup to other similar pages on your site.

Adding More Detail

Data Highlighter only lets you scratch the surface of structured data markup. As you saw above, I was only able to add a handful of attributes to that article.’s Article type contains a lot more attributes that can be set.

What do we do if we want to add more detail to the schema markup?

You’re going to have to dive into the code at this point. As I mentioned earlier, there are two main ways to represent the structured data: with JSON and with inline HTML tags. Because the HTML tags 17 Simple HTML Code Examples You Can Learn in 10 Minutes Want to create a basic webpage? Learn these HTML examples and try them out in a text editor to see how they look in your browser. Read More are a bit more intuitive, we’ll go over those first.

Inline HTML Markup

As an example, we’ll mark up a simple sentence: “I live in Denver.” In HTML, that will be represented simply, like this:

<p>I live in Denver.</p>

To start the markup, we need to specify that this particular sentence is about a person (shown by the Person item type). Here’s how we do that:

<div itemscope itemtype="">
  <p>I live in Denver.</p>

Now a search engine will know that everything contained within this <div> tag has to do with a person.

Next, we’ll add a markup attribute: homeLocation. defines homeLocation as “A contact location for a person’s residence.”

We need to add that specific attribute to the HTML. Here’s how we do that:

<div itemscope itemtype="">
  <p>I live in <span itemprop="homeLocation">Denver</span>.</p>

Now “Denver” is identified as the homeLocation property, and Google knows that the person identified in this paragraph lives there.

If we change the sentence to “I live and work in Denver,” we can show that, too:

<div itemscope itemtype="">
  <p>I live and work in <span itemprop="homeLocation workLocation">Denver</span>.</p>

Denver is now identified as both homeLocation and workLocation. (Thanks to Lloyd Bank and unor at Stack Exchange for outlining this example.)

This is a rather simple case of schema markup, but you get the idea. By using <div> and <span> tags, you can add attributes and properties to anything on your page. Markup With JSON

Google recommends using JSON-LD (JavaScript Object Notation for Linked Data) for schema markup. The biggest advantage of this method is that it keeps your HTML much cleaner. If you go back to edit a page and you see dozens of pages of code with markup, you’re not going to be happy.

JSON markup still requires a lot of space, but it’s separated out from your HTML, making it easier to maintain.

Let’s say you have a bookstore called Harker’s and you’ve included the following information on your contact page:

Phone number: 555-8710
Address: 749 Stoker St., Boulder, Colorado
Hours: 10–9 Monday through Friday, 11–8 Saturday, 12–5 Sunday

Here’s how you’d represent that with JSON-LD:

<script type="application/ld+json">
  "@context": "",
  "@type": "BookStore",
  "telephone": "555-8710",
  "address": "749 Stoker St., Boulder, Colorado",
  "openingHours": [ "Mo-Fr 10:00-21:00", "Sa 11:00-20:00", "Su 12:00-17:00" ],

This goes in the header of your page. As you can see, this is going to take up a lot of room, because this content will almost certainly also be displayed on your page in HTML. So everything you want to mark up will be written twice.

Despite that duplication, however, the JSON method is often preferable, as it separates the schema markup and your HTML. Many HTML best practices 9 Mistakes You Shouldn't Make When Building a Web Page These following HTML coding mistakes are easy to make, but if you head them off earlier rather than later, your page will look better, be easier to maintain, and function how you want it to. Read More seem a little strange until you realize that they make sites easier to maintain. This is the same.

Adding Schema Markup to Your Site

Now that you’ve seen a few different ways to add structured data notation to your site, you can get started! It’s a good idea to start with the Data Highlighter, and move on from there. The documentation is the ultimate resource, but it’s a little difficult to skim through.

No matter whether you want to go for the basics or start marking up everything in sight, you now have the resources you need to get started!

Have you used markup on your own site? Do you have any tips for site owners or developers looking to get started? Share your thoughts in the comments below!

Image Credit: iinspiration via

Related topics: Web Design, Web Development.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *