Where SEO Meets Web Dev & Design Part 2: WTH is Structured Data?

By Raouf on 23 October, 2023

Seriously, What is Structured Data?

In short, it’s a Technical SEO thing — and if you’re a web developer working with a firm that does advanced SEO, they might ask you for help with implementing it.

 

Structured data is a (hidden) layer of organized information that we can add to the code of a webpage. By “organized” we mean the information is marked up with code called “Schema” for certain robots and machines, such as Google, to use.

 

From Google: “Google Search works hard to understand the content of a page. You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page.

 

Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.”

 

(Some Useful Resources for the extra nerdy:

A Visual Example of Structured Data

See the 5 elements in the Google search result below?

google search result

This is where Google gets those 5 elements from (viewing the source code of the White Adidas Stan Smith Shoes page):

source code

Why dev? Why can’t the SEOs do it?

Many SEOs can implement structured data on their own using automated plugins, or by writing the layer of data themselves, but they do need to have a little grasp of development skills and or the CMS they’re working with.

 

Here’s a very basic pseudocode example:

 

Let’s say we’re building a small e-commerce website with 10 products. We’re using WooCommerce (WordPress PHP).  Each product has a different name and price, but the website only has 1 product page template that all the products use.

 

Using structured data, we need to tell Google the name and price of each product.

 

We write something like:

 

Product Structured data {

Product name: <?php get-the-woocommerce-product-name>,

Price: <?php call-get-price>,

Currency: <?php call-get-the-woocommerce-currency-that-is-currently-set>

}

 

Developers may be better suited to implement this if the SEO isn’t that good at coding.

 

Sometimes, the developer could be a lot more familiar with the templating that is needed, or, because most structured data is written in JSON-LD (JavaScript), the code might not work because you would need to escape php characters inside a JSON script, and so on.

Actual Structured Data Formats (not pseudocode)

There are a few ways to add this layer of “schema” to web pages.

 

  1. JSON-LD (Recommended)
    • JSON-LD is JavaScript in a <script> tag in the page head or body. The markup is not interleaved with the user-visible text, which makes it easier to write larger chunks of structured data (such as for a LocalBusiness type).
      You can just inject a <script> tag with JSON-LD that has data inside.

 

The example of the Adidas product page we saw earlier was using a JSON script:

  1. Micro-Data (for in-line use)
    • Micro-Data is a structured data format used to nest structured data within HTML content. Like RDFa, it uses HTML tag attributes to name the properties you want to expose as structured data. It is typically used in the page body, but can be used in the head.
  1. RDFa (for in-line use)
    • RDFa is an extension to HTML5 that helps you mark up data on a webpage. It’s similar to Micro-Data, however it’s used less often, so we don’t think there’s a need to focus on this format. Here’s what it looks like anyway:

Structured Data TYPES (There are 100s, but SEOs are only interested in a handful.)

There are hundreds of schema types (that you can browse through here), however, as SEOs, we’re mostly interested in the ones that search engines like Google can use.

 

We know for certain that Google uses the following schema types to display enhanced search results, as they have mentioned in the Google Search Gallery page:

 

For All Sites:

  • Breadcrumbs
  • FAQs
  • SiteLinks Searchbox
  • Organization + Logo (if applicable)

 

For Business Sites: 

  • LocalBusiness


For News & Media Sites:

  • Article
  • Subscription and paywalled content (if applicable)
  • Video

 

For eCommerce Sites:

  • Product
  • Reviews

 

Others:

  • Events
  • Books
  • Employer Ratings
  • How-to steps
  • Q&A (Like StackOverflow top answers appearing in search results)

Ways To Write / Check Structured Data

JSON-LD is simple and almost human-readable text. You just have to make sure there are no syntax errors (it’s javascript, so C-based syntax, i.e. curly braces, semi-colons, commas, and square brackets).

 

You can use https://validator.schema.org/ to check your JSON-LD schema.

 

If you’re using Micro-Data (for inline elements) then you need to add HTML attributes to the html tags where the information you’re trying to create a schema layer for is. 

Micro-Data is also simple but a bit tricky since it incorporates visible elements on the page, so a more practical use for it would be for small or simple elements such as name / address / phone in the footer, or extra schema like navigation menu elements.

 

You can also use https://validator.schema.org/ to check your Micro-Data schema.

 

© 2024 Fuelist Digital. SEO & Digital Marketing.
Privacy Policy
Terms of Use
Accessibility & Accommodations Policy