I've been a passionate software developer for almost 30 years and currently a tech-savvy IT manager. I tinker with things like this blog in my spare time, because creating things never lets you go. Here is more about me ...
Show pages meta data (JSON-LD) in Bottom Sheet
Visualize the generated meta code on your page in a sliding panel for review and information purposes
A few months ago I introduced new meta data (JSON-LD) for the pages of this blog and also wrote about my implementation. Works also everything quite well … only the verification of the generated data was a bit cumbersome:
- Open DevTools for a page in Chrome.
- Search in the HEAD of the source code for the included script (“application/ld+json”)
- Copy out JSON-LD code
- Format JSON into VS code … and check
Nothing for now and simply impossible on the smartphone, even if there would be a reasonable Chrome extension for displaying JSON-LD data, but it does not exist (yet). Another problem was that I use automatically generated Socal Media images for my articles, which are included in the JSON-LD, but do not appear anywhere in the page and thus were beyond my control. I simply wanted to display all the generated stuff.
Since I’ve been a fan of the so-called bottom sheets since the first version of Google’s Material Design, I imagined a script that grabs the code embedded in the page and pushes a panel with all the data visualized there into the page from the bottom … and the whole act was easier than I thought.