Got it!!
This post helped me figure it out:
Thank you!!
My purpose is to generate an image sitemap for my blog. However, hugo have no option for second sitemap output (or I haven’t found it yet? please let me know if it’s possible), I have no choice but add the image into the url field of the primary sitemap.
I’m coming from wordpress environment and totally spoiled by yoast plugin for this, and it’s always separating posts sitemap and image sitemap automatically.
I never know it’s actually possible to mix them as one and each URL actually can hold up to 1000 images. New knowledge for me today
Anyway, if anyone ever need this solution, here is what you need to do:
- create a sitemap.xml template in your theme’s layout folder
- insert the code like the following:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xsi:schemaLocation=" http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> {{ range (where .Data.Pages "Type" "post") }}{{ if not .Params.robotsdisallow }} <url> <loc>{{ .Permalink }}</loc> <lastmod>{{ safeHTML ( .Date.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ with .Sitemap.ChangeFreq }} <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }} <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ range .Params.gallery }} <image:image> <image:caption>{{ .imgcaption }}</image:caption> <image:loc>{{ .imglink | absLangURL }}</image:loc> <image:title>{{ .imgtitle }}</image:title> </image:image>{{ end }} </url>{{ end }}{{ end }} </urlset>
(Note: To make the XML output extremely clean and beautiful, I purposefully deleted some spaces and joining some lines as one.)
(Note 2: This sitemap template will only list important “post” type pages, and a post can be excluded with “robotsdisallow” params in post’s front matter)
- input images into page’s front matter:
--- gallery: item1: imgtitle: "Coolest guy" imgcaption: "Coolest guy" imglink: "/images/1.jpg" item2: imgtitle: "Prettiest girl" imgcaption: "Prettiest girl" imglink: "/images/2.jpg" item3: imgtitle: "Coolest HUGO SSG" imgcaption: "Coolest HUGO SSG" imglink: "/images/3.jpg" ---
- hugo your site.
- done!
The clean XML output:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xsi:schemaLocation=" http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> <url> <loc>http://localhost:1313/wowwee-sexy-xml/</loc> <lastmod>2019-01-03T15:40:15+07:00</lastmod> <changefreq>weekly</changefreq> <priority>0.8</priority> <image:image> <image:caption>Coolest guy</image:caption> <image:loc>http://localhost:1313/images/1.jpg</image:loc> <image:title>Coolest guy</image:title> </image:image> <image:image> <image:caption>Prettiest girl</image:caption> <image:loc>http://localhost:1313/images/2.jpg</image:loc> <image:title>Prettiest girl</image:title> </image:image> <image:image> <image:caption>Coolest HUGO SSG</image:caption> <image:loc>http://localhost:1313/images/3.jpg</image:loc> <image:title>Coolest HUGO SSG</image:title> </image:image> </url> <url> <loc>http://localhost:1313/list/first/</loc> <lastmod>2019-01-01T20:44:38+07:00</lastmod> <changefreq>weekly</changefreq> <priority>0.8</priority> </url> </urlset>
I can’t believe it I actually spent two full days to come up with this solution
But really happy as I’ve found it
Big thanks to everyone in this great forum!