I wish to reference some live websites, portfolio websites if possible that use Schema.org vocabulary along with the Microdata format.
You can use a generator – there’s a list of them here https://uproer.com/articles/free-schema-markup-generators/
Google recommends using JSON-LD, which you put in a script tag, rather than anything else (like microdata), and the generators listed just create that for you.
Re live websites with markup, I think you’ll be lucky to find many. Nobody really seems to care about it except SEO companies/consultants, which is a bit of a red flag.
The portfolio has lot many listing of services, articles and site links, to be true the pages are loaded with array of contents.
As per the requirement, says my instinct that if I put the whole bunch of markup using JSON-LD right in the
<head> tag, it would hinder the performance(first contentful paint, time to interaction etc) as the page load starts from top to bottom, where in the top there is lot of markup and is the reason why I’m using the Microdata format.
Therefore the Microdata seems worth as per requirement. I’m new to web development and currently an Intern and every further responses will be commended.
It’s not going to make much difference, but you can put it at the end of the page then, before the closing body tag.
You’re unlikely to find many examples of actual markup in the wild because people simply don’t really use microdata – there was a flurry of interest about 10 years ago, but it’s a pain to write and the benefits never made up for that. It’s a nice idea but nobody really cared so nobody does it – I’d strongly advise just using a tool to generate a JSON schema, which should not take much time at all and is much easier to maintain (just regenerate it if something changes). I just want to stress that only Google search rankings care about this stuff even a little bit (it’s not an important thing), and Google’s advice is use JSON-LD, not microdata