Markup with JSON on Different Types of Pages

I want to use JSON to markup my pages with markup, but I have all kinds of pages (e.g. About, Contact, Tutorial and Category pages).

About page =

Contact page =

Category pages, sitemap.html, etc =

Tutorial pages =

How can I create that?

I already created a site-schema.html file in the /layouts/partials/ folder - which looks like this:

    {{ if .IsHome -}}
<script type="application/ld+json">
{{- else if .IsPage -}}
<script type="application/ld+json">{
"headline":"{{ .Title }}",
"description":"{{ .Description }}",
"image":"{{ range $i, $e := .Params.images }}{{ if $i }}, {{ end }}{{ $e }}{{ end }}",
{{- end }}

and in the header.html file I added the following code:

{{ partial "site-schema.html" . }}

But that will give the home page its correct schema markup, but will give all other pages the markup.

And on some pages I also have embedded YouTube videos:

<script type="application/ld+json">{

So how can I do this?

One way would be to add the schema partial based on the kind of page, and having different partials for each kind.

For example: site-schema.html, page-schema.html, section-schema.html etc.

Take a look here and see if it helps: Variable in path string variable, printf?

Can you please give me 1 example for, lets say the about page? What do I place on the About page?and what do I place in the header.html file?

You could call the respective template like this:

{{ partial (printf "schema-%s.html" .Kind) . }}

And then you would have a partial for each kind: page, home, section, taxonomy, or taxonomyTerm.

For a page, the partial would be schema-page.html and so on.

Does this help?

Update: this can break if you don’t have a partial for each taxonomy term … not sure how to solve that :frowning:

In PHP I placed the following code in the header.php file:

<?php if (isset($schema)) {?>
<?php echo $schema ?>
<?php }?> 

And then placed the following code on every page:

$schema="<script type=\"application/ld+json\">{
\"headline\":\"This is the title of the page\",
\"description\":\"This is the description of the page\",

Is there a way to do the same in Hugo?

Yes, you check for the existence of .Params.schema and then use this in your template:

{{ .Params.schema | safeHtml }}

I’m sorry, but I don’t understand it. So what code do I place on the content page and where? and what do I place in the header.html file? And do I need to put something in the config.toml file?

UPDATE: Ok so I think it’s working now. Correct me if I’m wrong, but I placed the following lines in the content page between —:

schema: "<script type=\"application/ld+json\">{
\"headline\":\"About DIYTechGuides\"

And then I placed the following lines in the header.html file:

{{ if isset .Params "schema" }}{{ .Params.schema | safeHTML }}{{ end }}

It looks like it’s working.

Is this the way you would do it?