Enabling Json-LD: The Semantic Web (In Page Schema) for Blog Posts

The semantic web (web3.0) is a thing, I spent a little time making sure pages are machine readable and have proper references.

Setting up json-ld is simple for pages in Hugo.

Create partial which will be the schema to include inside the page (jsonld.html)

Make sure the schema is only generated on pages you desire. Here I use {{ if .isPage }}

Apply variable calls to fulfill the json schema.

Add things like author, the page type (@type: BlogPosting)
if you use a image call in front matter utilize “with” to make sure the same image is called that is relative to the content
Not all of my pages have .Params.author associated to the. I apply a default
The url for the @type “Person” entity is to associate a url to the author. I use absURL to make sure the path on my local page is referenced correctly for my authors information

Load the partial jsonld.html into your head pages. (head-metadata.html)

<!-- add jsonLd -->
{{- partial "jsonld.html" . -}}

References: google structured data

awesome documentation from google
fatjoe article on schema markup
good write up to give you ideas on how and when to format pages
testing the implementation
Schema validation

Open questions:
Does not having a image on some pages hinder “Semantic Web” references?
Does having in page schema help with page performance?

Filename: ~/layouts/partials/jsonld.html

---
{{ if .IsPage }}
<script type="application/ld+json">
                {
                "@context": "https://schema.org",
                "@type": "BlogPosting",
                "headline": "{{ .Params.title }}",
                "description": "{{ .Description }}",
                "datePublished": "{{ .Params.date }}",
                "author": {
                "@type": "Person",
                "name": "{{ .Params.author | default "Author Name"}}",
                "url": "{{ "/contact/#You" | absURL  }}"
                },
                {{ with .Params.image }}
                "image": {
                "@type": "ImageObject",
                "url": "{{ . | absURL }}"
                },
                {{ end }}
                "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ .Permalink }}"
                }
                }
</script>
{{ end }}
---

If you would like email or rss feed updates. Visit the Subscribe page