Previously in our blog, we have concentrated on content that may be useful for online merchants and those who want to move their businesses online. However, over the years, our team generated a lot of useful content for Magento developers as well, and it’s about time to share that with the community.
Our first article in the category “For Magento developers” is about several ways of adding microdata to websites, particularly, to Magento online stores. Though microdata was introduced years ago, it’s implemented on a relatively small number of websites. If you look at the image below, you will notice that one of these sites stands out more than the other. Those small rating stars make the site more noticeable and trustworthy for users, and this is just the tip of the iceberg, it gets better.
What is microdata?
Microdata is a structured data markup schema allowing search machines to structure and understand content from webpages. Put simply, it is a set of techniques that helps search machines distinguish a product page from a blog post page, and show web users more relevant and attractive results. When implemented on a site, microdata influences its rankings in the major search engines such as Google, Yandex, Bing and Yahoo!; and in most cases it makes site pages more compelling and visible for prospective users.
So let’s take a closer look at microdata to see its specific concept and how it may be implemented in Magento.
Microdata lets you add structured markup to any HTML standardized element, and won’t cause problems with browsers that do not support it. The main microdata source is Schema.org. It contains more than 100 schemes (rules of microdata processing for certain object types) that may be used for web sites. These are just some of the most popular schemes:
The full list of schemes is available here. Basically, there’s a special markup for all possible information types.
How to implement schemes?
First of all, you must select an object type. In the list with schemes, you can find the name of the scheme you need and its attributes description. For example, you want to implement microdata on the product page of Magento.
This is actually the scheme that you can use.
There are lots of options but let’s select the most important ones:
- name — the name of the product
- image — the picture of the product
- description — the main information about the product
- sku — the unique identifier of the product
- brand — the product’s producer
- aggregateRating — the product’s rating
- offers — the object’s properties related to its purchase. In our case it contains price currency, price, and availability.
We add itemtype=”http://schema.org/Product” itemscope to the main div to indicate that everything that is contained inside this block is related to the product.
itemtype=”http://schema.org/Product” is the object type indicator, and itemscope shows that the object will contain options. Since each object has it’s own set of options, it’s something you must configure each time you describe an object or embedded object. For example, the object which means “product” will include some parameters, name, price, description, etc. described below, as well as objects like ratings and reviews.
To help the system to understand that there is something inside we need to use “itemscope” We select div with class “product-view” in the file \template\catalog\product\view.phtml
Here’s what we have before:
And what we have after:
In the line with the name of the product we add itemprop=”name” which will indicate that this line contains the name of the product.
would be appropriate for this reason, in the same file. The main image of the product will also come in handy.
In this theme it is with id=”image-main” which is located in the file \template\catalog\product\view\media.phtml.
We’ll add itemprop=”image” to make search engines understand, that it’s an image of the product.
Now let’s proceed to ratings. This part is a little more complicated if we talk about a default Magento theme, because the initial rating structure is not eligible for microdata and not very informative, that’s why we need to add some additional lines to the file \template\review\helper\summary.phtml:
itemprop=”aggregateRating” represents the object, which will contain the rating value, and itemscope means that there will also be some object properties inside.
itemprop=”ratingValue” represents the rating value and itemprop=”reviewCount” represents the number of comments.
Let’s come back to the file \template\catalog\product\view.phtml which is the product page template.
Now add itemprop=”description” on the block with description and it’ll update the product’s description. For this reason we chose
And the most important – offers. That is a special object, which is in charge of selling, offers etc.
On the block, which will contain prices, availability etc. we have to add attributes itemprop=”offers”
itemscope itemtype=”http://schema.org/Offer” indicating that this is an “offers” object, which will contain properties.
In this section, add the following: . This states currency. Also add itemprop=”price” on the block with price, which in no uncertain terms, creates the product’s price data.
I.e. the price will look something like this:
This is it. If everything is done correctly, this page will look like this:
By the way, you can check accuracy of your schemes with help of the Structured Data Testing Tool from Google. You can either copy the code there or provide the link of the page, which requires testing.
Also, a similar service is provided by Yandex validator. However, it’s not everything we could hope for in a microdata. For instance, we could point out the brand, seller, weight, color, time of price relevance and other properties of the product. But currently provided information will fundamentally simplify the searching procedure.
And in search results our product is going to look like this:
And this is how the markup is going to look like:
We’ve simplified the markup intentionally, deleting unnecessary (at this moment) elements to leave only the most important information for the markup content.
Thus, it’s quite easy to create a search-engine-friendly website without making changes in layout, but by adding simple attributes. Consequently it makes such a website more user-friendly, which is crucial for webstores.
That being said, there’s one more way of introducing microdata that we’d like to mention – JSON-LD. In contrast from the way we used earlier information, this will be introduced not by means of attributes, but of JSON. It can be more convenient, because all the information is specified in one place. In our case it’ll look like this:
As you’ve probably noticed, here we have the same names of objects and properties as we specified with help of attributes. Such code can be validated by means of the same validators. Both ways are equal, so it’s up to you which of them to use. Nevertheless the first method is more popular and flexible (information is taken out of the same blocks in which it’s displayed on the page. You don’t need to display it in a special place) but the second is easier in implementing and understanding (you don’t need to move from one necessary template to another, everything’s located in one place). Some prefer to use both ways simultaneously to be 100% sure, although it’s not something we’d recommend. It’s not like it’s going to end in smoke and flames but, it might not be worth the time to double all the information.
Before we finish, it’s worth mentioning one more microdata scheme: Organization. Because it would be a reasonable request to show the company’s logo.
Google recommends to do it like this:
In JSON-LD it’ll be like this:
It’s also a good idea to show contact information for the company:
Google.org (GOOG) Contact Details:Main address: 38 avenue de l'Opera F-75002 Paris, France ,Tel:( 33 1) 42 68 53 00 , Fax:( 33 1) 42 68 53 01 , E-mail: secretariat(at)google.org Members: - National Scientific Members in 100 countries and territories: Country1, Country2, ... - Scientific Union Members, 30 organizations listed in this Yearbook: List of Alumni: Jack Dan , John Smith , History:
In practice, it’ll look like this:
So, everything’s great but the article won’t be complete, if we don’t talk about one more way to introduce information about your site and Open Graph protocol. This protocol is used by social networking sites like Facebook. We recommend using this protocol on all the pages along with the microdata we’ve described above.
So you at this point you might think,”What do we need it for?” For example to be able to publish your pages like this:
To use Open Graph you’ll need to use meta tags, which you have to place in <head> section of your page.
Basic tags are the following:
og:title – heading, product name etc. For instance, you can see it in the image above, it’s “Breathe-Easy Tank”.
og:type – object type. They can be different. In our example it’s «og:product», which indicates the product.
og:image – image displayed when publishing.
og:description – publication description.
og:url – link of the page, which can be followed after you’ve read a publication on social networking sites.
Here’s an example of og tags for the page above:
As you can see everything’s quite easy to implement.
To get some more detailed information on this protocol you can go here to read more.
To test your page and to see what it’ll look like, you can use Facebook Debugger.
Lastly, as you can see, with help of microdata and Open Graph you can make your site more search engine & social network friendly, and consequently, improve on user-friendliness. With changes like these, it’ll be even easier for users to find necessary information and share it with their friends. That’s why we recommend taking the time to implement a few changes with tools like these, you definitely won’t regret it.
Subscribeto our newsletter
Ecommerce Online Business Conferences to Attend in 2020-202101 Apr 2021A list of the biggest and best ecommerce conferences that will take place in 2020–2021 online that you should consider attending for inspiration.
Top Ecommerce Trends for 2021 & Useful Insights on Implementation31 Mar 2021More businesses are joining the market, which makes staying ahead of competitors a more challenging task than ever before.
Conversion-Focused Web Design 101: All You Need to Know25 Mar 2021Current-day web designs go far beyond being just good-looking. With the right and meticulous approach, they help achieve long-term business goals, including increasing brand awareness and boosting conversions.