For tonight’s Hugo project, I decided to add @BlogPosting schema markup to my Hugo-generated blog. Schema markup was something I avoided for a while because I assumed it would be too complicated to add to my blog. After some hacking around tonight, I was able to successfully add the markup.

<script type="application/ld+json">
{
	"@context":"https://schema.org",
	"@type": "BlogPosting",
	"image": {{ partial "seo/og_image.html" . }},
	"url": {{ .Permalink }},
	"dateCreated": "{{ .PublishDate.Format "2006-01-02" }}",
	"datePublished": "{{ .PublishDate.Format "2006-01-02" }}",
	"dateModified": "{{ .Page.Lastmod.Format "2006-01-02" }}",
	"inLanguage": "en-US",
	"isFamilyFriendly": "true",
	"copyrightYear": "{{ .PublishDate.Format "2006" }}",
	"copyrightHolder": "Brian Li",
	"accountablePerson": {
		"@type": "Person",
		"name": "Brian Li",
		"url": "https://brianli.com"
	},
	"author": {
		"@type": "Person",
		"name": "Brian Li",
		"url": "https://brianli.com"
	},
	"creator": {
		"@type": "Person",
		"name": "Brian Li",
		"url": "https://brianli.com"
	},
	"publisher": {
		"@type": "Organization",
		"name": "Brian Li LLC",
		"url": "https://brianli.com",
		"logo": {
			"@type": "ImageObject",
			"url": "https://brianli.com/assets/BRIAN-LI-FEATURED-IMAGE.png"
		}
	},
	"mainEntityOfPage": "True",
	"articleBody": {{ .Content | safeJS | htmlUnescape | plainify }}
}
</script>

A few interesting things I noticed with Hugo’s rendering engine.

  • For certain pairs like "url": {{ .Permalink }}, adding quotes around {{ .Permalink }} messes up the JSON rendering. If you’re trying to add schema markup on your Hugo site, you may need to omit the quotes if you see escaped characters. I had to use this syntax for "image" as well.
  • "articleBody" required quite the workaround. {{ .Content | safeJS | htmlUnescape | plainify }} ended up working for me – notice the lack of quotations once again.