The rise of STEM in primary education and countless free web development training materials available online has led to growing numbers of marketers with foundational HTML skills. If you’re one of them, you probably know basic functions like how to make text bold or embed an image in the middle of paragraph. These are common uses of HTML. However, you might be less familiar with HTML schema which helps browsers, search engines and other applications make sense of content beyond the words themselves.
To define schema concretely, it is HTML that structures content to be as beneficial as possible to end users. For instance, product schema is used on web pages intended to provide product information. It also defines which product attributes or properties are included in that content. When implemented, schema supports comparisons between products, promotion of products on digital marketplaces and much more.
Demystifying the Alchemy of Schema
If you are like I was five or six years ago, schema sounds like a bit like alchemy. You stir some random HTML tags into your code and hope that search engines and other platforms will start displaying your content on their platforms in more interactive ways. The promises of more engaging representations of your site are enticing, but the path for getting there is murky.
Fortunately, many website platforms automatically integrate schema into websites. However, there are times where you have to add schema manually if you want to unlock the power of the engaging representations of a website including rich snippets. For the rest of this article, I’ll show you how to do this using product schema.
How to Manually Add Product Schema
Before I begin, I’d encourage you to review the examples of product schema provided by schema.org. These examples, found at the bottom of the page, will show how schema looks when implemented as HTML microdata, JSON-LD, or RDFa. Personally, I like the familiarity of microdata, so we’ll focus on that next.
All schemas begin with <div> tags that define which schema is being used on the page. This is important because there are different schemas for content types such as products, articles, people, and more.
Here’s what the opening <div> tag looks like for product schema:
As you may already know, the <div> tags can be used anywhere after the opening <html> tag of the page. When manually adding schema to a page, you’ll likely have utilize your content management system’s page editor. Thus you’ll end up adding the div tags and subsequent schema inside the <body> tags.
It’s important to know that the schema div tags must surround the rest of the schema microdata. Schema that falls outside of the div tags run the risk of being processed incorrectly by search engines and other platforms.
Defining Item Properties with Span Tags
Once the product schema div tags have been added, we can begin defining the various attributes of the product using span tags. Each span tag will contain an itemprop which identifies the property (aka product attribute) on the content. A span tag with an itemprop looks like this:
Here are some examples of properties, I frequently use:
- color – the color of the product (ex. blue, multi, black)
- countryOfAssembly – where the product was made (ex. China, USA, etc.)
- depth – how long the product is (ex. 15 inches, 12”, 20 cm)
- description – a brief description of the product
- height – the height of the product (ex. 15 inches, 12”, 20 cm)
- manufacturer – who made the product (ex. Gildan, Rothco, Huawei)
- material – what the product is made of (ex. Cotton, recycled plastic, stainless steel)
- name – the name of the product
- sku – the SKU or part number of the product
- weight – how much the product weighs (ex. 50 lbs, 20 kg)
- width – how wide the product is (ex. 15 inches, 12”, 20cm)
There are many more product attributes you can identify within the page’s HTML. I would encourage you to explore the full list of properties on schema.org
When implementing these span tags, you should wrap the relevant content within the appropriate span tags and subsequent itemprop values.
Product Schema Implementation Example
As you can see in the example. I’ve added span tags around a few different attributes mentioned in the page’s content. Although this may look messy from an HTML perspective, these span tags are invisible to a user browsing the webpage.
Once I’ve added my schema to the page, it’s important that I’ve made sure to have closing div and span tags on my attributes. If I’m missing closing tags, I run the risk of breaking my webpage or generating errors in the display of my content. Assuming I have correctly added my schema tags, I’m now ready to reap the benefits of a product page that has schema added to it.
Conclusion
My hope is that this article has shown you that implementing schema is neither difficult nor complex. It’s something anyone with basic HTML skills can do. All you need is the ability to edit a given web page’s HTML and an eye for detail in making sure all tags have been correctly configured. Schema makes the Internet better for end users and allows site owners to get more value out of their digital marketing channels including SEO and PPC.
If you’re interested in getting more value out of your digital marketing channels, Riviea can help. Simply visit our Contact Us page to get in touch with us today!
0 Comments