GoKawiilJSON-LD, also known as JSON Linked Data, is a format for adding structured data to webpages. It can aid web crawlers in understanding the semantic structure of your site, qualifying you for richer link previews, and even potentially improving your search ranking.
It’s been 4 months since my first post where I described building this site, and Wakatime estimates I’ve spent ~100 hours coding now, not including time spent researching and testing. Since then, this site has been receiving plenty of polish, including the addition of JSON-LD on each page.
JSON-LD Fundamentals
To add JSON-LD to a page, add the following somewhere in your <head> section:
<script type= "application/ld+json" > { "@context" : "https://schema.org" , "@graph" : [ { "@type" : "WebSite" , "@id" : "https://hawksley.dev/#website" , "url" : "https://hawksley.dev/" , "name" : "Ethan Hawksley" }, // Insert more nodes here. ] } </script>
Let’s break down what each part does.
<script type= "application/ld+json" >
This declares a new script with MIME type application/ld+json . Since it has this type specified, the browser’s JS engine won’t run it. Specialised crawlers like Googlebot look out for these elements and parse the contents.
{ "@context" : "https://schema.org" }
Here, a JSON object is initialised and the property @context is set to https://schema.org . In JSON-LD, the structure of data is determined by assigning the appropriate context. Web crawlers are standardised on Schema.org,, opens in new tab which defines all the valid key-value pairs for the JSON.
... continue reading