refactor: add blog microdata in markup instead of use JSON-LD

[lex111]

Motivation

Instead of using JSON-LD, we can annotate current markup to support the BlogPosting schema.

Refs

• https://orbitingweb.com/blog/schema-org-microdata-guide/

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Try to test markup blog page on https://search.google.com/test/rich-results

The results below are relevant to first post on blog/2021/05/12/announcing-docusaurus-two-beta

Before	After

[netlify]

✔️ [V2]

🔨 Explore the source changes: 347f6fe

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/611672775b8a730007ea692f

😎 Browse the preview: https://deploy-preview-5355--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	89
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5355--docusaurus-2.netlify.app/

[github-actions]

Size Change: +1.17 kB (0%)

Total Size: 795 kB

Filename	Size	Change
website/build/blog/2017/12/14/introducing-docusaurus/index.html	64.1 kB	-63 B (0%)
website/build/blog/index.html	34.3 kB	+1.24 kB (+4%)

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/globalData.json	36.2 kB	0 B
website/build/assets/css/styles.********.css	93.1 kB	0 B
website/build/assets/js/main.********.js	404 kB	0 B
website/build/docs/index.html	41.9 kB	-3 B (0%)
website/build/docs/installation/index.html	49.6 kB	-3 B (0%)
website/build/index.html	28.7 kB	0 B
website/build/tests/docs/index.html	22.5 kB	0 B
website/build/tests/docs/standalone/index.html	20.5 kB	0 B

_{compressed-size-action}

[netlify]

✔️ [V2]

🔨 Explore the source changes: a6a9d53

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6116732589dbd4000732a021

😎 Browse the preview: https://deploy-preview-5355--docusaurus-2.netlify.app

[slorber]

👍 looks nice!

Before merging, any thought @johnnyreilly ?

Note one diff is not the blog index has 3 article items. I don't feel like it should be a problem (and may be a good thing?) but it's worth double-checking how to handle a blog post paginated list?

[lex111]

As I understand correctly, it's no big deal (try to check list page out in the checker). For example, Firebase blog in list of posts uses the same microdata as detail blog post.

[johnnyreilly]

Interesting! I didn't realise this was an option. I'll admit that I have an instinctive preference for JSON-LD as it's more obvious in terms of understanding what the data is. That said, this approach seems to work, as the screenshots attest.

I'm curious if there's any advantages to using microdata instead of JSON-LD? Or are they effectively interchangeable?

#5322

[lex111]

I'm curious if there's any advantages to using microdata instead of JSON-LD? Or are they effectively interchangeable?

Well, I can not guarantee it, but according to the checker, final result on SEO should not change negatively.

[slorber]

👍

[slorber]

I'll admit that I have an instinctive preference for JSON-LD as it's more obvious in terms of understanding what the data is.

IMHO both have their pros and cons but I tend to prefer co-locating things, it improves composability and make sure all pages using a cmp with structured data will be well-understood by crawlers without additional work

[johnnyreilly]

I was just reading around on structured data and found this post which (amongst other things) talks about microdata vs json-ld:

https://yoast.com/structured-data-schema-ultimate-guide/#son

JSON-LD is the preferred method of adding structured data to your site.

It comes down pretty much in favour of JSON-LD instead of microdata. I'm not too sure if it's significant - but I thought I'd mention it as at least interesting.

[lex111]

Thanks for pointing this out, but just because JSON-LD is the preferred method, that doesn't make microdata less efficient, right? So let's leave the option with using microdata until we see confirmation that this format is worse.

[johnnyreilly]

that doesn't make microdata less efficient, right?

I wouldn't claim expertise in this area. But they do come down firmly in favour of JSON-LD and against microdata:

The classic way of writing structured data for inclusion on your pages involves directly embedding it into your HTML. This made a really inefficient and error-prone process and is much of the reason why the uptake of Schema.org hasn’t been particularly fast. Writing and maintaining it via RFDa or Microdata is a pain. Believe us, try to do as much as you can in JSON-LD.

Happy to leave as is for now. But we should probably keep this under review if the industry is moving in the direction of JSON-LD

[slorber]

I'd rather keep microdata for now, as I find it more convenient for composition. We'll see if any limit is encountered and eventually migrate to json-ld

[johnnyreilly]

Cool - I found this article from 2019: https://www.searchenginejournal.com/google-structured-data-preference/297479/

In a Webmaster Hangout, Google’s John Mueller was asked what kind of structured date Google prefers. John Mueller answered that Google prefers JSON-LD structured data...

... Google’s stated preference is for JSON-LD. It may be in your best interest to consider switching over to JSON-LD structured data if you currently use microdata. But at this time it’s not actually necessary because Google can still read it and interpret it. But sometimes, it’s best to future proof content. It’s up to you at this time because Google isn’t actually requiring one format over another.

Assuming what it says still stands, JSON-LD is preferred by Google, but not required which is good. And their tools seem to confirm that.