Adding Structured data markup to Hugo
If Hugo theme doesn't support Structured Data...
Google is showing in search results some enhancements like Movie details, Job postings, Event and Course information, which it takes from website’s Structured Data. Here is - How to add Structured Data to the site using Hugo generator.
Here below is an example of Recipe Structured data in Google search results.
Below is the steps to add something like this to your page. Need to
- Add page front matter
- Add site partical layout code
- Generate, check and deploy Hugo website
- Test Structured Data with google dev tools
The Recipe Structured Data is described in https://developers.google.com/search/docs/appearance/structured-data/recipe .
As an example I’m showing how to add the FAQ Structured data to the webpage.
Add page front matter
Open your page markdown code and add this code with FAQ Structured Data if you are using toml in front matter
[faq]
title = "This is the title of the FAQ"
[[faq.section]]
question = "What will we do to the drunken sailor?"
answer = "Shave his belly with a rusty razor"
+++
and this code if you are using yaml
faq:
title: 'This is the title of this FAQ'
section: [{question: 'What will we do to the drunken sailor?', answer: 'Shave his belly with a rusty razor.'}]
---
Add site partical layout code
Add somewere to parcial layouts the struct-data.html
:
{{- if eq .Kind "page" }}
{{- if $.Page.Params.faq.title -}}
{{ `<script type="application/ld+json">` | safeHTML }}
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{{ with $.Page.Params.faq }}
{{ $len := len .section }}
{{ range $index, $element := .section }}
{{ $jsonAnswer := .answer | markdownify | jsonify }}
{{ $jsonAnswer := replace $jsonAnswer "\\u003c" "<"}}
{{ $jsonAnswer := replace $jsonAnswer "\\u003e" ">"}}
{
"@type": "Question",
"name": "{{ .question | markdownify }}",
"acceptedAnswer": {
"@type": "Answer",
"text": {{ $jsonAnswer | safeHTML }}
}
}
{{ if not (eq (add $index 1) $len) }},{{ end }}
{{ end }}
{{ end }}
]
}
{{ `</script>` | safeHTML }}
{{- end }}
{{- end }}
and include it into head section
{{- partial "struct-data.html" . -}}
</head>
Generate, check and deploy Hugo website
Run
hugo
then find and open your freshly generated pagefile in the public
.
In the head section of the html page you should see something like
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What will we do to the drunken sailor?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Shave his belly with a rusty razor."
}
}
]
}
</script>
Nice, isn’t it?
Test the website with structured data
Use Google’s Test your structured data page: https://developers.google.com/search/docs/appearance/structured-data
Get to the Schema Validator -> Code snippet
paste our snippet from above, click Run Test
and voi la:
Congrats, it’s working. You can deploy your website to for example AWS S3 and check in Google Search Console if it sees your Structured Data as an enhancement.
Useful links
- Hugo Cheat Sheet
- Markdown Cheatsheet- Images handling in Mainroad Hugo Theme: Mainroad theme image handling
- Deploy Hugo-generated website to AWS S3
- Muled Wine Recipe
- A song about other awesome things you could do to the drunken sailor: https://en.wikipedia.org/wiki/Drunken_Sailor