Using Structured Data Markup - Building Search Engine-Friendly Sites - SEO For Dummies, 6th Edition (2016)

SEO For Dummies, 6th Edition (2016)

Part II. Building Search Engine-Friendly Sites

Chapter 8. Using Structured Data Markup

In This Chapter

arrow Understanding structured data markup

arrow Picking a data format

arrow Modifying your site’s Knowledge Graph box

arrow Finding helpful markup tools

tructured data markup is a way to mark your data to provide contextual information to the searchbots. In effect, you’re telling the search engines that “this is a photograph of a recipe, and this is our company logo, and this is a phone number,” and so on.

HTML is a basic markup language that tells browsers what to do with information; how to display it on the page, essentially. But structured data markup goes one step further and tells the searchbots what the data actually is or means, so the search engines can use the data in various ways.

Both Google and Bing use structured data markup. You can find information about each search engine’s implementation at these links:

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170

www.bing.com/webmaster/help/marking-up-your-site-with-structured-data-3a93e731

Structured data markup lets you code information, such as the following:

· Company information

· Articles

· Events

· Local businesses

· Music

· Navigation breadcrumb trails

· Offers

· Organizations

· People

· Products

· Recipes

· Restaurants

· Reviews

· Software

· Videos

Right now, Google uses the data in several ways. It uses it to create

· Rich snippets

· Knowledge Graphs (large information boxes related to a person, location, company, and so on)

· Actions (such as playing music or streaming video direct from the search results)

· Reviews (Google collects together reviews — such as movie reviews — and displays them in the search results)

Bing also uses the data in similar ways, creating “rich snippets” and more advanced forms of data presentation in search results. Rich snippets? Let’s look at that next.

Creating Rich Snippets

A rich snippet is a term for extended information that’s displayed in search results. For instance, look at the Bing result in Figure 8-1; notice the rating information provided and the address? This information is provided to Bing by Citysearch using structured data markup. How? In the page, Citysearch has provided this code:

<p id="coreInfo.address" class="placeAddress block" itemscope itemtype="http://schema.org/PostalAddress" itemprop="address">
<span class="street-address" itemprop="streetAddress">811 SW 2nd St</span>,
<span class="locality" itemprop="addressLocality">Tulia</span>,
<span class="region" itemprop="addressRegion">TX</span>
<span itemprop="postalCode">79088</span>
<div class="rating scoreCard fullBlock relative " itemscope itemtype="http://schema.org/AggregateRating" itemprop="aggregateRating">
<div class="currentScore">
<span class="average highScorecard" id="score.value" itemprop="ratingValue">100</span><span class="scoreCardPercent highScorecard" id="score.percent">%</span>
<meta content="100" itemprop="bestRating" />
<meta content="0" itemprop="worstRating" />
<span class="voteCount">
<span class="votes"><span id="score.count" itemprop="ratingCount">1</span> Vote</span>

image

Figure 8-1: A Bing search result showing a “rich snippet” created using structured data markup.

I’ve bolded a few areas so you can find things. First, notice the itemtype URLs: http://schema.org/PostalAddress and http://schema.org/AggregateRating. These URLs point to pages that describe the code needed.

On the PostalAddress page we find, for instance, that the information that appears after the streetAddress “itemprop” is (and this won’t surprise you) a street address; the information after addressLocality is a “locality,” such as a city name; and the information after postalCode is the address’s postal or zip code.

You can also find, on the http://schema.org/AggregateRating page, that the ratingValue itemprop represents a value showing “the rating for the content,” and the ratingCount value is the total number of ratings. Thus, Citysearch has managed to pass to the search engines information that they can now use in some way, because they actually know what the information is.

Here’s another example. Search Bing for, say, lamb recipes and Bing formats the page especially for recipes (see Figure 8-2). You’ll notice a few things: The search results contain both pictures and ingredient lists, and you can click on a recipe and get extended information (such as Ingredients and Directions). Bing can provide these rich snippets, thanks to special codes embedded in the HTML, known as structured data markup, that identify each piece of information to the search engine; Bing can extract the information, store it in a manner that it understands the data, and display it in the search results.

image

Figure 8-2: Bing Recipe results; notice the starred reviews, photos, and tabs for Ingredients, Directions, Reviews, and Nutrition.

Here, for instance, are a few pieces of code that I pulled from a FoodNetwork.com recipe. (I’ve removed a few pieces of code to focus on the important bits.) First, here’s the photograph displayed in the search results:

<img class="photo" height="120" width="160"
src="http://img.foodnetwork.com/FOOD/2004/04/28/ee2e01_leg_of_lamb_med.jpg">

The class="photo" piece identifies this as the photograph of the dish. In the next piece of code, Food Network is identifying the author of the recipe; yep, the class="author" is the relevant code:

<p class="author">Recipe courtesy Emeril Lagasse, 2004</p>

Here you can see various ingredients (which the search engine will then parse to pull out the primary terms that it places into the snippet on the search results page: garlic, not 8 cloves garlic, minced):

<li class="ingredient">1 leg of lamb, bone in (about 6 to 7 1/2 pounds</li>
<li class="ingredient">1/4 cup fresh lemon juice</li>
<li class="ingredient">8 cloves garlic, minced</li>
<li class="ingredient">3 tablespoons chopped fresh rosemary leaves</li>

Simple, eh? Well, not entirely. It can take some figuring out, but if you have specialty data, such as the preceding listed types, you should spend some time reading up on this stuff.

Google claims that coding data like this doesn’t help with ranking, but I don’t understand how that can be correct. If Google is trying to provide recipes with all the nice rich snippets (for instance, if your recipe doesn’t contain the structured data), Google can’t use your data to create rich snippets. I have to assume your recipe doesn’t make it onto the search-results page. (At the time of writing, Google wasn’t providing Recipe results, though its rich-snippets information claims that they do; maybe they’ll be back soon.) As for Bing, using this data does help with rankings, in some cases. Clearly, if Bing can’t find the structured data markup, then your recipe doesn’t appear up top in that recipe bar, for instance.

Furthermore, using structured data markup helps listings stand out in the search results, making them more likely to be seen and clicked upon.

Pick Your Data Format

You may have noticed that I show two different coding methods above; the first was the Microdata markup (http://www.schema.org), and the second was something called microformats markup (http://microformats.org/). There are other ways to mark up code: RDFa, JSON-LD, and Open Graph, a markup designed by Facebook to help it recognize data that it finds in Web pages.

There are two different things to consider here: the vocabulary used, and the markup method used. For instance, schema.org publishes a vocabulary for hundreds of different “classes” or data types (most aren’t supported by the search engines, but who knows what the future brings). In addition to the vocabularies listed earlier in this chapter, there are vocabularies for video games, exercise plans, maps, sports events, bus trips, train reservations, and even for actions (such as the action of eating and the action of wearing).

For example, for an article placed into a Web page, you can define the various elements of the article by using such terms as articleBody, articleSection, wordCount, author, and so on.

However, somehow you have to code your pages using this vocabulary — you have to mark up your data — and that can be done in various ways. A great way to see this in action is to spend some time digging around on schema.org, where you’ll find these hundreds of vocabularies. In many cases, you see examples of each one employed by using three formats: Microdata, RDFa, and JSON-LD.

So which data format do you use? Well, Google prefers JSON-LD; on the other hand, Google doesn’t currently support JSON-LD markup for all data types, so read Google’s latest information (see the link earlier in this chapter) to figure out whether JSON-LD is supported for your data.

For data types with no JSON-LD, Google recommends Microdata or RDFa. They certainly used to support microformats, but seem to be recommending these other three formats right now.

tip Bing doesn’t seem to care. Currently, Bing states that “It’s entirely up to you to decide which of the supported specifications best fits your data.” However, it doesn’t appear to support JSON-LD. If you like, you can use JSON-LD for the data that Google prefers it; if it’s a component for which Bing also reads structured data markup, also use one of the Bing approved formats (there’s no reason you can’t use JSON-LD and microdata, for instance).

Providing Knowledge Graph Information

You’ve probably seen the Google Knowledge Graph. This is a block of information displayed in response to a search about a well-known company, organization, place, person, or other “entity”; you can see an example in Figure 8-3. Google has tools that gather this information from various places, but they also allow companies and people to submit their own information for the Knowledge Graph, using structured data markup. Currently, you can submit logos, contact numbers, and social profile links to Google.

image

Figure 8-3: Microsoft’s Knowledge Graph.

For example, the following code is JSON-LD code providing links to social profiles (Google will place the appropriate social-network icons into the Knowledge Graph box):

<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "Organization",
"name" : "Acme, Inc.",
"url" : "http://www.acmeincdomain.com",
"sameAs" : [ "http://www.facebook.com/acmeprofile",
"http://www.twitter.com/acmeprofile",
"http://plus.google.com/acmeprofile"]
}
</script>

Getting Help

If you have one of the data types that the search engines use, you really should look into using structured data markup; use the Google and Bing links earlier in the chapter to visit their help pages and find out what they currently support. You may also want to spend some time on Schema.org learning about the vocabulary and the Microdata and JSON-LD markup methods.

There may be a way to short circuit some of the work, using Google’s Data Highlighter tool. You’ll find this in your Google Webmasters account (click Search Appearance, then select Data Highlighter; see Chapter 13). You’ll enter a URL, and Google will show you your page. You’ll then select components on the page and (using a drop-down list box that appears,) select the appropriate data type. Google will then show you other pages on your site; you’ll be able to see how well Google recognizes the data types you defined.

warning The problems with the Data Highlighter are twofold:

· You need a pretty consistent format to make it work.

That isn’t a problem for most template-based CMS systems, which account for a large percentage of sites these days.

· It’s no help with Bing. You’re just telling Google what the data is. You aren’t actually changing the code.

However, Google also provides other handy tools to help with markup:

· Markup Helper: This tool helps you tag your data (using the Microdata format); provide a URL or paste HTML, and Google displays the Web page. You can then highlight a piece text; a drop-down list box appears, from which you select the appropriate data type. Google provides you with the finished HTML code to use. You’ll find a link under Other Resources in your Google Webmaster account (Chapter 13), or you can go there directly:

www.google.com/webmasters/markup-helper

· The Structured Data Testing Tool: Enter a URL, or paste code, and the tool reports back what it found, including errors. You’ll find a link under Other Resources in your Google Webmaster account (Chapter 13), or you can go there directly:

https://developers.google.com/structured-data/testing-tool

· The Structured Data Dashboard: You can find this in your Google Webmasters account (click the Search Appearance menu, then the Structured Data option; see Chapter 13). The console will show you the data that Google has found in your pages, and also report any errors it has found.