SEO for Web Developers — To Use JSON-LD or Microdata?

— Structured Data

Image Source: Wordlift

What is Structured Data in SEO?

While Structured data simply refers to any data which is organized or “given structure”, it is also an on-page markup that enables search engines to better understand the information available on a given web page, and then use this information to improve search results listing. It can be implemented on a website using Microdata, JSON-LD or RDFa schema types. Structured data is both Technical and On-page SEO but discussed often under Technical SEO.

Structured data is an onpage SEO because it is implemented within a website unlike off-page (off-site) SEO that deals with optimizations taking place from sources external to the target website eg link building, social media & influencer marketing, guest blogging, etc. On-page SEO determines how a page is displayed on web apps and on Search Engine Result Pages (SERPs) eg link previews, sitelink search boxes, rich card snippets, knowledge graph panels and many other enhanced snippets.

Schema is a way to label or organize your content so that search engines have a better understanding of what certain elements on your web pages are. This code provides structure to your data, which is why schema is often referred to as “structured data.” — Moz Pro.

Search engine juggernauts such as Google, Bing, and other online search companies came together to standardize and develop schema markup in the project maintained at schema.org, they however have contrasting preferences. Google have preference for JSON-LD while Bing’s preferred markup type is the Microdata format (Bing now support JSON-LD). Both technologies are quite popular and help in enhancing webpages for search engine data mining. We shall compare the pros and cons of each based on usability, portability, maintainability, etc. RDFa and Microdata are semantically similar thus the discussion about Microdata in this article also applies to RDFa (which is less popular).

A related but standardized online repository of structured data for notable entities is the Wikimedia’s Wikidata.org. Wikidata feeds search engines with well-defined structured data about important topics.

What is Microdata?

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users — Wikipedia.

Microdata markup is grudgingly inline and clings tightly to HTML tags as additional attributes in the HTML markup code. See an example from wikipedia below:

A page marked up with Microdata

Pros of Microdata✨

1. Supported by all major search engines.
2. The semantic annotations appear very close to the human-readable information.
3. More trustable as inline semantic markup may not be providing misleading information since the values are often directly associated with actual texts on the web page.
4. Easier to mark up pages by directly plugging in variables into the relevant sections after markup structure is set during development.

Cons of Microdata🤦

1. Hard to maintain: Need lot of developer work and designer changes. It is hard to troubleshoot without touching the page HTML code and inline semantic markup can break very easily.
2. Not Tidy: Additional attributes such as itemscope, itemtype, itemprop etc are known to clog up entire page as they are sandwiched within every HTML tag. This makes page structure look bloated and untidy.
3. Not as Feasible in CMS Sites: To add microdata to an existing website the page HTML markup may have to be rewritten every time. CMSes (eg Wix, Wordpress) are ready-made and will present much hassle to mark up 😒.
4. Verbose and Repetitive: The additional attribute mentioned earlier does accompany every semantic declarations and contributes unnecessary repetitive texts to page structure and content.

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is a method of implementing structured data markup on a website. It is supported by Google, Bing, Yandex, and many smaller search engines. JSON-LD utilizes JSON notation. The Microdata markup page content above can be rewritten with JSON-LD as:

A page marked up with JSON-LD — the HTML code is less bloated and had schema code separate from HTML code.

Pros of JSON-LD✨

1. The syntax is relatively simpler, easy to write and troubleshoot.
2. The block of JSON-LD markup (semantic layer) is decoupled from the page’s HTML markup (representation layer). This separation of concerns give total flexibility and improves site maintainability.
3. It is CMS friendly (eg Wix, Wordpress). A JSON-LD code block can be used to mark up existing web pages more easily. It entails to slotting the code into head or body section. With Wordpress, the code can be added with plugins while on Wix, it can be pasted into the New Tool field in the settings area of a Wix account.
4. Like Microdata and RDFa, JSON-LD can be placed in the body of the page, but can also be used in the head.

Cons of JSON-LD🤦

1. It is more difficult for search engines to verify that the JSON-LD structured data is consistent with the actual text information on the webpage and that the JSON-LD data does not contain misleading information
2. The block of JSON-LD does not appear alongside the human-readable information, some browsers may not easily display contextual hyperlinks in close proximity to the annotated content — W3.org.
3. Not earlier supported by Bing, this is no more an issue.

Structured Data on A Dynamic Website

Microdata On A Dynamic Website

An example snippet of what a Microdata markup could look like on dynamic webpage. It does the job but still retains the bloated markup look, the HTML markup looks busy.

A dynamic page marked up with Microdata — variables were plugged into relevant fields.

JSON-LD On A Dynamic Website

Gone are the days when Javascript’s DOM-rendered contents don’t work quite well with web crawlers, with the advance in technology it is now a no issue. By changing the previous example a little bit we can have data coming from a database and parsed with javascript as seen in the jsfiddle example below:

A dynamic page marked up with JSON-LD

Viewing all the pages we mark up in this post on Google Structured Data Testing Tool, the result will be:

Rendered result of all markup types in Google Structured Data Testing Tool .

With a dynamic website the supplied data will vary based on the page being view. The API feeding the schema code is expected to send the appropriate variables used in generating expected markup for each individual page.

There is a reason why separation of concerns is the norm in everything that has to do with a programmer’s activities. For a web developer, it starts with externalizing page assets such as stylesheets and javascript code. Even in any code writing process, you are expected to decouple your code and refactor into reusable units or methods as much as possible. The same is desirable when handling SEO schema markup to ensure code reusability and improvement of site maintainability. This separation of concern is only possible with JSON-LD.

Conclusion

Both Microdata and JSON-LD gets the job done and can be tested with various online testing tools and still yield exactly same result. However, JSON-LD shines. With it a website SEO maintenance is painless and ensures no interference with page HTML markup, this is a big win 💪. Chances are you are to optimize an old website or any of the third party CMS after it was originally published. Using Microdata in this scenario is next to impossible unless you restructure the HTML code base.

Either of the two can be your preferred choice depending on the scenario, they both get the job done.

Does these stuffs really work?

See my next post on how I have recorded 100% knowledge panel generation for indie music artistes using advanced combination of publicly available data to construct an artiste’s knowledge graph. The result makes it easy for Google bots to easily generate a panel for all of them.